Hi-Woong

기존의 test 폴더에 

index.html 파일과

main.js 파일들을 추가하고 

터미널을 열어서  전시간에 설치한 parcel 패키지를 사용해

parcel index.html 실행!

이런식으로 오류가 뜨는게 정상!

package.json 파일로 들어와서

저문구를 지워준다.

개발용 의존성 패키지로 parcel-bundler 라는걸 설치를 했고  parcel-bundler에서 개발서버를 열어주는 

기능을 동작시킬수가있음 

그런데 parcel-bundler는 내 프로젝트 에만 설치가 되어있는 상태이기 때문에 Terminal에서 직접적으로 

parcel이라는 명령어를 동작시킬수가없다!

그래서 대신에 package.json 파일의 scripts 라는 옵션에다가 명령을 추가하게 되면 

어디까지나 프로젝트 내부에서만 명령이 동작하는걸로 인식을 시켜줄수 있겠고 

대신에 그 명령을 dev라는 이름으로 실행해주면 되겠다.

터미널로 다시 돌아와서 

npm run dev 입력!

dev는 로컬환경에서 개발서버를 열겠다.라는 의미를 가지는것이고

그개발서버를 여는 명령으로는 parcel-bundler라는 패키지 의 도움을 받아서 그명령을 실행하는것이다.

저링크를 클릭하면 프로젝트가 열리는것을 확인할수있음

main.js 에 작성한 console.log(hello world)가 정상적을 출력됨!

이번에는 scripts 옵션에 build를 추가해서 사용해보자!

터미널에서 실행! 아까와는 다르게 개발용 서버가 열리지않음

하지만 사진에 보면 

dist\라는 폴더가 만들어졌고 파일들이 생성되는걸 알수있다.

dist 폴더에 있는 index.html 파일을 실행시켜보면

구조가 이렇게 다닥닥 붙어있는게 있다.

이런것을 난독화라고 칭한다.

코드 난독화는 작성된 코드를 읽기 어렵게 만드는 작업을 말합니다.

빌드된 결과(제품)는 브라우저에서 해석되는 용도로,

용량을 축소하고 읽기 어렵게 만드는 등의 최적화를 거치는 것이 좋습니다.

결국 dist폴더안에 있는 파일들은 웹브라우저에서 동작하는 용도로 만들어짐 

사진의 npm install parcel-bundler -D 패키지 설치! 완료하면 프로젝트가 밑에사진처럼 바뀜

package.json 파일의 devDependencies가 추가가 됬는데 그안에 내용을 보면 아까전 

패키지 install parcel-bundler 가 들어와있는게 보일것이다.

현재 프로젝트에서 사용하는 패키지는 어떤게 있고 버전은 어떻게 되는지 확인이 가능함!

이번에는 다른 패키지를 설치해보도록 하자 패키지명까지 동일하게 작성후 -D 플래그는 빼주도록 한다!

node.modules 삭제를 해보도록하자 

npm install 의 약어로 npm i 까지 입력해도 가능!

그럼 프로젝트 를 새로고침해보면 node.modules가 다시 생성됨!

한번 설치된 패키지는 내역으로 남게되고 그 내역을 바탕으로 해서 실제 설치된 패키지를 지우더라도 

다시 npm install을 통해서 프로젝트에 다시 설치할수있음!

패키지를 설치하면 package-lock.josn 생성되는데 package.json 안에 명시되어져 있는 모듈들 

예를 들면 parcer-bundler , lodash 같은 모듈들이 내부적으로 사용하는 또다른 모듈 혹은 패캐지들을 

내부적을 관리를 해주어야 하는데 그정보가 자동적으로 package-lock.json 파일로 들어가게된다!

결론적으로 package.json 파일은 직접적으로 관리하는 개념이지만 

package-lock.josn 파일은 자동으로 관리되는 파일이라고 이해하면 쉽겠다.

그리고 추가적으로 두파일들은 삭제되면 안되는 파일들이다. 

아까 다루지 않았던 npm install parcel-bundler -D ,  npm install lodash 는 플래그의 유무인데 여기서 

-D(플래그)가 붙이는것은 내부 devDependecies에 설치가 되는것이고

 -D(플래그)를 붙이지 않으면 일반 dependecies에 설치가 되는것을 뜻한다.

요 링크로 들어가서 살짝아래로 스크롤하면 다운로드 버튼이 보일것이다. 

자기가 원하는 버전에 맞게 설치하면됨! 나는 1.1.7 버전을 설치하도록 하겠다!

밑에 보면 Assets 에 cnm-setup.zip 클릭하고 다운로드가 완료되었다면 설치파일 실행시키고 별다른 설정을 건드릴필요가

없어서 쭉~ Next 클릭하고 설치가 완료되었다면 

vs코드나 cmd창을 열어서 

입력하면 현재 설치되어있는 nvm 버전이 표시됨!(빨간색으로 nvm을 읽어드릴수없다면 컴퓨터 리부팅을 해주면

다시 말끔하게 나오는것을 확인할수있음! 시스템 환경변수 부분이 바뀌기 때문에 컴퓨터 재부팅을 해줘야한다!)

node.js 설치!

12.14.1 버전과 

12.21.0 버전을 인스톨후 

어떠한 버전을 쓸것인지 명시해줘야함!

use라는 version 이름을 입력하면 사용할수있다!

프론트엔드 개발에 있어서 node.js 버전이 개발에 영향을 줄수있음