2022년 01월 22일

📚 오늘 도전하고, 배운 것

Vue.js

• 디렉티브: HTML에 사용되는 특별한 기호로 디렉티브가 정의한 기능 혹은 디렉티브에 연결된 변수의 값에 따라 DOM 엘리먼트를 변화시킴
• 선언적 렌더링: jQuery와 같은 명령형 렌더링과 상반되는 개념. DOM 엘리먼트에게 다시 렌더링할 것을 명령하지 않고 DOM과 연결된 상태와 속성이 변경될 때 자동으로 DOM 엘리먼트가 업데이트 되는 것 선언적 프로그래밍

<script setup>

• <template>에서 <script> 내 변수들을 직접 접근할 수 있는 방법을 제시
• Vue 3에서는 Options API와 다르게 components옵션을 통해 컴포넌트를 지정하지 않는다. <script setup> 덕분에 가능함.
  • <script setup>이 내부적으로 <template>을 render()함수로 변경하기 때문

Vite

• 에반 유가 Vue 3로 개발을 할 때 별다른 번들 생성 없이 ES Module을 바로 웹 브라우저에 렌더링할 수 있도록 만든 개발 툴. 매우 빠른 HMR을 제공
• 번들을 생성하는 과정이 필요 없어서 서버의 시작 속도가 빠름

$ npm init vite
$ yarn install
$ npm run dev

만약 ES 모듈을 하나의 번들로 만들고 싶다면 다음 명령어를 수행한다.

$ npm run build

별다른 설정이 없닫면 dist 폴더가 생성되고 그 아래에 번들화된 .js, .html, .css, asset파일들이 생성된다.

🤔 학습하면서 궁금하거나 어려웠던 점

• Vue 3에서는 getter/setter 범위를 벗어난 객체의 루트 속성 추가를 감지할 수 있는 방법을 제시하는데 거기서 데이터를 프록시로 변환한다고 한다. 프록시가 ES6에 추가된 것이라고 들었는데 무엇인지 알아봐야겠다.
• yarn이란 무엇인가?? + 사용법

🌅 내일은 무엇을?

• ES6 Proxy 학습
• yarn 학습
• package-lock.json이란? 읽기

🖋 log

• 4km 뛰었다. 종아리가 많이 당겼다. 내일도 운동하는 시간을 꼭 마련하리..
• 아침에 기분이 좋지 않았는데 풀렸다. 마음에 지지 말자!!