☘️Emotion 이란? Emotion CSS 스타일을 JavaScript 코드 안에 작성하는 CSS-in-JS 방식을 사용하여 쉽게 스타일을 관리할 수 있는 라이브러리 자세한 정보를 얻고 싶으면 아래 공식 문서를 참고하면 된다. [Emotion] 공식 문서 Emotion – Introduction (Edit code to see changes) emotion.sh ☘️Emotion 사용법 React를 사용하는 사용자에게 권장되는 라이브러리인 @emotion/react 패키지를 사용할 것이다. 1. 라이브러리 설치 npm i @emotion/react 2. 문자형 css() 함수 Emotion에서 제공하는 css() 함수를 사용하는 방법에는 문자형/객체형이 있다. // 문자형 import { css } ..

☘️유틸리티 타입(Utility Types) keyof keyof를 사용하면 인터페이스의 key값을 유니온 형태로 받을 수 있다. // keyof interface User { id: number; name: string; age: number; gender: "m" | "f"; } // 'id' | 'name' | 'age' | 'gender' type UserKey = keyof User; Partial Partial은 옵셔널로 바꿔주어, 인터페이스의 일부분만 사용 가능하게 해 준다. // partial interface User { id: number; name: string; age: number; gender: "m" | "f"; } let admin: Partial = { id: 1, name..

☘️제네릭(Generics) 제네릭을 사용하면 클래스 or 함수 or 인터페이스를 다양한 타입으로 재사용할 수 있다. 만약 배열을 입력받아 길이를 반환하는 함수를 만들었을 때, 아래처럼 유니온 타입으로 입력받는 배열의 타입을 매번 추가하면 번거로움이 있다. function getSize(arr: number[] | string[] | boolean[] | object[] ): number { return arr.length; } const arr1 = [1,2,3]; getSize(arr1); const arr2 = ["a","b","c"]; getSize(arr2); const arr3 = [false, true, false] getSize(arr3); const arr4 = [{name: "짱잼"},..

☘️클래스(Class) 클래스 자바스크립트에서 클래스를 작성할 때, 아래와 같이 하면 된다. 그러나 이를 타입스크립트에서 작성할 때엔 에러가 발생한다. 타입스크립트에서 Class 를 사용할 때에는, 멤버 변수를 미리 선언하고 타입을 설정해 준다. class Car { color: string; constructor(color: string) { this.color = color; } start() { console.log("start"); } } const bmw = new Car('red'); bmw.start(); 멤버 변수를 미리 선언하는 방법 이외에도 접근 제한자나 readonly를 사용하는 방법이 있다. // 접근 제한자 class Car { // color: string; constructor..

☘️리터럴, 유니온/교차 타입 변수를 선언할 때, const와 let 을 사용한다. const 변하지 않는 값을 선언할 때 사용 let 변하는 값을 선언할 때 사용 그래서 const로 선언한 변수를 수정할 경우 에러가 뜨게 된다. 문자열 이외에 다른 타입을 넣고 싶을 경우 다음과 같이 수정할 수도 있다. const name1 = "짱잼"; let name2: string | number = "철수"; name2 = 1; 여기서 name1 처럼 정해진 값을 가진 것을 리터럴 타입 이라고 한다. 리터럴 타입 Job이라는 문자열 리터럴 타입을 만든다. 그러면 Job 타입을 사용할 경우 선언해 둔 문자열만 사용할 수 있게 되며, 그 외에 문자열을 사용할 경우 에러가 발생한다. type Job = "student..

☘️함수 그 전 게시물을 보면 타입스크립트로 함수를 만들때에는 매개변수와 반환 값의 타입을 입력하였다. function add(num1:number, num2:number): number { return num1 + num2 } 만약 아무 값도 반환 하지 않을 거면 void 로 해준다. function add(num1:number, num2:number): void { return num1 + num2 } 그 밖에도 원하는 형태로 수정하여 함수를 만들 수 있다. function isBig(num1:number): boolean { return num1 > 100; } 함수 - 옵션 속성 인터페이스처럼 함수에서도 옵션 속성을 설정할 수 있다. 매개변수의 변수 이름 뒤에 ? 를 붙인다. 그러면 함수를 호출할..

☘️인터페이스(interface) 객체를 생성하여 해당 객체의 name을 출력하면 object에 name이 없다는 에러가 발생한다. 이러한 문제를 해결하기 위해 타입스크립트에서는 인터페이스를 사용한다. 인터페이스 타입을 지정하여 인터페이스를 만들어 준다. 자세한 설명은 타입스크립트-핸드북 에서 볼 수 있다. interface User { name: string; age: number; }; let user: User = { name: '짱잼', age: 24, } 인터페이스 - 옵션 속성 여기서 만약 인터페이스에 새로운 속성을 추가하고 해당 속성을 꼭 사용하고 싶지 않을 때 속성 뒤에 ? 를 붙여 옵션 속성을 추가할 수 있다. 그래서 user 객체에서 꼭 gender 속성을 사용하지 않아도 된다. int..

☘️TypeScript 기본 타입 변수 타입 - number, boolean, string, Array 타입스크립트에서 변수를 선언할 때, 변수 타입을 지정해서 설정할 수 있다. let fruit:string = "apple" 만약 fruit 변수를 string이 아닌 다른 타입으로 재정의하면 에러가 뜬다. 사용자가 타입을 설정하지 않아도 타입스크립트가 변수 추론을 통해 스스로 변수 타입을 지정하여 에러가 뜨게 해준다. string 이외에도 다른 타입을 지정할 수 있다. let age:number = 24; // 숫자 let isAdult:boolean = true; // 불린 let a1:number[] = [1,2,3] // 숫자 배열 let a2:Array = [1,2,3] // 숫자 배열 let ..

☘️시작하며... 약 1년 6개월의 방황 끝에😅 개발 직무를 선택하게 되었다. 프런트도 찍먹하고, 백엔드도 찍먹하다가 졸업작품에서 React Native를 사용하여 앱을 만들면서 프론트엔드가 재미있고 적성에 맞는 거 같아 프론트엔드 개발자가 되기에 마음 먹었다! 새로운 마음으로 몇 달째 멈춘 velog를 접고 티스토리에서 새로 개발 블로그를 시작하려고 한다 그래서 개발 동아리에 프론트엔드 개발자로 들어가게 되었고 이번 프로젝트에서 TypeScript를 사용하기로 하였는데 한 번도 사용해 본 적이 없어 개발과 동시에 공부하려고 한다!👍👍👍 파이팅~ 티스토리는 카카오톡 이모티콘 사용할 수 있네ㅋㅋㅋㅋㅋㅋㅋㅋㅋ기엽당 ☘️참고 자료 영상을 보고 따라 하면서 배우는 것이 좋다 생각해 유튜브에서 TypeScript..