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"
는 만든 프로젝트를 사용자가 보는용도의 출력시키는 것입니다.
터미널
$ npm install lodash
lodash라는 패키지를 일반 의존성으로 설치합니다.
main.js
import _ from 'lodash'
console.log('lodash')
_
라는 변수에 담아 가지고 와 main.js에서 활용을 하겠다.라는 의미입니다.lodash 활용 예시
import _ from 'lodash'
console.log(_.camelCase('lodash')) // LODASH