Node.js 프로젝트 초기 빌딩

Node.js로 웹 개발을 할 때의 프로젝트 초기 세팅 과정을 정리해보고자 한다.

1. 폴더 생성

2. npm init

3. npm install —save-dev parcel (배포용으로 쓰이지 않을거면 —save-dev flag)

   1. 배포용으로 쓰알거면 —save-dev flag 제외하고 install (lodash 같은 것들)

   2. js 파일에서 패키지 사용할땐 다음과 같이 import 키워드로 불러와서 사용하는 방식

      import _ from 'lodash';
      
      console.log(_.upperCase('hello-world'));
      

4. .gitignore 파일 생성

   1. node_modules 추가
   2. dist 추가
   3. .parcel-cache (나중에 대용량 이슈로 git push가 제한될 수 있다.)
   4. 맥 사용자의 경우 .DS_Store 추가
   5. vscode 사용시 .vscode 추가
   6. firebase-config.js (혹은 .env 등 ..)
   7. .env (혹은 firebase-config.js 등 ..)

   // .gitignore
   node_modules
   dist
   .parcel-cache
   .DS_Store
   .vscode
   firebase-config.js
   .env

5. index.html 및 main.js 파일 생성

6. index.html에서 main.js script로 연결 (import 키워드를 사용하는 모듈 자바스크립트를 위해 type=”module” 추가)

   // index.html
   ...
   <script type="module" defer src="./src/main.js"></script>
   ...
   

7. package.json 파일로 들어가서 “scripts” 하위의 “test” 이름을 “dev”로 바꾸고 “echo \”Err…” 내용을 전부 지우고 “parcel ./index.html” 으로 대체하기

8. npm run dev 커맨드로 parcel 동작시켜서 개발 버전 빌드하기 (프로덕션용 빌드는 npm run build)

9. 개발을 할 땐 npm run dev를 통해 개발 버전으로 개발하지만 실제 배포를 할때를 위해 package.json의 “scripts” 하위에 “build”를 추가

   // package.json
   ...
   "scripts": {
     "dev": "parcel ./index.html",
     "build": "parcel build ./index.html"
   },
   ...
   

10. npm run build를 통해 배포버전 빌드를 할때 에러를 방지 하기 위해 package.json의 “main”: “index.js”를 삭제

    package.json
    ...
    "main": "index.js", // 삭제
    ...
    

11. 배포 서비스를 이용하는 경우 환경변수 설정 등 유의하기

12. 이제 신나는 개발하기