Vue3 + Typescript Props interface 사용법 기본값 설정

Props는 자식 컴포넌트에게 데이터를 전달할 수 있는 방법입니다. Vue3에서 타입스크립트를 이용해서 사용할 수 있습니다. Vue3에서 없이 Props 사용하기 export default { props: { name: { type: String, }, age: { type: Number, }, }, }; 으로 Props 사용하기 const props = defineProps({ name: { type: String, }, age: { type: Number, default: 20, }, }); 이 방법으로 사용할 수 있지만, 타입스크립트를 쓰는 의미가 없어서 다른 방법도 있습니다. interface로 타입 정의 하고 Props 사용하기 interface로 타입을 선언하과 defineProps 제네릭타입..

• format_list_bulleted Develop/Vue
• · 2023. 8. 25.
• textsms

Typescript 물음표(?) 선택적 프로퍼티 / 옵셔널 체이닝 / Null 병합 연산자

타입스크립트에서 물음표를 이용한 문법 3가지가 있습니다. 세 가지에 대해서 정리해보려고 합니다. 선택적 속성 Optional Propery -? type animal { name?: string } interface person { name: string } function add(num?: number) { return num; } 속성을 정의할 때 사용할 수 있습니다. 해당 속성의 값이 있어도 되고 없어도 선택적으로 받을 수 있습니다. 옵셔널 체이닝(Optional Chaining) -?. 일반적으로 속성접근자(.)를 이용하여 속성의 값을 가져올 수 있습니다.. 하지만 속성이 없을 경우에 오류가 발생합니다. // const name = person.name // if person undefined -..

• format_list_bulleted Develop/TypeScript
• · 2023. 8. 24.
• textsms

Typescript 느낌표(!) Non-null 단언 연산자 사용법

Non-null 단언 연산자(Non-null assertion operator) 자바스크립트는 없고, 타입스크립트에서 사용하는 문법입니다. null이나 undefined가 아니라고 알려주는 타입스크립트 문법입니다. 난 null 이나 undefined가 아니고 반드시 값이 있어!! Non-null 단언 연산자 사용법 type person = { name : string age?: number } const superman: person = { name: 'superman', } const num: number = superman.age // error const num: number = superman.age! console.log(num); person 타입에서 age 선택적 타입으로 만들었습니다. ag..

• format_list_bulleted Develop/TypeScript
• · 2023. 8. 22.
• textsms

React vs Vue 장단점 비교 어떤 것을 사용해야 할까?

vs 프론트엔드 개발을 할 때, SPA 프레임워크를 많이 사용합니다. 특히 국내에서는 React와 Vue를 많이 사용합니다. 프로젝트 초기 단계에서 어떤 프레임워크를 사용할까 고민도 많이 하기도 하고, 취업준비 단계에서 어떤 것을 공부할까 고민도 많이 합니다. 그래서 React와 Vue를 비교하면서 장단점이 무엇인지, 각 프레임워크 더 나은점은 무엇인지 한번 정리해 보도록 하겠습니다. React가 더 나은 점 1. Facebook 회사의 지원 리액트의 경우 Facebook 회사에서 만든 라이브러리 입니다. 페이스북이라는 거대한 사이트에서 사용하는 프레임워크입니다. 안정적인 업데이트를 기대할 수 있고, 규모가 큰 프로젝트에서도 잘 동작할 수 있습니다. 하지만, Vue의 경우에는 Evan You라는 개인의 ..

• format_list_bulleted Develop/React
• · 2023. 8. 21.
• textsms

타입스크립트 - 제네릭(Generics)이란? 장점 사용법

제네릭(Generics) 이란? 타입스크립트에서 제네릭이란 함수, 클래스, 인터페이스를 선언할 때, 타입을 파라미터 화하는 방법을 제네릭 이라고 합니다. 타입스크립트의 경우에는 변수, 함수, 클래스 생성 시에 타입을 지정해야 하는데, 타입을 지정하려고 하면 동일한 기능에 함수를 타입별로 만들어줘야 하는 단점이 있습니다. const arrayName: string[] = ['superman', 'batmam', 'pororo']; const arrayNumber: number[] = [1, 2, 3]; // generic 방식 const genericName: Array = ['superman', 'batmam', 'pororo']; const genericNumbers: Array = [1, 2, 3];..

• format_list_bulleted Develop/TypeScript
• · 2023. 8. 17.
• textsms

Vue3 부모에서 자식 데이터 주고 받기 - Composition API

Vue는 부모 자식 컴포넌트 간의 데이터를 서로 전달할 수 있습니다. 양방향 데이터 바인딩이 가능한 장점이 있습니다. 부모에서 자식으로는 Props 옵션을 이용해서 전달하고, 자식에서 부모는 Emit 이벤트를 이용해서 전달합니다. Props와 이벤트를 이용하면 부모 / 자식 관계에서 데이터를 서로 주고받을 수 있습니다. 부모 ➡️ 자식 데이터 전달 1. 부모 컴포넌트에서 데이터 생성 const userName = ref('superman'); 2. 자식 컴포넌트로 데이터 전달 3. 자식 컴포넌트에서 Props 설정 {{ message }} 자식 ➡️ 부모 데이터 전달 1. 자식 컴포넌트에서 이벤트 생성 후 호출 const emit = defineEmits(["update"]) emit("update", ..

• format_list_bulleted Develop/Vue
• · 2023. 8. 15.
• textsms

Vue3 - Composables 이용하여 함수 재사용 하기

Composables 란? Vue3에서 Composables 함수를 만들어서 기능을 캡슐화하거나, 재사용할 수 있습니다. Composables, 컴포저블, 훅, 커스텀 훅스, 커스텀 컴포지션 함수 다 동일한 표현입니다. 이 글에서는 Composables로 사용하도록 하겠습니다. Vue3 이전에는 mixins를 이용해서 재사용을 많이 하였습니다. 하지만, mixins의 단점들로 인해서 Composables 라는 새로운 개념이 생겼고, 자바스크립트에서 재사용을 위해 함수를 사용하듯, 함수를 만들어서 재사용할 수 있게 되었습니다. 사용법? 폴더 이름과 자바스크립트 파일을 생성합니다. hooks/alert.js import { ref } from 'vue'; export default function useAl..

• format_list_bulleted Develop/Vue
• · 2023. 8. 11.
• textsms

Vue3 반응형 상태 ref, reactive 이란? 어떤 것을 사용해야할까?

Vue2 에서는 data 옵션을 이용해서 데이터 바인딩을 하였습니다. export default { data() { return { name: '파워쿠의 블로그', address: 'https://powerku.tistory.com/' } } } Vue3 에서 Composition API 개념이 추가하면서 ref, reactive라는 개념이 추가 되었습니다. ref 란? ref는 반응형 값을 생성해서, 값이 업데이트가 되면 Vue에서 반응을 해서 DOM을 업데이트 합니다. 값은 문자, 숫자, 불리언, 객체 등 어떠한 값도 다 넣을 수 있습니다. 값을 변경하기 위해서는 .value를 이용해서 변경합니다. template에서는 .value 없이 사용할 수 있습니다. const name = ref('super..

• format_list_bulleted Develop/Vue
• · 2023. 8. 10.
• textsms

타입스크립트 장점? 언제 사용하면 좋을까?

타입스크립트란? 자바스크립트의 Superset(확대 집합)입니다. 자바스크립트의 장점과 새로운 기능들이 추가되었습니다. 타입스크립트는 파일을 컴파일해서 자바스크립트 코드로 만듭니다. 컴파일하는 과정에 새로운 구문과 더 나은 방법을 활용할 수 있게 합니다. 타입스크립트의 경우에 C언어, Java와 같은 정적 타입 언어와 Javascript의 동적 타입 언어의 장점을 모두 가지고 있습니다. 모든 변수에 타입을 지정하지 않아도 되지 않고, 필요한 곳에서만 타입을 지정하면 되는 점진적 타입 언어 입니다. 타입스크립트 장점 브라우저 런타임이 아니라 컴파일 시점에서 오류 파악 가능합니다. 자바스크립트 코드에서는 아래와 같이 예측하지 못한 버그가 발생할 수 있습니다. function add(num1, num2) { ..

• format_list_bulleted Develop/TypeScript
• · 2023. 8. 8.
• textsms

Vue3 Composition API는 무엇을 해결 해줄까? OptionsAPI 단점

Vue3에서 가장 중요한 개념인 Composition API 가 새로 추가되었습니다. Vue2에서는Options API 방식을 이용해서 스크립트를 구성하였습니다. 하지만, Options API에 단점과 한계가 있어서 새로운 개념이 도입되었습니다. 기존과 완전히 다른 방법은 아니고, 템플릿과 스타일링은 기존과 동일하고 스크립트를 구성하는 방법이 조금 달라졌습니다. 물론, 기존 Options API 방법도 Vue3에서 사용이 가능합니다. Options API 방식 Options API의 단점 1. Options 속성에 따라서 로직이 분리가 됩니다. data, method, computed 등 다양한 Options 속성이 있습니다. 컴포넌트 내에는 다양한 기능들이 있지만, 기능들로 분리되지 않고 해당 옵션으로..

• format_list_bulleted Develop/Vue
• · 2023. 8. 5.
• textsms