[250110 TIL] 본캠프 71일차 (모의면접)

var, let, const의 차이점을 호이스팅의 관점에서 설명해 주세요.

var의 경우 호이스팅이 발생하기 때문에 변수가 선언되기 전에 접근을 해도 에러가 아닌 undefined가 뜨게 됩니다. let과 const의 경우 var와 마찬가지로 호이스팅이 발생하지만 TDZ로 인해 변수가 선언되기 전에 접근하려고 하면 에러가 발생합니다. 또한 const는 선언과 동시에 초기화를 해주어야 하고 이후 재할당이 불가능하다는 점에서 let과 차이가 있습니다.

 

꼬리 질문

호이스팅이라는 개념이 왜 나오게 되었을까요?

• JavaScript는 평가 단계와 실행 단계로 나눠서 실행이 됩니다. 평가 단계에서는 모든 선언을 레코드에 수집하는 과정을 거치게 되는데, 평가 단계가 실행된 이후에 실행 단계에서 코드가 실행되기 때문에 마치 모든 선언이 최상단으로 끌어올려진 것처럼 동작을 하게 되고 그에 맞게 호이스팅이라는 용어가 붙게 되었습니다.

 

개발 과정에서 사용자 경험을 개선한 경험이 있다면 설명해 주세요.

예전에 진행했던 팀 프로젝트에서 사용자가 댓글을 입력하고 등록 버튼을 눌렀을 때 로그인 여부를 판단하는 방식으로 댓글 기능을 구현했었는데, 로그인을 하지 않은 사용자의 입장에서는 입력은 가능하지만 정작 등록은 불가능한 문제가 발생하게 되었습니다. 이를 해결하기 위해서 등록 버튼을 눌렀을 때가 아니라, 댓글을 입력하려고 할 때 로그인 여부를 판단하도록 개선함으로써 댓글을 작성하기 위해서는 로그인이 필요하다는 것을 보다 명확하게 사용자에게 전달할 수 있게 되었습니다.

 

꼬리 질문

혹시 사용자 경험을 조금 더 개선할 수 있는 방법은 없을까요?

• 사용자 경험이 어느정도 개선되었지만, 사용자가 댓글을 입력하는 동작을 시작하기 전까지는 여전히 로그인이 필요한 기능이라는 것이 명확하게 전달되지 않고 있습니다. 이를 해결하기 위해서 댓글 작성 기능이 있는 페이지에 접속했을 때 로그인 여부를 판단해서, 로그인이 되어 있지 않은 경우 댓글 입력 창을 블러 처리해준다거나 로그인이 필요하다는 문구를 띄워줌으로써 사용자 경험을 좀 더 개선시킬 수 있습니다.

 

Next.js에서의 CSR, SSR, ISR 방식에 대해서 설명해 주세요.

CSR은 서버에서 html, css, js 등의 리소스들을 받아와서 클라이언트 측에서 렌더링을 수행하는 방식으로, 사용자 인터렉션에 대한 대처가 빠르지만 초기 로딩 속도가 느리고 SEO에 부적합합니다. SSR은 서버 측에서 렌더링을 수행한 후에 완성된 html 파일을 클라이언트에 전달하는 방식으로, 초기 로딩 속도가 빠르고 SEO에 친화적이지만 사용자 인터렉션이 많아지면 서버에 부하가 걸릴 수 있습니다. ISR은 정적 렌더링 방식인 SSG 방식에 SSR의 장점을 결합한 방식으로, 로딩 속도가 빠르고 SEO에 친화적이라는 장점을 유지하면서 최신 데이터 또한 반영할 수 있지만 여전히 실시간으로 최신 데이터를 적용할 수 없다는 한계점이 존재합니다.

 

피드백

이 내용은 전통적인 개발에서의 특징이고 Next.js에서는 그러한 방식으로 동작하지 않기 때문에 Next.js에서의 특징이 무엇인지에 대한 이해가 필요합니다.

 

 

프로젝트에서 사용한 상태 관리 라이브러리와 선택 이유를 설명해 주세요.

저는 Zustand와 TanStack Query를 이용해서 상태 관리를 했습니다. Zustand의 경우 Redux에 비해 코드 구조나 설정이 간단한 편이기 때문에 전역 상태를 보다 직관적으로 관리할 수 있다는 느낌을 받았고, Context API와 비교했을 때 불필요한 리렌더링을 최소화함으로써 보다 효율적으로 상태를 관리할 수 있다는 점에서 선택을 하게 되었습니다. TanStack Query의 경우 데이터를 자동으로 캐싱해 줌으로써 불필요한 요청을 방지하고, 에러 및 로딩 상태를 보다 간편하게 관리할 수 있다는 점에서 선택을 하게 되었습니다.

 

피드백

클라이언트 상태 관리, 서버 상태 관리라는 키워드를 사용해서 설명해주면 더 좋을 것 같습니다.

 

 

개발 과정에서 성능 및 코드 퀄리티를 개선한 경험이 있다면 설명해 주세요.

Context API를 사용해서 전역 상태를 관리 하다가 Zustand로 바꿔주었습니다.

 

꼬리 질문

Context API와 Zustand를 같이 사용한 경험이 있으신가요?

둘 다 전역 상태를 관리하는 도구인데 왜 하나만 사용하지 않고 2가지 방법을 같이 사용했나요?