티스토리 뷰
Parcel SFC
와 드디어 bundler에 대해서 배우기 시작했습니다.bundle란 묶는다는 의미로 vue 작업 요소를 js로 사용 가능하게 변화시키고 묶어주는 것 입니다.
참!!
이것은 SFC 구성을 목적으로 하는 것이라는 것을 알고 시작을 해보도록 하겠습니다.
🐻❄️ 1. Vue 프로젝트 설치 및 기본 구성
> npm init -y
> npm i vue@next
> npm i sass -Dnpm init -y: 프로젝트를 시작하기 위한 기본 설정
=> package.json 생성
npm i vue@버전: vue의 버전 설치(@next)
=> node_modules, package-lock.json 생성
npm i sass -D: devDepedencies에 scss를 설치
추가 개념)node_modules 의 vue/index.js은 Node.js를 통해서 작동을 하며 자세히 보면 module.exports로 되어 있습니다.
이것은 commonJS로 되어 있어 가져오기(require), 내보내기(module.exports) 로 합니다.
즉, JavaScript를 브라우저에서만 사용하는 것이 아닌 일반적인 범용언어로 사용하기 위한 것입니다.
🐻❄️ 2. 폴더 및 파일 관리
다음과 같이 기본적으로 폴더, 파일을 제작해서 관리를 해보겠습니다.
📦src
┣ 📜App.vue
┣ 📜index.html
┗ 📜main.js> main.js
//별 사용 이유: vue의 모든 정보 가져오기 => CommonJS로 이루어졌기 때문
import * as Vue from 'vue';
import App from './App.vue';
Vue.createApp(App).mount('#app');> App.vue
구조를 잘 파악하는 것이 정말 좋습니다.
<template>
// html 요소
<div>{{msg}}</div>
</template>
<script>
export default {
data() {
return {
msg: "hello"
}
}
}
</script>
<style lang="scss">
</style>> index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script type="module" src="./main.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>🐻❄️ 3. parcel setting
사실 여기부터 진짜 시작입니다. ㅋㅋㅋㅋㅋ
// parcel 설치
> npm i -D parcel> 실행 버전 2개
package.json 파일의 scripts 부분에 다음과 같이 넣습니다.
1. 개발 서버
parcel 진입점
주석도 많고 보기 좋다.
"scripts": {
"dev" : "parcel ./src/index.html"
}2. 배포용
parcel build 진입점
브라우저 해석 용으로 난독화되어 용량이 적게들고 보안 유지에 좋다.
"scripts": {
"build" : "parcel build ./src/index.html"
}but ❗️❗️❗️
build 용으로 하다가 다음과 같은 에러가 나온다.
=> 프로젝트의 진입점을 package.json의 "main"으로 지정되어서 발생하는 문제입니다.
우선 지우면 문제가 해결 됩니다. 아니면 이름을 바꾸거나 :)
마치며
parcel은 세밀한 제어는 불가능하지만 간단하게 묶어서 실행할 수 있다는 장점이 있습니다.
이러한 장점으로 개인적으로 하기에는 좋지만 협업에서는 사용하지 않는 것으로 알고 있습니다.
이젠 webpack을 공부하고 오겠습니다. :)
REF
데브코스
'Tip and Error > ETC' 카테고리의 다른 글
| Vue 프로젝트 구성(w. webpack) - 2 (2) | 2022.05.10 |
|---|---|
| Vue 프로젝트 구성(w. webpack) - 1 (0) | 2022.05.10 |
| Window 랑 Mac 협업시 문제점(그냥 간단 Tip) (2) | 2022.04.20 |
| one-way hash function(Password) (0) | 2022.03.21 |
| URL 여행 (0) | 2022.03.21 |