프론트엔드 공부 순서

이 글은 '프론트엔드 공부 순서, 높은 연봉 받는 프론트엔드 개발자 되기'의 영상 내용을 바탕으로 정리한 내용입니다.

이 로드맵은 developer-roadmap 에서 가져왔습니다. 정말 많군요 😆😆 내가 웃는게 웃는게 아니야

• HTML : 기본중의 기본
• CSS : Floats, Display, Box Model 이해도 중요하지만, Flex Box를 이용하면 굉장히 유연한 UI를 만들 수 있다. 깊게 아는 것이 매우 중요하다
• Basics of JavaScript : 문법을 아는 것도 중요하지만 Learn DOM Manipulation! 돔을 어떻게 조작할 수 있는지 이해하는 게 중요하다. 가령 웹사이트에 있는 돔 트리에서 특정한 버튼을 찾아서 그 버튼의 색깔을 바꾸고 크기를 바꾸는 것. 백엔드와 커뮤니케이션할 수 있는 fetch API도 이해해야 한다.

웹 애플리케이션을 만들기 시작하면 그 뒤에 넘어오는 레벨들은 당연히 스스로 찾게 된다. TypeScript 를 배우자. 타입스크립트는 자바스크립트는 타입이 동적이다. 불리언으로 정의된 변수를 스트링 변수에 할당할 수 있다. 컴파일 시간에 그 에러가 걸러지지 않고 런타임에서 유저가 사용할 때 어플리케이션이 크러쉬 되는 경우가 발생..한 순간에 날아가버리는 경우가 발생하게 된다. 이를 방지하기 위해 TypeScript가 있다. 말 그대로 타입이 있어서 불리언 변수는 꼭 불리언 변수에 할당해야 하는..타입이 컴파일링 시간에 꼭 검사가 되어야 하는 강력한 언어이다.

• CSS로 스타일링을 하게 되면 많은 것들이 반복된다. 그때 SASS나 PostCSS와 같은 프레임워크를 이용해서 CSS를 간편하게 관리할 수 있다.

• CSS-Framworks 중 부트스트랩은 예전에 많이 유행했는데, 요즘에 리액트가 나오면서 많이 쓰이진 않는다. 그리디 시스템이 있어 간편하게 스타일링 할 수 있다.

• CSS-Architecture CSS를 어떻게 잘 구조적으로 배치할 것인가? BEM에 관련된 기사를 몇개씩 읽어봐라

• Bulid Tools
  - 개발할 때 편하고 간편하게 할 수 있는 Linters 과 Formatters를 찾아보기 (Prettier, ESLint)
  - Module Bundlers 요즘에 Webpack을 많이 사용한다.코드를 배포할 때 사용자가 우리가 사용한 코드를 다 다운받으면 너무 크니까 그것을 간편하게 압축하고 최대한 사이즈를 작게 해주는 framework이다.
  

• Pick a Framework!!!!!
  요즘에 React.js 매우 많이 사용한다. React.js 와 MobX의 조합을 추천한다.

프론트엔드는 쉬워보이지만 해야하고 알아야 할 것이 굉장히 많다. 기본기를 탄탄히 다진 다음에 react, typescript 등등을 추가적으로~ 참고로 로드맵은 로드맵일 뿐, 모두 다 마스터 할 필요 없다. 강박관념에 사로잡힐 필요가 없다 ✌