☘️ 시작하며... 지난 게시물에서 GraphQL API를 만들어 보았고, 이번에는 Rest API를 GraphQL로 바꿔볼 것이다. 해당 게시물은 노마드코더 강의를 참고하여 작성했다.(무료 강의) GraphQL로 영화 API 만들기 – 노마드 코더 Nomad Coders GraphQL for Beginners nomadcoders.co ☘️ 비주얼 스튜디오(vs code) GraphQL 확장 프로그램 Apollo GraphQL Rest API를 GraphQL로 바꾸기 전에 먼저 확장 프로그램에 대해 알아 볼 것이다. 아래 사진과 같이 GraphQL의 typeDefs를 작성하면 글씨 색이 초록색이라 가독성이 떨어지는 것을 볼 수 있다. 이럴때 vs code에서 Apollo GraphQL 확장 프로그램을 ..

☘️ 시작하며... 지난 게시물에서 GraphQL에 대해 알아보고 테스트 하였고, 이번에는 직접 GraphQL API를 만들어 볼 것이다. 해당 게시물은 노마드코더 강의를 참고하여 작성했다.(무료 강의) GraphQL로 영화 API 만들기 – 노마드 코더 Nomad Coders GraphQL for Beginners nomadcoders.co ☘️ GraphQL API 만들기 초기 세팅 Apollo Server 란? Apollo 서버란 GraphQL API를 사용하는 서버를 개발할 수 있도록 도와주는 패키지 이다. 프로젝트 생성 비주얼 스튜디오에서 원하는 이름의 디렉토리를 만들고 node.js 프로젝트를 초기화하는 명령어를 입력해 준다. npm init -y 그리고 apollo server와 graphQ..

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

☘️유틸리티 타입(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 ..