[LearningJS] jQuery + JS관리도구

jQuery

• jQuery의 역할
  • 자바스크립트 코드를 실행하기 전에 브라우저가 HTML을 전부 불러왔는지 확인한다.
  • ‘use strict’ : 자바스크립트 인터프리터에서 코드를 더 엄격하게 처리하라.
  • BoilerPlate(==Template) : 어떤 일을 하기 전에 항상 먼저 실행해야 하는 코드.
    • ex) jQuery Load CDN

Javascript 관리 도구

1. Git : 버전 관리 도구 (Git-bash를 통한 버전 관리 및 Github에 전달)
   • Git-bash에서 프로젝트 루트에 접근
   • 프로젝트 루트의 저장소를 초기화(git init) -> .git 폴더가 생성된다.
   • 깃에서 추적하지 않길 원하는 파일을 .gitignore 파일에 정리한다.
   • 저장소의 현재 상태를 출력하는 명령 : git status
   • 깃 저장소에 파일(or 변경사항)을 추가하는 명령 : git add (파일명)
     • 해당 프로젝트 루트의 모든 파일 추가 : git add -a
   • 커밋 명령어 : git commit -m "message"
   • 프로젝트 루트와 온라인 저장소(github)를 연결 : git remote add origin (저장소 주소)
   • 온라인 저장소에 커밋한 내용을 추가 : git push [-u] origin master
2. npm : 패키지 관리 도구 (패키지는 애플리케이션, 코드샘플, 모듈 or 라이브러리 포함)
   • npm 시작 : npm init (해당 프로젝트 루트에 package.json 파일 생성 - 의존성 관리)
   • 패키지 설치 : npm install [--save] 패키지명
     • –save 써야 package.json에 등록된다.

3. Gulp & Grunt : 반복 작업을 자동화하는 빌드 도구

   • Gulp 설치
     • npm install -g gulp (전역설치)
     • npm install --save-dev gulp (로컬설치)
   • Gulp 설정파일 : gulpfile.js
   • 프로젝트 구조 : 서버(노드)쪽 코드와 클라이언트(브라우저)쪽 코드를 디렉토리를 구분해서 저장 (node dir. - es6 / client dir. - public/es6)
     • ES6 -> ES5 트랜스컴파일 된 파일 저장도 디렉토리 구분
     • ES5 코드 저장소 : dist[ribution]

4. Babel : ES6 -> ES5 변환을 위한 트랜스컴파일러

   • babel 설치 : npm install --save-dev babel-preset-es2015
   • babel 설정파일 : .babelrc 에 {“presets” : [“es2015”]} 입력
     • 이렇게 설정하면 프로젝트에서 바벨을 사용할 때 ES6을 사용한다는 것을 인식한다.
   • 걸프를 통해 바벨 사용하기
     • npm install --save-dev gulp-babel (패키지 설치)
     • 걸프는 .pipe (파이프라인)을 사용해 작업을 처리한다.
     • gulpfile.js 에서 babel()을 파이프라인으로 연결해서 사용

5. [ES] Lint : 코드를 검토해서 자주 일어나는 실수를 알려준다.

   • ESLint 설정파일 : .eslintrc.js -> bash에서 eslint --init 명령으로 파일을 자동 생성한다.
   • 걸프를 통해 린트 사용하기
     • npm install --save-dev gulp-eslint (패키지 설치)
     • gulpfile.js 에서 eslint() 를 파이프라인으로 연결해서 사용
   • 규칙 설정 : .eslintrc.js 에서 실수를 잡아내는 rules 규칙을 바꿔주거나 off 한다.