1. 서론
프론트엔드 학습.
지금은 웹개발에 대한 기본적인 개념은 있는 상태고,
1년동안 SW직무에 몸담아봤고, General하게 경험했기에 각 분야가 무엇이라는 것은 파악하고 있다고 생각한다.
지금 나의 프론트엔드 수준은 html,css,js,vue가 뭔지 경험해본정도이다.
프론트를 공부한다 했을 때, react를 해볼지, react native를 해볼지 pwa를 해볼지 타입스크립트를 배워볼지 등등 생각해봤는데, 새로운 것을 또 학습한다면, 그 스킬은 또 하나의 vue.js처럼 될 것 같다는 느낌이 좀 쎄게 왔다.
프론트 백엔드 데이터 등 어떤 분야를 공부해볼까 고민했을 때, 가장 기초없이 쌓아 올린 것이 프론트였고, 나의 현재 단점은 뭐든 하나를 깊게 팠다기보다는 쓸 줄 아는 정도라는 점이라고 생각한다. 한번에 여러가지를 하면서 급한대로 되는대로 했기 때문이라고 생각한다.
이제 하나를 제대로 할줄 아는게 중요한 시기지 않을까 해서, 그 중 프론트엔드를 메인으로 하는 개발자가 될 수도 있기 때문에.
FE개발자 로드맵을 얼추 따라가보면서 기초부터 공부하고, 하려 한다.
HTML5가 되면서 뭐가 변한건지, js에서 ES6가 되면서 뭐가 변한거고 뭐가 좋다고하는건지, vue.js 리액트 철학이 어떻게 다른지, vue 2 3올라오며 뭐가 좋아진건지, 방향성이 어떤지, webpack이 뭔지, 그냥 사용법만 공부했던거보다는 개발자 답게 공부하고, 정리 할 것.
2. 학습
2.1 기간
기간은 정해진 바 없지만
poiemaweb이라는 웹 프로그래밍 튜토리얼로 기초를 다진 후 +알파 하는 방식 예정이고,
해당 poiemaweb 튜토리얼은 02/28까지 끝내는 것 목표.
이후 프로젝트를 진행하면서 vue.js를 좀 더 제대로 사용해보고, fe스킬들에대한 학습을 더해가려고 생각하고있다.
2.2 학습예정 목록
- HTML
- CSS
- JS (+ES6)
- Vue.js
2.3 학습 방법
(1) HTML / CSS / JS 및 FE전반
웹 프로그래밍 튜토리얼을 보며 학습하고, 부족하거나, 추가로 궁금한것은 구글링을 통해서 채운다.
학습 후 one doc으로 velog에 정리.
(2) JS 학습(ES6)
모던 자바스크립트 튜토리얼 학습.
기본 학습과 겹치는 부분 제하고 필요한 부분만 공부 후 velog에 정리.
(3) Vue.js
vue.js공식가이드
인프런 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
vue.js는 이미 한차례 공식가이드를 보면서 대략적으로 학습한 경험이 있다.
vue.js 학습은 이미 해본 것을 하는 만큼, 좀더 스킬업이 되는 공부를 원하고,
html,css,js랑은 다르게 프로젝트를 진행하며 학습할 것.
(+) Typescript, Nuxt.js, npm, webpack 등의 사항은 기본기 정립 이후 프로젝트 진행하며 추가해나갈 것.
+ Frontend Overview
Poiemaweb의 첫 chapter에 프론트엔드에대한 개괄적인 설명이 있어 간단하게 정리하고 넘어갈까 한다.
- 프론트엔드 개발 필요 기술들
- HTML (tags & attributes, semantic web)- CSS (Layout:float/flex/grid , transition/animation , 반응형웹, Preprocessor:Sass/PostCSS, CSS방법론, 프레임워크)
- 크로스브라우징
- Javascript : ES5,ES6,ESNext, Dom/Event,Ajax, 동작원리(브라우저, 자바스크립트엔진) - 코드들이 브라우저상에서 어떻게 동작하는지 , nodejs
- HTTP(웹상에서 브라우저-서버 통신 규약. Ajax,비동기통신에대한 이해의 기초)
- Tools : Git, Webpack,Babel, ESLint, npm
- Library,Framework : SPA framework(Vue js, React) , TypeScript, jquery(최근에는 배척됨), lodash, axios
- TDD
- 알고리즘 자료구조
ㅁ 참고)
- Dev Roadmap
Dev loadmap
Frontend loadmap
