프론트엔드 개발자 취업 준비 하기

이 글은 한재엽님의 블로그 글 신입 프론트엔드 개발자가 되려면 무엇을 학습해야 하나요? 를 바탕으로 하되, 제 기준과 생각을 추가하여 작성하였습니다.

 

하루에 이론공부 2시간(용어 학습 또는 CS지식 등 실습을 제외한 공부), 실습 4시간을 목표로 한다.
모든 용어나 명세 등은 키워드만 듣고도 설명할 수 있는 수준으로 충분히 이해될 때 까지 학습한다. (외우는것 X)

 

#1 언어 및 웹문서(Document) 관련 공부

1. HTML/CSS

• HTML/CSS 기본 - 명세 읽기
• 웹 접근성
• 크로스 브라우징 이슈 (정의와 특징적인 이슈 또는 내가 경험했던 이슈)
• CSS 방법론
• CSS Grid Layout
• CSS Media Query
• CSS3 Animation / Transition
• CSS 전처리기 (사용 이유, 역할, 종류 등)

2. JavaScript

• ECMAScript2015 (ES6) 문법
• DOM API (Web API) and Concept
• ES5 Core Concept
• JavaScript 동작원리 (싱글스레드, 비동기)
• Prototype Chaning
• Hoisting
• Scope
• Namespace pattern
• this
• Closure
• (개인공부목표) 프론트엔드 개발자를 위한 자바스크립트 프로그래밍 노랭이 책 완독하기

3. 프론트엔드 체크리스트 정독

• https://github.com/kesuskim/Front-End-Checklist#head

 

#2 라이브러리, 프레임워크

1. Node.js

-Node.js 교과서 책 완독 및 실습

2. React.js

-리액트를 다루는 기술 책 완독 및 실습

3. Vue.js

-인프런에서 관련 강의 찾아서 실습

** NomadCoder 클론코딩

-클론코딩으로 webpack, sass, react, vanillaJS, NodeJS, mongoDB 등 다양한 라이브러리 경험 및 실습

 

#3 그 외에 공부해야 할 것들.

1. Git / GitHub

• command
• fast-forward merge
• 3-way-merge
• rebase VS merge
• (GitHub) clone, fork, Pull Request
• (추가사항) git-flow, github-flow

2. 자바스크립트 생태계

• NPM
• Webpack ( + babel)
• 모듈 시스템에 대한 이해 (AMD, CommonJS) 
• 자바스크립트 동향 - 라이브러리 프레임워크 
• 자바스크립트 동향 - JavaScript(ECMAScript) 

3. 브라우저 동작 원리

• Critical Path라고 검색하면 많이 나옴
• 브라우저가 어떤 원리로 문서를 렌더링 하는가 

4. 그 외 CS 지식

• 자료구조 (각 자료구조의 특징과 사용하는 예제들 중심으로 학습)
• 네트워크 (웹 성능과 연관지어서 학습, DNS/CDN 등등..)
• 객체지향프로그래밍 (OOP)
• 대표적인 면접문제 : 브라우저의 URL 입력창에 www.naver.com을 입력하고 엔터를 치면 무슨일이 벌어질까요?
• 기술 면접 가이드 정독하기

5. 백엔드 지식

• 브라우저 렌더링 방식 (서버 사이드 렌더링 / 클라이언트 사이드 렌더링 + SPA)
• AJAX ( + CORS)
• 기본적인 백엔드 지식

6. 테스트 관련 지식

• 테스트 자동화 도구 Mocha, Chai, Jest, Selenium 중 하나 익히기 (Mocha 추천)
• 단위 테스트, E2E 테스트 등 용어 익히기
• 테스트 케이스 작성 방법