index.html 파일 생성, main.js 생성 후 script src 로 이어준다.
main.js 에는 다음과 같이 콘솔 로그를 써준다.
이제 확인을 하려면 보통 이전에는 VSC 에 설치한
Live server 라는 플러그인의 도움을 받아서 개발용 서버를 열고
그 서버에 접근을 해서 페이지를 보는 방식을 사용했는데,
이런 방식은 다소 원시적인 방식이고, 최신의 웹 프론트엔드 개발을 할때에는
Live server 를 이용하지 않는다.
그리하여 설치한 모듈중 하나인 parcel 을 이용하여 확인을 하려 하는데 parcel 자체를 인식을 못한다.
이는 로컬 프로젝트 내부에서만 동작할 수 있도록 설치를 한것이지, 외부에서는 실행 자체를 할 수 없기 때문이다.
그렇기에 따로 package.json 의 script 에
"dev": "parcel index.html"이라고 선언을 해준뒤에 저장을 해주고
$npm run dev로 npm 을 사용하여 parcel-bundler 의 도움을 받아 index.html 의 파일을 볼 수 있는 서버를 만드는 'dev' 라는 script 를 run 한다.
성공적으로 로컬호스트를 이용한 서버가 만들어졌고 해당 주소로 이동하면 index.html 이 보이게 되고
콘솔로그에 성공적으로 hello world 가 출력되게 된다.
이번에는 설치한 모듈중 하나인 lodash 를 사용하려 한다.
main.js 에 1번줄과 같이
import _ from 'lodash'; 를 입력하여 _ 변수로 사용할 수 있게 해주고
4번줄과같이
console.log(_.camelCase('hello world'));로 _(lodash 내부에있는) 'hello world' 라는 문자열에 camelCase 라는 메소드를 실행하여 반환된 결과값을 console 로 출력한다.
결과값을 성공적으로 확인할 수 있다.
이번에는 package.json 의 scripts 에
"build" : "parcel build index.html"를 추가하여 전과 다르게 사용자들이 직접 볼 수 있는 결과물을 출력해주는 script를 추가해준다.
성공적으로 build 가 run 이 되면 위와같이 dist 라는 폴더가 생성된다.
내부를 확인하면 index.html 과 다른 js 파일들이 생성이 되었다.
생성된 index.html 을 확인하면 코드가 다닥다닥 붙어져 있는데 이를 '난독화' 라고 하고
코드 난독화는 작성된 코드를 읽기 어렵게 만드는 작업을 말한다.
빌드된 결과(제품)는 브라우저에서 해석되는 용도로,
용량을 축소하고 읽기 어렵게 만드는 등의 최적화를 거치는 것이 좋다.
모든 띄어쓰기도 용량을 차지하고 어짜피 브라우저가 읽을 용도이기에 압축버전으로 표현한 것이다.
