[1] Node.js 설치
> npm,yarn 명령어를 사용하여 프로그램을 설치할 수 있게 해주는 인터페이스 : CLI(Command Line Interface 환경을 제공한다)
(1) 서버를 가동 -> 웹프로그래밍 -> JSP의 톰캣서버와 비슷한 역할
(2) npm 명령어를 사용하기 위해 최신버전을 유지
설치 : https://nodejs.org/en/download/releases
> 이전 빌드들을 다운받아 설치할 수 있음
(현재 최신버전은 14이나, gulp 서버를 사용하기 위해서는 11버전을 사용하기를 권장 , gulp 는 컴파일을 자동으로 해주는 기능이 있다)
설치가 완료되면 cmd 창에서 명령어로 버전 확인이 가능하다
[2] Typescript 설치
npm install -g 설치프로그램@(버전)
npm uninstall -g 제거프로그램
위와 같은 형식으로 설치/제거가 가능하다
-g 옵션은 전역설치(global)의 약자이다
이 옵션이 없는 경우인 (local) 지역설치가 된다.
설치가 진행되면, [node_modules] 라는 폴더가 생성되면서 관련된 파일들이 다운로드 된다.
스프링을 다뤄본 사람이라면, pom.xml을 통해 라이브러리를 다운받는 다는 것을 알것이다.
그 방식과 유사하다. 관련된 라이브러리들이 node modules라는 폴더로 모두 다운로드 된다.
전역 > C:\Users\계정\AppData\Roaming\npm\node_moduels
지역 > {해당 프로젝트 폴더}\node_moduels
[3] VisualStudioCode 설치
: https://www.typescriptlang.org/index.html#download-links
: https://code.visualstudio.com/
위 두 링크중 어디에서든 다운받아 설치하면 된다. 꽤 활용도가 높은 에디터다. (prettier는 설정부분이 좀 귀찮긴 하다)
예시로 둔 이미지처럼, 터미널 사용도 가능해서 굉장히 유용하다.
터미널을 통해 컴파일을하고 실행해서 콘솔창에서 결과 확인이 가능하다
[컴파일] tsc 파일명.ts --> javac 파일명.java
[실행] node 파일명.js --> java 클래스파일명
[4] gulp 설치
위에서 언급한 컴파일을 자동으로 해줄 유용한 빌드시스템이다. development, production, testing 등의 다른 빌드들로 빌드해 줄 수 있으며 많은 플러그인들을 통해 매우 확장성있게 작업할 수 있게 도와준다.
(사실 얘는 지나쳐도 된다...직접 tsc 명령을 하는게 귀찮을 뿐이니 패스하실 분은 패스하셔도...)
사용목적
(1) 웹서버를 동작 : node.js + express 서버를 설치해서 웹 프로그래밍
(2) Sass를 활용 css로 컴파일 : 언어의 자동 컴파일
(3) 에디터에서 파일을 저장할 때마다 웹브라우저를 reload
(4) 배포를 위한 css, js, fonts,images 등 리소스 최적화
npm install -g gulp-cli
gulp 최신버전이 설치되고, 사용이 가능해집니다. 이제 플러그인들을 설치합니다.
Gulp-typescript : typescript와 연관 플러그인
Gulp-webserver : 웹 서버처럼 동작하게 하는 플러그인
Gulp-livereload : 웹브라우저를 리로드 하기 위한 플러그인
Gulp-sourcemaps : 코드상의 위치를 알려주는 플러그인 (소스맵 > 컴파일할 파일의 위치)npm install gulp@3.9.1 gulp-typescript gulp-typescript gulp-sourcemaps gulp-webserver gulp-livereload
이제 gulp 로 컴파일을 하기 위해 간단한 소스파일 하나를 코딩합니다.
// 각 플러그인들을 사용하기위해 불러옵니다.
var gulp = require('gulp');
var ts = require('gulp-typescript');
var tsProject = ts.createProject({'target':'es5',noImplicitAny':true});
var sourcemaps = require('gulp-sourcempas');
var webserver = require('gulp-webserver');
var liverreload = require('gulp-liverreload');
gulp.task('server',function(){ // 서버 설정 (포트 :9400)
return gulp.src('./').pipe(webserver({port:9400));});
gulp.task('sripts',function(){ // src/*.ts 파일을 dist 폴더에 컴파일(*.js) 시켜서 저장
var tsResult = gulp.src("src/*.ts").pipe(sourcemaps.init()).pipe(tsProject());
return tsResult.js.pipe(sourcemaps.wrtie()).pipe(gulp.dest('dist'));
});
gulp.task('watch',function(){
//src 폴더의 ts 파일을 컴파일해서 생성된 dist 폴더의 js 파일에 소스가 변화가 되면 바로 적용이 되도록 설정하는 코드
livereload.listen();
gulp.watch('src/*.ts',['scripts']);
gulp.watch('dist/*.js').on('change',livereload.changed)}
);
gulp.task('default',['server','scripts','watch'])
// 최종적으로 server, scripts,watch 순으로 실행이 되도록 설정
이렇게 설정을 해두고 터미널에서 gulp 명령어를 실행하면?
오류가 납니다.
※ gulp를 전역으로 설치했어도, 개별 프로젝트에서 gulp를 사용하기 위해서는 local로 typescript를 한 번 더 설치해야 합니다. -g를 빼세요
**※ 또 gulp 버전이 4.x 이상일 경우 작동되지 않습니다. 삭제 후 3.9.1 버전으로 다시 설치 해주세요
