[Interview] 직접 받은 대기업 / 스타트업 기술 면접 질문

이미지 출처 : https://totempool.com/blog/preliminary-interview/

 

지금까지 취업을 하면서 당연하게도 많은 기업에서 인터뷰를 진행하였고, 다양한 질문을 받았다. 이 질문들은 새롭고 깊게 생각해봐야 하는 질문도 있었으나, 예상 가능하고 미리 준비하여 답할 수 있는 질문들이 대부분이였다. 그렇기에 새로운 직장을 위해 준비하는 분들에게는 질문들을 상기하는 기회를, 처음으로 직장을 준비하는 분들에게는 '이것만은 꼭 알고 가자'라는 부분을 알려주기 위해 해당 포스팅을 작성했다. 사실 본인 면접 회고록이라고 볼 수 있다. 더해서 제가 답안은 꾸준히 포스팅 예정이다.

 

참고로 기술 스택은 대부분 프론트엔드 직무로 javascript와 react 위주이다. 

---

1. 코딩 테스트 기반 알고리즘 질문 (문제를 푼 방법, 해당 방법에 관한 질문)

 대부분의 대기업은 코딩테스트를 진행하고, 코딩 테스트 전형을 통과 후 면접 전형을 진행한다. 그렇기에 기존에 풀었던 코딩 테스트 문제를 푼 방법을 물어보곤 했다. 해당 문제를 푼 과정을 설명하고 해당 문제를 푼 방식에 대한 질문을 받았다.

 본인이 설명한 문제는 DFS문제로 해당 문제를 설명하고 후속 질문으로 BFS와 DFS의 차이점을 질문하였다. 그렇기에 면접 전 가볍게 본인이 푼 알고리즘과 해당 알고리즘에 대한 기본 지식을 상기하고 가면 좋을 것 같다.

 

2. Javascript에 대해서 자세하게 설명해주세요.

 해당 질문은 너무 광범위하여 나올까 싶지만 한번 받은 경험이 있다. 해당 질문은 javascript의 특징을 잘 알고있는지 확인하기 위해 질문인 것 같다. 본인은 해당 답을 인터프리터이자 스크립트, 객체 지향 언어(하지만 class 사용을 지양), 싱글 스레드 언어(with EventLoop)라는 점을 설명하였다.

 

3. javascript가 비동기적으로 작동하는 과정을 설명해주세요.

 해당 질문은 Eventloop에 대한 질문이다. 이벤트 루프에 대한 질문은 곧 포스팅 할 예정이다.

** 포스팅이 완료되면 업데이트 진행

 

4. Hoisting에 대해서 설명해주세요.

 javascript의 호이스팅에 대한 질문이였다. 개인적으로 많은 포스팅에서 let과 const가 호이스팅 대상이 아니라고 하는데 이 부분을 잘못된 정보이다. let과 const도 호이스팅이 된다. 호이스팅이 되는 스코프와 선언과 초기화를 분리하여 진행하기에 호이스팅이 되지 않는 것처럼 보이는 것이다. 큰 문제는 아니지만 디테일을 설명하면 좋을 것 같다.

 

2022.11.04 - [javaScript] - 호이스팅(Hoisiting)

호이스팅(Hoisiting)

 

5. React - useEffect의 의존성 배열에 object가 들어가 있을 경우 object의 하나의 key의 value가 변경 될 경우 어떻게 될 것 같나요?

 이 질문은 react 초보 시절 받았는데 정말 머리가 잠시 멈춘 느낌이였다. react에서 useEffect기능은 매우 많이 사용되는 메서드이고, 의존성 배열(dependency array)은 거의 필수적으로 사용된다. 하지만 object를 넣을 경우를 생각해본 적이 없기에 질문에 답하지 못하였고, 면접이 끝나고 검색해보았다.

 

답만 말하자면 의존성 배열에 object나 array가 들어가면 매 rendering 마다 callback이 실행되게 된다.

 

useEffect 에서는 이 object의 refernece가 이전에 주어진 object의 reference가 같은지를 확인한다. 새로 만들어진 object는 값이 같더라도 새로운 reference를 가지기 때문에 callback은 매번 실행된다.

 

이를 해결하기 위해서는 object의 key값을 넣거나 object 자체를 string으로 변경( JSON.stringigy() )하여 넣거나 하는 다양한 방법이 있다.

https://jooonho.com/react/2022-01-30-dependency_array

Dependency Array를 어떻게 비교할까?

https://sgwanlee.medium.com/useeffect%EC%9D%98-dependency-array-ebd15f35403a

UseEffect의 dependency array

 

6. React를 선택한 이유가 무엇인가요?

 이 질문은 사용하는 라이브러리/프레임워크에 대한 이해도를 확인하는 질문인데, 각 개발자 별로 이유는 다를 것이라 생각한다. 개인적으로 react를 사용하는 가장 큰 이유는 생태계이다. react는 웹 라이브러리/프레임워크 생태계에서 아주 큰 부분을 차지하고 있으며, 다양한 정보를 쉽게 찾을 수 있기에 독학을 진행한 입장에서 매우 중요한 부분이다. 더해서 가상 돔을 사용하여 좋은 성능으로 웹을 구현할 수 있으며 Next.js와 React-Native 같이 다양한 유사 프레임 워크의 러닝 커브를 낮출 수 있기 때문이다.

 

7. 초기 로딩이 느리다면 어떻게 하면 이를 개선할 수 있을까요?

 이는 사용 라이브러리/프레임워크 별로 다 다르며, 같은 환경이라 할지라도 정말 다양한 방법이 존재한다. 그렇기에 이 질문은 성능에 대한 고민을 한 경험이 있는지, 더해서 어떻게 그 고민을 해결했는지를 묻는 질문이다. 

 

react 기준으로는 다양한 방법 중 개선 경험이 있는 두가지를 답변하였다.

 

1. 번들 사이즈 최소화

 react app은 초기에 번들을 다운로드하여 이를 통해 app을 렌더링하는데 이 번들의 사이즈가 크다면 당연하게도 다운로드 시간이 길어질 것이고, 이는 초기 렌더링 시간이 길어져 유저가 흰 화면을 보는 시간이 길어질 것이다, 그렇기에 번들 사이즈를 최소화 하는 작업을 진행하면 어느정도 개선이 될 것이다. (하지만 한계가 존재한다.)

 

2. SSR(Server Side Rendering)

 server side redering을 통해 렌더링을 서버에서 진행하여 완성된 index.html을 전달받아 이를 출력하면 초기 로딩을 파격적으로 줄일 수 있다. 하지만 서버에 부하를 줄 수 있고, 페이지 이동 시 서버에서 re-rendering을 진행하기에 흰 화면이 깜빡이는 현상이 일어난다. 

 

3. SSG(Static Site Generation)

 SSG를 사용하면 SSR의 단점을 커버할 수 있다. SSG는 앱을 빌드하는 시점에 미리 그려두고 이를 서빙(serving)하는 방식을 말한다. CSR에서 초기 index.html을 서버에서 렌더링 후 이를 제공하는 것이다. 그렇게 한다면 CSR의 장점과 SSR장점을 둘 다 챙길 수 있다.

 

8. SSR에 대해서 설명해주세요.

9. SPA에 대해서 자세하게 설명해주세요.

 렌더링의 종류와 어플리케이션의 종류를 물어보는 질문으로 개인적으로 중요하다고 생각한다. 왜냐하면 많은 기업의 어플을 SSR 혹은 SSG로 구성하기 때문이다. 그렇기에 SSR/CSR의 장단점과 MPA/SPA의 특징을 잘 이해하고 있어야 한다고 생각한다. 더해서 SSG에 대한 정보는 이후 포스팅 후 추가할 예정이다.

 

2022.11.18 - [web/webApplication] - Server Side Rendering(SSR)과 Client Side Rendering(CSR)

Server Side Rendering(SSR)과 Client Side Rendering(CSR)

2022.11.18 - [web/webApplication] - Multiple Page Application(MPA) & Single Page Application(SPA)

Multiple Page Application(MPA) & Single Page Application(SPA)

 

10. callback hell에 대해 설명해주세요.

 이 질문은 javascript의 비동기 과정에서 발생하는 콜백 지옥에 대한 질문이다. 이는 비동기 과정에서 callback 함수를 통해 깊이가 깊어지는 경우를 말하는데 이는 Promise와 asyc/await로 해소 가능하다.

 

11. Typescript 사용해본 적 있으세요?, Typescript의 특징에 말해주세요.

 이 질문은 typescipt에 대한 이해를 묻는 질문으로, next.js와 같이 실무에서 많이 사용하는 javascript의 슈퍼셋으로 사용해보는 것을 추천하고, 그럴 여유가 없다면 특징과 장단점 정도는 알고 가는 것이 좋을 것 같다.

2022.11.23 - [javaScript] - TypeScript

TypeScript

 

12. TS의 generic에 대해 아시는 만큼 설명해주세요.

 이 질문 또한 typescript에 대한 이해도를 확인하는 질문이였다.

 

 generic은 데이터 타입을 일반화해주는 작업이다. 즉 데이터 타입을 하나가 아닌 다수의 데이터 타입으로 지정할 수 있게 해주는 문법이다.

 generic을 사용하지 않는다면 다양한 타입을 파라미터로 받는 경우 타입별로 코드를 작성해야하여 범용성이 떨어진다. 이를 방지하고 any를 사용한다면 자료의 타입을 제한할 수 없을 뿐더러, 이 function을 통해 어떤 타입의 데이터가 리턴되는지 알 수 없다.

 

13. 프로젝트를 진행하다 백엔드의 문제로 에러가 날 경우 혹은 개선이 필요한 부분이 생길 경우, 어떻게 이 문제를 해결할 것이고, 어떤식으로 백엔드 팀원에게 도움을 줄 수 있을까요?

 인성 질문 + 백엔드 지식에 대한 질문이다. 개인적으로 사이드 프로젝트와 직장 프로젝트를 진행하며 겪은 경험을 토대로 답변하였다. 개인적으로 백엔드에 대한 지식이 깊지 않아 해당 질문이 만족스러운 질문이였는지는 잘 모르겠다...

 

 

14. 회사 입장에서 개발 실력이 뒤떨어지는 직원을 해고하는 것이 맞을까요? 어떻게 생각하시는지 자유롭게 말씀해주세요.

 해당 질문은 인성 질문 + 개발 가치관을 본 질문 같다. 인성 질문의 특성상 딱히 정해진 답을 본다기보단 면접자에 대해 궁금해서 물어본 질문 같다.