패스트캠퍼스 프론트엔드 8주 완성 with React 학습일지 6주차

[ parcel-bundler ] 제품 화 하기

lodash 패키지 사용하기

// ** main.js 
// node_modules 내에 설치된 lodash라는 패키지에서 가지고온다
// 정확히는 node_modules - lodash 폴더 - package.json - main옵션의 lodash.js 파일을 가지고 온다. 
// lodash.js 파일에서 활용할 수 있는 여러 자바스크립트 내용을 확인 할 수 있다.
// lodash.js 파일에서 가져온 내용을 _ 라는 변수에 할당할거라는 내용
import _ from 'lodash';

console.log('hello world'); // hello world
// lodash의 camelCase 메소드 실행해보기
console.log(_.camelCase('hello world')); // helloWorld

main.js 내에서 lodash를 이용해 내용을 추가해주면
parcel-bundler가 이 내용을 http://localhost:1234 주소로 다시 실행시켜 준다.
-> 수정 내용 바로 확인 가능

package.json에 새로운 명령어 추가하기

build라는 명령어를 추가하면 실제로 사용자가 보는 용도의 결과물이 출력 된다.

ctrl + C : 터미널에 입력 시 실행 중이던 개발 용 서버 연결 종료

npm run build라는 명령어를 입력하면,
dist 폴더 및 내부에 여러 파일이 생성된 것을 확인할 수 있다.

그리고 dist 폴더 내의 index.html을 확인해보면
코드가 한 줄로 나열되어있는데, '코드 난독화'가 되었기 때문이다.

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

dist 폴더 내부에는 'main.특수문자.js' 처럼 특수문자가 포함된 파일들도 확인 할 수 있다.
마찬가지로 난독화된 코드가 많이 작성되어있는데,
parcel-bundler패키지에서 실제 웹에서 사용해야 하는 lodash 패키지까지 같이 묶어(번들)
결과를 만들어줬기 때문이다.

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

dist 폴더 내의 파일들을 웹 브라우저에서 동작하는 용도로 만들어져 있다. dist 라는 폴더를 제공해주면 실제로 웹사이트에서 동작한다는 개념이 된다. parcel-bundler의 이런 원리를 이용해 npm 명령어로 프로젝트를 구성할 수 있다. 실제로 개발하고, 관리하고, 제품 화 할 수 있다.

---

처음 접하는 내용들이라 용어들이 어렵게 느껴졌지만
parcel-bundler의 원리를 이해해볼 수 있는 시간이었다.

#패스트캠퍼스 #내일배움카드 #국비지원 #K디지털기초역량훈련 #바이트디그리 #react강의 #React&Redux로시작하는웹프로그래밍