Muscardinus

Component의 재사용성을 위해서 특정한 부분에 대해서 부모에서 자식으로 html을 보내고 싶을 때가 있을 수 있다. 물론 props로 보낼 수 있지만, 그럴 경우 불편함이 있다. 이러한 불편함을 해결해주는 것이 slot이다. 쉽게말해, 부모에서 자식컴포넌트로 content를 전달하고 싶을 때, slot을 사용하는 것이 유용하다. This is some help text. Submit No Form to render 자식 Component에서 slot을 넣어, content가 들어갈 부분을 표시한다. slot 태그 안에 내용을 넣으면, 비어 있는 content에 대한 대체 content가 들어간다. 하지만, slot을 여러개로 나누고 싶을 때도 있을것이다. 그럴 경우, This is some help..

Update Age The user is {{ age }} years old {{ ageDoubled }} props에 자료형과 require, default, validator 등을 넣어서 더 정확하게 props를 사용할 수 있다. 또한, validator 함수는 component의 인스턴스가 새성되기 전에 먼저 생성되기 때문에, data/computed/methods 등에 접근이 불가하다. 이것 외에도, 다양한 설정을 놓을 수 있다. https://v3.vuejs.org/guide/component-props.html#prop-validation Props | Vue.js Props This page assumes you've already read the Components Basics. Read ..

부모 컴포넌트에서 data에 대해서 어떠한 event를 행하여 data에 변화를 주면 자식 컴포넌트의 data도 바뀔 수 있다. 하지만, 역으로 하는것은 쉽지 않다. 이를 해결하기 위해서 vue에서는 emit을 제공해준다. Hey! Update Age The user is {{ age }} years old 부모에서 v-on을 사용하여 @age-change라는 event를 선언하고, 자식에서 이를 사용하고 싶다면 this.$emit(event 이름)을 하여, 호출하면 된다. emit과 함께 어떤한 값을 전달하고 싶다면.... Hey! Update Age The user is {{ age }} years old 이런 식으로, this.$emit에 event 이름과 값을 전달해주면 된다. emits라는 배열..

Hey! The user is {{ age }} years old 부모에서 자식에게 props를 주기 위해서는 바인딩을 해야한다. ex) :age="age" => age라는 이름의 props에 age값을 준다. 자식에서는 props에 해당하는 값을 배열안에 넣는다.

Linting? Linting이란 code에 대해서 분석을 하고, 혹시나 있을 에러를 알려주는 것이다. Node와 브라우저에서는 runtime에 code에서 error가 있는지를 분석한다. 또한, 정해진 규칙을 지키지 않았을때 알려준다. 여러 명의 개발자가 협업할 때는 공통된 규칙이 필요하다. 쉽게 말해서 코드 품질을 review해주는 역할을 한다. 그 중 하나가 ESLint이다. 설치 npm install -g eslint eslint에서 세팅을 할때는 여러 가지 방법이 있다. https://eslint.org/docs/user-guide/configuring/ Configuring ESLint eslint.org .eslintrc.json으로 해보자 { // preset 설정 "extends": "e..

PostCSS는 SASS와 Webpack과 함께 자주 사용된다. PostCSS는 CSS의 전처리기이다. CSS를 compile해서 객체로 만든다. 이 객체는 js를 활용하여 변화를 일으킬 수 있다. 변화를 일으키고 다시 css 파일로 변환시킨다. https://github.com/postcss/postcss GitHub - postcss/postcss: Transforming styles with JS plugins Transforming styles with JS plugins. Contribute to postcss/postcss development by creating an account on GitHub. github.com 설치 npm install postcss-loader --save-de..

https://sass-lang.com/ Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com SASS는 css와 같은 stylesheet 언어이다. 하지만, browser에서는 인식 할 수 없는 언어이기 때문에 css 로compile해서 사용해야한다. 이를 위해서 Webpack을 사용한다. 설치 npm install node-sass sass-loader css-loader --save-dev node-sass -> SASS 코드를 css 코드로 compile 한다. sass-l..

Babel은 js compiler로 일부 browser에서 사용이 불가한 js 일부 언어를 변형(DownGrade라고 생각하면 쉽다)하여 사용할 수 있게 도와주는 것이다. 우리가 Babel을 사용하기 위해서는 대체로 아래 3가지를 설치한다. Babel Core - Babel의 코어한 부분을 가지고 있다. code를 읽고 compile하는 역할을 한다. Babel Loader - Webpack에 Babel을 사용하기 위해서 필요하다. Babel Preset - Babel이 compile을 하면서 어떤 부분에서 변형을 할 것인지를 결정한다. 설치 npm install --save-dev @babel/core @babel/preset-env babel-loader module.exports = { // 어디에..