기술면접 질문

1. next.js를 사용하셨는데 어떤 이유로 next.js를 사용하게 되셨는지, 어느 부분에서 이점이 있었는지 설명해주세요.

2. useCustom Hook으로 이미지삽입과 지도 Bookmark를 만드셨는데 custom hook을 사용하셨을 때 어떠한 이점이 있었는지 설명해주세요.

3. 컴포넌트를 나눈 기준과 전역상태를 나눈 기준에 대해서 설명해주세요.

4. 3개의 API를 동시에 불러와 하나의 데이터로 파싱하여 파이어베이스에 넣어주고있는것으로보입니다. 이과정에서 비동기 처리 문제가 있으셨는지 어떻게 트러블 슈팅 하셨는지 설명해주세요.

5. 프로젝트에서 모두 Styled-components를 사용하신것으로 보입니다. Styled-components 특징에 대해서 설명해주세요. 추가로 다른 UI 라이브러리 사용을 고려해보셨는지 궁금합니다.

기술면접 질문 답변

1. Next.js를 사용한 이유

• CSR만 가능한 리액트에서 API 6개를 호출해야 한다는 부담이 컸습니다.
  • 메인페이지에서 CSR로 API 1개를 호출시 렌더링이 7.2 초가 걸렸던 것을 SSG를 활용하여 0.2 초로 단축 시킬 수 있었습니다.
• Next.js는 웹앱의 각 페이지마다 알맞은 렌더링 전략(CSR,SSR,SSG,ISR)을 고를 수 있다는 것이 큰 장점입니다.
  • 분양 공고문은 하루에 한 번 업데이트가 되기 때문에 데이터가 자주 변하지 않아 SSG와 ISR을 이용해 api호출 횟수를 줄일 수 있습니다.
  • 서버에서 API를 호출하게 되면 env키가 network에 노출되지 않아 보안에도 신경 쓸 수 있습니다.
  • Next.js에서 제공하는 리액트에는 없는 SSR, SSG, ISR 기능을 이용해 분양 정보를 보여줘야 하는 page에서 유저에게 사전 렌더링 된 데이터를 바로 보여줄 수 있어 속도 개선이라는 장점을 얻을 수 있습니다.
  • Next.js는 기본적으로 페이지를 서버에서 렌더링하기 때문에 window, document와 같은 객체나 api를 제공하지 않지만 next.js가 제공하는 dynamic import로 CSR을 사용 가능합니다. (해당 컴포넌트를 SSR이 아닌 클라이언트에서만 실행)
• Next.js 는 자체 서버를 제공하기 때문에 웹앱을 만들면서 별도의 서버를 준비하고 실행할 필요가 없습니다. 백엔드 서버를 개발하는데 큰 힘이 들지 않아 프론트엔드 개발하는데 집중할 수 있습니다.
• SEO 최적화
  • 프로젝트를 실제로 서비스해보고 싶다는 생각이 있기 때문에 SEO 점수를 높게 받을 수 있다는 점이 중요했습니다.
  • 정적 사이트 생성으로 페이지 소스에 데이터가 모두 담겨 SEO 최적화에도 도움이 됩니다.
• 이미지 최적화 기능
  • Image 컴포넌트를 사용해 이미지 자동 최적화 기능을 사용하여 필요한 경우 이미지 크기를 조절해서 클라이언트가 큰 이미지를 다운로드하느라 속도가 느려지는 상황을 피할 수 있습니다.
• 간편한 라우팅 기능
  • 폴더 생성만으로 라우팅이 가능합니다. 그래서 별도의 라이브러리 설치와 보일러 플레이트 코드를 작성할 필요가 없습니다.
• NextAuth.js 라이브러리를 이용해서 소셜로그인 기능을 간편하게 구현할 수 있습니다.

2. Custom Hooks을 사용했을 때의 이점

• 커스텀 훅은 보통 반복되는 로직을 재사용하기 위해 hooks로 만들어 관리하는 것입니다.
• 하지만 재사용성 외에도 코드 가독성을 고려하여 커스텀 훅을 생성하였습니다.