Frontend/Vue3
-
[Vue3] 배경지식Frontend/Vue3 2023. 5. 1. 17:08
Vue.js는 다른 프론트엔드 프레임워크와 비교해 차별화된 다양한 장점이 있습니다. 1. 쉬운 학습 Vue.js는 초보자도 쉽게 배울 수 있는 간결한 문법과 구조를 가지고 있습니다. 다른 프레임워크에 비해 더 빠르게 익힐 수 있으며, 기본 HTML, CSS, JavaScript 지식만으로도 시작할 수 있습니다. 2. 유연성 Vue.js는 컴포넌트 기반의 구조를 가지고 있어, 작은 프로젝트부터 대규모 애플리케이션까지 유연하게 개발할 수 있습니다. 또한, 다른 라이브러리와의 통합이 쉬워, 기존 프로젝트에도 적용하기 용이합니다. 3. 가볍고 빠른 성능 Vue.js는 경량화되어 있어 빠른 초기 로딩 속도와 업데이트 성능을 제공합니다. 가상 DOM(Virtual DOM)을 활용하여 불필요한 업데이트를 최소화하고,..
-
[Composition API] Typescript 적용하기 (script setup)Frontend/Vue3 2023. 3. 12. 16:34
Typing Component Props Props는 상위 컴포넌트(부모)에서 하위 컴포넌트(자식)로 데이터를 넘겨줄 때 사용합니다. Props Default Values default props값을 지정하는 방법입니다. Typing Component Emits Emits는 하위 컴포넌트(자식)에서 상위 컴포넌트(부모)로 이벤트, 데이터를 넘겨줄 때 사용합니다. Typing ref() ref는 초기값으로 타입을 추론하는 기능이 기본적으로 내장되어 있습니다. import { ref } from 'vue' // inferred type: Ref const year = ref(2023) // => TS Error: Type 'string' is not assignable to type 'number'. yea..
-
[Composition API] Vue3 Slots 사용하기(script setup)Frontend/Vue3 2022. 12. 31. 21:57
1. 사용 배경 부모 컴포넌트 템플릿과 자식 컴포넌트 템플릿 사이 데이터(slot content) 통신 후 화면 랜더링을 원할 경우 사용합니다. 2. 파일 구조 프로젝트 파일 구조 독자분들의 이해를 돕기 위해 프로젝트 생성 시 자동으로 구성되는 프로젝트 구조를 그대로 사용하겠습니다. 3. 구현 과정 (App.vue와 main.js 파일은 전혀 손대지 않았습니다.) 1) 부모 컴포넌트 템플릿 -> 자식 컴포넌트 템플릿 방향으로 데이터를 전송하는 경우 우선 자식 컴포넌트인 HelloWorld.vue 파일입니다. //HelloWorld.vue 버튼 클릭 -> 부모 컴포넌트 HomeView.vue로 data 전송 //HomeView.vue {{ data }} 부모 컴포넌트 HomeView.vue -> 자식 컴포..
-
[Composition API] Vue3 Emit 사용하기(script setup)Frontend/Vue3 2022. 12. 31. 18:51
1. 사용 배경 Emit는 하위 컴포넌트(자식)에서 상위 컴포넌트(부모)로 이벤트로 데이터를 넘겨줄 경우 사용합니다. 2. 파일 구조 프로젝트 파일 구조 독자분들의 이해를 돕기 위해 프로젝트 생성 시 자동으로 구성되는 프로젝트 구조를 그대로 사용하겠습니다. 3. 구현 과정 (App.vue와 main.js 파일은 전혀 손대지 않았습니다.) 자식 컴포넌트인 HelloWorld.vue 파일부터 보겠습니다. //HelloWorld.vue Submit 버튼을 클릭하면 "data"가 이벤트로 전달되는 로직입니다. 페이지에 Submit 버튼을 누르면 부모 컴포넌트로 데이터가 넘어갑니다. //HomeView.vue @submit을 통해 하위 컴포넌트에서 넘어오는 데이터를 받아 emitTest 함수의 파라미터 값으로 전..
-
[Composition API] Vue3 Props 사용하기(script setup)Frontend/Vue3 2022. 12. 25. 16:12
1. 사용 배경 Props는 상위 컴포넌트(부모)에서 하위 컴포넌트(자식)로 데이터를 넘겨줄 경우 사용합니다. 2. 파일 구조 독자분들의 이해를 돕기 위해 프로젝트 생성 시 자동으로 구성되는 프로젝트 구조를 그대로 사용하겠습니다. 3. 구현 과정 (App.vue와 main.js 파일은 전혀 손대지 않았습니다.) 부모 컴포넌트인 HomeView.vue 파일에서 자식 컴포넌트인 HelloWorld.vue 파일을 import 해서 사용하는 로직입니다. 여기서 msg에 들어가는 내용이 자식 컴포넌트인 HelloWorld.vue 파일로 전달됩니다. 자식 컴포넌트에서는 defineProps를 import 해주고 props라는 객체를 만들어 전달된 데이터를 받습니다. {{ props.msg }} 위와 같이 templ..
-
Vue3 프로젝트 시작하기Frontend/Vue3 2022. 12. 24. 20:52
1. Node.js 설치하기 https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 공식 문서에서 추천하는 18.12.1 LTS 버전을 설치합니다. 2. Vue Cli(Command Line Interface) 최신 버전 글로벌 설치하기 npm install -g @vue/cli 최신 버전이 자동으로 설치됩니다. vue -V @vue/cli 5.0.8 버전 확인 명령어를 입력해 정상적으로 설치되었는지 확인합니다. 3. 프로젝트 생성하기 vue create 프로젝트명 명령어를 입력하면 아래와 같이 선택창이 나오게 됩니다. 기본 Default 값으로 저장되어 ..