프론트엔드 개발

타입스크립트 컴파일러 ( tsc ) 는 타입스크립트 파일( .ts)을 자바스크립트 파일(.js)로 트랜스 파일링 한다 트랜스파일이란 어떤 프로그래밍 언어로 작성된 소스 코드를 다른 프로그래밍 언어로 된 소스 코드로 변환 시켜주는 프로그램 컴파일러와의 차이 컴파일: 특정 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것 Java -> bytecode c -> assembly 트랜스파일: 특정 언어로 작성된 소스 코드를 다른 언어로 변환하는 것 es6 -> es5 c++ -> c 트랜스파일링 방식 tsc: 빌드 출력 결과와 소스 입력 파일이 거의 비슷할 때 tsc + babel: 여러 잠재적인 결과물을 내는 빌드 파이프라인이 필요할 때. babel로 트랜스파일링하고 tsc로 타..

제네릭이란? Generic: 통상적인, 일반적인 라는 뜻을 가졌고, 타입스크립트에서 Generic은 재사용 가능한 컴포넌트를 생성할 때 사용되며, 다양한 타입에서 작동하는 컴포넌트를 작성할 수 있다. Generic을 특징 다양한 타입을 받을 수 있기 때문에, 유연하다 컴파일 시에 타입 안정성을 보장한다. 재사용 가능하다. 제네릭 함수 (Generic Funtion) function PrintItems(args: T): T { console.log(args); return args; } const numberArray = [1,2,3,4,5]; const textArray = ["오늘", "즐거운 하루", "보내세요"]; const bool = true; const text = "오늘도 공부중입니다"; c..

Type alias alias는 별명이라는 의미인데 따로 이름을 붙여주는 것이다. Type alias를 이용하면 다양한 타입을 정의할 수 있는데 기본적인 타입 뿐만 아니라 복잡한 타입도 정의할 수 있다. type Student = { class: number, name: string; } const student: Student = { class: 5, name: "taenami" } Student 타입은 object 타입인데, student라는 변수가 Student 타입인데, Student타입에서 정해진 key와, value의 타입을 지켜주지 않으면 에러가 발생한다. String Literal Types type Name = "name"; let taenami: Name; taenami = "name"..

함수의 기본적인 타입 선언 JS function addParams(num1, num2) { return num1 + num2; }; TS function addParams(num1:number, num2:number):number { return num1 + num2; } 자바스크립트는 기명 함수로 표현하여 num1과 num2를 더하는 함수를 만들었다. 타입스크립트는 자바스크립트 함수에 타입을 더하여 위와 같이 사용한다. 차이점은, 타입스크립트에서 함수의 타입은 매개변수의 타입과 함수의 반환 타입을 추가한 것을 볼 수 있다. JS const addParams = function(num1, num2) { return num1 + num2 }; TS const addParams = function(num1:..

타입스크립트는 자바스크립트와 거의 동일한 데이터 타입을 지원하며, 기본 타입은 다음과 같다. Boolean Number String Array Tuple Enum Any Void Null and Undefined Never Object 불리언 ( Boolean ) const isExist: booolean = true; 숫자( Number ) const myAge: number = 29; 문자열 ( String ) const firstName: string = "Kim"; const lastName: string = "Taenam"; const fullName: string = `${firstName} ${lastName}` 배열 ( Array ) 배열 타입은 두 가지 방법으로 쓸 수 있다. 첫 번째 방..

자바스크립트를 써왔지만, 타입 스크립트를 써야 하는 이유가 무엇일까? 에러의 사전 방지 타입 스크립트는 프로그래머가 타입을 지정해준 타입이 아닌, 다른 타입을 할당하게 된다면, 컴파일 때, 오류 메시지를 준다. 자바스크립트는 Runtime 때, 타입이 결정된다. 이 말은 즉 프로그래머가 변수에 어떤 데이터, 어떤 타입을 갖는지 명확하지 않은 단점이 있다. 개발 생산성 향상 프론트엔드 개발자들이 사용하는 코드 에디터 중 하나인 Visual Studio Code는 툴의 내부가 타입 스크립트로 작성되어 있어 타입 스크립트 개발에 최적화되어있다. 또한, 객체지향 프로그래밍을 이용하여 고 퀄리티의 코드를 만들고, 객체 위주로 모듈성 있는 코드를 작성할 수 있다. 크로스 플랫폼 지원 자바스크립트가 실행되는 모든 플..

타입스크립트란? JavaScript and More TypeScript는 세계에서 가장 많이 사용되는 도구 중 하나 인 JavaScript를 기반으로하여 정적 타입 정의를 더한 오픈 소스 언어입니다. 타입은 객체의 모양을 설명하는 방법을 제공하고 더 나은 문서를 제공하며 TypeScript가 코드가 올바르게 작동하는지 확인할 수 있도록합니다. TypeScript에서 타입 작성은 선택 사항 일 수 있습니다. 타입 추론을 사용하면 추가 코드를 작성하지 않고도 많은 이점을 얻을 수 있기 때문입니다. A Result You Can Trust 유효한 JavaScript 코드는 모두 TypeScript 코드입니다. 타입 검사 오류가 발생할 수 있지만 결과 JavaScript 실행이 중단되지는 않습니다. 더 엄격한 ..