☘️ 시작하며... 요즘 GraphQL에 대해 많은 관심이 있으며 인기가 갈수록 높아지고 있다. 실제로 GraphQL를 사용하는 회사에는 페이스북, 깃허브, 핀터레스트, 에어비앤비 등이 있다고 한다. 그래서 GraphQL가 무엇인지 공부해보고 싶어 노마드코더에 있는 GraphQL 강의를 듣게 되었다. (무료 강의!!!!) GraphQL로 영화 API 만들기 – 노마드 코더 Nomad Coders GraphQL for Beginners nomadcoders.co ☘️ GraphQL 이란? Rest API 단점 GraphQL은 Rest API의 단점을 해결하기 위해 만들어졌다. 그러면 Rest API의 단점은 무엇일까? GraphQL 홈페이지를 살펴보면서 알아볼 것이다. 첫 번째, over-fetching ..

☘️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..