코딩 헬스장

1. Vue - router ? routing 이란 웹 페이지간 이동 방법이며, 페이지를 이동할 때 서버에 요청해 갱신하는 것이 아니라 미리 해당 페이지를 구성해놓고 클라이언트의 라우팅을 이용하여 화면을 갱신합니다. 이러한 방식을 SPA 라고 합니다. (Vue, React, Angular .. 등에서 사용) vue-router 란 Vue에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리 입니다. 2. router 설치 방법 2-1. CDN 방식 2-2. npm / yarn 방식 npm 방식 : npm install vue-router yarn 방식 : yarn add vue-router 3. router 등록과 옵션 및 관련 태그 3-1. router 등록 및 옵션 // router 등록 예시..

1. Vue - method ? 뷰의 메서드는 특정 기능 별로 묶을 수 있는 JS의 함수를 의미합니다. 메서드는 흔히 뷰 탬플릿의 버튼 이벤트 처리부터 HTTP 통신까지 다양한 성격의 코드로 구성됩니다. 2. method 등록 위와 같이 Vue 정의 시 methods 속성에 함수들을 정의합니다. 2. method 실전 예제! click me! click me 버튼 클릭 시 'clicked!!'가 콘솔 창에 출력되는 것을 확인할 수 있습니다. 🔗 참고한 글 Cracking Vue.js joshua1988.github.io

1. Vue - props? 일반적인 props와 같은 의미로, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용되는 단방향 데이터 전달 방식을 말합니다. 1 - 2. Vue에서 props 사용방법 1 - 2 (1). 정적 props app-header 컴포넌트 선언부를 보면 props라는 객체에 propsdata라는 props로 받을 명칭을 정의하고, 해당 값을 템플릿 문법( {{propsdata}} )을 통해 태그에 사용합니다. 선언 태그 부분에서 propsdata값에 'hi ~'라는 문자열을 넘겨줍니다. 실행해보면 "hi ~"라는 문자가 나오는 것을 확인할 수 있습니다. 1 - 2 (2). 동적 props 자식 컴포넌트에서 [ v-bind: 프롭스 속성 이름 = "상위 컴포넌트의 데이터 이..

1. Vue - Component ? 컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능입니다. 컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고, 화면 빠르게 구조화하여 일괄적인 패턴으로 개발 할 수 있습니다. 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는데 도움이 되며, 상위 수준의 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트입니다. Vue 컴포넌트는 Vue 인스턴스이기 때문에 모든 옵션 객체를 사용할 수 있으며, 같은 라이프사이클 훅을 사용할 수 있습니다. 2. 컴포넌트 등록 방법 2가지 (전역, 지역) 2-1. 전역 컴포넌트 Vue.component('컴포넌트 이름', { // 컴포넌트 내용 }); Vue.component('..

1. Vue - Instance ? 인스턴스는 뷰를 개발할 때 필수로 생성해야 하는 코드입니다. 인스턴스에는 사용할 수 있는 여러가지 속성과 API가 있습니다. 인스턴스는 아래와 같이 생성할 수 있습니다. let vm = new Vue(); 2. Vue - Instance 속성, API들 new Vue({ el: , template: , data: , methods: , created: , watch: , }); el : 인스턴스가 그려지는 화면의 시작점 (특정 HTML 테그) template : 화면에 표시할 요소 (HTML, CSS .. ) data : 뷰의 반응성(Reactivity)이 반영된 데이터 속성 methods : 화면의 동작과 이벤트 로직을 제어하는 메서드 created : 뷰의 라이프..