개발 서버 실행과 빌드

1. 개발용 의존성 패키지 사용

브라우저에서 콘솔을 실행하려면?

• 원시적 방법
  : index.html에서 우클릭 후 Open with Live Server라는 vs코드에 설치한 플러그인에 도움을 받아서 개발용 서버를 열고 접근을 해서 페이지를 본다.

• 최신 방법
  : 터미널에서 parcel index.html 이라고 적어서 로컬환경에서 개발용으로 서버를 연다. 그 서버에 접근을 해서 내가 만든 프로젝트를 브라우저에서 확인한다.

but, 터미널에 명시해도 작동하지 않음.

해결 방법

(이렇게 기본적으로 시작하는 것은 로컬 환경에서 개발용으로 서버를 여는 것)
package.json 파일로 이동 -> "scipt" 부분에 "dev": "parcel index.html" 적음

=> 터미널에 적은 것과 다르게 현재 프로젝트에서만 동작하게 됨

=> 이것은 개발용 의존성 패키지로 pacel bundler를 설치를 하였고 parcel bundler에서 개발 서버를 열어주는 기능을 동작 시킴

=> 그러나 이것은 어디까지나 우리 프로젝트에만 설치된 것이기 때문에 터미널에서는 직접적으로 동작시키지 못함

터미널에 npm run dev 입력(npm 명령으로 어떤 스크립트 즉, dev 부분을 run으로 실행) -> 로컬호스트 주소가 명시됨

• dev: develope의 약어

2. 일반 의존성 패키지 사용

js 파일에 import -(언더바) from 'lodash' 입력

=> import를 통해서 lodash로부터 무언가를 가져옴, lodash라는 값 앞 뒤로 특수 기호가 없는 것은 Node modules 디렉토리에서 온다는 것

=> Node modeules 파일을 열면 lodash 파일이 있음(js 파일에 적은 lodash임)

=> lodash 파일 안에 있는 package.json에 "main": "lodash.js"가 있음

lodash라는 패키지를 우리는 설치 -> main.js 파일에 lodash를 가지고 오는 내용을 작성 -> 그 lodash의 package.json 파일에 명시가 되어져 있는 main 옵션에 lodash.js라는 파일을 실제로 가지고 와서 main.js에서 활용 된다는 것

package.json의 main이라는 옵션?

프로젝트를 실제로 npm 생태계에 패키지로써 업로드를 할 때 필요한 옵션

lodash도 마찬가지임

lodash.js 파일에서 특정한 내용을 가지고 언더바라는 변수에 할당해서 활용 가능

활용

import _ from 'lodash';

console.log('hello world');
console.log(_.camelCase('hello world'));

=> _. 뒤에 가져오고 싶은 기능들 중에 camelCase라는 명령(메소드)을 실행

=> () 안에 인수 전달('hello world')

=> 전달된 인수는 camelCase 방식으로 변경되어 반환 및 콘솔 출력

3. build 사용

(사용자들이 보는 용도의 결과물이 출력)
package.json 안에 있는 script 옵션에 "build": "parcel build index.html" 입력
-> 터미널에 npm build 입력
-> dist 폴터 생성

=> dist라는 폴더 안에 있는 파일들은 모두 난독화 되어있음

난독화?
작성된 코드를 읽기 어렵게 만드는 작업
빌드된 결과(제품)는 브라우저에서 해석되는 용도로 용량을 축소하고 읽기 어렵게 만드는 등의 최적화를 거치는 것이 좋습니다.

빌드라는 명려을 통해서 만들어진 결과(dist 폴더 안에 들어있는 내용)는 개발자가 보는 용도가 아니라, 웹브라우저에서 동작시키는 용도

번들은 우리가 프로젝트 개발에 사용한 여러 모듈(패키지)을 하나로 묶어내는 작업