컴포넌트 등록 컴포넌트는 전역 등록, 지역 등록이 가능하다. 컴포넌트로 등록을 하기 위해서는 컴포넌트의 이름을 지정해야 하는데 파스칼 케이스 혹은 케밥 케이스(= 대쉬 케이스)로 작성이 가능하다. 전역 등록 전역으로 컴포넌트를 등록하면 컴포넌트 어디에서든지 import를 하지 않고 등록한 컴포넌트를 사용 가능하다. main.js에서 생성한 app에 component 메소드를 통해 등록한다. // main.js import {createApp} from 'vue' import App from '~/App' import Btn from '~/components/Btn' const app = createApp(App) app.component('Btn', Btn) // 전역 등록 app.mount('#app'..

Node.js와 NPM Node.js는 크롬 v8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임이다. 상황에 따라 Node.js의 버전을 변경할 수 있는 환경을 구축해야 한다. 이럴 때 사용할 수 있는 패키지가 nvm으로 Node Version Manager의 약자이다. npm은 Node.js를 설치하면 같이 설치되는데 Node.js Package Manager의 약자이다. npm init npm init은 Node.js 환경에서 npm이라는 Node.js Package Manager을 통해 init, 즉 초기화 하는 것은 현재 프로젝트를 npm으로 관리하겠다라는 것이다. 터미널에 명령어를 입력하면 패키지 이름을 입력하라고 하는데 이는 중복되지 않게 짓는 것이 좋다. 프로젝트라는 것은 어디까지나 하나의..

조건부 렌더링 v-if, v-else-if, v-else 디렉티브를 이용해서 조건부 렌더링이 가능하다. v-if Hello Vue! Application.. 1234 987 Good Morning const App = { data() { return { isShow: null, }; }, }; const vm = Vue.createApp(App).mount("#app"); 특정한 요소에 wrapping 되어서 출력되는 것을 원하지 않을 경우 div 대신 template 태그를 사용할 수 있다. template 태그를 사용하면 본인은 출력되지 않고 그 안에 있는 요소들만 출력된다. v-show v-show는 요소의 스타일 속성에 display: none을 추가하여 엘리먼트를 조건부로 표시합니다. Hello..

Computed computed는 계산된 데이터를 의미한다. computed 속성은 data의 변화를 감지하여 동적으로 계산된 값을 이용할 때 사용된다. const App = { data() { return { count: 3, }; }, computed: { double() { return this.count * 2; }, }, }; const vm = Vue.createApp(App).mount("#app"); computed 옵션 안에 작성되어 있는 double 함수는 더 이상 함수가 아니라 계산된 데이터로 취급된다. 캐싱 위 예제와 동일한 결과를 내고 싶다면 computed 말고도 다른 방법이 더 존재한다. 표현식 {{ this.count * 2 }} methods 옵션에 double 함수 생성하..

VueJS Vue.js는 사용자 인터페이스를 만들기 위한 자바스크립트 프레임워크다. 소개 | Vue.js v3-docs.vuejs-korea.org CDN을 사용하여 HTML의 상단에 script를 불러와서 간단하게 사용할 수 있다. Vue 시작하기 반응성 {{ counter }} 예제의 결과를 브라우저에서 확인하면 1초마다 1이 증가하는 것을 확인할 수 있다. 현재 couter라는 데이터와 DOM이 연결된 상태이고 이렇게 데이터가 변경이 되면 연결되어 있는 화면도 같이 변경되는 것을 반응성이라고 한다. 디렉티브 {{ counter }} Click Me! v-로 시작하는 속성들을 디렉티브라고 부른다. 디렉티브는 VueJS의 문법으로 렌더링 된 DOM에 반응형 동작을 하도록 도와준다. v-bind 디렉티브..