https://jbee.io/essay/for_junior_frontend_developer/
신입 프론트엔드 개발자가 되려면 무엇을 학습해야 하나요?
얼마 전, 제 발표를 들은 어떤 한 대학생에게 질문을 받아서 주저리 주저리 써내려가다가 통째로 올렸습니다. 피드백은 환영입니다. TL;DR 아래 Step은 학습 순서와는 전혀 상관이 없으며 단계별로
jbee.io
좋은 글! 아직도 한참 멀었다는 것을 느낀다. 올라온 지 좀 된 글이지만 그래도 공부 방향 잡는 데에는 도움이 될 거라고 생각해 간단히 정리해봤다.
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.
'FE' 카테고리의 다른 글
[VanillaJS, React] 마우스 따라다니는 원 만들기(feat. requestAnimationFrame) (0) | 2023.04.01 |
---|---|
번들러(Bundler)와 트랜스파일러(Transpiler) (0) | 2022.04.01 |
크로미움 브라우저(Chromium Browser)란 무엇일까? (0) | 2021.08.23 |