on
캠퍼스 챌린지 29일차[Part 3. JavaScript Essentials/Ch 1. Node.js/05...
캠퍼스 챌린지 29일차[Part 3. JavaScript Essentials/Ch 1. Node.js/05...
개발 서버 실행과 빌드
이번 시간에는 지난 시간에 설치한
다음 모듈을 가지고 간단한 프로젝트를 만들어보자
일단 새로운 파일을 만든다. index.html 파일에서
간단하게 script 태그 등 선언한다.
위와 같이 간단하게 입력한다.
우리가 콘솔 창을 확인하려면 브라우저로 확인해야 하는데 기존에 vs 코드에 있는
open with live server로 확인을 했는데
이런 방식은 원시적 방식이고 최신의 방식은
터미널을 열고 우리가 parcel이라는 패키지를 설치를 했기 때문에
parcel이라는 명령을 써야 한다.
위와 같이 입력하면 지금은 실행이 안된다.
실행을 위해서
package.json 파일에 가서 scripts 부분에 가서
dev에 parcel index.html이라고 입력한다.
현재의 프로젝트에만 동작하게 되는데
그것은 개발용 의존성 패키지로
"parcel-bundler"
를 설치를 했기 때문이다.
"parcel-bundler"에서 개발 서버를 여는 기능을 동작해줄 수 있다.
"parcel-bundler"는 우리 프로젝트에만 설치가 되었기 때문에
터미널에서 직접적으로 "parcel이라는 명령을 동작시킬 수 없기 때문에
대신에
scripts라는 옵션에 명령을 추가하면 우리 프로젝트 내부에서 동작하는 것으로 인식할 수 있고 이름을 dev라는 이름으로 실행해주면 된다.
터미널로 내려와서 다음과 같이 입력하면
dev라는 것을 실행을 시켜주면 개발 서버를 열겠다는 의미이다
다음과 같이 포트번호가 생성이 되는데 포트번호는 우리 컴퓨터 내에서 특정한 페이지로 이동할 수 있는 주소이다.
다음은
일반의존성 패키지인 lodash를 사용해보자
main.js파일로 가서 다음과 같이 입력한다.
import를 통해서 가지 고올 내용은 lodash라는 패키지에서 가져오는 것이다. lodash라는 설치한 폴더 안에 수많은 자바스크립트 파일이 있다.
이 내용은 lodash라는 패키지를 우리 프로젝트에 설치를 했고 main.js 에 lodash를 가지고 오는 내용을 작성을 했으면
위와 같이 lodash 폴더 안에 있는 package.json의 내용 안에 main옵션에
lodash.js라는 파일을 실제로 가지고 와서
우리의 main.js에서 활용이 된다는 의미를 가진다.
우리는 lodash.js 파일의 내용을 가지고 오기 위해서
_라는 변수를 할당하고
밑에 콘솔 창에서 변수 _에서 camelCase로 hello world를 찍어라는 뜻이다.
위는 나타나는 결과이다.
다음은 다시 vs 코드로 이동을 해서
build라는 스크립트 명령을 작성한다.
우리는 "parcel-bundler"이라는 프로젝트 내부에 설치한 우리의 패키지의 내용을 통해서
index.html 파일 내용을 기준으로 해서
동작을 시작 할 수도 있는데
기본적으로 시작하는 것은 로컬 환경에서 브라우저를 개발용으로 열어서
프로젝트를 확인하는 것이고
만약 parcel 명령에 build라고 추가적으로 명령을 붙인 상태에서 index.html 실행하게 되면
실제로 사용자들이 보는 용도의 결과물이 출력이 된다.
다음과 같은 파일들이 생성이 된것을 확인할 수 있다.
확인할 수 있다.
해당 파일의 index.html 파일을 열어보면
위와 같이 일렬로 입력되어 있는데 이것을 우리는 난독화라고 한다.
난독화는 작성된 코드를 읽기 어렵게 만드는 작업을 말하는 것이다.
빌드된 결과는 브라우저에서 해석되는 용도로
용량을 축소하고 읽기 어렵게 만드는 등의 최적화를 거치는 것이 좋다.
새롭게 index.html을 만들어 주는 것이
parcel-bundler의 역할이다.
parcel-bundler는 개발을 해서 결과를 낼 때만 사용 가능하고
만들어진 결과는 별도로 동작을 하게 해야 한다.
parcel-bundler는 실제로 웹브라우저에서 동작하는 것이 아니기 때문에
개발용으로만 활용한다.
devDependencies 이라는 것이 개발 의존용이기에
이것은 개발할때만 쓰는 것이다.
dist라는 폴더는 웹브라우저에 동작하는 용도로 만들어졌기 때문에
우리가 netlify라는 서비스를 이용해서 실제 웹사이트를 만든 것과 같이
dist라는 폴더를 제공해주면
실제로 웹사이트가 동작하는 개념이 된다.
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
from http://dhstory311.tistory.com/177 by ccl(A) rewrite - 2021-10-04 16:01:39