SSR 방식과 SSG 방식 사용법SSR : Server Side RenderingSSG : Static Site Generation 사용방법 컴포넌트 페이지에 getServerSideProps 함수를 사용사여 데이터를 전달하면 SSR 방식으로 작동 getStaticProps 함수를 사용하여 데이터를 전달하면 SSG 방식으로 작동 getStaticProps + fallback 옵션으로 사용시에는 아래와 같이 작동한다. 🔁 fallback 옵션 정리 (ISR과 함께 쓰이는 핵심 옵션)✅ 사용 맥락getStaticPaths를 사용하는 **동적 라우팅(static generation)**에서어떤 경로를 빌..

1. useMeno 호출 결과를 메모이제이션(저장) 하는 Hook 컴포넌트가 리렌더링될 때, 특정 함수의 계산결과가 이전과 동일하다면 굳이 다시 계산하지 않고 저장된 결과를 재사용한다. const memoizedValue = useMemo(() => { // 복잡한 계산 식 },[의존성배열] ); 첫 번째 인자: 값을 계산하고 반환하는 함수.두 번째 인자 (의존성 배열): 이 배열 안의 값이 변경될 때만 첫 번째 인자의 함수가 다시 실행된다. 배열이 비어있으면([]) 컴포넌트가 처음 렌더링될 때만 함수가 실행됩니다.2. useCallback 함수 자체를 메모이제이션 하는 hook 함수형 컴포넌트는 리렌더링될 때 마다 내부의 함수도 새로 생성된다. const me..

1. 번들링이란? 번들링은 여러개의 파일을 하나로 묶는 작업 react 프로젝트를 구성할 때 html 파일은 index.html 하나만 사용하는 경우가 많지만, 자바스크립트와 css 파일은 컴포넌트의 숫자에 따라서 여러개 가 생성이 됨 JSX 문법을 사용하는 react 에서는 모든 컴포넌트가 자바스크립트 파일이기 때문에 파일의 수가 많아 진다. 이 파일들을 하나로 합쳐주는 것이 바로 번들링이다. ✅ 번들링의 장점HTTP 요청 수 감소 → 로딩 속도 향상많은 파일을 각각 요청하면 속도가 느려질 수 있다.번들링을 통해 하나의 파일로 만들면 요청 수가 줄어들어 성능이 향상.코드 압축 → 파일 크기 감소공백, 주석 등을 제거하여 코드가 압축되고, 최종 번들 파일의 크기가 작아진다.사용하지 않는 코드 제거 (..

실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 자동으로 생성되는 전역공간의 실행컨텍스트와 evail 을 제외하면 실행컨택스트를 구성하는 방법은 함수를 실행 하는 것뿐이다. 실행 컨텍스트의 역활 코드 실행 시 스코프, 식별자, 코드실행 순서 등의 관리 한다. 소스코드를 실행 하는 데 필요한 환경을 제공하고 코드의 실행 결과를 관리한다. 식별자를 등록하고 관리하는 스코프와 실행 순서 관리를 구현한 내부 메커니즘 이다. 식별자와 스코프는 Laxical Environment (렉시컬 환경)으로 관리 한다. 실행순서는 실행 컨텍스트 스택으로 관리 한다 var x = 1; const y = 2; function outer(a) { // ..

1. Redux ToolKit Redux 를 좀 더 쉽게 사용할 수 있도록 만들어진 라이브러리로 공식문서에서도 RTK 를 사용할 것을 권장 2. 설치npm install @reduxjs/toolkit react-redux 3. 왜 Redux Toolkit 인가? 기존 Redux 에서는 Action Type 작성 Action 생성자 작성 Reducer 작성 을 했지만 RTK 에서는 CreateSlice 함수 하나로 가능 그리고 Combine Reducers 후 createStore 작성 하는 것도 configureStore 함수 하나로 가능 하다. 4. 사용방법 1) createSlice ..

1. Redux 란 Redux 는 react 에서 많이 사용하는 전역 상태관리 라이브러리 상태를 한 곳에서 통합 관리할 수 있어서 예측가능한 방식으로 상태 관리 가능 Redux 에서 공식적으로 추천하는 방법은 Redux Toolkit 을 사용하는 것이지만 Toolkit 사용 시에 Flux 패턴을 확인하기가 힘들기 때문에 Redux를 활용하였다. "Redux Toolkit은 Redux 로직을 작성하기 위한 표준 방식이 되도록 만들어졌고, 사용하기를 강력히 추천드립니다." https://ko.redux.js.org/redux-toolkit/overview/ Redux Toolkit: 개요 | ReduxRedux Toolkit은 Redux 로직 작성을 위해 권장하는 방법입니다ko.redux...