[면접 후기] 프론트엔드 신입 개발자의 면접 후기 (합격)

 

🚀

작년 10월부터 5개월간 4인 팀 프로젝트 진행하면서 리액트에 대해 혼자 공부하고 많이 배웠는데 이제 슬슬 여러 곳 지원을 해보려고 점핏에서 저의 기술 스택에 맞는 회사들 5곳을 지원하였습니다. 그중에서 한 곳에서 연락이 와서 어제(2022.03.10) 학동역 쪽에 면접을 보러 갔고 오늘(2022.03.16) 합격 문자 및 입사제의를 받아 면접에서 받은 질문들에 대해 포스팅하고자 합니다. 면접은 2대 1로 진행되었습니다.

 

📌 포트폴리오에 넣은 프로젝트 간단 설명

1. Polypoli - 관심 있는 국회의원의 피드를 받아볼 수 있는 서비스 

🔗 http://polypoli.kr/

Polypoli

프론트는 리액트로, 백엔드는 스프링 부트로 작업을 하였습니다. 리액트의 경우 클래스형 컴포넌트에 redux를 사용하였고 react-router-dom v5.3.0을 사용하였습니다. 포지션은 풀스택입니다. 아직 개발 중에 있으며 4월에 론칭을 할 예정입니다.

[Service]

• 관심 있는 국회의원의 정보(국회 회의 출결, 법안 발의 내용 등등)를 인스타그램 피드 형식으로 제공
• 피드 별 좋아요 & 싫어요 버튼
• 좋아요 & 싫어요 수 기준 유저에게 가장 관심도가 높은 국회의원 월간 랭킹
• 이번 주 핫한 법안
• 현재 팔로잉 중인 국회의원 목록
• 국회의원 프로필 및 검색 기능 

 

2. Chatting-App

socket.io와 express를 사용한 간단한 채팅 서비스

채팅 서버로 접속 시 Pug로 만든 페이지를 클라이언트로 전송하도록 하였고 사용자는 채팅 및 닉네임 변경이 가능합니다. 유저가 채팅방에 참여, 종료, 닉네임 변경 시 채팅 로그에 알림이 뜨도록 하였습니다.

 

 

👀 첫 질문

😄 안녕하세요~ 저는 ~ 직책을 맡고 있는 ~입니다. 반갑습니다.

네 안녕하세요~!

😀 혹시 뭐하다 오셨나요?

저 집에서 프로젝트 작업하다가 왔습니다!

 

😀 자기소개

💡  자기소개 부탁드립니다.

저는 기계공학과를 졸업하였고 비전공자로 개발 공부를 하고 있습니다. 개발에 관심이 있음을 보이기 위해 2년 전부터 현재까지 개발 블로그를 운영 중이고, 주로 알고리즘 문제풀이, cs지식, 에러 해결법, 언어 문법(메서드 사용법 등등) 관련하여 포스팅하고 있습니다. 작년 10월부터 현재까지 팀 프로젝트를 진행하고 있습니다.

💡  본인의 장단점을 설명해주세요.

장점에 대해 제 평가가 아닌 주변 사람들의 평가로 말씀드리자면 저는 매사에 열정이 넘친다는 얘기를 많이 들었습니다. 대신 단점은 잠이 좀 많다는 것입니다. 하나에 꽂히면 밤늦게까지 붙들고 있어서 늦게 잘 때도 많습니다.

 

💼 Project 관련 질문

💡 폴리폴리 서비스에 대해 어떠한 서비스인지 설명해주세요.

자신의 지역구 국회의원이 누구인지 잘 모르는 경우가 많고 열려라국회와 같은 국회 사이트에서 원하는 정보를 찾기에는 접근성이 떨어진다고 생각하였습니다. 만약 인스타그램의 피드처럼 자신이 관심 있는 국회의원에 대한 정보를 피드 형식으로 받아볼 수 있으면 좋겠다는 생각에 개발을 시작하게 되었습니다.

로그인, 회원가입, 계정 찾기가 가능하고 메인 페이지의 경우 피드 탭에서는 팔로우 중인 국회의원의 대한 정보, 랭킹 탭에서는... (중략)

그러한 서비스를 제공하고 있습니다.

💡 데이터들은 어디서 받아오시나요?

국회의원 300명에 대한 정보는 공공데이터 포털에서 제공하는 API에서 받아오고 있으며, 국회의원이 발의한 법안 내용의 경우에는 국민참여입법센터에서 node로 크롤링하여 받아오고 있습니다. 공공데이터 포털처럼 API로 제공해주었으면 정말 좋겠는데 아무리 찾아봐도 관련 API가 존재하지 않는 것 같습니다.

💡 아까 전에 오시기 전에 포트폴리오에 있는 polypoli URL로 접속해서 한번 봤는데 문자인증 부분이 적용 안된 것 같습니다.

원래는 실제로 문자인증이 되도록 해야 하는데 다른 부분 작업하느라 바빠서 아직 작업하지 못하였습니다.

💡 로그인을 하지 않고는 피드 탭, 랭킹 탭 등등을 볼 수 있나요?

리덕스로 userKey라는 state를 default로 -1로 주고 로그인 시 store의 uerKey 값을 DB의 PK값으로 업데이트되도록 하였습니다. 그렇기 때문에 꼭 로그인을 하여야 메인 페이지를 볼 수 있도록 하였습니다.

💡 그렇다면 모든 컴포넌트에서 userKey를 검사하여 라우팅 하나요?

최상단에 Router.js라는 파일을 만들어두고 여기에서 store의 userKey를 받아와서 라우팅 처리를 하였습니다.

💡 만약에 사용자가 접속 중에 있다가 네트워크 불안정으로 접속이 끊어졌다고 가정할 때 다시 연결은 어떻게 할까요?

혹시 jwt 같은 웹 토큰 말씀하시는 건가요? 그 부분은 아직 잘 모르겠습니다.

💡 리액트 함수형 컴포넌트가 아닌 클래스형 컴포넌트를 사용하셨는데 이유는?

함수형 컴포넌트에 Hook을 사용하고 싶었으나 팀원이 클래스형 컴포넌트로만 작성이 가능하고 백엔드 개발자 직장인이기도 해서 새롭게 배울 시간이 없어서 클래스형 컴포넌트로 작성하기로 협의를 했습니다. 저는 개인적으로 함수형 컴포넌트를 선호해서 현재 개인 토이 프로젝트로 진행 중인 ToDo List App에서는 함수형 컴포넌트를 사용하고 있습니다. 그러나 프론트엔드 업무 시 이미 작성된 코드(혹은 레거시 코드)들 중에서 클래스형으로 작성된 것도 많을 테니 클래스형 컴포넌트도 어차피 알아야하는 내용이라고 생각합니다.

💡 작년 10월부터 지금까지 프로젝트 진행 중이신데 그럼 리액트 5개월 정도 하신 건가요?

정확히 말씀드리자면 작년 10월부터 12월까지 디자이너가 피그마로 UI 디자인해주었고 그 기간 동안에는 필요한 데이터들을 크롤링하는 작업과 리액트 기초를 공부하였습니다. 리액트를 한 순수 기간으로 따지면 2개월 정도라고 생각합니다.

💡 디자인할 때 부트스트랩을 사용하였나요?

부트스트랩 아이콘을 사용하긴 했는데 디자인에 부트스트랩을 적용하지는 않았습니다.

💡 앱 너비가 고정되어있는 것 같습니다. 폰마다 크기가 다를 텐데 옆에 마진으로 비어있는 부분은 왜 그런가요?

처음에 회의할 때 너비를 아이폰의 너비 기준으로 360px로 고정하기로 협의를 해서 폰마다 옆에 너비가 남는 현상이 있습니다. 

💡 채팅 앱 관련해서 어떻게 동작하는지 설명해주세요.

작업은 모두 로컬에서 작업하고 node express로 서버를 열어서 emit 되는 이벤트들을 처리하였습니다. 클라이언트는 Pug로 보여주었고 인스타그램 DM처럼 개인 메시지 가능하고 채팅룸 기능도 구현하였습니다. 이벤트 경우 클라이언트에서 특정 함수를 emit 하면 서버에서 해당 emit을 받아 처리를 하고 다시 클라이언트들에게 emit으로 수정된 내역을 뿌려주는 형식으로 처리하였습니다. 그리고 해당 채팅 내역은 MongoDB에 저장하였습니다.

💡 Pug가 뭔가요?

저도 잘 모르겠습니다.... HTML이랑 비슷하면서도 조금 다른 것이라는 것 밖에 모릅니다... ㅜ

💡 SCSS를 사용해보셨나요?

안 써봐서 잘 모르겠습니다.

💡 Babel을 써보셨나요?

안 써봐서 잘 모르겠습니다.

💡 마크업, 퍼블리싱 작업은 어떻게 하시나요?

디자이너에게 받은 UI를 피그마로 띄워놓고 리액트로 npm start 한 다음 코드 작성하고 새로고침하여 보고 다시 수정하는 식으로 작업합니다. 사실 프론트엔드 실무자분들이 어떻게 작업하는지 궁금하기도 합니다. 

 

⭐️ React 관련 질문 

리액트 관련 질문의 경우 이 글을 읽으러 들어오신 분들이 가장 궁금해할 사항이니 저의 답변이 아닌 구글링 하여 찾은 답을 적어놨습니다. 실제 면접에서 아래의 질문을 받았을 때는 70% 이상은 자신 있게 답변했던 걸로 기억합니다.

💡 state와 props의 차이는?

state는 현재 컴포넌트의 생명주기 동안에 변경될 수 있는 정보를 담고 있는 상태이고, props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다.

💡 Props Drilling이란?

Props 내리꽂기란 상위 컴포넌트에서 하위 컴포넌트로 props를 전달하는 과정을 말합니다.

깊이가 깊을수록 그 과정이 귀찮고 힘들며 예기치 못한 오류를 발생시킬 수도 있고 이것에 대한 꼬리 질문으로 이러한 현상을 해결하는 방법(전역으로 state를 관리할 수 있는 redux, context API 사용 등등)에 대한 질문이 나올 가능성이 높습니다.

💡 Redux의 정의, 필요성, 구조에 대해 설명해주세요.

리덕스는 리액트에서 사용되는 상태 관리 라이브러리 중 하나입니다. 프로젝트의 규모가 커지면 state의 전달이 복잡하고 어려워지게 되고 오류가 발생할 가능성이 높아집니다. 리덕스 사용 시 순수 함수를 사용하기 때문에 상태가 예측 가능하고 유지보수 및 디버깅에 유리하다는 이점이 존재합니다. 

• 스토어(Stroe) : 상태가 관리되는 오직 하나의 공간
• 액션(Action) : 상태 변화를 발생시킬 때 참조하는 객체 (애플리케이션에서 저장소로 보내는 데이터 묶음)
• 리듀서(Reducer) : 현재 state와 action을 이용해 다음 state를 만들어냄
• 디스패치(Dispatch) : 액션을 발생시키는 것
• 구독(Subscribe) : Subscribe 함수 안에 리스너 함수를 파리미터로 넣어주면 store의 state가 변경될 때마다 리스너 함수를 호출

💡 제어 컴포넌트와 비제어 컴포넌트의 차이점은?

제어 컴포넌트의 경우 리액트 state에 의해서 값이 관리 및 변경이 되고, 비제어 컴포넌트의 경우 ref를 통해 DOM 자체에서 form 데이터가 다뤄집니다. 가장 큰 차이점은 동기화인데, 제어 컴포넌트의 경우 사용자가 입력할 때마다 input의 state가 동기화되지만 state가 변경될 때마다 리렌더링이 발생하여 불필요한 자원의 낭비로 이어질 수 있습니다. 반면 비제어 컴포넌트의 경우 입력을 하고 버튼을 누르는 최종적인 상황에서만 input의 value에 접근을 하므로 리렌더링이 계속해서 발생하지는 않지만 입력의 최신 값에 접근하기 힘든 특성이 존재합니다.

💡 Virtual DOM에 대해 설명해주세요.

DOM과 유사한 객체를 메모리 상으로 구현하고 변경사항이 생기면 메모리에 올라간 Virtual DOM을 수정하고. DOM에 대한 비교를 수행하여 변경 사항에 대해서만 DOM에 반영합니다. 이로 인해 더 반응성이 빠른 웹을 구현할 수 있습니다.

💡 리액트 라이프사이클에 대해서 설명해주세요.

React LifeCycle은 컴포넌트가 DOM위에 생성되거나 사라질 때, 혹은 업데이트될 때 호출되는 API입니다.

• constructor : 컴포넌트의 생성자 메서드. 컴포넌트 생성 시 가장 먼저 실행되는 메서드. 초기 state를 설정
• getDerivedStateFromProps : props로 받아온 것을 state에 넣어주고 싶을 때 사용
• render : 컴포넌트를 렌더링 하는 메서드
• componentDidMount : 컴포넌트의 첫 번째 렌더링을 마치고 호출되는 메서드. 주로 여기서 비동기 요청 작업 처리
• shouldComponentUpdate : 컴포넌트를 리렌더링 할지 말지를 결정하는 메서드
• getSnapshotBeforeUpdate : Virtual DOM이 실제 DOM에 반영되기 직전에 실행. 이 메서드에서는 이전과 현재의 props와 state에 접근이 가능하고 return으로 넘겨진 값은 componentDidUpdate의 3번째 인자로 전달됨
• componentDidUpdate : 리렌더링을 마치고 화면에 변화가 모두 반영되고 난 뒤 호출되는 메서드
• componentWillUnmount : 컴포넌트가 화면에서 사라지기 직전에 호출되는 메서드

💡 함수형 컴포넌트의 장점은?

• 클래스형 컴포넌트보다 선언이 간편
• 클래스형 컴포넌트보다 메모리 자원을 절약
• 프로젝트 빌드 후 배포 시 빌드 파일의 크기가 작음(사실상 별 차이 없음)
• 리액트 16.8 버전부터 Hook으로 라이프사이클 사용 가능

💡 클래스형 컴포넌트와 함수형 컴포넌트 차이점은?

• 함수형이 클래스형보다 메모리 덜 사용
• state 사용법
• 함수형이 클래스형보다 사용하기 편함

💡 Context란 무엇인가요?

Props drilling 과정 없이 컴포넌트 트리 전체에 데이터를 제공할 수 있는 방법입니다. 리덕스의 비교대상이 아니며 상태를 관리하는 것이 아닌 Props drilling을 피하기 위해 값을 전달해주는 파이프와 같은 존재입니다.

💡 JSX란 무엇인가요?

JSX는 JavaScript XML의 약자로 자바스크립트에서 XML 유사 구문을 확장시킨 문법입니다. HTML과 같은 문법과 함께 JS를 표현할 수 있어 편리하고 가독성이 높고 작성하기 쉽습니다.

💡 리액트 훅이란?

React Hook은 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능입니다. Hook을 통해서 함수형 컴포넌트에서도 컴포넌트의 상태 값을 관리할 수 있고 생명주기 메서드 또한 사용이 가능합니다. 

💡 Hook이 추가된 리액트 버전은?

version 16.8 

💡 쿠키, 세션에 대해 아시나요?

- 쿠키

• 특정 웹서버에 접속할 때 생성되는 개인 아이디, 비밀번호 등 방문한 사이트 정보를 담은 임시파일
• 데이터 형태는 Key와 Value로 구성되고 String 형태로 이루어져 있음
• 서버가 아닌 사용자에게 저장되기 때문에 임의 수정이나 가로채기가 쉬워 보안에 취약
• 사용자의 브라우저에 저장되기 때문에 클라이언트의 자원을 사용

- 세션

• 클라이언트와 웹서버 간 네트워크 연결이 지속적으로 유지되고 있는 상태
• 클라이언트가 페이지를 이동하거나 재접속했을 때 구분할 수 있는 수단
• 쿠키에 비해 보안성이 좋으며 주로 로그인 정보 유지에 사용됨
• 서버에 데이터를 저장하기 때문에 서버의 자원을 사용

💡 Props의 Type을 강제하는 방법에 대해 아시나요?

"prop-types"라는 라이브러리를 사용하여 props의 데이터 type을 지정해줄 수 있습니다. props에 유효하지 않은 값이 전달되면 콘솔 창에 경고문을 띄웁니다.

 

❔ 궁금한 점 있으신가요?

💡 보통 처음 신입으로 들어가면 바로 실무에 투입되지 않고 과제를 받는다고 들었는데 어떠한 과제인지 여쭤봐도 될까요?

회사 By 회사인데 저희 같은 경우에는 따로 과제는 없고 실무에 필요한 트레이딩 뷰와 웹소켓에 대해 배우고 그것만 해도 50% 정도는 했다고 보시면 됩니다.

💡 커피 머신이 있나요? 아니면 아이스티라도,,,,!

에스프레소 머신 있고 아이스티는 없지만 냉장고에 음료수 많습니다.

 

 

💎 느낀 점 정리

1. 자기소개도 중요하지만 경험이 가장 중요하다.

이번 면접 과정을 거치면서 경험이 가장 중요하다는 생각이 들었습니다. 회사의 인사담당자분들마다 다르겠지만 채용하려는 지원자의 최소한의 커트라인(예를 들어 리액트로 이 페이지 정도는 3일 안에 완성이 가능한 실력인지 등등)이 있을 것입니다. 저의 경우 작년 10월부터 프로젝트를 하면서 리액트 모르는 게 있으면 구글링 하면서 배워가면서 작업을 해나갔고 그러한 경험 속에서 리액트 관련 지식이 쌓이게 되었습니다. 작년에 면접을 볼 때는 면접 가기 전에 외운 것을 답하느라 많이 횡설수설하고 힘들었으나 이번 면접은 별다른 준비를 하지 않았고 면접 가서 외운 내용이 아닌 머리에 들어있는 개념을 말하는 식으로 면접을 굉장히 편안하게 봤던 것 같습니다. 면접관분들도 아마 질문을 통해 이 지원자가 단순히 외운 내용인지 아니면 몸소 체험하면서 머리에 박힌 개념인지 아실 겁니다.

2. 생각보다 자세히 보신다.

면접관분들도 바쁘시고 자기 업무가 있으시니까 포트폴리오나 이력서에 있는 URL은 잘 안 눌러보신다고 알고 있습니다. 그런데 이번에 면접 본 곳은 이력서에서 깃헙, 블로그, 프로젝트 서비스 링크 모두 들어가 보시고 깃헙 저장소의 package.json의 내용까지도 물어보셨습니다. 정말 꼼꼼하게 이것저것 피드백과 질문을 받았고 가장 인상 깊었던 질문은 "블로그에 광고가 달려있는데 광고수익은 얼마나 되나요? 하루에 스타벅스 커피 한잔...?"이라는 질문을 받았던 게 생각이 납니다🤣 

3. 모르는 것은 모른다고 답하자.

친구가 한창 신입으로 일할 때의 경험담인데, 자기 사수가 어떤 것에 대해 아냐고 물었을 때 자기 자신이 자세히 모름에도 불구하고 안다고 대답해놓고 나중에 가서 일처리가 제대로 안되어 문제가 된 적이 있었습니다. 그러한 일을 겪고 저에게 "사수나 면접관이 질문을 할 때 확실하게 알고 있는 부분이면 확실하게 대답하고, 잘 모르는 부분이면 확실하게 잘 모른다고 대답하는 게 중요하다"라고 조언을 해주었습니다. 어차피 추가 질문이 들어오게 되어있고 거기에서 잘 모르는 사실이 들통 하면 마이너스이니까 잘 모르는 부분은 걱정 마시고 확실하게 모르신다고 답하시면 됩니다. 저도 리액트 관련 질문 중에서 잘 모르는 내용은 확실하게 잘 모른다고 답하고 전체 질문 중에서 70% 정도만 답했던 것 같습니다.

 

 

✒️ 마침표

진행 중인 프로젝트의 끝이 보이기 시작해서 한번 그냥 지원해봤는데 운 좋게도 면접을 보러 오라고 연락이 왔었고 가벼운 마음으로 면접을 갔었습니다. 면접 가서도 대답도 나쁘지 않게 하고 면접관님들도 저에 대해 궁금한 점이 많으신 것 같고 분위기도 괜찮았었습니다. 그리고 마지막에는 희망연봉도 물어보시던데 면접 끝나고 친구한테 말하니 그거 힌트일 수도 있다고 하더라구요 ㄷㄷ.... 합격 문자는 다음 주 중으로 갈 것이라 해서 오늘 무방비상태로 있었는데 아까 점심때 합격 연락 및 입사 제의가 와서 어안이 벙벙했습니다. 6개월간 준비해서 드디어 취업에 성공했고 이 글을 읽으시는 분들 모두 면접 파이팅 하시길 바라겠습니다! 궁금한 점 있으면 댓글 남겨주세요~😊