하수도키의 성장일기

개발일기/Vue.js

[Vue.js] Vue 3 + TypeScript #4 - 타입 기초(Type Fundamentals)

타입스크립트의 기본 개념 중 하나인 개발을 향상하는 데 사용하는 정적 타입 정의하는 방법을 살펴보자. 이번 포스팅에서는 타입스크립트에서 유용하고 자주 사용하는 일부 타입들을 살펴본다. 2021.03.09 - [개발일기/Vue.js] - [Vue.js] Vue 3 + TypeScript #3 - 컴포넌트 만들기(Creating Components with TypeScript) [Vue.js] Vue 3 + TypeScript #3 - 컴포넌트 만들기(Creating Components with TypeScript) 지난 포스팅에서 Vue3 + TypeScript를 세팅 완료했으니 이제 컴포넌트를 만들어보자. 타입 스크립트에서는 어떻게 Single File Components가 변경되었는지 살펴보자. Typ..

개발일기/Vue.js

[Vue.js] Vue 3 + TypeScript #3 - 컴포넌트 만들기(Creating Components with TypeScript)

지난 포스팅에서 Vue3 + TypeScript를 세팅 완료했으니 이제 컴포넌트를 만들어보자. 타입 스크립트에서는 어떻게 Single File Components가 변경되었는지 살펴보자. TypeScript 컴포넌트 변화(TypeScript Changes in Single File Components) 개발 언어 속성(The Language Attribute) 싱글 파일 컴포넌트에서 script 태그에 보면 lang 속성이 추가되었다. 자바스크립트 사용할때는 없었는데 타입 스크립트 사용 시에는 명시를 해줘야 한다. 타입스크립트로 전환하기 위해서 해야 될 일 1. script 태그에 lang 속성 정의 2. 헬퍼 메서드(defineComponent) import 하기 3. 헬퍼 메서드(defineCompo..

개발일기/Vue.js

[Vue.js] Vue 3 + TypeScript #2 - 세팅하기(Setting Up Vue 3 & TypeScript)

이번 포스팅에서는 Vue 3 + TypeScript 세팅하는 법과 기존 Vue 3 프로젝트에 TypeScript를 추가하는 법을 알아보자. 2021/03/05 - [개발일기/Vue.js] - [Vue.js] Vue3+Typescript #1 - Vue, TypeScript 사용하는 이유(Why Vue & TypeScript) [Vue.js] Vue3+Typescript #1 - Vue, TypeScript 사용하는 이유(Why Vue & TypeScript) 이번 포스팅 주제는 Vue3와 TypeScript 사용하기이다. 이 포스팅 전체는 아래 강의를 바탕으로 의역하면서 정리한 내용이다. Why Vue & TypeScript - Vue 3 + Typescript | Vue Mastery Learn abo..

개발일기/Vue.js

[Vue.js] Vue3+Typescript #1 - Vue, TypeScript 사용하는 이유(Why Vue & TypeScript)

2020.08.26 - [개발일기/TypeScript] - [TypeScript] 타입스크립트 시작하기 [TypeScript] 타입스크립트 시작하기 타입스크립트 시작하기 개요 타입스크립트는 새로운 언어보다는 자바스크립트의 상위집합(Superset)으로 이해하면 된다. 자바스크립트 파일을 .ts 를 바꿔도 경고만 나오고 실행은 된다. 타입스크 hasudoki.tistory.com 이번 포스팅 주제는 Vue3와 TypeScript 사용하기이다. 이 포스팅 전체는 아래 강의를 바탕으로 의역하면서 정리한 내용이다. Why Vue & TypeScript - Vue 3 + Typescript | Vue Mastery Learn about the tradeoffs of using TypeScript in a Vue ..

개발일기/Javascript

[자바스크립트] 얕은 복사, 깊은 복사 간단히 살펴보기(Learn Deep & Shallow Copy with Tricky JavaScript Questions)

이 포스팅은 아래 포스팅을 보고 의역한 겁니다. 자세한 내용은 링크를 참고해주세요. javascript.plainenglish.io/learn-deep-shallow-copy-with-tricky-javascript-questions-c563cdb5a4dd 얕은 복사(Shallow Copy), 깊은 복사(Deep Copy)는 자바스크립트 책을 볼 때, 간간이 들려오는 질문들에 항상 포함되어 있다. 그때마다 구글링을 하거나 대충 기억을 더듬더듬 거리면서 이해하는 걸로 넘어갔다. 운 좋게 간단하고 이해하기 쉬운 포스팅이 있어 정리할 겸 포스팅을 작성해보겠다. 우선 아래 코드들을 보고 차이점을 살펴보자. const flower = [{ name: 'Lily', color: 'white' }] const clo..