1. next.js를 사용한 이유를 react.js와 비교하여 함께 설명해주세요.
CSR만 가능한 리액트와 달리, SSR 및 SSG를 지원하여 초기 로딩 속도를 향상시킬 수 있다. 라우팅을 위해 별도의 라이브러리(react-router-dom)을 설치하고 관리해야 하는 리액트와 달리, 파일 시스템 기반의 간단한 라우팅을 제공한다. 코드스플리팅, 검색 엔진 최적화 등을 자동으로 해준다.
2. next.js 의 App Router와 Page Router의 차이를 비교하여 말씀해주시고 Page Router를 선택하신 이유를 말씀해주세요.
Page Router는 Pages 폴더의 디렉토리 구조에 따라 경로가 정해진다. (index.js)
App Router는 App 폴더의 디렉토리 구조에 따라 경로가 정해진다. (page.js)
App Router는 서버 컴포넌트의 개념이 존재하며 하나의 페이지에서 CSR, SSR, ISR, SSG 를 혼합하여 구현이 가능하다. 그리고 layout.js, loading.js, error.js를 통해 app 폴더 내에서 페이지 별로 핸들링이 가능하다. 그러나 Page Router에 비해 러닝 커브가 높고, 나온지 얼마 되지 않아 지원하지 않는 라이브러리도 존재하며, 아직 불안정한 것들이 많다. 그러므로 팀원들과 상의한 결과 Page Router를 사용하기로 결정했다.
3. react-query를 선택하고 사용하신 이유에 대해 설명해주세요.
react-query는 서버에서 데이터를 가져오고 관리하는데 강점이 있는 라이브러리로, 컴포넌트 간 데이터 공유를 간편하게 할 수 있다.
내장된 캐싱 기능을 통해 불필요한 중복 요청을 피하고, 데이터를 효율적으로 캐싱하여 성능을 향상시킬 수 있으며 각각의 데이터 상태에 대한 다양한 상태 값을 손쉽게 관리할 수 있다.
서버와의 데이터 통신을 간단하게 처리하며 서버 상태 관리를 용이하게 하기 위해 사용한다.
가져온 데이터를 자동으로 캐싱하며 데이터가 업데이트될 때 자동으로 업데이트 된 데이터를 표시할 수 있다.
4. supabase를 사용하신 이유를 말씀해주세요.
강력한 데이터베이스와 인증 기능을 제공하여 손쉽게 데이터를 관리하고 사용자 인증을 구현할 수 있다.
관계형 데이터베이스이기 때문에 초기세팅시 잘 설정을 해 두면 테이블 조인을 쉽게 사용할 수 있다.
rpc 함수를 활용하여 비교적 복잡한 쿼리도 한 번에 수행할 수 있다.
firebase에 비해 auth 사용자 수 제한이 없고, 읽기, 쓰기 가 더욱 빠르다.
5. type script를 사용하는 이유에 대하여 말씀해주세요.
코드의 안정성을 높이기 위해 정적 타입 검사를 활용하여 개발 생산성을 향상시킨다.
