web
-
[Typescript] type과 InterfaceFrontend/Typescript 2023. 3. 12. 16:13
TypeScript에서 타입(Type)과 인터페이스(Interface)는 유사한 점이 매우 많고, 여러 경우에 자유롭게 혼용되어 사용 가능합니다. interface AnimalInterface { species: string height: number weight: number } const tiger: AnimalInterface = { species: 'tiger', height: 200, weight: 300 } type AnimalType = { species: string, height: number, weight: number } const lion: AnimalType = { species: 'lion', height: 180, weight: 400 } 하지만 둘의 차이와 한계를 이해하고 표..
-
[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 값으로 저장되어 ..