프론트 엔드 개발 직군 면접 경험 공유

나는 웹 퍼블리셔, UI 개발자로 HTML, CSS, JS 등 웹 프론트 영역에서 꽤나 일하다가 개인 사정으로 업계를 떠나게 되었다. 내가 퇴사하기 1–2년전 쯤부터 React, Angular, Vue 같은 JS를 이용한 SPA 기술이 발전하며 프론트 엔드 개발자라는 더 넓은 범위의 직군 명칭이 생겼고 이 중 서버와 통신을 하고 SPA를 구현하는 JS 개발자들이 대표 직군으로 자리잡게 되었다. (내 느낌상)

JS 표준과 트랜스파일러의 발전으로 JS 프로그래밍 방식의 수준이 한층 높아졌고 SPA 구현에 서버와의 통신이 중요한 부분을 차지하고 있기에, 공급보다 수요가 많아 한참 뜨고있는 JS 개발 직군은 마크업 개발자 출신보다는 서버 개발자 출신이 더 수월하게 진출하는 상황이다.

하지만, 나도 업무간 JS나 AJAX 등을 자주 다루었고 퇴사후에도 NodeJS나 MongoDB, React Native를 조금씩 배우며 개인 프로젝트를 해왔었기에 부족한 부분은 실무를 하면서 공부해 보겠다는 생각이 있었고, 다시 일을 시작하는 김에 이왕이면 JS 개발까지 포지션을 넓히고 싶어 JS 개발 관련 채용 공고들에 주로 입사 지원을 하게 되었다.

결론적으로 나는 이에 대한 역량이 부족하였기에 도전이 쉽지 않았고 다시 웹 UI 개발자 직군으로 일을 하게 되었다. 하지만 몇번의 면접들을 통해 현 시대의 프론트 엔드 개발자들에게 대략적으로 어떤 경험과 지식을 원하는지 알 수 있었다. 나도 회사를 자주 옮기진 않은 편이라 이런 정보를 잘 몰라 구직간 힘들었던 부분이 있어 프론트 엔드 개발 직군을 지원하려는 비슷한 상황의 분들에게 조금이나마 도움이 되고자 면접간 받았던 질문들을 기억나는대로 정리하여 공유해본다. (사람마다 생각이나 답의 차이가 있기에 문항만 작성)

일단, 면접을 보며 느낀점들을 정리하자면

- 단편적 기술도 중요하지만 원리나 스펙, 트렌드에 대해서 꾸준한 관심이 필요 (관련 서적이나 표준 문서를 몇번씩 반복하여 읽어보는 것을 추천)
- 채용 공고를 보면 전반적인 기술 트렌드를 파악하는데 도움이 됨 (스타트업이 상대적으로 더 트렌디함)
- 업계의 인력 순환이 타 직종보다 빠른편이라 좋아도 싫어도 어딜가든 만날 수 있기 때문에 평소 주변 사람들과 원만한 관계를 유지
- 면접관과의 궁합이나 상황에 따른 운도 중요한 요소이니 떨어졌다고 너무 자신을 탓하지 말자
- 하지만 마무리는 자신의 부족함을 조금이라도 느껴야 앞으로 발전할 수 있다 (남탓은 떨어진 날 까지만 하자)

아래부터는 면접간 받은 질문 항목이다. (카테고리는 분류했으나 항목은 서너군데 회사에서 받았던 질문이 섞여서 나열되어 있음)


손코딩 (구현 방식은 대부분 자유)

  • 이미지 슬라이더 코드 작성 (HTML, CSS, JS)
  • 서버와 다중 클라이언트간 데이터 동기화가 되는 페이지 구현
  • 데이터 교환이 실시간으로 이루어지는 페이지 구현
  • 문장 중간 문자를 변경하는 문제 : 알고리즘 문제를 풀었던 것이 도움
  • Angular 기본 예제의 빈칸 작성 : Angular를 스터디 하지 않아 풀지 못함
  • Cascading 우선순위 계산

JS

  • 디자인 패턴의 종류 및 설명
  • 함수형 프로그래밍에 대한 의견
  • 웹 어플리케이션 제작간 메모리 관리 고려 경험
  • 호이스팅, 클로저 설명
  • Promise, Async/Await, Generator 설명
  • Event Delegation, 버블링 설명
  • Prototype 기반 프로그래밍의 단점이 있다면?
  • 불변, 가변 객체 설명

테스트

  • 테스트 자동화 종류(TDD, BDD, DDD 등) 및 설명
  • 안드로이드, IOS 에 대한 테스팅 방법 및 다르게 구현해야 하는 이슈 경험 사례
  • 브라우저 지원 범위 및 설정 이유

HTTP

  • 주소를 칠때부터 사용자에게 보여질때까지 웹페이지가 렌더링 되는 과정 설명
  • SSL에 대한 전반적인 설명
  • HTTP 헤더값 중 connection의 keep-alive 속성 설명
  • RESTFul CRUD 메소드에 대한 및 설명 : GET, POST, PUT, DELETE
  • 세션 쿠키 설명
  • HTTP 응답코드 200, 300, 400, 500번대별 설명

SPA

  • React의 state와 구 AngularJS의 2 Way 바인딩의 차이 : SPA 구현 경험이 없고 React 로 스터디 중인 상태였는데 대부분 Angular를 사용하거나 도입 예정이었기에 SPA 질문 자체가 거의 없었음

서비스

  • 빅데이터 기반으로 차트 개발시 고려 사항 (SPA 기반)
  • NodeJS 단점과 해결 방법 : 콜백 헬에 대한 질문이었음
  • CDN 설명
  • 점진적 향상과 우아한 낮춤 설명
  • 이력서에 제출한 개인 프로젝트에서 NodeJS와 MongoDB를 사용한 이유
  • 구글 아날리틱스 사용 경험

보안

  • 보안을 고려하여 코딩했던 경험 사례

환경

  • 코드 템플릿 시스템 사용 경험 : 일부 업무가 코드 템플릿 엔진을 사용하고 있어 빠른 적응에 대한 확인 의도
  • 경력동안 새로운 기술이나 환경을 적극적으로 도입하려는 편이었는지, 상황상 수월하지 못했다면 그 상황을 바꿔보려는 노력은 했는지
  • 긴 경력간 서버 개발로 전향해볼 생각은 없었는지
  • Git 사용 경험
  • 다국어 페이지 제작 경험