리액트에서 컴포넌트를 스타일링 할 땐느 다양한 방식이 있다. 여러 방식 중에 딱히 정해진 방식은 없다. 회사마다 요구하는 스펙이 다르고, 개발자마다 각자 취향에 따라 선택하기 때문이다. 방식은 크게 4가지가 있다. 1. 일반 CSS : 컴포넌트를 스타일링 하는 가장 기본적인 방식 2. SASS : 자주 사용되는 CSS 전처리기(pre-processor) 중 하나로 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성할 수 있음 3. CSS Module : 스타일을 작성할 때 CSS 클래스가 다른 CSS클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해주는 옵션이다. 4. styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 ..

1. CORS란 교차 출처 리소스 공유(Cross-origin Resource Sharing, CORS)는 추가 HTTP헤더를 사용하여, 한 출처에서 실행중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 여기서 origin(출처)란 Scheme(protocol), Host(domain), Port로 구성된다. 예를 들어 https://www.google.com/maps 라는 주소가 있다면 protocol : https:// host : www.google.com port : :443 이다. 위와 같이 출처는 서버의 위치를 찾아가기 위해 가장 기본적인 구성요소라고 보면 된다. 여기서 같은 출처와 다른 출처의 구분 같은 출처라 하면 두 URL의..

Hooks은 함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있다. 1. useState useState는 가장 기본적인 Hook이며, 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다. 함수 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용하면 된다. import { useState } from 'react'; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value} setValue(value + 1)}>+1 setValue(value - 1)}>..

모든 리액트 컴포넌트에는 라이프사이클(수명주기)가 존재하다. 컴포넌트의 수명은 페이지에 렌더링 되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다. 컴포넌트를 처음 렌더링 할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할수도 있고, 불필요한 업데이트를 방지해야 할수도 있다. 이때는 컴포넌트의 라이프사이클 메서드를 사용한다. 참고로 라이플사이클 메서드는 클래스형 컴포넌트에만 사용 할 수 있다. 함수 컴포넌트에서는 사용할 수 없어서, 그 대신에 Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있다. 1. 라이프사이클 메서드의 이해 라이플사이크 메서드의 종류는 총 9가지 이다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드 D..

1. 자바스크립트 배열의 map() 함수 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링 할 수 있다. 2. 문법 arr.map(callback, [thisArg]) 함수의 파라미터 callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세가지이다. currentValue : 현재 처리하고 있는 요소 inext : 현재 처리하고 있는 요소의 index 값 array : 현재 처리하고 있는 원본 배열 thisArg(선택 항목) : callback 함수 내부에서 사용할 this 레퍼런스 3. 예제 let numbers = [1, 2, 3, 4]; let processd = numbers.map(function(num){ return num * num;..

API(Application Programming Interface) 응용 프로그램 프로그래밍 인터페이스 응용프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다. 아래와 같이 불러오게 되면 객체 형식으로 편지지 봉투를 불러오게 된다. let response = fetch("https://jsonplaceholder.typicode.com/posts").then((res) => console.log(res) ); // fetch에서 불러와서 API를 res에 담아서 res를 반환함 // 처음 결과를 추출하면 편지지가 있다면 편지봉투를 받은것이다. // f..