개발서버 실행과 빌드

개발서버 실행

Open with Live Server를 통해 index.html 파일을 여는 방법은 원시적인 방법으로 동작하는 것으로 최신의 웹프론트엔드 개발을 할 때는 별로 유용하지 않습니다.

$ npm i parcel-bundler -D

프로젝트에 parcel-bundler를 설치했다면 package.json파일의 script부분에 아래와 같이 코드를 작성해 개발서버를 실행시키는 기능을 동작시킬 수 있습니다.

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

단, parcel-bundler는 프로젝트에만 설치가 된 것이기 때문에 터미널에서 명령을 내릴 때는 scripts에 명시한 이름(dev)을 이용해 npm run dev 실행해줍니다.

"dev": "parcel index.html"는 로컬환경에서 개발용으로 서버를 열어서 브라우저에서 프로젝트를 확인하는 것입니다.

개발서버 빌드

package.json파일의 script부분에 아래와 같이 코드를 작성해 개발서버를 빌드시키는 기능을 동작시킬 수 있습니다.

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

터미널에 npm run build를 통해 실행시킬 수 있습니다.

"build": "parcel build index.html"는 만든 프로젝트를 사용자가 보는용도의 출력시키는 것입니다.

lodash

터미널

$ npm install lodash

lodash라는 패키지를 일반 의존성으로 설치합니다.

main.js

import _ from 'lodash'

console.log('lodash')

• 'lodash' 앞뒤로 특수기호가 없으므로 패키지가 설치되어 있는 node_modules라는 디렉토리에서 오는 것을 알 수 있습니다.
• node_modules > lodash > package.json파일을 확인해보면 main이라는 옵션에 "lodash.js"가 작성된 것을 확인할 수 있습니다.
• 결국 여기에 명시된 lodash.js파일을 _라는 변수에 담아 가지고 와 main.js에서 활용을 하겠다.라는 의미입니다.

lodash 활용 예시

import _ from 'lodash'

console.log(_.camelCase('lodash')) // LODASH