Vue 06-1 Develope based on SFC

Seungju Hwang·2021년 1월 3일

0

Vue

목록 보기

6/18

SFC 기반으로 개발하기

Single File Component로 개발하기 위한 JavaScript 발전사

🔵 JavaScript 발전사

JavaScript 한계

JavaScript의 태생은 브라우저안에서 작동하는 언어였음
JavaScript는 파편화와 표준화의 역사

node.js (극복)

Google chrome V8 javascript engine으로 만들어 진 Javascript runtime environment이다.

내 로컬에서도 JS를 쓸 수 있게 되었어! (runtime environment : 프로그래밍 언어가 동작하는 환경)
즉, 브라우저 위에서만 구동하던 반쪽자리 JavaScript로 Server Side Programming을 할 수 있게 되었다

🔵 SFC를 가능하게 만들어주는 기능

Babel

파편화된 JavaScript 문법을 변환(해석) 해주기 위해 존재하는 도구

compiler : 특정 프로그래밍 언어로 쓰여 있는 문서를 다른 프로그래밍 언어로 번역한다!
파편화된 (크로스 브라우징 이슈) JS 문법을 디폴트한 문법으로 변환하기 위해 존재하는 도구 ( 최신문법을 이전 문법으로 변역해주는 것!)

Webpack

모듈 간의 의존성 문제를 해결하기 위해 존재하는 도구

JS는 모듈을 제공하지 않았었어.
모듈이란 ? scope라고 생각하면 됩니다. JS는 영역을 전체로 잡아서 다른 파일이라도 서로 공유했어요.

그래서 다음과 같은 문제가 발생했습니다.

<body>
	<script src="a.js"></script>
	<script src="b.js"></script>
</body>

//a.js
const a = 1
console.log(a)
// result : 1

//b.js
a = 2

-> 에러 뜸 Assignment to constant variable. 재할당 에러!!

JS도 모듈이 필요할 거 같아요ㅠ
그런데 모듈간의 의존성이 발생해요. ( a.js → b.js 라는 순서 때문에...)

-> 하나의 bundle:묶음 으로 만들어서 쓰도록 해주는 도구

기록하는 습관은 쉽게 무너지지 않아요.

이전 포스트

Vue 05 Single File Component

다음 포스트

Vue 06-2 Develope based on SFC 2

0개의 댓글