▶타입스크립트 타입 별칭(Type Aliases) 타입 별칭은 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미합니다. 같이 코드를 보면서 이해해 봅시다 :) 🔎 타입 별칭 사용하기 우선 우리가 변수를 정의할 때 일반적으로 타입스크립트에서 사용하는 문법을 아래와 같았습니다. // string 타입을 사용할 때 var thisName: string = 'doeunn'; 이제 string이라는 타입에 별칭을 주어 사용할 겁니다. type MyName = string; var thisName: MyName = 'doeunn'; 즉, string 타입을 MyName이라는 별칭으로 사용하겠다는 말과 같습니다. 이렇게 간단한 타입 별칭을 넘어 인터페이스처럼 몇개씩 묶어서 별칭을 줄 수도 있는데요. typ..
▶타입스크립트 인터페이스(interface) 타입스크립트는 매번 선언하는 변수 혹은 함수의 파라미터로 들어가는 변수에 대해서 반드시 타입을 정의해 주어야만 했습니다. 그런데 우리가 프로젝트를 진행하다보면 서로 다른 함수에 똑같은 인자를 넘겨주는 경우가 많은데요. 이때는 매번 반복적으로 작성을 해주어야 하는 걸까요? 이러한 반복되는 작업에 대해서는 인터페이스라는 것을 통해 코드를 좀 더 간결하고 깔끔하게 작성 가능합니다🤩 🔎 인터페이스란? 인터페이스는 미리 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트에서의 인터페이스는 다음과 같은 부분에서 사용이 가능합니다. 객체의 스펙(속성과 속성의 타입) 함수의 파라미터 함수의 스펙(파라미터, 반환 타입 등) 배열과 객체를 접근하는 방식 클래스 간단하게 인터페이스..
▶타입스크립트 함수 타입 - 파라미터, 반환값 이전에 함수에 대해 잠깐 다룬 적이 있는데, 이번 글에서는 함수에 대해 자세하게 파라미터와 반환값에 대해 알아보려고 합니다. 🔎 파라미터 타입 지정 함수 안에 들어가는 파라미터의 타입을 지정해 줄 수 있습니다. // 함수의 파라미터의 타입을 정의하는 방식 function sum_1(a: number, b: number) { return a + b; } sum_1(10, 20); 위 코드에서 들어가는 파라미터 a: number, b: number라고 지정해 주었기 때문에 함수에게 파라미터를 넘길 때에는 a와 b 모두 숫자로 넘겨야 하는 것이죠. 다음과 같이 지정한 타입과 다른 타입의 파라미터를 넘기면 타입스크립트는 에러를 띄워주게 됩니다. 🔎 반환값 타입 지정..
▶타입스크립트 기본타입 - 튜플, 객체, 진위값 지난 글에 이어 타입스크립트의 기본타입에 대해 알아보겠습니다😀 🔎 튜플 배열의 특정 인덱스까지 타입을 지정하는 것을 의미합니다. 예를 들어 0번째 인덱스는 string값이 와야 하고 1번째 인덱스는 number값이 와야만 해! 할 때 사용하면 되겠습니다. // TS 튜플 // 배열의 특정 인덱스까지 타입을 지정하는 것을 의미 let address: [string, number] = ['강남', 100]; 변수명: [string, number] ← 0번째 인덱스는 string타입, 1번째 인덱스는 number타입이 와야 해! 🔎 객체 객체는 { name: "doeunn", age: 22 } 처럼 여러 개의 key와 value를 가질 수가 있습니다. 타입스크립..
▶타입스크립트 기본타입 - 문자열, 숫자, 배열 우선 간단하게 자바스크립트에서 기본적으로 사용하는 문자열 선언은 다음과 같습니다. var str = 'hello'; 이제 타입스크립트에서의 문자열, 숫자, 배열 선언에 대해 알아봅시다! 🔎 문자열 // TS 문자열 선언 var str: string = 'hello'; 선언하려는 변수명 뒤에 :타입 을 적어주기만 하면 됩니다. 🔎 숫자 // TS 숫자 let num: number = 10; 🔎 배열 // TS 배열 let arr: Array = [1, 2, 3]; let alphabet: Array = ['A', 'B', 'C']; let items: number[] = [1, 2, 3]; // 간단하게 작성 가능! 배열에는 안에 들어갈 성분들의 타입도 정의..
▶프로젝트를 위한 타입스크립트 초기 설정 가장 먼저 node와 npm이 설치되어 있는지 확인해 줍니다. $ node -v $ npm -v NodeJS를 설치하면 노드 패키지 관리자인 npm도 같이 설치되게 되는데요. NPM(Node Packaged Modules)는 node.js에서 사용되는 모듈을 패키지로 모아둔 곳입니다. 필요한 모듈이 있다면 npm을 통해 간편하게 다운받을 수 있습니다. 🔎 TypeScript 설치 $ npm i typescript -g 🔎 간단하게 타입스크립트 컴파일러 사용해 보기 타입스크립트 컴파일러가 뭔데? 왜 쓰는건데? 💡컴파일(compile)? 일반적으로 컴파일(compile)은 소스 코드를 특정 플렛폼에서 실행 가능한 형태로 변환하는 과정의 의미 브라우저에서 실행되던 자바..
- Total
- Today
- Yesterday
- 스타일 컴포넌트 styled-components
- 프론트엔드 기초
- 자바
- 머신러닝
- JSP
- HTML
- 리액트
- 데이터분석
- 인프런
- 타입스크립트
- 파이썬
- 디프만
- 딥러닝
- react
- frontend
- styled-components
- 프론트엔드
- 자바스크립트
- 프로젝트 회고
- TypeScript
- rtl
- react-query
- 자바스크립트 기초
- Python
- 리액트 훅
- next.js
- CSS
- jest
- testing
- 프론트엔드 공부
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |