[러닝자바스크립트] 자바스크립트 개발 도구

[러닝자바스크립트] 자바스크립트 개발 도구

러닝 자바 스크립트 기준으로 쓰여진 글입니다.

Git: 개발 협력 버전 컨트롤 도구

Node: 브라우저 밖에서 자바스크립트를 실행할 수 있게하는 도구.

Gulp: 반복적인 개발 작업 자동화하는 도구

Babel: ES6코드를 ES5코드로 변환하는 트랜스 컴파일러

ES린트: 자주 하는 실수를 피하기 위한 프로그램

ES6사용하기

자바스크립트의 장점은 어디서든 쓰인다는 것이다.

거의 항상 브라우저 스크립트 언어의 표준이엇고 노드의 등장으로 브라우저 바깥으로 영역을 확장하고 있다.

ES6로의 트랜스 컴파일을 시작하기 전에 준비 작업이 있다.

터미널 명렁어

ls : 현재 디렉터리 파일 리스트

cd : 다른 디렉터리로 이동하는 명령

pwd: 현재 디렉터리 경로 출력

mkdir test: 현재 디렉터리에 서브 디렉터리 test를 만드는 명령어

cd .. : 부모 디렉터리로 이동

git 명령어

git init : 프로젝트에 저장소를 만드는 명령어

(깃에서 추적하지 않았으면 하는 파일을 제외하려면 프로젝트 루트에서 .gitignore파일을 만들자)

git status : 저장소의 현재 상태 출력하는 명령어

npm 패키지 관리

패키지 관리 도구로 npm을 사용하는 사람이 늘어나고 있다.

npm은 노드를 설치할 때 함께 설치된다.

npm은 패키지를 설치할 때 전역으로 또는 로컬로 설치할 수 있다.

패키지 설치시에는 npm install을 이용한다.

로컬 모듈은 node_modules 디렉터리에 설치된다.

프로젝트에 설치하고 사용하는 모듈을 의존성dependency라고 부른다.

프로젝트가 성장하면서 필요 패키지를 간결하게 정리해야 하는데, npm은 package.json 파일을 통해 의존성을 관리한다.

의존성은 일반 의존성과 개발 의존성으로 나눌 수 있다. 개발 의존성은 앱을 실행할 때는 필요 없지만 프로젝트를 개발할 때 필요하거나 도움이 되는 패키지를 말한다.

로컬 패키지 설치 시 --save나 혹은 --save-dev 플래그를 사용한다.

이 플래그를 사용하지 않아도 설치되긴 하지만, package.json파일에는 등록되지 않는다.

node_modules 디렉터리를 삭제하고 npm install 명령을 내리면 package.json파일을 읽고 필요 패키지를 자동으로 설치한다.

빌드 도구: 걸프와 그런트

개발 과정에서 피할 수 없는 반복 작업을 자동화하는 빌드 도구가 필요하다.

이 책에서는 걸프를 사용한다.

프로젝트 구조

서버쪽(노드) 코드는 프로젝트 루트의 es6디렉터리에 저장

클라이언트 쪽 (브라우저)코드는 public/es6 디렉터리에 저장

트랜스컴파일러

가장 널리 쓰이는 트랜스컴파일러는 바벨과 트레이서다.

이 책에서는 바벨을 사용한다.

바벨은 es5를 es6로 바구는 트랜스컴파일러로 시작했다.

여러 버전 프리셋이 있는데 여기서는 es6 프리셋을 사용한다.

린트

린트는 코드에서 자주 일어나는 실수를 알려준다.

from http://im-vowel.tistory.com/32 by ccl(A) rewrite - 2021-09-01 15:26:16