Base Skill
Next.js
- 컴포트존을 벗어나 주로 사용하지 않았던 것을 사용해보기 위함, 이번 프로젝트에서 사용해 봄으로써 이후 최종 프로젝트에서 더 잘 활용 할 수 있을 것이라 예상됨.
- SSR, SSG, ISR 3가지의 렌더링 방식을 지원하지만 SSR의 장점을 누릴 수 있을 것 같음.
- 일단 SSR은 초기 요청 시에 서버 측에서 렌더링된 HTML을 생성하여 클라이언트에 전달하는 방식.
- 장점으로는 요청하는 페이지에 대한 정보만 서버에서 렌더링한 후 클라이언트에 전달해주기 때문에 초기 로딩 속도가 빠르다.
- SEO 검색엔진 최적화로 모든 컨텐츠가 렌더링된 HTML에 포함되므로 검색 엔진이 페이지의 내용을 쉽게 인식 할 수 있음.
- 클라리언트의 하드웨어 및 소프트웨어 성능에 영향을 덜 받음.
- 페이지 전환이나 상호작용 시에 서버 요청이 필요하여 사용자 경험이 느릴 수 있다.
- 서버측에서 컨텐츠를 렌더링하기 때문에 서버 부담이 높을 수 있다.
장점
단점
- 넥스트는 SEO 최적화와 동적 라우팅(폴더 기반의 라우팅), 서버리스 함수를 제공한다는 편리함이 있다(api 관련 통신 함수). 그 외에도, 코드 분할(내가 원하는 페이지에서 원하는 자바스크립트 와 리이브러리 렌더링 가능) / 타입스크립트에 대한 기본 지원 / 자동 폴리필(브라우저에서 지원하지 않는 JS 코드를 지원 가능하도록 변환한 코드를 뜻함) 적용 / 이미지 최적화 등 다양한 기능을 지원한다.
- 13버전에서는 Rust라는 새로운 번들러 사용으로 웹팩보다 700배 vite보다 10배 빠른 성능을 제공한다.
TypeScript
상태관리
Redux → 만약 사용시 RTK(Redux-toolkit)사용
장점: Redux Devtools를 이용해 직관적으로 상태값의 변경 사항을 체크하여 디버깅이 쉽다
단점: 작은 상태 하나 변경을 위해 actions, reducer,type 등 보일러 플레이트 코드 많이 작성 → 즉, 코드 작성량 많아짐.
Recoil
장점: React의 useState 훅과 비슷하게 동작하며 직관적이면서 간단한 구조 가짐. 코드의 양이 매우 줄어듬
단점: Redux처럼 따로 안정적인 Devtool이 없어 디버깅 측면에서는 불리함.
React Query
비동기 데이터를 관리하기 위함
장점
데이터 캐싱에 대한 컨트롤 가능
react hook과 사용하는 구조 비슷
비동기 과정 선언적 관리
동일 데이터 여러번 요청시 한번만 요청(옵션에 따라 조절 가능)
단점
아직 개발 중인 라이브러리라 해결하지 못한 에러 발생 가능성