면접 질문 정복하기
오늘은 도전반에 지원하게 되어 받은 면접 질문에 대해 정리해보려 합니다.
완벽하게 대답했다고 생각되면 계속 꼬리에 꼬리를 무는 질문이 들어오는... 실제 회사 면접은 더 하면 더 했지 덜 하진 않겠죠? 하하
완벽하지 않다고 생각하는 답변은 수정 답변과 함께 기록하겠습니다.
아래가 받은 질문 목록입니다.
- Q : js가 next.js를 탄생시킬 수 있을 만큼의 영향력 있는 프로그래밍 언어가 될 수 있었던 배경은 어떤 것이 있을까요?
나의 답변: 브라우저가 읽을 수 있는 언어가 js이기 때문에 js를 기반으로 next.js가 탄생할 수 있었다고 생각합니다. (v8이 머리에 스치긴 했지만 확실히 알지 못해 생략함....)
수정 답변: JavaScript는 웹 브라우저에서 기본적으로 실행되는 유일한 프로그래밍 언어이기 때문에, 이를 기반으로 다양한 프레임워크와 라이브러리가 발전할 수 있었습니다. 특히, V8 엔진을 기반으로 한 Node.js가 등장하면서 JavaScript는 프론트엔드뿐만 아니라 백엔드에서도 강력한 역할을 하게 되었고, 이로 인해 SSR(서버 사이드 렌더링)이 가능한 Next.js 같은 프레임워크가 탄생할 수 있었습니다.
- Q : React.js와 next.js의 선택지가 있을 때, Next.js를 사용하는 것이 무조건 좋을까요?
나의 답변: next.js는 UX를 위한 최적화에 특화되어 있기 때문에 무조건 nextjs를 사용하는 것이 좋다고 생각합니다. 예를 들어 Image 최적화나 SEO 향상, 상황에 따른 4가지 렌더링 방식이 있습니다.
수정 답변: next.js가 항상 좋다고 할 수는 없지만 특정 조건에서는 next.js가 유리합니다.
첫째, SEO가 중요한 경우가 있습니다. next.js에서는 SSG, SSR를 제공하므로 검색 엔진 최적화에 유리합니다.
둘째, 요즘 UI 상 많은 이미지들이 존재하는데 next/image를 통해 자동으로 최적화된 이미지를 제공합니다.
하지만, 단순한 SPA라면 React만 사용해도 충분하며, Next.js의 기능이 오히려 불필요하게 무거울 수 있습니다. 따라서 프로젝트의 성격에 따라 Next.js가 필요한지 고려하는 것이 중요하다고 생각합니다.
- Q : (Next.js를 쓰는게 무조건 좋다는 의견에 대해 이어지는 질문) React만 사용하더라도 TanStack Query와 같은 서버상태관리 도구가 있어서 Next.js를 사용하는 것 보다 훨씬 더 가볍고 매끄럽게 코드를 짤 수 있다는 점에는 반론?
나의 답변: react에서는 클라이언트 측에서 데이터 패칭이 일어날 경우 초기 화면이 늦게 그려질 수 있습니다. 하지만 next.js에서는 서버 사이드에서 데이터 패칭이 가능하므로 초기 화면이 로딩되는 속도가 빠릅니다.
수정 답변: TanStack Query는 클라이언트 사이드에서 서버 상태를 효율적으로 관리하는 도구지만, next.js가 제공하는 SSR/SSG 기능을 대체할 수는 없습니다.
첫째, SEO 문제로 TanStack Query는 클라이언트에서 데이터를 패칭하므로, 검색 엔진이 제대로 크롤링하기 어렵습니다.
둘째, TanStack Query는 클라이언트에서 데이터를 가져오므로, 초기 화면이 늦게 그려질 수 있습니다. 반면, Next.js는 서버에서 데이터를 미리 받아와 렌더링하므로 첫 화면 로딩 속도가 빠릅니다.
셋째, TanStack Query는 클라이언트에서 매번 API 요청을 보내지만 Next.js의 SSG/ISR은 특정 페이지를 정적으로 생성하여 서버 요청을 줄여줍니다.
- Q : React.js에서 가장 인상깊었던 hook이 있다면? 어떤 것인지?
나의 답변: 정말 많은 hook을 사용해봤지만 그 중 useInfiniteQueries가 생각납니다. 기존에는 모든 데이터를 불러온 후 그 중 일부의 데이터만을 사용했지만 useInfiniteQueries를 통해 필요한만큼의 데이터만을 가져오고 그 후 다음 데이터를 가져오며 불필요한 데이터 통신을 줄일 수 있어 인상 깊었습니다.
여기부터 꼬리에 꼬리를 무는 질문....
- Q : TanStack Query의 캐시데이터의 상태에 대해 설명
- Q : useQuery가 뭔가요? useQuery가 실행된다는 것은 무엇을 의미하나요?
나의 답변: 가장 기본적인 useQuery를 통해 말씀드리겠습니다. useQuery는 queryKey와 queryFn으로 실행되며 queryFn을 통해 가져온 데이터를 queryKey를 이름??으로 캐시 컨텍스트에 저장합니다. 이때 staleTime을 설정하지 않았다면 fresh 상태에서 곧바로 stale 상태로 변하며 페이지가 언마운트 될 시 inactive 상태가 됩니다. 만약 해당 키로 저장되어 있는 캐시 컨텍스트가 없을 경우 없다는 것을 확인한 후 데이터 패칭이 이뤄지고 이미 있다면 캐싱되어 있는 데이터를 반환해줍니다. (Fresh 상태일 때라는 말을 붙였으면 좋았을듯...)
- Q : revalidate와 invalidateQueries는 어떻게 다르고 어떤 동작을 하나요? -> refetch인지 물어보러 가야함...
나의 답변: invalidateQueries는 해당 쿼리를 강제로 무효화 시키며 데이터를 새로 패칭해옵니다. revalidate는 캐싱된 데이터의 상태가 어떻든 지정한 주기마다 새로 데이터를 패칭해옵니다.(revalidate 완전 잘못 알고 있었음...)
수정 답변: invalidateQueries는 특정 쿼리 키를 무효화하여, 해당 데이터를 다시 패칭하도록 유도합니다. 개발자가 onSuccess와 같이 해당 조건에서 패치하도록 유도합니다. -> 해당 데이터가 fresh일 경우 stale 상태로 만듦
revalidate는 주로 자동으로 발생하는 데이터 갱신입니다. 개발자가 명시적으로 무효화하지 않아도, 창 포커스 변화, 네트워크 복구 등의 이벤트에 의해 자동으로 refetch됩니다.(개발자 유도의 유무.... 여기서 감탄함...) -> 대부분 stale상태일 때 일어나지만 cacheTime이 지나지 않았다면 fresh 상태에서도 일어날 수 있음
- Q : SSR에 대해서 설명해주세요.
나의 답변: 서버 사이드에서 해당 컴포넌트를 모두 렌더링한 후 클라이언트로 전달하는 렌더링 방식을 의미합니다. 이로 인해 초기 로딩 속도가 빠르다는 장점이 있습니다.
- Q : 효율적인 쿼리 키 설정이란 무엇일까요? - 여기서 많이 벙찜...질문 의도 파악 못함
나의 답변: queryKey로 여러 개를 설정할 수 있는 것으로 알고 있습니다. 예를 들어 전체 데이터를 사용할 때는 'user'라는 queryKey만을 이용하고 개별 데이터를 사용할 때는 userId와 같은 값을 사용합니다.
수정 답변: queryKey는 tanstack query에서 데이터를 식별하는 역할을 합니다.
첫째, 구체적으로 작성: ['user', userId]처럼 특정 데이터를 가리키도록 설정합니다.
둘째, ['posts', postId, 'comments']처럼 의미 있는 계층을 반영합니다.
셋째, invalidateQueries 시 너무 많은 데이터를 무효화하지 않도록 적절한 키를 설정합니다.
넷째, queryKey를 동적으로 생성하여, 필요한 데이터만 패칭할 수 있도록 설정합니다.
역시나 머리 속으로는 알고 있어도 말로 하게 되면 어렵다는 것을 확실히 알게 되었습니다....오늘부터 모의 면접 준비를 계속해서 해나가야겠습니다. 다들 화이팅~