LHJ

I'm a FE developer.

2.5 요약

17 Apr 2020 » js_lj

이번 2장에서는 ES6 지원이 아직 널리 정착되지는 않았지만, 트랜스컴파일을 통해 ES5 코드로 바꿀 수 있으니 ES6의 장점을 포기할 필요는 없음을 알게 됐습니다.

개발용 컴퓨터를 설정할 때는 다음과 같은 준비가 필요합니다.

  • 좋은 에디터(1장을 보십시오.)
  • 깃 설치에 관한 내용은 https://git-scm.com/ 을 보십시오.
  • Gulp npm install -g gulp 명령으로 설치합니다.
  • ESLint npm install -g eslint 명령으로 설치합니다.

새 프로젝트를 시작할 때는 다음과 같은 준비가 필요합니다.

  • 프로젝트에 사용할 전용 디렉터리, 이 디렉터리를 프로젝트 루트라고 부릅니다.
  • 깃 저장소(git init)
  • package.json 파일 (npm init)
  • Gulpfile gulpfile.js 이 장에서 만든 파일을 쓰십시오.
  • 걸프와 바벨의 로컬 패키지, npm i -D @babel/register @babel/core @babel/preset-env
  • .babelrc 파일 { "presets": [ "@babel/preset-env" ] }
  • .eslintrc 파일, eslint --init 명령으로 만들고 원하는 대로 수정합니다.
  • 노드 소스용 서브디렉터리 es6
  • 브라우저 소스용 서브디렉터리 public/es6

이상의 준비가 끝났으면 기본적인 작업 순서는 다음과 같습니다.

  1. 코드를 수정할 때는 논리적으로 일관되게 수정합니다.
  2. 걸프를 실행해서 코드에 존재하는 실수와 잠재적 오류를 찾습니다.
  3. 수정한 내용이 잘 동작하고 린트 프로그램에서 지적하는 것이 없을 때까지 반복합니다.
  4. git status 명령을 써서 원하지 않는 파일이 커밋되지 않는지 확인하십시오. 깃에서 추적하지 말아야할 파일이 있다면 .gitignore 파일에 추가하십시오.
  5. git add -A 명령으로 바꾼 내용을 저장소에 추가합니다. 한꺼번에 추가하지 않으려면 git add 명령을 파일마다 내려도 됩니다.
  6. git commit -m "[description of your changes]" 명령으로 커밋합니다.

프로젝트에 따라서는 걸프 작업에 테스크를 추가하거나, git push 명령으로 코드를 깃허브나 비트버킷 같은 공유 저장소에 올리는 등 다른 단계가 추가될 수 있습니다.
하지만 여기서 제시한 단계를 생략하지는 마십시오.

앞으로 책에서 소스 코드를 제시할 때는 빌드와 실행에 필요한 단계를 다시 설명하지는 않을 겁니다.
예제에서 브라우저 코드라고 명시하지 않았다면 코드 샘플은 모두 노드에서 실행해야 합니다.
예를 들어 example.js 파일을 사용하는 예제가 있다면 그 파일을 es6 폴더에 저장한 후 다음과 같이 실행하십시오.

$ gulp
$ node dist/example.js

걸프 명령을 생략하고 babel-node로 실행해도 됩니다.
babel-node도 트랜스컴파일 과정을 거치므로 시간이 줄어들지는 않습니다.

$ babel-node es6/example.js

이제 진짜 자바스크립트를 배울 시간입니다!