프론트엔드 개발자 로드맵 및 공부 순서ㅣ기술 면접 질문, 포트폴리오

프론트엔드 개발자는 웹을 사용하는 유저가 눈으로 보는 모든 영역을 구축하고 기능을 구현하는 직무입니다. 화면의 기본 뼈대를 구성하는 컴퓨터 언어인 HTML, CSS, JavaScript(자바스크립트)를 필수적으로 이해하고 있어야 하죠. 뿐만 아니라 프론트엔드 프레임워크에 대한 이해도 프론트엔드 개발자로 일하는 데 꼭 필요한 부분입니다.

오늘은 프론트엔드 개발 분야로 취업하고 싶은 분들이 어떻게 방향을 잡아 공부해야 할지, 어떻게 취업 준비를 하면 좋을지 소개해드립니다.

---

프론트엔드 공부 로드맵 🗺

프론트엔드 개발 공부 방향을 어떻게 잡아야 할지, 어디서부터 시작해야 할지 막막한 분들이라면 포털 검색 창에 ‘프론트엔드 개발자 로드맵’ ‘프론트엔드 공부 로드맵’ ‘Front End Developer Roadmap’을 검색하여 어떤 순서로 학습해야 하는지 큰 그림을 먼저 확인하시길 권장드립니다. 이미 프론트엔드 개발 분야를 독학하고 현업에서 일해본 많은 선배 개발자들이 추천하는 학습 순서이니 참고하면 도움이 되실 거예요.

아래 프론트엔드 공부 로드맵을 처음 보시는 분들이라면 방대한 길이에 당황하실 수도 있어요. 특히 처음부터 끝까지 독학해야 하는 비전공자라면 모든 것을 익혀야 한다는 부담감에 힘이 빠지실 수도 있고요. 하지만 걱정하실 필요 없어요! 회사에서는 아래에 나와 있는 모든 스킬을 요구하지 않고, 회사마다 필요로 하는 스킬 셋이 조금씩 달라요. 따라서 필수로 알아야 하는 언어부터 하나씩 차근차근 공부해나가면서 원하는 회사에서 요구하는 스킬까지 찬찬히 준비한다면 기본기가 탄탄한 프론트엔드 개발자로 성장하실 수 있을 거예요.

신입 프론트엔드 개발자가 되고 싶다면
어떤 순서로 공부해야 할까요? 📖

그렇다면 프론트엔드 개발자 로드맵 2022 버전을 앞부분만 간단하게 같이 살펴볼까요? 보라색 체크 표시가 되어 있는 부분은 필수로 알아두면 좋은 내용입니다.

인터넷 (Internet)

• 인터넷(Internet)은 어떻게 작동할까?
• HTTP는 무엇일까?
• 브라우저(Browser)는 무엇이고 어떻게 작동할까?
• DNS는 무엇이고 어떻게 작동할까?
• 도메인 이름(Domain Name)은 무엇일까?
• 웹 호스팅(Web Hosting)은 무엇일까?

필수 언어 HTML, CSS, JavaScript

HTML 기초 문법과 베스트 프랙티스

• 기본 학습
• HTML 폼과 유효성 검사

CSS

• CSS 레이아웃 구성
• CSS 반응형 디자인과 미디어 쿼리

JavaScript

• 문법과 기본 구조
• DOM
• Ajax 요청
• ES6과 자바스크립트 모듈
• Scope

앞서 말씀드린 것처럼 프론트엔드 개발자는 웹 화면을 다루고 있기 때문에 인터넷과 프로그래밍 언어를 이해하는 것이 필수적입니다. 특히 HTML, CSS, JavaScript는 웹 애플리케이션의 동작을 구현하는 데 필요한 기본 언어로 프론트엔드 개발 공부 단계에서 가장 선행되어야 합니다.

위에서 설명해드린 내용 이외에 JavaScript 언어를 더 공부하고 싶다면 호이스팅(Hosting), Event Bubbling, 프로토타입(Prototype), Shadow DOM, Strict Mode 개념 이해 부분도 쉽지 않은 부분이나 차차 공부해나가면 좋습니다.

프론트엔드 독학, 시작부터 막막하다면?

독학으로 프론트엔드 개발을 공부하는 방법도 있지만 부트캠프를 통해 웹 프론트엔드 개발의 기초지식을 배우는 방법도 있습니다.

코드스테이츠에서는 HTML, CSS의 기초와 활용에 대해 공부하고 JavaScript의 기초와 핵심 개념에 대해 배울 수 있습니다. JavaScript 프로그램 작성을 위한 핵심 개념을 익힌 후, 코드를 분석하고 오류를 찾는 연습도 진행하죠. 또한 연습문제 및 과제를 제공하여, 자신이 작성한 코드가 맞는지 틀린지 수강생 자신이 직접 테스트를 돌려보고 확인하는 유닛 테스트, 통합 테스트(integration test)도 진행합니다. 이를 통해 수강생은 스스로의 문제점을 파악하고 개선하는 과정을 거치며 문제 해결 능력을 향상시킬 수 있습니다.

프론트엔드 개발 부트캠프 과정을 통해 웹 프론트엔드 개발 영역을 공부하면 단순 이론뿐 아니라 페어 프로그래밍, 프로젝트 등을 함께 진행하며 협업 능력도 키울 수 있는 게 특징입니다.

개발자로 일하려면 모르는 것에 대해 답을 주도적으로 찾아 나서는 자세가 필요합니다. 코드스테이츠에서는 수강생과 코치들이 함께 모르는 것을 질문하고 답변하는 질의응답 플랫폼 아고라스테이츠를 통해 모르는 부분에 대해 도움을 요청하고, 내가 아는 문제는 직접 답변을 달아주기도 하며 혼자 공부할 때보다 더 적극적으로 공부할 수 있어요. 상대방에게 도움을 주었다는 뿌듯함과 보람도 덤으로 얻을 수 있고요.

코드스테이츠의 김인기 대표는 프론트엔드 분야를 “전공자든 비전공자든 공부하지 않으면 추월당하는 분야”라고 정의했는데요. 과거처럼 가벼운 웹 페이지 이외에도 무거운 프로그램 자체가 웹에서 쓰이는 경우가 많아졌기 때문입니다. 코드스테이츠 부트캠프를 수료한다면 학습이 끝난 후 코드아일랜드라는 졸업생 커뮤니티 플랫폼을 통해 꾸준히 커리어 발전을 위한 공부를 이어 나갈 수 있어요. 비슷한 관심사를 가진 수료생들과 모각코, 북클럽 등의 활동을 가질 수도 있죠. 작년인 2021년에만 100개 이상의 커뮤니티 행사가 진행되었어요.

만약 아직 프론트엔드, 백엔드 중 어떤 분야로 커리어를 시작할지 정하지 못한 분들이라면 코드스테이츠 개발 부트캠프에서 준비한 엔트리 코스를 통해 프론트엔드 개발을 직접 경험해보며 고민 해결의 실마리를 찾아볼 수도 있어요.

프론트엔드 개발자 취업 TIP
– 이력서 작성 & 자주 나오는 인터뷰 질문 📇

이력서를 처음 작성해보는 주니어 개발자 지망생이라면 이력서를 어디서부터 어떻게 작성해야 할지 막막하실 텐데요. 이력서는 내 커리어를 요약하여 원하는 회사에 면접을 볼 기회를 얻기 위한 문서입니다. 프론트엔드 개발자 커리어와 관련된 내용이 눈에 띌 수 있게끔 일목요연하게 정리하는 것이 중요합니다.

예비 프론트엔드 개발자를 위한
이력서 작성 체크리스트

이력서 작성 전

- 현업 개발자 이력서를 충분히 찾아보고 참고합니다. 
- 분량이나 포맷보다는 내용에 집중합니다.

이력서 작성 시

- 무조건 많은 양의 스킬 셋을 작성하기보다 JD와 핏이 맞는 프로그래밍 언어 & 프레임워크 & 라이브러리 등을 부각합니다.
- 팀 프로젝트의 경우 자신의 정확한 역할과 성과를 드러냅니다.
- 꾸준히 관리해온 GitHub, 기술 블로그 계정이 있다면 적극적으로 어필해도 좋습니다.

이력서 제출 전

- 맞춤법 검사는 필수로 진행합니다.
- 이력서는 혼자 보는 문서가 아님을 인지하고 3명 이상의 피드백 받아 부족한 점을 보완합니다.
- 모바일, PC에서 각각 열어보고 가독성을 체크합니다.

자주 나오는 면접 질문

개발자 면접은 다른 직무와 다르게 일반 면접과 기술 면접이 있습니다. 기술 면접은 손코딩이라 불리는 간단한 코딩 테스트를 본 후 진행하는 기업도 있고, 손코딩을 대신해서 프로그래밍 언어에 대한 생각이나 지식을 말로 답하는 형태로 진행하는 경우도 있습니다. 일반 면접과 질문 면접에서 어떤 질문이 자주 나오는지 간단하게 살펴볼까요?

일반 면접 질문 예시

- 우리가 지원자를 뽑아야 하는 이유는?
- 프론트엔드 포지션을 선택한 이유는?
- 개발자로의 단기적, 장기적 커리어 목표는?
- 스트레스를 해소하는 방법은?
- 다른 사람이 평가하는 당신은 어떤 사람인가요?

기술 면접 질문 예시

HTTP HTTP 프로토콜에 대해 설명해주세요.
Browser 브라우저 렌더링 작동 원리에 대해 설명해주세요.
Network 프록시 서버가 필요한 이유에 대해 설명해주세요.
CSS id와 class 셀렉터의 차이점에 대해 설명해주세요.
JavaScript 호이스팅과 Temporal Dead Zone이 어떻게 연관되어 있는지 설명해주세요.
React JSX가 무엇인가요?
Node.js Event Loop에 대해 설명해주세요.
DOM event.preventDefault()의 역할이 무엇인지 설명해주세요.
보안/인증 CORS에 대해 설명해주세요.

코드스테이츠 프론트엔드 개발 부트캠프 과정을 수강한 후에는 5일간의 잡 서칭 프로그램이 준비되어 있는데요. 개발자를 위한 이력서 작성법부터 자기소개서 작성법, 기술 면접 대비까지 구직활동에 필요한 다양한 학습 과제와 1:1 맞춤 커리어 코칭을 제공합니다. 이는 인지과학적 구성주의를 기반으로 수행역량중심의 4C/ID(Four-Component Instructional Design) 모형을 기반으로 설계 되어 수강생의 커리어 준비를 체계적으로 도와드려요.

특히, 위에서 예시로 든 것 일반 면접과 기술 면접 질문 외 더 다양한 예상 질문을 제공하고 직접 답변을 작성해본 후 다른 수강생들과 실전처럼 롤플레잉을 진행해보며 면접에 철저하게 대비할 수 있어요.

프론트엔드 개발자 포트폴리오,
어떤 내용을 담아야 할까요? 📨

포트폴리오란 나의 이력 및 경력, 실력 등 이력서에 못다 한 이야기를 시각화한 자료집입니다. 웹사이트나 PPT, 노션 페이지 등 다양한 방법으로 제작해 나 자신을 소개할 수 있습니다. 많은 기업에서는 개발자 채용에서 포트폴리오가 필수가 아닌 선택사항인 경우가 많지만, 프론트엔드 개발자로서의 내 역량을 잘 드러낼 수 있는 개성 있는 포트폴리오라면 플러스가 될 수 있겠죠?

프론트엔드 개발자의 포트폴리오에도 정해진 양식이 있는 것은 아닙니다. 만약 내가 개인적으로 진행한 개발 프로젝트나 팀 프로젝트가 있다면 프로젝트 목적과 소개, 구현 내용을 잘 정리하여 포트폴리오로 활용하는 것이 좋습니다.

코드스테이츠 부트캠프에서는 포트폴리오를 만들 수 있는 퍼포먼스 위주의 프로젝트 진행이 커리큘럼에 포함되어 있어 내가 공부한 내용을 알찬 포트폴리오로 정리하는 데 도움이 됩니다.

독학보다 더 체계적인 프론트엔드 개발 공부를 원한다면? 💻

코드스테이츠 프론트엔드 부트캠프

코드스테이츠는 비전공자 분들까지 학습할 수 있는 프론트엔드, 백엔드 과정을 운영하고 있으며 사용자 친화적인 웹 서비스를 만드는 개발자로 성장시키기 위한 체계적인 커리큘럼을 제공하고 있습니다. 페어 프로그래밍과 팀 프로젝트 협업을 통해 커뮤니케이션 역량을 쌓고, 메타인지 학습모델을 적용한 학습 콘텐츠 및 알고리즘 문제를 푸는 데일리 코딩 시간을 통해 문제해결 능력을 키울 수 있죠.

프론트엔드 개발자 커리어로 나아가길 희망하고 있다면 코드스테이츠 프론트엔드 부트캠프에서 실무 역량과 협업 능력을 갖춘 개발자로 성장하세요!

_{글&편집 조주연 Content Manager}

---