Muscardinus

webpack 설치 // 필요조건: package.json npm install webpack webpack-cli webpack -> webpack 그 자체 webpack -> 우리가 조금 더 webpack을 쉽게 다루기 위해서 필요하다. 우리가 wbpack을 사용하기 위해서는 2가지의 세팅이 항상 필요하다. 어디서 파일을 찾을 수 있는지와 어디에 결과물(bundle)를 놓을 것인가 이러한 세팅을 webpack.config.js에 작성한다. module.exports = { mode: 'development', // 어디에서 부터 시작할것인지 -> entry // default -> src/index.js // 여러개의 entry point도 가능하다. entry: './index.js', output..

추후에 웹팩에 대해서는 더 심도있게 다루는 글을 쓸 예정이다. Webpack은 asset bundler이다. 보통, 하나의 애플리케이션을 개발하기 위해서는 많은 js, img, css 등 여러 파일들을 사용한다. 코드를 여러 파일로 나눠서 관리하는 것이 큰 애플리케이션 관리에도 이롭다. 그러나, production의 관점에서는 결코 좋지 않다. 더 많은 파일들을 다운로드 해야하고, 애플리케이션이 로딩하는 더 많은 시간을 요구하게 된다. 적은 파일로 압축되는 것이 좋을 것 같다. 이러한 최적화 해주는 것이 Webpack이다. Webpack은 다양한 종류의 파일들을 다뤄서, 애플리케이션을 배포할 수 있고 혹은, 개발 서버를 제공해 줄 수 있다. 또한, 3rd party library를 설치하여 webpack..

let vm = Vue.createApp({}); vm.component('hello', { template: `{{ message }}`, data() { return { message: 'Hello world', }; }, }); vm.mount('#app');

Vue에서 data의 변화를 계속 추적할 수 있는 이유는 Proxy 때문이다. 엑셀을 예로 들어보자 A1 혹은 A2의 값을 바꿈에 따라서 A3의 값은 계속 바뀌는 것을 알 수 있다. 이러한 원리는 Vue에서도 비슷하게 적용된다. 이것을 Reactivity라고 한다. 따라서, Vue의 원리를 묻는다면 Proxy를 활용한 Reactivity 특징을 보인다라고 하면 될 거 같다. Proxy 사용법 const data = { name: "Luis" }; const observedData = new Proxy(data, { set(target, key, value) { target[key] = value; } }); observedData.name = "John"; console.log(observedData.n..

Virtual DOM은 JS객체이다. 실제 DOM의 얕은 복사이다. Virtual DOM에서 data의 비교 및 업데이트를 하는 것이, 실제 DOM에서 하는 것 보다 훨씬 효율적이다.

let vm = Vue.createApp({ data() { return { message: 'Hello world!', }; }, beforeCreate() { console.log('beforeCreate() function called!', this.message); }, created() { console.log('created() function called!', this.message); }, beforeMount() { // template은 compile 됐지만, page에 적용은 아직 안됐다. console.log('beforeMount() function called!', this.$el); }, mounted() { console.log('mounted() function called..

배열 혹은 객체 내의 속성을 보이고 싶을 때가 있다. let vm = Vue.createApp({ data() { return { birds: ['Pigeons', 'Eagles', 'Doves', 'Parrots'], people: [ { name: 'John', age: 20 }, { name: 'Rick', age: 18 }, { name: 'Amy', age: 33 } ] } } }).mount('#app'); {{ bird }} - {{ index }} {{ key }}: {{ value }} - Index: {{ index }}

상황에 따라서 보여지고 싶은것과 보여지기 싫은 부분이 있을 것이다. 이를 위해서 Vue에서는 v-if / v-else-if / v-else가 있다. Showing v-if directive content v-else-if v-else 만일 조건문에 한 덩어리의 html을 넣고 싶으면 Bonus content v-else-if template를 사용하자 v-if 말고, v-show도 있다. v-show v-show로 할 경우, html을 확인할때, 조건이 부합하지 않으면 display:none이라는 style이 들어간다. v-show의 경우 template에 사용할 수 없으며, 주로 toggle에 사용된다.