신입 FE 개발자가 되려면 무엇을 학습해야 할까?

https://jbee.io/essay/for_junior_frontend_developer/

신입 프론트엔드 개발자가 되려면 무엇을 학습해야 하나요?

좋은 글! 아직도 한참 멀었다는 것을 느낀다. 올라온 지 좀 된 글이지만 그래도 공부 방향 잡는 데에는 도움이 될 거라고 생각해 간단히 정리해봤다. 

 

Step 1.

• Git / Github
• ES6
• Javascript의 동작원리
• DOM API and Concept
• NPM
• Webpack
• HTML/CSS 기본
• CSS Media Query

 

Step 2.

• 자료구조, 네트워크를 비롯한 CS지식
• ES5 Core Concept
• AJAX(Asynchronous Javascript and XML)
• CORS
• 브라우저 동작 원리(Critical Path)
• 웹 접근성

 

Step 3.

• CSS 방법론
• 서버 사이드 렌더링 / 클라이언트 사이드 렌더링 (+SPA)
• AMD, CommonJS
• 함수형 지식
• Additional Step
• 기본적인 백엔드 지식
• View 라이브러리(React)
• 상태 관리 라이브러리
• 하드웨어 가속에 대한 이해

 

---

1. HTML/CSS: '웹 접근성'고려, '크로스 브라우징 이슈'에 대응하기 위해 스펙 문서 읽기. CSS 방법론, Grid Layout, CSS Media query, CSS3 Animation / Transition, 웹 접근성

 

2. Javascript: ES6을 기준으로 학습하고, ES5에 있는 각각의 이슈에 대해 학습하기. 대표적으로 Prototype Chaning, Hoisting, Scope, Namespace pattern, this, Closure 등. (물론 ES6의 문법은 다 알아야 함.) + DOM API

JS의 작동원리 알기. ( https://asfirstalways.tistory.com/362 )

 

3. 라이브러리, 프레임워크: 기본적인 내용 모르고 학습하면 단점이 될 수 있음. React -> JS를 보다 깊게 공부할 수 있고, 현재 가장 많이 사용하는 라이브러리이다. React를 학습했다면 추가적으로 Redux나 MobX같은 '상태 관리 라이브러리'도 살펴보기. 상태 관리 이슈: FE 환경이 복잡해지며 라이브러리나 프레임워크를 쓰지 않더라고 맞닥뜨릴 이슈.

 

4. Git/GitHub: stage는 무엇인지, 최소한의 Git Command ( https://github.com/JaeYeopHan/Minimal_Git_command )와 fast-forward merge / 3-way-merge / rebase vs merge. GitHub clone, fork, Pull Request. 추가적으로 git-flow와 github-flow.

 

5. 자바스크립트 생태계: npm, Webpack(+babel), 모듈 시스템에 대한 이해 (AMD vs Common JS).

 

6. 브라우저 동작 원리: Critical Path.

 

7. 그 외 자료구조, 네트워크 지식을 비롯한 CS 지식(OOP는 베이스!): 자료구조 -> 각 자료구조의 특징과 사용하는 예제 중심. 네트워크 -> 웹 성능과 관련지어 학습(url을 입력하고 엔터를 누르면 어떤 일이 벌어지나요?). DNS, CDN 

기술 면접 관련 ( https://github.com/JaeYeopHan/Interview_Question_for_Beginner )

 

8. 백엔드?: 백엔드 개발자와 의사소통 가능한 수준까지. CORS에 대한 지식과 ajax에 대해서는 필수. 서버 사이드 렌더링과 클라이언트 사이드 렌더링의 차이 구분, 각각 장단점에 대한 이해. + SPA.