"2020년 1월 15일"의 두 판 사이의 차이
둘러보기로 가기
검색하러 가기
(→학습내용) |
|||
| 45번째 줄: | 45번째 줄: | ||
=== Webpack === | === Webpack === | ||
| − | + | === Babel === | |
| + | |||
| + | 크로스 브라우징의 혼란을 해결해 줄 수 있는 것이 바벨이다. ECMAScript2015+로 작성한 코드를 모든 브라우져에서 동작하도록 호환성을 지켜준다. 타입스크립트, JSX처럼 다른 언어로 분류되는 것도 포함한다. | ||
| + | |||
| + | 이렇게 변환하는 것을 “트랜스파일” 한다라고 표현한다. | ||
| + | |||
| + | 바벨은 세 단계로 빌드를 진행한다. | ||
| + | |||
| + | # 파싱(Parsing) | ||
| + | # 변환(Transforming) | ||
| + | # 출력 (Printing) | ||
| + | |||
| + | 코드를 읽고 추상 구문 트리(AST)로 변환하는 단계를 “파싱”이라고 한다. 이것은 빌드 작업을 처리하기에 적합한 자료구조인데 컴파일러 이론에 사용되는 개념이다. 추상 구문 트리를 변경하는 것이 “변환” 단계이다. 실제로 코드를 변경하는 작업을 한다. 변경된 결과물을 “출력”하는 것을 마지막으로 바벨은 작업을 완료한다. | ||
| + | |||
| + | === Lint === | ||
[[분류:2020년]] | [[분류:2020년]] | ||
2020년 1월 15일 (수) 16:30 판
1 소개
- 제 목: 모던 프론트엔드 개발환경 이해 (강의링크)
- 주 최: T아카데미
- 장 소: T아카데미 서울캠퍼스 (서울대학교 연구공원 SK T아카데미)
- 일 시: 2020.1.15(수) 13:00 ~ 18:00 (5시간)
- 강 사: 김정환 우아한 형제들 웹 프론트엔드 개발자 (홈페이지)
2 커리큘럼
2.1 강의노트
- 프론트엔드 개발 환경의 이해: NPM
- 프론트엔드 개발 환경의 이해: 웹팩(기본)
- 프론트엔드 개발 환경의 이해: Babel
- 프론트엔드 개발 환경의 이해: 린트
- 프론트엔드 개발 환경의 이해: 웹팩(심화)
2.2 실습
3 학습내용
3.1 NPM
- NPM은 자바스크립트 기반 프로젝트 빌드 도구
- 버전 번호를 관리하기 위한 규칙이 필요한데 이 체계를 “유의적 버전”이라고 한다. NPM은 이 유의적 버전(Sementic Version))을 따르는 전제 아래 패키지 버전을 관리한다. 유의적 버전은 주(Major), 부(Minor), 수(Patch) 세 가지 숫자를 조합해서 버전을 관리한다.
* 주 버전(Major Version): 기존 버전과 호환되지 않게 변경한 경우 * 부 버전(Minor version): 기존 버전과 호환되면서 기능이 추가된 경우 * 수 버전(Patch version): 기존 버전과 호환되면서 버그를 수정한 경우
- NPM의 버전 관리 중 틸드(~)와 캐럿(^)에 대해 설명한다. 과거에는 틸드(~)를 썼으나 현재는 캐럿(^)을 기본값으로 쓴다.
npm uses the tilde (~) and caret (^) to designate which patch and minor versions to use respectively. So if you see ~1.0.2 it means to install version 1.0.2 or the latest patch version such as 1.0.4. If you see ^1.0.2 it means to install version 1.0.2 or the latest minor or patch version such as 1.1.0.
3.2 Webpack
3.3 Babel
크로스 브라우징의 혼란을 해결해 줄 수 있는 것이 바벨이다. ECMAScript2015+로 작성한 코드를 모든 브라우져에서 동작하도록 호환성을 지켜준다. 타입스크립트, JSX처럼 다른 언어로 분류되는 것도 포함한다.
이렇게 변환하는 것을 “트랜스파일” 한다라고 표현한다.
바벨은 세 단계로 빌드를 진행한다.
- 파싱(Parsing)
- 변환(Transforming)
- 출력 (Printing)
코드를 읽고 추상 구문 트리(AST)로 변환하는 단계를 “파싱”이라고 한다. 이것은 빌드 작업을 처리하기에 적합한 자료구조인데 컴파일러 이론에 사용되는 개념이다. 추상 구문 트리를 변경하는 것이 “변환” 단계이다. 실제로 코드를 변경하는 작업을 한다. 변경된 결과물을 “출력”하는 것을 마지막으로 바벨은 작업을 완료한다.
