Front

Setup() setup() 함수(hook)은 CompositionAPI 사용을 위한 진입점 역할을 합니다 그리고 setup 함수는 컴포넌트 인스턴스가 생성되기 전에 실행됩니다. 기본 사용 방법입니다. 첫번째 매개변수로는 props가 넘어옵니다 두번째 매개변수로는 Context가 넘어옵니다. Context에서는 attrs, slot, emit, expore 속성이 있습니다. Context의 속성에 관해서는 다른 포스팅에서 설명하겠습니다.

ref(), onMounted()는 Options API를 보완해 Vue.js3에 새롭게 Composition API 다. Composition API의 종류는 다양하지만 API의 성격에 따라 포괄적인 용어로 구별할 수 있다. 이러한 용어가 어떤 의미를 갖고 있는지 API를 배우기 전에 먼저 살펴보자 Composition API는 성격에 따라 3개로 나뉜다. - 반응형 API - 라이프 사이클 훅 - 종속성 주입 파랑 - 반응형 API 빨강 - 라이프 사이클 훅 노랑 - 종속성 주입 반응형 API (Reactivity API) 말 그대로 반응하는 데이터와 관련된 API 세트다. 라이프 사이클 훅 Vue 인스턴스나 컴포넌트가 생성될 때, 미리 사전에 정의된 몇 단계의 과정을 거치게 되는데 이를 라이프 사이..

Vue3에서 새롭게 등장한 Composition API는 Options API를 단점을 보완해서 새롭게 등장한 API다. Vue3 공식사이트에서 Compositon API로 개발하기를 권장하고 있다. Composition API란 옵션 (data, methos, ...)를 선언하는 대신 가져온 함수 (ref, onMounted, ...)를 사용하여 vue 컴포넌트를 작성할 수 있는 API 세트를 말한다. 옵션 API에서는 함수 작성시 methos 영역에서만 가능했다면 Composition API는 script단 어디서든 함수 작성이 가능하다. 이것들이 다 compositionAPI다. 이것들은 OptionsAPI다 왜 compositonAPI 인가? optionsAPI 에서는 논리적 관심사를 처리하는 코..

Root 컴포넌트 렌더링 과정 alias - 파일 시스템 경로에 별칭을 만들때 사용한다 App.vue가 Root 컴포넌트 1. 맨 처음에 Web이 실행되면 index.html 파일을 실행한다. 2. 그러면 스크립트 태그에 선언된 메인 모듈을 가져온다. 그게 main.js 다. 3. main.js를 살펴보면 createApp이란 메서드가 있다. 이건 실제 Vue 애플리케이션. Vue인스턴스를 생성하는 메서드다. 4. 여기에 App.vue가 들어가게 된다. 5. 그리고 생성된 vue인스턴스를 mount() 메서드 안에 #app에 마운트 시킨다. 6. App.vue에 있는 root 컴포넌트가 렌더링 된다. ESLint, Prettier https://ko.vuejs.org/style-guide/ Vue.js ..

1. Vue란 무엇인가? Vue의 특징 1. 선언적 렌더링 - 선언만해도 템플릿에 사용하면 자동으로 값이 바뀌고 렌더링된다. - 자바스크립트로만 하려면 값을 바꾸고 싶을때마다 다시 변수에 할당해야한다. 2. 반응성 - 값이 바뀌었을때 자동으로 업데이트 된다. 핵심 기능 1. 바인딩 v-bind 디렉티브 - dom의 속성에 데이터를 바인딩해준다. - 템플릿의 태그에서 :로 시작하는건 다 바인딩 2. v-on 이벤트 헨들링 - 템플릿의 태그에서 @로 시작하는건 다 이벤트 3. v-model 양방향 바인딩 4. v-if 5. v-for 6. v-html 7. v-once - 한번만 데이터가 변경되고 반응하지 않게 하는 기능 2. 컴포넌트 이해하기 컴포넌트 - 재사용 모듈 - UI 재사용 한다 문자열 컴포넌트 ..

$emit('update:modelValue')" @hide="changeViewMoed('SignInForm')"> -->

https://github.com/JohnCampionJr/vite-plugin-vue-layouts GitHub - JohnCampionJr/vite-plugin-vue-layouts: Vue layout plugin for Vite Vue layout plugin for Vite. Contribute to JohnCampionJr/vite-plugin-vue-layouts development by creating an account on GitHub. github.com npm install -D vite-plugin-vue-layouts 로 설치

- korean 한국어지원 - volar vue.js 싱글 파일 컴포넌트 내에서 개발을 진행할수 있게 도와주는 공식 확장 프로그램 - TypeScript vue Plugin (Volar) vue 타입 스크립트로 개발할때 필요한 플러그인 - Auto Rename Tag 태그가 있을때 한쌍을 변경하면 나머지도 변경해주는 편리한 도구 - prettier 코드 포맷터로 코드를 일관성있게 정리해줌 -vue vscode snippets vue로 개발할때 상용구를 빠르게 타이핑할수 있게 도와주는 도구

1. 사용자 관점의 테스트 코드 작성방법 테스트 코드는 항상 사용자 관점에서 처리되어야 하는 코드를 검증하는 코드가 들어가야한다. 버튼 클릭했을시 어떻게 되는지, 이메일 양식으로 ID를 입력 안했을시 어떻게 되는지 등 import loginFrom from './LoginForm.vue'; // import Vue from 'vue'; import { shallowMount } from '@vue/test-utils'; describe('loginFrom.vue', () => { test('ID는 email 형식이 아니면 경고 메시지가 출력된다', () => { const wrapper = shallowMount(loginFrom, { data() { return { username: 'test', };..

1. isUsernameValid 함수 이메일 유효성 검사 기능 테스트 코드로 확인 - MainFrom.vue id: Please enter an email address pw: 로그인 {{ logMessage }} - MainFrom.spec.js import loginFrom from './LoginForm.vue'; // import Vue from 'vue'; import { shallowMount } from '@vue/test-utils'; describe('loginFrom.vue', () => { test('ID는 email 형식이어야 한다', () => { const wrapper = shallowMount(loginFrom, { data() { return { username: 'tes..