Vue 06-1 Develope based on SFC

3301 단어 vueTILTIL

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:묶음 으로 만들어서 쓰도록 해주는 도구

[졸업프로젝트-3] DataBase replication
2. Image Classification

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage