프론트엔드 첫번째 면접복기

김영현·2024년 7월 20일
3

잡담

목록 보기
4/6

첫 면접을 보다

한달내내 서류 불합을 맛보니 초조하고 우울했던 감정도 무뎌졌다.😯 다만 이 길이 내게 맞는지에 대한 의구심이 있었다. 내세울 것 하나 없는 초라한 이력서에 적을 문구라곤 캠프 경험뿐. 그 마저도 잘 꾸며내지 못했다.

그러다가 최근 한 회사에서 면접 제의가 들어왔다. 첫 면접이라니! 하지만 최근 일과 예비군으로 인해 바빴던 터라 준비할 시간이 많지는 않았다. 실내교육을 받을때 간간히 수첩에 적어둔 내용을 보고, 퇴근하고 두세시간 짬을 내어 면접 질문 리스트를 추렸다. 사실 핑계다. 그러게 평소에 좀 준비하지...😅

떨리는 맘을 부여잡고 판교에 위치한 회사로 향했다. 그동안 얘기만 들어보고 가본적은 없었는데, 죄다 IT기업인 것 같았다. 칼라셔츠와 면바지에 백팩 조합이 많았다. 역쉬 개발자인가?

경기도민의 비애답게 한 시간 정도 일찍 도착했다. 아침에 마신 커피를 소화하기도 전에 카페에 들려 또 커피를 마셨다. 시간이 될때까지 열심히 작성한 면접 질문 리스트를 훑어봤다. 어느새 오전10시가되어 면접실에 입장했다.


자신감 있게 준비한 질문들, 그런데...?

프론트엔드 개발자의 핵심인 js와 리액트, 개발자라면 당연히 알아야할 CS지식등을 알차게 준비해갔다. 특히 js와 리액트는 정말 자신있었다. 외운게 아니라 술술 나올만큼 몸소 이해하고 있었다.

면접실에 앉아있자 개발자로 보이는 두 분이 함께 들어오셨다. 그리고 기술질문이 시작되었다.


기술질문 리스트

JS의 동작원리에 대해 설명해보세요

첫 질문을 받으니 숨이 막혔다. 긴장해서 손이 벌벌떨렸다. 머리가 하얘지는듯 했다. 그래도 대답은 해야하니까 굳은머리를 열심히 굴려본다. 동작원리라...감이 잡히질 않았다. 질문의 요지를 파악하지 못한 채 헛소리를 늘어놓기 시작한다.

제가 질문을 잘 이해하지 못했습니다. 동작원리가 혹시 컴파일 과정을 말하는 걸까요?

면접관분이 정확히 어떻게 답변하신지 기억나진 않지만, 편한대로 하시라는 의미로 이해되었다. 그렇게 V8엔진을 이용한 JS의 동작 과정(컴파일, 토큰화, 추상구문트리, 인터프리터, 최적화와 바이트코드, cpu에서 동작)까지를 이야기했다. 나름 뿌듯했다. 많은 신입이 아는 지식은 아니라고 생각했으니까.

헛소리라는 건 면접장을 나오고 나서야 깨닫게 되었다.
JS의 동작원리를 물어본건 싱글 스레드, 싱글스레드인데 비동기를 어떻게 처리하는지(이벤트 루프)등이 아니었을까 싶다.

첫질문에 헛다리를 짚었지만 당시엔 알아차리지 못해 다음 질문에 또다시 자신감 넘치게 대답했다.

React의 동작원리에 대해 설명해주세요

이전 질문과 타겟만 다른 질문이다.

렌더링이 트리거되면 렌더페이즈, 커밋페이즈 발생, 2개의 트리(WIP, current), reconiliation, 트리 비교하는것이 vdom이고 패턴에 가깝다, v18에서 사용중인 batching(상태 업데이트를 한 번에 모아 실행)등을 대답했다. 사실 요점에 부합하는 답변인지는 모르겠다. 단순히 state나 props가 바뀌면 리렌더링된다부터 시작했어야 하나...🤔

Promise.all과 Promise.allSettled의 차이

면접 질문 순서가 정확하진 않은데, 기억나는대로 작성중이다.

아무튼 이 질문은 완벽에 가깝게 대답했다고 느껴졌다.
Promise를 직접 구현할때 관련 메서드도 같이 구현한 적이 있다. 따라서 Promise.all은 배열에 넘겨진 원소가 모두 resolve되었을때 fulfilled된다고 하였다.

Promise.allSetteld는 구현이나 사용해본적이 없었다. 따라서 추측이라는 말을 덧붙였다.

제가 사용해본 메서드는 아니지만, 메서드의 이름으로 추측하건대 모든 원소가 pending상태를 벗어나야만 resolve될 것 같습니다.

검색해보니 동작은 맞았다. 하지만 둘의 차이인 하나라도 실패하면 rejected, 모든 promise가 실패해도 fulfilled라는 점을 말하지 못한 점이 조금 아쉽다.

질문의 요점이 무엇인지 빠르게 파악하는 능력은 정말정말 중요하다. 상사의 지시에서 핵심만 골라뽑.

동시성과 병렬성의 차이(대답못함)

아...이부분은 분명 concurrency와 parallel이라는 주제로 많이 들어봤던 지식이다.

  • 동시성 : 순차적으로 진행하지만, 빠르게 전환되어 마치 동시에 실행되는 것 처럼 보임(싱글코어 CPU 같은 원리)
  • 병렬성 : 각 태스크를 동시에 진행한다. (멀티스레드 원리)

위처럼 알고있던 지식이지만, 놀랍게도 전혀 말이 나오지 않았다. 그래서 그냥 모른다고 대답했다.😥
살짝 희미해진 지식이었는데 면접에서 듣게되어 복습하는 시간을 한 번 가져야겠음.

flux 패턴이란?

MVC패턴과 비교하며 설명햇다. 특히 페이스북에서 MVC패턴을 사용했을때 발생한 알람 버그를 언급하여 이는 양방향 데이터 흐름으로 인한 혼잡도 증가. 이를 해결하기위해 FLUX패턴 도입.

action => dispatcher => store => view => action...

플로우는 이렇게 흐른다고 설명하였다. 나름 잘 대답한 것 같기도하고?

REST API를 사용한 이유(GraphQL), REST API에 대해서

시장점유율(안정성)을 이유로 들었다. GraphQL은 한 번 사용해봐서 클라이언트측에서 원하는 데이터를 쉽게 정제해서 가져올 수 있는 것으로 안다.

REST API는 REST한 API를 나타내며, 자원 행위 표현으로 이루어져있고, 주로 명사로 작성하되 행위는 HTTP 메서드를 이용해야 한다.
HTTP메서드는 GET,POST,DELETE,PUT등이 있고 이중 GET,DELETE는 연산을 여러번 해도 값이 달라지지 않는다는 멱등성을 가지고있다 라고 답하였다.

REST API는 아주 깊게 알고있진 못하여, 답변이 조금 얕았다. 역시 면접을 봐야 부족한점을 객관적으로 파악할 수 있다.

react-query에 대해서

비동기 상태관리 라이브러리, 이 라이브러가 등장하고 나서 서버-클라이언트 상태관리 패러다임이 유행함. 캐싱 기능, 쿼리키, 다른 탭 클릭시 refetch 기능이 디폴트값으로 있고...등을 설명하였다. cacheTime과 staleTime에 대해 설명하지 않은 건 조금 아쉬운 부분이다.

어떤 상태관리를 사용해봤는지, 라이브러리 사용해본 것들

이건 그냥 써본 것들중 사용할 수 있는 기술을 나열했다.

프로젝트 흐름 설명

대답하기까지 많은 생각이 들었다. 어디부터 어디까지 설명해야할까? 일단 컴포넌트 단위로 쪼개어 설명하였다.
어디서 SSE를 사용해서 데이터를 주고받고, 어디서 Websocket을 사용해서 주고받고...어디서는 url대신 state를 이용해서 탭처럼 관리한다던가? 더는 생각이 나지 않을때쯤 면접관님들이 상태는 어떻게 관리하나요?, 비회원은 어떤 상태를 가지나요?등 질문을 해주셔서 아차 싶었다. 그래도 물어본 내용들에는 잘 대답한 것 같다(?)😓

앞으로 프로젝트의 흐름을 물어볼때 어떻게 대답할지 고민해보자! 단순히 컴포넌트의 구조를 물어보시는 건 아닐거다.


인성면접

기술면접을 보다가 도중 인성관련 질문들이 나와서 따로 정리해보았음.

협업시 힘들었던 점

데브코스를 진행하며 팀장과 팀원을 한 번씩 경험해보았기에 할 말이 꽤 있었다.
팀장일땐 일정관리, 의사 결정-조율 등 리더의 고충을 헤아릴 수 있는 계기가 되었고, 그러한 문제가 생겼을때 해결한 방법을 말하였다.
팀원일땐 서로의 개발 진행속도에 대해서 얘기했었는데, 이때도 마찬가지로 해결방법을 이야기했다.

마음에 드는 출시 프로세스(방법론)

아마 워터폴vs애자일을 물어보신 것 같다.

기획부터 탄탄히 하면 정말 좋겠지만, 현실에 타협하여 빠르게 출시하여 피드백을 받고 수정하는 방식을 택하게되었다. 이렇게 답변 드렸더니, 회사측에선 기획부터 탄탄히 하는 방식을 선호하신다 하였다. 나도 기획이 탄탄한게 좋다고 하며 빠르게 출시하는 방식도 나름만의 맛이 있다고 했음!

백엔드 이야기

프론트엔드를 지원했는데 만약 나중에 백엔드도 맡게 되실수도 있다고 하였다. (프론트 업무 적응이후, 바로 투입도 아니고 백엔드 배울 시간도 주신다고 하였다)
솔직히 성장을 위해서 기본적인 백엔드 지식, 백엔드 코딩능력은 필수라고 생각했다. 결국 개발자는 문제를 해결하는 사람이다. 언어, 프레임워크는 도구일 뿐이다.

백엔드도 흥미가 있음 + 성장을 원함 + 업무량이 2배가 될텐데, 주어진 일을 다 처리하지 못할 것 같은 걱정(할 수 있음을 어필)등을 섞어 대답하였다. 나름 긍정적인 반응이었던 것 같기도 한데 잘 모르겠다😮

특이한점은 백엔드가 파이썬이었다.

마지막 질문

여쭤볼게 있냐고 하셔서 짱구를 좀 굴렸는데 딱히 없었다. 어차피 합격할 회사라면 입사했을 때 알게되고, 떨어질 회사라면 궁금할 필요가 없었다. 다만 떨어지게 된다면 한 줄 짜리 피드백이라도 괜찮으니 메일로 보내주실 수 있냐고 했더니 그정도는 가능하다고 흔쾌히 수긍해주셨다.

번외) 대표님 질문

대표님도 이 다음 들어오셔서 인성면접을 진행했다. AI기업이라 그런지, 관련 질문을 많이 주셨다. 본인도 아직 개발자는 아니지만, AI에 대해 조금은 신경쓰고 있었기에 원래 생각하고 있던대로 답변드렸다. 특히 생성형AI시대에 개발자가 어떻게 해야할지에 대해서는 면접이 끝난 지금도 열심히 고민해봐야 할 주제이지 않을까 싶다.

마지막 쯤 본인이 비전공자인데, 그 사람들과 격차를 어떻게 메꿀 것인지 질문이 들어왔다. 회사 입장에서는 당연한 질문이었고 나도 당연한 대답을 했다. 전공자와 비전공자의 차이는 CS지식이다. 기반이 되는 로우 레벨의 지식을 체득하고있기에, 신기술을 배울 때도 지식과 지식의 링크가 생겨 훨씬 빨리 이해할 수 있는 것이다. 따라서 독학으로 CS지식을 공부했음을 어필하였다!


후기

자신감 있게 대답할 수 있는 내용들 (이벤트루프, 싱글 스레드, 실행 컨텍스트, 클로저, 제너레이터등 JS 코어지식...)이 많이 나오지 않아서 조금 아쉬웠다! 하지만 부족한 부분이 많다는 것도 알게되었다...😭

결과는 당연히 불합이라고 생각한다. 대답을 못한 질문도 있고, 3년차 미만 공고여서 비전공 부트캠프출신은 경쟁력이 많이 떨어진다고 판단된다.
다른 사람들이 몇년에 걸쳐 준비 한걸 몇달 만에 이룩할 순 없다.

그러면 어떻게 준비해야할까?

  • 강점을 강화하는 것도 좋지만, 일단 부족한 부분들을 열심히 채운다!
  • 전공자들과의 격차를 좁히기 위하여 CS지식을 복습하자!
  • 경력과의 격차는 좁히는 것이 거의 불가능. 신입이 가진 포텐셜을 증명해보자.(이 부분이 제일 어려운 것 같다)

첫 술로 배부를 수 는 없는법!

면접을 한 번 보니 인터넷에서 떠다니던 말들을 겨우 이해한 듯 하다. 성공하기까진 수많은 거절과 실패가 동반된다. 앞으로의 거절을 겁내지 말고 도전하자!

profile
모르는 것을 모른다고 하기

0개의 댓글