npm init -y // 프로젝트 초기화npm i vue@next // vue 패키지 설치 node_modules에 받아온 vue 패키지에서 index.js를 살펴보면 commonJS 방식으로 모듈이 내보내기 된 것을 볼 수 있다.
따라서 vue를 가져올 때는 import * as Vue from "vue"로 가져와야 한다.
(vue 패키지의 모든 것을 Vue로 담아서 가져오겠다.)
아래 예제에서는 vue 확장자를 가진 컴포넌트 파일을 main에 연결하고있다.
하지만 vue 확장자를 가진 파일은 브라우저에서 동작하지 못하는 문제가 발생한다.
따라서 vue 파일을 해석해서 js 파일로 변환해주는 패키지가 필요하다.
이 패키지는 번들러에 따라 달라진다.
이렇게 컴포넌트를 파일로 분리해서 관리하는 것을 SFC(Single File Components)라고 한다.
SFC의 구조는 <template> <script> <style> 태그로 분류된다.
<template>: 컴포넌트의 HTML 부분
<script>: 컴포넌트에서 vuejs 옵션들을 지정하는 부분
<style>: 컴포넌트의 스타일 부분
parcel 번들러란?
parcel이라는 번들러가 브라우저에서 동작할 수 있는 파일들로 묶어서 내보내기를 해준다.
(Node.js 14 버전 이상만 가능)
parcel을 사용하려면 필요한 몇 가지 옵션들이 있다.
index.html에 script 부분에서 type 속성을 module로 지정해야 한다.
defer 속성은 필요 없다.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="module" src="./main.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>npm i -D parcel // parcel를 개발 의존성 패키지로 설치package.json의 scripts 부분에 아래 내용 작성
명렁어 뒤에 진입점을 지정해야 한다.
"scripts": {
"dev": "parcel ./src/index.html"
},npm run dev를 입력하면 parcel 번들러가 필요한 패키지들을 추가 설치 해준다.
빌드가 되었고 개발 서버에 해당 프로젝트를 오픈하였다.
폴더 구조를 살펴보면 parcel 번들러가 dist라는 폴더 내부에 브라우저에서 동작할 수 있는 파일로 변환시킨 것을 확인할 수 있다.
실제 개발할 때는 src, 배포할 때는 dist를 배포하면 된다.
하지만 현재 변환 된 파일을 보면 난독화가 되어있지 않다.
어차피 브라우저에서 동작 할 파일이기 때문에 개발자가 이를 해석 할 필요가 없다.
따라서 코드를 난독화시켜서 용량을 줄이고 보안 측면에서 이점을 얻는게 훨씬 유리하다.
따라서 배포를 할 때는 build 명령을 사용하는 것이 좋다.
터미널에 npm run build를 입력하면 개발 서버는 열지 않고 난독화 된 파일로 변환만 해주는 것을 볼 수 있다.
추가로 dist 폴더는 언제든지 명렁어로 재생성이 가능하기 때문에 github에 업로드 할 때 .gitignore 파일에 등록하는 것을 권장한다.
vue에서 scss 사용하기
npm i sass -D // sass 패키지 설치style 태그의 lang 속성에 scss 값을 지정하면 parcel 번들러가 자동으로 scss 문법을 해석해서 적용시킨다.
결론
패키지나 구성 옵션들을 신경쓰지 않고 프로젝트를 시작할 수 있다.
하지만 세밀한 번들러 제어는 가능하지 않다는 단점이 있다.
이럴 때는 webpack을 사용하면 된다.
webpack은 세밀한 제어가 가능하지만 구성 옵션이나 설치 패키지들이 많다.
따라서 실무에서 많이 사용되지만 연습 프로젝트를 구성 할 경우에는 까다로운 부분들이 있다.
