CSR(Client-side Rendering)CSR는 클라이언트(브라우저)에서 페이지를 렌더링하는 방식으로, React와 Vue 등이 이 방식을 사용 CSR의 동작 방식1. 클라이언트가 특정 페이지를 요청2. 서버에서는 빈 HTML 문서를 클라이언트에 전달3. 클라이언트가 HTML 문서에 함께 포함된 정적 리소스(CSS, 이미지 등), 번들 자바스크립트 파일을 다운로드4. 클라이언트에서 번들 자바스크립트 파일을 실행. (자바스크립트에 의해 페이지가 렌더링되며, 이 때 사용자는 렌더링된 페이지를 볼 수 있음,  아직 API에서 데이터를 받아오지 않았기 때문에 로딩(빈 화면) 혹은 임시 데이터 표시)5. 페이지 렌더링이 완료된 후, (useEffect 내의) API 요청 코드가 실행6. API에서 받아온 ..

데이터를 테이블의 형태로 관리하는 데이터베이스 모델로, 각 테이블들은 관계로 연결되어 있다. 현재 가장 보편화된 모델이다.MySQL, Oracle, PostgreSQL….장점데이터 일관성과 무결성 보장DB용량이 noSQL에 비해 적다?표준화된 SQL을 사용하므로 학습이 쉽다데이터 처리 속도가 빠르다복잡한 쿼리에 적합단점대규모 데이터 처리에 한계가 있다.테이블 간의 관계가 복잡해질 수록 성능이 저하될 가능성이 있다.스키마 수정이 어렵다.수평적 확장에 한계가 있다.

정규화(Normalization)란정규화의 기본 목표는 테이블간에 중복된 데이터를 허용하지 않는 것이다. 이로써 무결성을 유지할 수 있으면 DB의 저장 용량 역시 줄일 수 있다.제 1 정규화테이블 컬럼이 원자값(하나의 값)을 갖도록 테이블을 분해하는 것제 2 정규화제 1 정규화를 진행한 테이블에 대해 완전 함수 종속을 만족하도록 테이블을 분해하는 것완전 함수 종속이란, (기본키가 복합키일 경우) 기본키의 부분 집합이 결정자가 되어서는 안 된다는 것을 의미한다.제 3 정규화제 2정규화를 진행한 테이블에 대해 이행적 종속이 없도록 테이블을 분해하는 것이행적 종속이란, A→B가 성립하고 B→C가 성립할 때 A→C가 성립하는 것을 말한다.이런 경우 A와 B, B와 C로 묶어 테이블을 2개로 분리해야 한다.BCN..

함수형 컴포넌트 라이프 사이클 리액트의 컴포넌트는 생명 주기(이하 라이프 사이클)를 가진다. 라이프 사이클이란 컴포넌트가 생성되고 사용되고 소멸되기까지의 일련의 과정을 말하며 이 라이프 사이클 동안 특정 시점에서 자동으로 호출되는 이벤트가 있는데 이를 라이프 사이클 이벤트라고 한다.리액트는 이 라이프 사이클 이벤트를 기반으로 컴포넌트의 동작을 제어하고 작업 수행을 향상시키는 사용자 정의 로직을 구현할 수 있다. 예를 들면 재렌더링 여부를 정할 수 있는 이벤트를 통해 불필요한 렌더링을 방지할 수 있으며 이외에도 원하는 시점에 서버에서 데이터를 가져오거나 DOM이벤트 또는 다른 프론트엔드 라이브러리와 통합할 때 사용할 수 있다.3가지 이벤트 분류Mounting리액트 엘리먼트(컴포넌트 클래스의 인스턴스)를 D..

리액트에서는 컴포넌트가 state변경, 이벤트 발생 등에 의해 렌더링 될때 virtual DOM을 통해 이전의 렌더링 결과와 새로운 렌더링 결과를 비교하고 변경된 부분만 재렌더링한다. 이때 배열도 마찬가지로 각 원소를 하나씩 비교하여 변경된 부분을 감지하게 되는데 이때 배열의 key가 어떤 요소가 변경이 되어 재렌더링이 필요한지를 식별하는데에 필요한 역할을 하게 된다.그런데 배열의 Index를 사용하여 key를 지정하게 되면 문제가 발생한다. 배열의 index는 배열의 수정에 의해 변경될 수 있기 때문에 엘리먼트를 구분하는 고유한 값이 될 수 없기 때문이다. 또한 배열이 변경되면 각각의 엘리먼트들이 재렌더링되므로 불필요한 렌더링을 발생시킬 수 있다.물론 배열이 절대 변경될 가능성이 없다면 사용해도 좋겠으..

모두 리액트에서 ‘메모이제이션’을 담당하는 hook**메모이제이션(memoization)**이란 동일한 계산을 반복해야할 때 계산의 결과를 캐싱하고 이를 재사용하도록 하는 기술불필요한 계산을 줄여줌성능향상, 코드 간결성useMemo메모이제이션된 값을 반환하는 리액트 hookconst memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);첫번째 인자는 값을 연산하고 반환하는 함수, 두번째 인자는 의존성 배열렌더링 시 의존성 배열값의 변경 여부에 따라 실행의존성 배열이 없으면 렌더링할 때마다 매번 실행컴포넌트내에 특정 변수가 변경되었을 때에만 실행되면 되는 코드가 있을 경우 useMemo를 사용하면 불필요한 함수 실행을 줄일 수 있음주의할 점..

리액트 렌더링이란컴포넌트의 props와 state를 기반으로 UI를 구성하고 이를 통하여 어떤 DOM결과물을 브라우저에게 제공할 것인지 계산하는 일련의 과정 리액트에서 렌더링이 일어나는 경우최초 렌더링리렌더링클래스형 컴포넌트의 setState가 실행되는 경우클래스형 컴포넌트의 forceUpdate가 실행되는 경우함수형 컴포넌트의 useState의 setter가 실행되는 경우함수형 컴포넌트의 useReducer의 dispatch가 실행되는 경우컴포넌트의 key props가 변경되는 경우props가 변경되는 경우부모 컴포넌트가 렌더링되는 경우 리액트 렌더링 과정컴포넌트 트리의 최상단 루트로부터 아래로 내려가며 업데이트가 필요한 컴포넌트를 찾는다.업데이트가 필요한 컴포넌트를 만나면 클래스형 컴포넌트는 클래스 ..

리액트 컴포넌트의 정의와 특성- 리액트 애플리케이션을 구성하는 최소 단위를 말한다.- view를 독립적으로 관리하고 재사용할 수 있다.- props를 입력받고 state를 정의하여 DOM을 렌더링한다.- 컴포넌트는 대문자로 시작한다. 리액트 컴포넌트의 종류초기에 클래스형 컴포넌트를 주로 사용하였으나 사용의 불편이 있어 나온 것이 함수형 컴포넌트이며 이 과정에서 hook이 개발됨 1. 클래스형 컴포넌트(Class Component)- 클래스의 형태로 컴포넌트를 정의- 코드내에서 Lifecycle과 state 기능 구현 2. 함수형 컴포넌트(Stateless Functional Component)- 함수의 형태로 컴포넌트를 정의하고 export와 import를 통해 사용- hook을 사용하여 라이프사이클과 ..