2021 Front end Road Map

2021년도에는 아래와 같은 순서로 하나하나 살펴 보고자 한다.

Internet

• HTTP/S

  HTTP/S 개념과 차이에 대해 학습 한다.

Basic

• HTML

  하이퍼텍스트 마크업 언어는 웹 페이지를 위한 지배적인 마크업 언어다. 또한, HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다

• CSS

  종속형 시트 또는 캐스케이딩 스타일 시트는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.

• JavaScript

  자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다.

Package Managers

• npm

  자바스크립트 언어를 위한 패키지 관리자 이다.

CSS Architecture

• BEM

  Block Element Modifier 의 약자 이며, CSS 스타일 방법론 으로써 BEM 외 SMACSS, OOCSS 등이 있다.

Modern CSS

• Styled Component

  styled-coponents 는 자바스크립트의 태그가 지정된 템플릿 리터럴과 CSS 의 기능을 사용하여 구성 요소에 반응하는 스타일을 제공하는 CSS-in-JS 스타일링을 위한 프레임워크 이다.

• CSS Module

  css-module은 간결한 클래스명을 이용해서 컴포넌트 단위로 스타일을 적용할 때 사용 되며, css 속성을 모듈화 한 것이다.

CSS Preprocessors

• Sass

  CSS 전처리기 Sass 외 Less, Stylus 가 있다. 전처리기는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산 등… 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있다.

CSS Frameworks

• Bootstrap

  HTML, CSS, JS 프레임워크 이머 부트스트랩은 SASS 스타일시트를 기반으로 한다.

Build Tools

Linters and Formetters

• Prettier

  코드 포멧터(Code Formatter)란 개발자가 작성한 코드를 정해진 코딩 스타일을 따르도록 변환해주는 도구 이다

• ESLint

  ESLint는 JavaScript, JSX의 정적 분석 도구로 오픈 소스 프로젝트입니다. 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일로 작성하도록 도와준다

Task Runners

• npm scripts

  npm script는 해당 프로젝트에서 npm으로 실행시키는 명령어를 선언 함으로써 스크립트명으로 npm 스크립트를 실행 시킬수 있다.

Module Bundlers

웹 애플리케이션을 동작시키기 위한 서로 연관 관계가 있는 웹 구성 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이들의 의존성을 묶고 조합해서 합쳐진 하나의 결과물(static한 자원)을 만드는 도구 이다.

• Webpack

  웹팩은 오픈 소스 자바스크립트 모듈 번들러이다

Pick a Framework

JavaScript 기반 웹 프레임워크 이다

• Vue.js
• React.js (React)

Web Components

웹 컴포넌트는 그 기능을 나머지 코드로부터 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음 이다

• HTML Templates