Frontend
-
[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 값으로 저장되어 ..