전체 글

[TypeScript] 기초 - 유니온 타입(Union Type)

가끔, number 나 string 을 매개변수로 기대하는 라이브러리를 사용할 때가 있습니다. function padLeft(value: string, padding: any) { if (typeof padding === "number") { return Array(padding + 1).join(" ") + value; } if (typeof padding === "string") { return padding + value; } throw new Error(`Expected string or number, got '${padding}'.`); } padLeft("Hello world", 4); // "Hello world"를 반환합니다. 위 예제에서 padding 이 number나 string이 아닌..

[TypeScript] 기초 - 리터럴 타입

리터럴 리터럴 타입은 변수 혹은 매개변수 등이 어떤 포괄적인 타입을 가지는 것이 아니라 변수나 매개변수에 정확한 값을 설정하는 것을 의미합니다. let foo: 'Hello World!'; 위의 예시처럼 특정한 값을 변수의 타입으로 지정하는 것을 리터럴 타입이라고 합니다. string 외에도 number, boolean 타입의 값도 설정이 가능합니다. const helloWorld = "Hello World"; let hiWorld = "Hi World"; 위의 예제에서는 helloWorld 변수는 const 이기 때문에 변할 수 없으므로 "Hello World"으로 타입이 지정됩니다. hiWorld 변수는 let이기 때문에 변할 수 있어서 컴파일러는 문자열이라고 선언할 것입니다. 보통 리..

[TypeScript] 기초 - 인터페이스(Interface)

인터페이스 소개 인터페이스는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있습니다. 인터페이스는 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사합니다. 인터페이스에 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 하는 것입니다. ES6는 인터페이스를 지원하지 않지만 Typescript에서는 지원합니다. 인터페이스는 프로퍼티와 메서드를 가질 수 있다는 점에서 클래스와 비슷하나 직접 인스턴스를 생성할 수 없고 모든 메서드는 추상 메서드입니다. 변수와 인터페이스 인터페이스는 변수의 타입으로 사용할 수 있습니다. 이때 인터페이스를 타입으로 선언한 변수는 해당 인터페이스를 준수하여야 하는데 이 부분이 새로운 타입을 정의하는 것과 유사합..

[TypeScript]기초 - 기본 타입

타입스크립트 기본 타입 불리언(Boolean) 참/거짓 값입니다. 숫자(Number) 부동 소수 값입니다. 문자열(String) 다른 언어들처럼, 텍스트 데이터 타입입니다. 배열(Array) 배열 타입은 두 가지 방법으로 쓸 수 있습니다. 배열 요소들을 나타내는 타입 뒤에 [] 를 쓰는 방식 let list : number[] = [1,2,3]; 제네릭 배열 타입을 쓰는 방식 let list : Array = [1,2,3]; 튜플(Tuple) 요소의 타입과 개수가 고정된 배열을 표현할 수 있습니다. 요소들의 타입이 모두 같을 필요도 없습니다. let x: [string, number]; x = ["hello", 10]; //성공 x = [10, "hello"] //실패 열거(Enum) enum은 값의 집..

[TypeScript] 데코레이터

데코레이터 데코레이터는 클래스, 속성, 메서드, 접근 제어자, 매개변수 등에 사용할 수 있는 특별한 함수입니다. 선언된 데코레이터 함수를 사용할 때는 데코레이터 이름 앞에 @를 붙입니다. // 데코레이터 함수 function Component(target:Function) { console.log(target); console.log(target.prototype); } // 데코레이터를 사용한 클래스 TabsComponent 정의 @Component class TabsComponent {} 클래스, 속성, 메서드, 접근자, 매개변수에 따라 데코레이터 함수가 전달 받는 인자는 각각 다릅니다. Decorator Factory 함수 사용 시, 사용자가 인자를 전달할 수 있는 것과 유사하게, 데코레이터 함수 ..

React vs Vue.js 문법적 차이

React vs Vue.js 데이터 상태 관리 // Counter.vue {{ count }} import { useState } from 'react' function Counter() { const [count, setCount] = useState(1) const increment = () => setCount(count+1) return ({count}) } react에서는 일반적으로 useState를 통해 데이터 상태 관리를 합니다. useState는 튜플 형식으로 반환되며 첫번째는 변수 두번째는 변수에 접근할 수 있는 set함수라고 생각하면 될 것 같습니다. vue는 set 함수를 통해 data에 접근하는 것이 아니라, 데이터가 선언된 해당 인스턴스 내에서는 this를 통해 자유..

Vue에서 virtual DOM은??

소개 Vue.js는 빠른 로딩 속도와 쉬운 확장성으로 알려진 자바스크립트 프레임워크입니다. 필요에 따라 가상 돔을 사용하여 실제 돔을 업데이트하는 기능 중 일부를 직접 연결할 수 있습니다. 가상 돔을 이해하는 것이 Vue.js를 학습하는 데 필요한 요구 사항은 아니지만, 신규 Vue 개발자가 뒤에서 일어나는 것들에 대해 이해하는데 도움이 될 수 있습니다. DOM이란 This is a Heading This is a paragraph. 우리가 Vue.js의 가상 돔에 대해 이야기 하기 전에 돔이 무엇인지에 대해 이해하는 것이 중요합니다. DOM(Documents Object Model)은 모든 마크업 언어(사용자의 HTML)를 연결된 노드로 처리하는 인터페이스의 일종입니다. 나무와 같은 구조로 저장된 마크..

프로미스(Promise)란?

자바스크립트는 비동기 처리를 위해 하나의 패턴으로 콜백 함수를 사용합니다. 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한번에 처리하는데도 한계가 있습니다. “A promise is an object that may produce a single value some time in the future” ES6부터는 비동기 처리를 위한 또 다른 패턴으로 프로미스를 도입했습니다. 프로미스는 자바스크립트 비동기 처리에 사용되는 객체라고 정의하고 있습니다. 먼저 콜백 패턴이 어떠한 단점이 있어서 프로미스가 생겨나게 됐는지에 대해 알아보고 프로미스에 대해 계속 알아보도록 하겠습니다. 콜백 패턴의 단점 콜백 헬 동기식 처리와 비동기식 처리에 대해..