프론트엔드 CS 정리 6~10

1. useCallback과 useEffect를 비교 설명해주세요. 
   1. useCallback은 함수를 메모이제이션하여 불필요한 함수 재생성을 방지하며, 주로 부모-자식 간 함수 참조를 최적화할 때 사용합니다.
   2. useEffect는 부수효과를 처리하는 훅으로, 데이터 페칭, DOM 조작, 이벤트 리스너 등록/해제 작업에 활용됩니다.
      예를 들어, useCallback으로 부모에서 전달하는 이벤트 핸들러를 최적화하거나, useEffect로 API 호출과 클린업 작업을 구현한 경험이 있습니다.
2. 커스텀 훅이란? 무엇이고 왜 사용하는가? 
   1. React에서 사용자 정의 훅을 의미하며, use로 시작하는 함수로 정의하고 상태나 로직을 캡슐화하여 재사용 가능한 코드를 작성할 수 있게 해줍니다. 따라서 로직 재사용, 코드 가독성 향상, 유지보수성 증가를 위해 사용합니다.
3. Nextjs의 렌더링 전략 3가지의 정의와 동작방식 그리고 특징에 대해서 설명해주세요. 
   1. Next.js는 CSR, SSR, SSG 세 가지 렌더링 방식을 제공합니다. CSR은 클라이언트에서 모든 렌더링을 처리하며, 복잡한 인터랙티브 UI에 적합하지만 초기 로딩 속도가 느립니다. SSR은 서버에서 HTML을 렌더링하여 SEO와 초기 로딩 속도를 개선하며, 실시간 데이터를 제공하는 서비스에 유리합니다. SSG는 빌드 시 정적 HTML을 생성해 성능이 뛰어나고, 자주 변하지 않는 콘텐츠에 적합합니다.
4. 서버 사이드 상태와 클라이언트 사이드 상태로 나눠서 관리하는 경우, 장점은 무엇이 있을까? 
   1. 서버 사이드 상태는 데이터베이스나 API로부터 가져오는 데이터를 서버에서 관리하며, 최신성과 일관성을 보장합니다. 반면 클라이언트 사이드 상태는 UI 상태를 관리하여 서버 요청 없이도 빠른 사용자 경험을 제공합니다.
   2. 서버 사이드 상태와 클라이언트 사이드 상태 분리의 장점
      1. 항목               서버 사이드 상태                                            클라이언트 사이드 상태

         데이터 최신성	항상 최신 데이터를 보장.	클라이언트에 캐싱된 경우 오래된 데이터가 있을 수 있음.
         성능	초기 로딩 시 서버 요청 필요.	서버 요청 없이 빠르게 상태 갱신 가능.
         사용 사례	실시간 데이터가 필요한 기능 (예: 사용자 프로필, 댓글).	즉각적인 사용자 피드백이 필요한 UI 상태 (예: 모달 열림/닫힘).
         데이터 일관성	여러 클라이언트에서 상태가 동일하게 유지.	클라이언트별로 상태가 달라질 수 있음.
         복잡성	서버 쪽 로직이 복잡할 수 있음.	상태가 많아질 경우 클라이언트 코드 복잡성 증가.

5. 디바운싱과 쓰로틀링을 설명해주세요. 
   1. 디바운싱은 이벤트가 끝난 후 일정 시간이 지나야 실행되며, 주로 검색 입력이나 버튼 중복 클릭 방지에 사용됩니다. 쓰로틀링은 일정 간격마다 이벤트를 실행하며, 스크롤 이벤트나 윈도우 리사이즈 이벤트에 적합합니다.