2020년 1월 15일

라이언양 위키
둘러보기로 가기 검색하러 가기

1 소개

  • 제 목: 모던 프론트엔드 개발환경 이해 (강의링크)
  • 주 최: T아카데미
  • 장 소: T아카데미 서울캠퍼스 (서울대학교 연구공원 SK T아카데미)
  • 일 시: 2020.1.15(수) 13:00 ~ 18:00 (5시간)
  • 강 사: 김정환 우아한 형제들 웹 프론트엔드 개발자 (홈페이지)

2 커리큘럼

2.1 강의노트

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.2.1 엔트리

웹팩에서 모든 것은 모듈이다. 자바스크립트, 스타일시트, 이미지 등 모든 것을 자바스크립트 모듈로 로딩해서 사용하도록 한다. 자바스크립트가 로딩하는 모듈이 많아질수록 모듈간의 의존성은 증가한다. 의존성 그래프의 시작점을 웹팩에서는 엔트리(entry)라고 한다.

3.2.2 아웃풋

엔트리에 설정한 자바스크립트 파일을 시작으로 의존되어 있는 모든 모듈을 하나로 묶을 것이다. 번들된 결과물을 처리할 위치는 output에 기록한다.

3.2.3 로더

웹팩은 모든 파일을 모듈로 관리한다고 했다. 자바스크립트 파일 뿐만 아니라 이미지, 폰트, 스타일시트도 전부 모듈로 관리한다. 그러나 웹팩은 자바스크립트 밖에 모른다. 비 자바스크립트 파일을 웹팩이 이해하게끔 변경해야하는데 로더가 그런 역할을 한다.

로더는 test와 use키로 구성된 객체로 설정할 수 있다.

test에 로딩할 파일을 지정하고
use에 적용할 로더를 설정한다

3.2.4 플러그인

3.3 Babel

크로스 브라우징의 혼란을 해결해 줄 수 있는 것이 바벨이다. ECMAScript2015+로 작성한 코드를 모든 브라우져에서 동작하도록 호환성을 지켜준다. 타입스크립트, JSX처럼 다른 언어로 분류되는 것도 포함한다.

이렇게 변환하는 것을 “트랜스파일” 한다라고 표현한다.

바벨은 세 단계로 빌드를 진행한다.

  1. 파싱(Parsing)
  2. 변환(Transforming)
  3. 출력 (Printing)

코드를 읽고 추상 구문 트리(AST)로 변환하는 단계를 “파싱”이라고 한다. 이것은 빌드 작업을 처리하기에 적합한 자료구조인데 컴파일러 이론에 사용되는 개념이다. 추상 구문 트리를 변경하는 것이 “변환” 단계이다. 실제로 코드를 변경하는 작업을 한다. 변경된 결과물을 “출력”하는 것을 마지막으로 바벨은 작업을 완료한다.

바벨은 파싱과 출력만 담당하고 변환 작업은 다른 녀석이 처리하는데 이것을 “플러그인” 이라고 부른다.

3.4 Lint

보푸라기를 제거하는 린트 롤러(Lint roller)처럼 코드의 오류나 버그, 스타일 따위를 점검하는 것을 린트(Lint) 혹은 린터(Linter)라고 부른다.
코드에서 검사하는 항목을 크게 분류하면 아래 두 가지다.

  1. 포맷팅
  2. 코드 품질

포맷팅은 일관된 코드 스타일을 유지하도록 하고 개발자로 하여금 쉽게 읽히는 코드를 만들어 준다. 이를 테면 “들여쓰기 규칙”, “코드 라인의 최대 너비 규칙”을 따르는 코드가 가독성이 더 좋다.

한편, 코드 품질은 어플리케이션의 잠재적인 오류나 버그를 예방하기 위함이다. 사용하지 않는 변수 쓰지 않기, 글로벌 스코프 함부로 다루지 않기 등이 오류 발생 확률을 줄여 준다.

원본 주소 "https://wiki.ryanyang.kr/index.php?title=2020년_1월_15일&oldid=705"