1. 서버를 빌드 하기 위해서 프로젝트 내부에 index.html 과, main.js 를 생성 한다.
2. main 이라는 이름을 가진 JS 파일 에서는 import 키워드를 사용 해서 설치한 모듈을 사용 한다.
문법은 import _ from '패키지명' 이다.
테스트를 위해 console.log 에 lodash 패키지 내부에 있는 upperCase() 함수를 작성 했다.
lodash 패키지의 여러 기능을 사용 하기 위한 문법은 언더바 ( _ ) 와 . 을 사용 한다.
lodash 라이브러리의 다양한 함수와 기능을 간편하게 사용 하기 위한 방법으로 _ (언더바) 를 사용 한다.
언더바는 lodash 라이브러리를 불러올 때 사용 되는 관용적인 변수 이름 이다.
3. main 이라는 이름을 가진 JS 파일을 index.html 에서 사용 하기 위해서 필요한 설정 하기.
기존에는 아래와같이 <head> 태그 하위에 <script> 태그를 사용 해서 연결을 해주면 됬었다.
이렇게 하고 원래는 웹 브라우저를 열어서 브라우저에 출력을 했었는데,
이제 parcel 이라는 이름을 가진 번들러 (패키지)를 통해서 개발 서버를 오픈 할 수 있다.
package.json 파일을 수정 해보자.
4. package.json 파일 수정 하기.
package.json 파일 내부에 scripts 영역을 아래와 같이 수정 한다.
키값으로 작성한 dev는 다른 이름으로 작성 해도 무관 하고, 키에 대한 값으로는 생성한 index.html 파일을 작성 한다.
문법은 아래와 같다.
"parcel ./파일명.파일 확장자명"
parcel 번들러에 명령을 입력 하기 위해서, parcel 을 입력 한다.
현재 package.json 파일 주변에 어떠한 파일을 인지 하게 하기 위해서 . 을 작성 한다.
(.을 입력 하지 않으면 빌드 할 때, 파일을 찾을 수 없어 에러가 발생 한다)
위와 같이 작성하는것은, 터미널에서 동작할 명령을 입력 하는것과 동일 하다.
(명령의 스크립트 이름이 dev 이고, 이 이름은 다른것으로 작성 해도 전혀 무관 하다)
"scripts": {
"키": "값"
},
이러한 구조는 어떤 특정한 명령이 터미널에서 동작 할 수 있는 구조를 의미 한다.
그래서 parcel ./index.html 을 터미널에 직접 입력한 것과 동일 하다.
하지만, parcel 이라는 패키지는 현재의 프로젝트 내부에 설치된 패키지 이므로,
command not found: parcel 이라는 에러 메세지가 뜰 수도 있다.
5. 개발용 프로젝트 실행 하기.
터미널에 npm run "스크립트명" 을 입력 하면 된다.
그러면 아래와 같이 에러가 뜨게 된다.
에러 메세지를 확인 하면, Add the type="module" attribute to the <script> tag. 라는 것을 볼 수 있다.
자바스크립트 내부에서 import 키워드를 사용 하면 불러오는 해당 패키지는 모듈 이라고 했었는데,
즉, 자바스크립트 파일에 모듈을 import 했기 때문에 해당 JS 파일 자체가 모듈이라는 개념으로 불리게 된다.
정리하자면,
import 키워드를 사용한 module JS는 html 에서 이 해당 JS 파일을 가져 오기 위한, 추가적인 명령이 필요 하고,
그때 사용 하는 명령이 type 이라는 속성에 module 이라는 속성값 이다.
위와 같이 type = "module" 을 추가 하면 된다.
그리고, 다시 터미널에 npm run "스크립트명" 을 작성 해보자.
정상적으로 빌드가 된것을 확인 할 수 있다.
parcel-bundler 가 index.html 이라는 파일을 분석 하고,
거기에 연결된 JS 파일 모두 분석을 끝내서,
그 내용을 실제 브라우저에서 출력 할 수 있도록 한것이다.
위의 http://localhost:1234 를 클릭 하거나, 또는 해당 주소를 직접 입력 해서 웹 브라우저를 열면 된다.
Console 창을 보면 정상적으로 lodash 패키지의 함수가 적용 된것을 볼 수 있다.
6. 타입 스크립트 작성 하기.
웹 브라우저는 오로지 HTML / CSS / JS 만 읽을 수 있게 동작 된다.
여러가지 기능에 도움을 받기 위해서 타입 스크립트를 아래와 같이 작성 했다고 해보자.
이것을 사용 하려면 물론, index.html 에서도 <script> 태그 내부에 있는 코드를 수정해줘야 한다.
그리고, 웹 브라우저를 확인 하면 ~
이렇게 타입스크립트 코드로 작성 했던것이 웹 브라우저에서 동작 되는 것을 확인 할 수 있다.
이것이 어떻게 가능하냐면,
parcel 이라는 번들러 ( == 패키지 == 모듈 ) 가 타입스크립트 코드를 자바스크립트 코드로 변환해주는 기능을 한다.
정리하자면,
이렇게 NPM 프로젝트를 사용 하는 이유로 위와 같이 타입스크립트와 같은 개념을 도입 해서,
더 편리하고 강력한 기능으로 개발을 하고,
파슬이라는 번들러를 통해서 웹 브라우저에서 동작 할 수 있도록 HTML / CSS / JS 파일로 변환을 하고,
화면에 출력 될 수 있도록 한다.
7. HTML / CSS / JS 로 변환된 결과 확인 하기.
위와 같이 dist 라는 폴더 내부에서 확인 할 수 있다.
dist 폴더는 실제 서비스가 될 빌드된 결과의 폴더를 의미 한다.
dist는 distribute의 약어로, '나누어 주다' / '분배 하다' / '유통 시키다' 등의 뜻을 가진 단어 이다.
그래서 dist 폴더 내부에 index.html 파일을 확인 하면 아래와 같이 유사하지만 다른 코드를 확인 할 수 있다.
parcel이 main.ts 라는 파일을 .js 파일로 변환 해준 것을 확인 할 수 있다.
8. 제품용 프로젝트 실행 하기
위에서 package.json 파일에 명시했던 dev 라는 스크립트는 개발 서버를 오픈 하는 용도 였는데,
개발 테스트용 서버가 아닌, 실제 배포용으로 사용자가 볼 서버를 오픈 하기 위해서는 아래와 같이 작성 하면 된다.
build 라는 스크립트명으로 기존에 코드와 동일 하지만, build 라는 코드를 추가로 작성 하면 된다.
그리고 터미널에 npm run build 라고 작성 한다.
그러면 위와같이 에러가 발생 하게 되는데,
이유는 처음에 npm init-y 를 작성 해서 디폴트로 만들어졌던 "main" 부분 때문 이다.
테스트 개발용으로 서버를 배포 할 때는 상관이 없었지만,
실제 배포용으로 서버를 배포 할 때는,
parcel 번들러가 빌드 할 때, main 이라는 옵션에 영향을 받는다는것을 알 수 있게 된다.
즉, 프로젝트 내부에 index.js 라는 JS 파일이 존재 하지 않으므로 발생한 에러임을 알 수 있다.
현재는 저 옵션 자체가 필요 하지 않기 때문에 그냥 지워 버리고 저장 하면 해결이 된다.
지우고
npm run build 를 하면
build 명령어를 통해서 배포 하고, dist 폴더 내부를 확인 하면, 기존에 개발용 배포랑 다른점을 확인 할 수 있게 된다.
dist 폴더 내부에 index.html 코드를 보면,
한줄로 쭉 작성된 것을 볼 수 있는데, 이는 난독화 되었다고 말 할 수 있다.
즉, 읽기가 어렵게 구성이 된것 이다.
다만, 이건 사람 관점에서 그런것이고, 코드가 브라우저 에서 해석 되어 동작 하기에는 아무런 문제가 없다.
왜 이렇게 구성이 되냐면,
개발자가 보기 쉬우라고 코드를 작성 하게 되면, 코드에 띄어쓰기 등의 불필요한 문자들이 포함 되게 된다.
이는 그만큼 용량이 늘어나는것을 의미 하게 된다.
하지만, dist 폴더는 개발을 하기 위한 폴더가 아니기 때문에, 브라우저에서 동작 시키기 위한것이 목적이므로,
이러한 구성을 갖게 되는 것이다. (브라우저만 해석 할 수 있으면 OK)
'NodeJS > 이론' 카테고리의 다른 글
| 유의적 버전 (Semantic Versioning == SemVer) (0) | 2023.10.29 |
|---|---|
| NPM (Node Package Manager) (0) | 2023.10.28 |
| Node.js (0) | 2023.10.28 |
