프론트엔드 CS 정리 1~5

1. Next.js와 Reactjs의 차이점을 설명해주세요. 
   1. React는 UI 라이브러리로, 컴포넌트 기반의 구조를 통해 UI를 효율적으로 개발할 수 있고 CSR( 클라이언트 사이드 렌더링 )에 초점이 맞춰져 있습니다. 그리고 라우팅 등의 기능은 별도의 라이브러리를 사용해야합니다. 하지만 Next.js는 React기반의 프레임워크로 SSR( 서버사이드 렌더링 ), SSG( 정적 사이트 생성 ), API 라우팅, 404 페이지 등의 기능을 기본 제공하여 SEO( 검색엔진 최적화 ) 최적화와 성능 향상에 유리합니다. 따라서 React의 단점을 보완하여 빠른 개발을 할 수 있도록 도와줍니다.
   2. 주요 차이점    React                                                                     Next.js

      렌더링 방식	CSR	CSR, SSR, SSG 모두 지원
      라우팅	React Router 등 외부 라이브러리 필요	파일 기반 라우팅 제공 (폴더 구조에 따라 URL 생성)
      데이터 페칭	자체 제공하지 않음, SWR 등 라이브러리 사용 필요	getServerSideProps, getStaticProps로 지원
      SEO	클라이언트에서 렌더링 완료 후 메타 태그 반영	SSR과 SSG로 초기 HTML에서 SEO 대응 가능
      성능	CSR 기반으로 초기 로딩 속도가 느릴 수 있음	SSR/SSG로 초기 로딩 속도와 성능 최적화
      빌드 도구	Webpack 설정 등 커스터마이징 필요	Webpack, Babel, ESLint 기본 설정 제공
      API 지원	별도의 서버 필요	내장된 API Routes 기능으로 서버리스 구조 지원

2. 사용해본 전역상태와 Redux를 비교 설명해주세요.
   1. Context API와 Zustand를 사용해봤습니다. Context API는 내장 기능으로 간단한 상태 관리에 좋았지만, 상태 업데이트가 잦거나 복잡해지면 성능 이슈가 있었습니다. 이에 비해 Zustand는 상태를 선택적으로 구독할 수 있어 성능 최적화가 뛰어났습니다.
      Redux RTK는 대규모 프로젝트에 적합한 도구로, Redux DevTools라는 강력한 디버깅 도구와 비동기 상태 관리 기능이 인상적입니다. 
   2. 주요 비교          Context API                            Zustand                                        Redux (RTK)

      학습 난이도	낮음	낮음	중간 (RTK는 기존 Redux보다 쉬움)
      성능	잦은 렌더링 시 성능 저하 가능	상태 구독으로 렌더링 최적화 가능	성능 최적화 (Selector, Immer)
      비동기 지원	없음	내장 함수 지원	createAsyncThunk로 지원
      상태 규모	간단한 상태 관리	중간 규모의 상태 관리	대규모 상태 관리에 적합
      커뮤니티 지원	React 기본 커뮤니티 지원	커뮤니티 작음	커뮤니티 가장 큼
      디버깅 도구	없음	없음	Redux DevTools 제공

3. 리액트 전역상태 라이브러리를 선택하는 기준은? 
   1. React 컴포넌트는 기본적으로 지역 상태를 관리(useState, useReducer 등)합니다. 하지만, 상태가 여러 컴포넌트 간에 공유될 경우, 전역 상태 관리가 필요해집니다.
      전역 상태 라이브러리를 선택할 때는 프로젝트 요구사항, 성능, 팀원 숙련도 등을 기준으로 판단합니다.
   2.  라이브러리        특징 및 장점                                                                 단점 및 주의사항

      React Context API	- React 내장 기능으로 간단한 상태 공유에 적합.	- 상태가 많아지면 Props Drilling 및 성능 문제 발생 가능.
      Redux Toolkit (RTK)	- Redux의 보일러플레이트를 줄이고, 미들웨어 및 디버깅 도구를 제공. - 대규모 애플리케이션에서 복잡한 상태를 관리하기에 적합.	- 학습 곡선이 존재하며, 소규모 프로젝트에서는 과도할 수 있음.
      Zustand	- 상태 구독 기반으로 렌더링 최적화. - 간결한 API로 빠르게 학습 가능.	- 복잡한 상태 관리에서 Redux보다 체계화가 부족.
      Recoil	- Facebook이 개발한 상태 관리 라이브러리로, 비동기 상태 관리와 구독 기능 제공. - React와 긴밀하게 통합 가능.	- 아직 실험적이며 커뮤니티와 생태계가 Redux만큼 크지 않음.
      MobX	- 객체 지향적 상태 관리. - 상태와 관련된 반응형 로직을 정의하기 쉽고, 코드가 간결.	- 대규모 프로젝트에서는 상태 추적과 디버깅이 어려워질 수 있음.

4. 지역상태로만 개발을 하는 경우, 발생할 수 있는 문제는 무엇이 있을까요? 
   1. 데이터를 하위 컴포넌트로 전달하려면 모든 중간 컴포넌트가 props를 통해 데이터를 전달하여 Props Drilling이 발생하게 됩니다. 이로 인해 추적이 어려워지고 상태를 중복으로 관리하거나 불필요한 렌더링이 발생 하는 등 코드 복잡도가 증가하고 유지보수가 어려워집니다.
5. 리액트 컴포넌트의 생명주기에 대해서 아시나요? 
   1. 컴포넌트 라이프 사이클을 간단하게 설명하자면 create-mount-update-unmount로 함축할 수 있습니다. create는 컴포넌트가 말 그대로 생성된 것입니다. mount는 컴포넌트가 생성된 후에 실제 돔에 렌더링 되는 순간을 뜻합니다. 그리고 이 순간이 바로 useEffect 내부의 코드가 실행되는 시기입니다. 컴포넌트가 화면에 렌더링 되었기 때문에 이때 HTML 태그를 가져와 이벤트를 등록하거나, 데이터를 fetching 해오는 등의 작업을 처리하게 됩니다. update는 컴포넌트에 변화가 생겼을 때를 뜻합니다. useEffect의 의존성 배열을 사용하면 특정 값이 변경될 때마다 내부의 작업을 실행할 수 있도록 조절할 수 있습니다. unmount는 컴포넌트가 실제 돔에서 사라지는 순간을 뜻합니다. useEffect에서는 내부의 return 값에 함수의 참조를 넘겨주어 unmount시 특정 작업이 실행되게 하는데, 이를 클린업 함수라고 합니다. 주로 mount시에 등록했던 이벤트를 제거하는 등 메모리 누수를 막기 위한 작업을 실행합니다.