🙏Next.js
next.js는 동적 웹 애플리케이션을 구축하는데 매우 적합한 프레임워크
- 서버 사이드 렌더링(SSR) : 페이지를 요청할 때 서버에서 HTML을 생성하여 클라이언트에 전송하고, 이로 인해 SEO와 초기 로딩 속도가 향상됨.
- 정적 사이트 생성(SSG) : 빌드 시 미리 HTML 파일을 생성하여 빠른 응답성을 제공.
- 동적 라우팅 : URL에 따라 동적으로 페이지를 생성할 수 있어 다양한 콘텐츠를 효율적으로 관리할 수 있음.
🙏SEO
- SEO는 "Search Engine Optimization'의 약자로, 검색 엔진 최적화를 의미
- 검색 엔진 결과 페이지(SERP)에서 더 높은 순위를 차지함으로써 더 많은 유기적인 트래픽을 유도하는 것
- 온페이지* 최적화 : 웹 페이지 내부의 요소(제목, 메타 태그, 헤더 태그, 이미지 알트 태그 등)를 최적화하여 검색 엔진이 페이지 내용을 이해하도록 도움
- SSG 덕분에 미리 생성된 HTML 파일은 검색 엔진이 쉽게 크롤링할 수 있어 SEO에 유리.
* 온페이지 : 웹사이트 자체에서 컨트롤할 수 있는 모든 SEO 요소
🙏SSG
SSG의 동작 원리
- 정적 HTML 파일 생성 : SSG는 각 페이지에 대해 서버에서 HTML을 미리 생성하고, 결과적으로 정적 파일로 저장. 이 HTML 파일은 서버에 호스팅 됨
- 빠른 로딩 속도 : 사용자가 웹 사이트에 접속할 때, 서버는 이미 생성된 정적 HTML 파일을 클라이언트에 바로 전송. 이로 인해 페이지 로딩 속도가 매우 빨라짐
🙏클라이언트 번들*
클라이언트 번들 크기 감소
- 클라이언트 번들 크기 감소 : 메타데이터를 활용해 필요한 정보만 포함시키고, 불필요한 데이터를 줄여(사전 렌더링, 이미지 최적화) 번들 크기를 작게 유지함으로써 페이지 로딩 속도를 개선함
빌드 타임에 메타 데이터 생성
- 런타임 오버헤드 감소 : 빌드 타임에 미리 메타데이터를 생성하여, 런타임에서의 데이터 처리나 계산을 줄임으로써 성능을 최적화
* 클라이언트 번들 : 웹 앱의 JS, CSS 등을 하나로 묶은 파일(브라우저에서 실행되는 코드 패키지)
🙏useCallback & useMemo
- useCallback : 함수를 메모이제이션하여 불필요한 함수 생성을 방지. 주로 자식 컴포넌트에 전달할 때 유용
- useMemo : 계산된 값을 메모이제이션하여 불필요한 재계산을 방지. 복잡한 계산이나 비용이 큰 연산에 적합
🙏useCustomQuery & useCustomMutation
- useCustomQuery : Tanstack Query의 useQuery훅을 기반으로 하여, 기본적인 쿼리 옵션을 설정하고, 타입을 안전하게 처리할 수 있도록 만들어진 커스텀 훅
- useCustomMutation : Tanstack Query의 useMutation훅을 기반으로 하여, 데이터 변형 작업을 쉽게 관리할 수 있도록 만든 커스텀 훅
이 두 커스텀 훅은 Tanstack Query의 기능을 확장하여 쿼리와 뮤테이션 작업을 보다 간결하고 일관성 있게 관리할 수 있도록 도와줌. 이러한 방식으로 작성하면 코드의 가독성이 향상되고, 재사용성이 높아져 유지보수가 용이
진짜 성실한 사람