[TIL]240123_기술면접 질문 10가지

ㅇㅖㅈㅣ·2024년 1월 23일

내일배움캠프

Today I Learned

목록 보기

63/93

👩🏻‍💻 Today Learn

이력서세션
기술면접 답변준비
실시간 알림기능 구현중

📚 기술면접 질문

공통질문

1. Virtual DOM이란 무엇이며, 실제 DOM과 어떤 차이가 있나요?

DOM이란 웹 페이지의 구성 요소들을 트리구조로 표현한 것인데 가상돔은 실제돔의 완벽히 동일한 복사본 형태로 메모리 상에 존재하는 자바스크립트 객체로 이루어져있습니다.

변경사항이 생기면 가상돔에 먼저 적용이 되고 실제돔과 비교하여 변경이 필요한 부분만 실제돔에 적용시켜줍니다.

따라서 실제돔의 변경을 최소화 시켜주어 성능을 향상시킬 수 있습니다.

2. 바닐라 자바스크립트 대신 React를 쓰는 이유는 무엇인가요?

가장 큰 장점은 리액트는 (앞서말한것과 같이)가상돔을 사용하기 때문에 실제돔의 업데이트를 최적화 해줍니다. 그리고 리액트의 컴포넌트 구조는 코드 재사용을 용이하게 해주어 프로젝트간에 공통기능을 좀 더 쉽게 공유하고 확장할 수 있게 해주며 유지보수와 관리가 효율적입니다.

따라서 프로젝트 규모가 커질수록 바닐라 자바스크립트와 비교했을때 리액트의 장점은 훨씬 더 많다고 생각됩니다.

3. Redux와 같은 상태 관리 라이브러리를 사용하는 이유는 무엇인가요?

먼저 리액트는 단방향데이터 흐름을 가지고 있어 부모컴포넌트에서 자식컴포넌트로 props drilling이 발생할 수있습니다. 따라서 상태관리 라이브러리를 사용하면 사용하지 않는 컴포넌트에까지 props를 정의해주어야 하는 보일러플레이트를 줄일 수 있습니다.

그리고 중앙저장소에서 state를 관리하여 다양한 컴포넌트간에 상태를 공유하고 동기화하기 더 쉬워지며 문제가 생겼을 때 디버깅이 용이해진다고 생각합니다.

4. JavaScript의 동기식과 비동기식 프로그래밍의 차이점은 무엇인가요?

동기 프로그래밍은 하나의 작업이 완료되기 전에는 다음작업이 시작되지 않고 순차적으로 실행되는 것입니다. 코드의 흐름을 파악하기는 좋을 수 있어도 긴 작업을 수행하는 경우 앞선 작업이 완료될때 까지 다른작업이 정지상태이기 때문에 비효율적일 수 있습니다.

비동기 프로그래밍은 현재 진행중인 작업이 완료될때 까지 기다리지 않고 다음작업을 실행할 수 있습니다. 비동기작업은 백그라운드에서 실행하고 작업이 완료되면 콜백함수나 프로미스를 통해 결과를 처리합니다.

따라서 네트워크 요청같이 시간이 많이 소요되는 작업을 백그라운드에서 처리할 때 사용자는 다른 작업을 계속 진행할 수 있습니다.

5. Single Page Application(SPA)과 Multi Page Application(MPA)의 차이점은 무엇인가요?

SPA는 한개의 페이지로 이루어진 어플리케이션으로 필요한 모든 정적 리소스를 한번에 다운로드하고 그 이후 새로운 페이지 요청이 있을 때는 사용자와의 상호작용에 따라 페이지 갱신에 필요한 데이터만 전달받아서 동적으로 갱신해줍니다. 빠른 상호작용과 부드러운 사용자 경험을 제공해주는것이 장점이지만 MPA에 비해 검색엔진이 크롤링하기 어려워 검색포털에서 노출되기 어렵습니다.

(페이지의 내용이 동적으로 로드되기 때문에 SEO최적화가 어려울 수 있다는 단점)

MPA는 여러개의 페이지로 이루어진 어플리케이션으로 새로운 페이지를 요청할 때마다 매번 전체 페이지가 다시 렌더링 되어 SPA에 비해 상대적으로 느릴 수 있습니다.

(각 페이지는 고유한 URL을 가지고 있어 검색엔진 최적화에 유리하다)

6. 브라우저에 웹사이트 주소를 입력하고, 그 웹사이트가 브라우저에 나타나기까지 내부적으로 어떤 일이 벌어지나요?

(더 찾아보는중)

팀별질문

1. Next.js의 Page Router와 App Router 의 차이점에 대해 아는 대로 말씀해 주세요.

페이지 라우터는 라우팅유형이 고객입장이고 기본적으로 클라이언트 구성요소이며 상대적으로 유연성이 떨어집니다.

앱 라우터는 기본적으로 서버 구성요소의 서버중심 라우팅이며 상대적으로 . 더 유연하고 더 복잡합니다.

이 내용은 찾아보면서도 잘 이해하지 못하여 차이점에 대해 잘 인지하지 못했습니다…

2. Next.js에서 왜 렌더링방식 중 SSG 사용을 권장하고 그에 대한 기술적인 이유는 뭐라고 생각하나요?

SSG는 빌드시에 모든 페이지를 미리 렌더링하여 정적인 HTML파일을 생성하는 방식으로 SSR에 비해 로딩시간이 빠르며 사용자 경험을 향상시켜 줍니다. 그리고 페이지를 사전에 렌더링하여 정적 파일을 제공하기 때문에 검색엔진 최적화에 유리합니다.

3. Supabase 를 사용하셨는데 Firebase와 비교했을 때 본인이 생각하는 장단점은 어떤 것들이 있나요?

firebase는 noSQL이지만 supabase는 postgreSQL을 기반으로 하여 관계형 데이터베이스를 생성할 수 있기 때문에 API를 구축할때 복잡한 설정과 관리를 최소화 할 수 있는 장점이 있다고 생각합니다. 또 CRUD코드가 firebase에 비해 간단하며 realtime을 이용한 실시간 기능을 사용할 수있습니다.

단점은 firebase에 비해 나온지 얼마되지 않아 정보가 많지 않고 처음에 데이터 테이블간의 관계를 구축할 때 훨씬 더 체계적이고 복잡하여 시간이 많이 소요되었습니다.

4. 좋아요나 찜을 구현하실 때 Optimistic Update 를 적용하신다면 그 이유는 무엇이고 동작원리를 설명할 수 있나요?

optimistic update는 데이터가 서버에 성공적으로 저장될 것이라는 가정하에 UI를 미리 업데이트 하는 방식으로 좋아요 버튼을 클릭하면 즉시 UI가 변경되어 사용자에게 바로 피드백을 제공해 줄 수 있기 때문에 적용하였습니다.

동작원리로는 좋아요 버튼 클릭시 즉시 상태를 반영해주는 동시에 백그라운드에서 서버에 좋아요 상태변경을 요청합니다. 서버에서 성공적으로 처리하고 응답을 주면 UI는 이미 업데이트 되어 있기 때문에 추가조치는 필요하지 않습니다. 하지만 오류응답을 주면 UI를 초기상태로 롤백시키고 사용자에게 오류를 알려줍니다.