적자 생존 (Write, Survive!)

이번 단원은 라우팅이다.라우팅을 이용하면 우리가 하나의 홈페이지에서 여러 페이지로 이동하는 것과 같은 기능을 구현할 수 있다.1. vue-router란?최근 개발되는 웹 애플리케이션은 SPA(단일 페이지 애플리케이션) 구조 SPA(단일 페이지 애플리케이션: Single Page Application): 하나의 페이지 안에서 데스크톱 애플리케이션과 같은 사용자 경험을 제공 여러 화면을 하나의 페이지 안에서 제공, 화면을 별도로 로딩 X→ 화면마다 고유의 식별자(URI)를 기반으로 화면을 렌더링해야 함 요청한 URI 경로에 따라 각각 다른 화면이 렌더링vue-router 라이브러리를 이용vue-routervue.js의 공식 라우터 라이브러리중첩된 경로, 뷰를 매핑컴포넌트 기반의 라우팅 구현Vue.js의 전환..

1. Composition API란?Composition API는 대규모 Vue 애플리케이션에서 컴포넌트의 로직을 효과적으로 구성하고 재사용 할 수 있도록 만든 함수 기반 API이며, Vue3에서 새롭게 추가된 기능이다. 기존 컴포넌트 작성방식 → data, methods, computed, watch와 같은 옵션API(Options API)를 이용복잡한 구조의 애플리케이션일 경우 단점이 존재컴포넌트 내부에 동일한 논리적 관심사 코드가 분리하여 존재컴포넌트 로직 재사용의 불편함2. setup 메서드를 이용한 초기화Vue 3 컴포넌트의 초기 실행 지점data, methods, computed 옵션이 사라지고 초기화 작업을 수행하는 setup 메서드를 이용해 컴포넌트 상태를 초기화 setup()으로 사용하거..

단일 파일 컴포넌트의 심화과정이다.학습 난이도가 쉽지 않아 정리 과정에서 대표 강사님의 정리본을 참고하였다.1. 단일 파일 컴포넌트에서의 스타일컴포넌트 내에서 CSS 범위를 현재 컴포넌트로만 지정하는 것과 동일한 효과2. 슬롯(Slot)슬롯(Slot) : Vue 컴포넌트에서 콘텐츠를 전달하는 강력한 방법컴포넌트를 더 유연하고 재사용 가능하게 만들어주는 중요한 기능 슬롯 = 구멍부모 컴포넌트에서 자식 컴포넌트로 HTML 내용을 전달할 수 있게 해주는 창구 역할 예를 들어, 버튼 컴포넌트를 만들 때:버튼의 스타일, 동작은 같지만버튼 안의 텍스트나 아이콘은 다르게 하고 싶을 때 슬롯을 사용슬롯을 사용하기 전에는 자식 컴포넌트가 정해놓은 템플릿만 불러올 수 있었음.슬롯의 장점컴포넌트 재사용성 증가: 같은 구조에..

단일 파일 컴포넌트(Single File Component) : 컴포넌트 하나를 .vue 파일 하나에 작성하여 붙여진 이름Vue의 기본 구성 단위나의 파일에 , : 컴포넌트 내부에서 사용할 Vue 컴포넌트 내부의 옵션을 정의할 수 있다. : 컴포넌트가 사용할 스타일을 지정2. 프로젝트 구조- main.jsimport { createApp } from 'vue';import App from './App.vue';import './assets/main.css';const app = createApp(App);app.mount('#app');간단한 단일 파일 컴포넌트- CheckboxItem.vue 옵션1name 옵션을 지정하지 않으면 Vue.js 개발자 도구에서 컴포넌트 트리가 제대로 나타나지 않을 ..

스타일 역시 바인딩으로 처리할 수 있다.코드 예시로 알아보자. (예제가 길어서 생략하여 첨부하였다.)1. HTML의 스타일 적용기존의 HTML의 스타일 적용클래스명, 속성명 지정시 케밥 표기법으로 적용 (kebab-style)JavaScript 표현식에서는 ‘-’ 표기가 연산자이므로 사용할 수 없음.→ 케밥 대신에 카멜 표기법을 사용 (camelStyle)인라인 스타일v-bind:style = :style데이터 속성에 자바스크립트 객체로 작성 객체 형태로 스타일 지정테스트... 마우스 이벤트로 동적 스타일 변경테스트...2. CSS 클래스 바인딩v-bind:class = "...” = :class=”..."클래스명 문자열을 바인딩하는 방법true/false 값을 가진 객체를 바인딩 하는 방법문자열로 클래..

이벤트 처리는 재밌지만 꽤 어렵다고 느껴지는 것 같다.1 .인라인 이벤트 처리v-on 디렉티브를 이용. → @으로 줄여쓸 수 있음v-on:[이벤트이름]=”표현식” → @event=”” : 이벤트에는 click과 같이 이벤트명을 넣는다.인라인 이벤트로 처리하면 $event를 사용여러 기능을 인라인 이벤트로 모두 작성하기 힘듬→ 컴포넌트 인스턴스에 등록한 메소드를 이벤트 처리 함수로 사용할 수 있음.이벤트 핸들러 메서드Vue 인스턴스의 methods 속성에 정의한 함수를 이벤트 처리 함수로 연결 카운터: {{ count }} +1 증가 두 개의 메서드가 존재하고, 두 개의 메서드를 모두 호출하고 싶을 때두 개의 핸들러 실행 2. 이벤트 객체메서드의 첫 번째 인자로 이벤트 객체 e를 전달받을 ..

애플리케이션 인스턴스 : vue.createApp메서드를 호출하여 만들어진 객체 옵션 객체 : Vue 인스턴스를 생성할 때 전달하는 속성들을 담은 객체 (name, data옵션) 루트 인스턴스 : DOM 트리에 마운트되어야 화면으로 렌더링 (vm) 1. Data 옵션: 컴포넌트가 관리하고 추적해야 할 데이터를 등록할 때 사용 관리와 추적 → 변경을 탐지하고 추적하여 화면을 갱신 반드시 객체를 리턴하는 함수로 부여되어야 함. 초기 문자를 사용할 때, 특수문자를 사용하면 안된다.→ 특히, $로 시작하는 이름은 인스턴스 내부에서 특별한 용도이기 때문에 $,_로 시작하면 안됨.2. 계산된 속성(Computed Property): data나 다른 속성이 변경될 때 함수가 실행되어(계산된) 저장된 캐싱된 값 함수의..

템플릿 문법은 Vue의 핵심 개념 중 하나이다.Vue의 반응형 구조에서 기초 디렉티브와 데이터 바인딩은 중요한 개념이다.1.  보간법(Interpolation)모델을 통해 데이터를 불러와서 HTML 영역에 템플릿으로 표현하는 방법즉 ,데이터를 화면에 출력하는 가장 기본적인 방식이다. vue app 인스턴스에 model 객체를 등록하는데 보간법은 데이터를 DOM에 반영할 수 있게 해준다.이중 중괄호 {{ }} 를 사용하여 표현한다.2개의 중괄호가 콧수염을 닮았다고 해서 다른 말로 콧수염 표현식(Mustache Expression) 이라고도 한다.2. 기본 디렉티브Vue 디렉티브는 템플릿 안에 사용하는 v- 로 시작하는 속성으로, HTML 요소와 관련된 작업을 지정할 수 있다.v-text, v-html 디렉..

기술 블로그의 첫 공부 내용은 vue.js이다.HTML과 CSS를 먼저 올리고 싶었는데 진도가 너무 빨라 Vue.js의 복습을 위해서 vue부터 시작하고자 한다.1. Vue.jsVue.js란 웹 화면 작성에 최적화된 프레임워크이다.다른 프레임워크에 비해 유연하고 가볍다.전체 아키텍처를 새롭게 구성할 필요 없이 기존 웹 애플리케이션의 일부 UI화면만 적용하는 것이 가능하다.SPA(Single Page Application) 단일 페이지 애플리케이션 아키텍처 구성을 위한 라우터(Router) 기능도 지원한다.vue를 쓰는 이유 : 데이터가 바뀌면 화면이 바뀐다.vue는 mvvm 패턴을 따른다.MVVM 패턴(Model-View-ViewModel) : 애플리케이션 로직과 UI의 분리를 위해 설계된 패턴View ..