FrontEnd 개발시 javascript 기본세팅

1. NVM 설치 ( node.js 설치 )

nvm 설치주소 : https://github.com/coreybutler/nvm-windows/releases

nvm-setup.zip 파일을 다운로드 후 압축풀어 설치

아래 명령어를 차례대로 입력합니다.

windows command 명령어

nvm list available         rem 사용가능한 node.js 리스트를 보여준다.
nvm install 16.14.2        rem LTS 짝수버전을 선택한다.
nvm use 16.14.2            rem 16.14.2 node.js 버전을 사용한다.

2. VS Code 설치

• VS Code 설치

3. Package 설치 ( Bundler 설치 )

NVM으로 node.js를 설치하면 기본적으로 npm이 설치됩니다.

프로젝트 폴더를 npm 프로젝트로 만들고 lodash, parcel-bundler를 설치 및 세팅합니다.

windows command 명령어

npm init -y                    rem 기본 package.json 파일이 생성됩니다.
npm install lodash             rem 배열 관리 패키지를 설치합니다.
npm parcel-bundler -D          rem 파슬 번들러를 개발의존성으로 설치합니다.

생성된 package.json 파일을 열어보면 아래와 같은 부분이 추가되어 있는지 확인합니다.

"devDependencies": {
    "parcel-bundler": "^1.12.5"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }

parcel-bundler 실행시 parcel의 Path를 잡아주어야 하는데

여기서는 package.json의 script 부분을 아래와 같이 수정해서 실행할 수 있도록 합니다.

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

4. 실행

터미널 창에서 아래와 같은 명령어로 실행합니다.

npm run dev                       rem parcel index.html 실행 명령
npm run build                     rem parcel build index.html 실행 명령

오류가 없이 정상 동작하면 dist폴더가 만들어지고 내 프로젝트가 번들 됩니다.

http://localhost:1234 부분을 ctrl + click 하면 웹페이지를 볼 수 있습니다.