Today What I Learned

매일 배운 것을 이해한만큼 정리해봅니다.

새로운 프로젝트 준비를 위해 요즘 핫하다는 graphQl과 next.js의 세계를 살짝 열어봤습니다.
게을러서 예제는 없고 공식문서 보고 이해한 것들만 말로 정리해봅니다.

1. GraphQl

1. GraphQl이란 무엇인가?

A query language for your API

• 당신의 API를 위한 쿼리 언어
• 여느 프레임워크, 툴들과 같이 홈페이지에서 그 정의를 마주했다. 많은 이들에게 익숙한 REST api처럼 또 다른 형태로 api를 구축할 수 있게 해주는 쿼리 언어이다.
• 역시 페이스북에서 만들어서 사용 중이다
• 좀 더 자세히 내용을 보니 "쿼리", "이해하기 쉬운", "클라이언트에게 필요한 것" 등이 키워드임을 알 수 있었다.

  GraphQL은 API를 위한 쿼리 언어이며 이미 존재하는 데이터로 쿼리를 수행하기 위한 런타임 입니다. GraphQL은 API에 있는 데이터에 대한 완벽하고 이해하기 쉬운 설명을 제공하고 클라이언트에게 필요한 것을 정확하게 요청할 수 있는 기능을 제공하며 시간이 지남에 따라 API를 쉽게 진화시키고 강력한 개발자 도구를 지원합니다.

2. GraphQl은 기존의 REST api와 무엇이 다른가(장/단점)

• 기존 REST의 경우, GET, POST, PUT, DELETE 같은 형태를 취하여 각각의 url을 가진 인터페이스로 클라이언트 - 서버 간 통신을 통해 요청과 결과를 주고 받는 형태이다.
• 클라이언트에서는 꼭 약속한 url에 맞춰 약속한 params, body 등을 전달해야 하고 백엔드에서는 약속한 url로 들어온 요청을 처리하여 약속한 형태로 다시 클라이언트에게 응답을 보내야 한다.
• 그러다 보니 클라이언트에서는 원하는 컴포넌트나 상태를 구하기 위해서 여러번의 rest api를 호출하거나 서버로부터 받은 응답을 요리 조리 찾아다니며 어떠한 값을 구해낼 수 밖에 없었다. 백엔드 또한 클라이언트가 요청하는 url은 다르지만 중복된 데이터를 보내야 할 경우가 많아지고 버전이 달라질 때마다 서로의 규약을 문서화하고 테스트하는 것에 집중을 많이 할 수 밖에 없었다.
• graphQl에서는 위에서 언급한 바들을 "쿼리"를 통해 해결하고자 했다. 기본적인 요청과 응답의 결과물은 query를 통한 JSON이라고 이해하면 좋겠다. 클라이언트에서 요청하는 값들로만 구성된 query를 통해 동일한 형태의 응답을 받을 수 있다 보니 높은 편리성과 높은 예측 가능성 등이 기존 rest api와 다른 점이자 장점이라고 볼 수 있다.
• 대신 rest api의 규약된 url로 한 방에 받아볼 수 있는 값들도 graphQl에서는 구체적인 query 없이 받을 수 없기 때문에 때에 따라서 편리성이 떨어질 수도 있다.

3. GraphQl은 core concepts

1. 기본 schema 형태: Query, Mutation

• rest api에서도 메소드가 있듯이 graphQl에서도 2가지로 api를 나누어 볼 수 있다.
• query: rest의 get과 같이 Db에 있는 특정 데이터를 조회하는 방법이다. 조회 시에는 변수를 통해 조건부 조회를 할 수도 있고, 조회하고자 하는 타입에 따라 조회 결과가 달라질 수도 있다.
• mutation: rest에서 post, put, delete와 같이 db write 권한(생성, 수정, 삭제)을 가진 형태를 graphQl의 mutation이라고 볼 수 있다. db에 있는 정보를 조회하여 해당 정보를 조작한다는 점에서 mutate라는 단어를 쓴 것 같다.

2. 타입 이용: scalar types, interface, union type, enum 등

• graphQl은 원하는 값을 이용하여 쿼리를 주고 받기 때문에 원하는 값의 형태가 매우 중요하다. 따라서 각각 필드의 타입 지정에 대해 잘 인지해야 한다. graphQl은 대부분의 프로그래밍 언어를 지원하기 때문에 각 언어가 지원하는 타입을 통해 대부분의 개념을 수행할 수 있다고 한다.
• 나는 js와 ts만 다룰 줄 알기 때문에 ts 기준으로 graphQl에서 사용하는 타입들을 생각해보았다.
• scalar types: graphQl에서 먼저 정의해둔 필드를 이루는 가장 기초적인 값이라고 볼 수 있다.
  • Int: 부호가 있는 32비트 정수.
  • Float: 부호가 있는 부동소수점 값.
  • String: UTF-8 문자열.
  • Boolean: true 또는 false.
  • ID: ID 스칼라 타입은 객체를 다시 요청하거나 캐시의 키로써 자주 사용되는 고유 식별자, ID 타입은 String 과 같은 방법으로 직렬화되지만, ID 로 정의하는 것은 휴먼 리더블한 값은 아니다.(only for program)
• 이러한 기본 스칼라 타입 외에도 graphQl에서 사용할 수 있는 커스텀 타입을 정의하는 방법들도 있다.
  • type, interface: 타입과 인터페이스 정의를 통해 query의 필드를 정의할 수 있다.
  • union type, enum: 특정 값으로 제한되는 타입의 경우 union type이나 enum을 통해 정의할 수 있다. enum의 경우 graphQl 시스템에서 순서에 맞는 밸류로 변경해주고 있다.
  • js 같이 별도 enum 등의 타입이 없는 경우에는 정적 변수 선언 등을 통해 타입을 구분하여 활용할 수 있다.

3. schema와 resolver

• graphQl의 getStarted 내용이 그렇게 어렵지는 않았는데, 읽으면서 그 와중에 가장 중요한 것은 graphQl을 소개하는 말에서도 보이듯 "클라이언트에게 필요한 것"을 유형화 하는 것 같아 보였다.
• graphQl에서는 이 단계를 schema라는 부분에서 풀어내고 있다.
• graphQl 서버의 최상단에는 root 필드가 존재한다. 여기에 각각 이름이 있는 쿼리를 정리해가면서 어떤 값을 받았을 때 어떻게 리턴할 것인지를 정의해준다. 리턴에 대한 함수 정의를 resolver라고 부르는 것 같았다.
• db에 있는 값을 매우 커스텀하게 쓸 수 있는 구조이므로 사실 schema를 잘 짜는 일이 가장 핵심이 될 것 같다는 생각이 들었다. 집에서 여러 형태의 장보기 물품 목록을 잘 적어뒀다가, 상황에 따라 맞는 장보기 목록을 가지고 마트로 떠나면 훨씬 마음이 편할 것 같은 그런 원리랄까.

4. GraphQl의 짝꿍들

• 컨셉 자체가 매우 명료하기 때문에 graphQl에 별다른 부가적인 툴들이 필요하지 않을 줄 알았는데 그마저도 더 쉽게 짤 수 있게 해주는 도구들이 매우 잘 정리되어 있었다.
• https://graphql.org/code/#javascript
• 나는 클라이언트 사이드에서 graphQl을 사용할 것이므로 apollo-client와 relay 중에 고민을 하고 있다. 좀 더 고민해보고 결정해야지.

2. Next.js

1. SSR과 next.js

The React Framework for Production

• next.js는 SSR(Server Side Rendering)을 지원하는 React 프레임워크이다.
• CSR과 SSR: CSR(Client Side Rendering)은 클라이언트 쪽에서 화면을 그려가는 방법을 말하는데 react 같은 경우는 컴포넌트의 생명 주기에 따라서 순차적인 그림이 그려진다. 그러다보니 csr의 단점으로 사용자가 체감하는 지점까지의 로딩 속도가 느린 것, 그리고 검색엔진 최적화(seo) 관점에서 여러 봇들에게 완성되지 않은 페이지를 제공하게 된다는 것이 있다.
• 반면 SSR에서는 서버사이드에서 클라이언트로 내보낼 페이지를 모두 그린 후 전달해주기 때문에 위에서 말한 단점들을 극복할 수 있다. 다만 모든 페이지를 이렇게 전달하면 이 또한 수동적이고 느린 형태의 웹페이지 구성이 되기 때문에 하이브리드 형태의 지원이 필요하다.
• next.js는 노드 서버를 통해 html을 그려 브라우저에 전달하는 ssr 형태를 띈다. 다만 모든 요청 단계에서 서버 렌더링을 하지 않고 초기 렌더링만 진행한다.

2. nextjs의 routing

• nextjs는 현재 10버전이 나왔고 최근 많은 관심을 받고 있는 프레임워크이다.
• 이미지 최적화, 국제화, next.js 성능 분석 기능, 타입스크립트 지원 등 최근 nextjs가 제공하는 기능들이 굉장히 많아졌다고 한다.
• 가장 기본적인 routing을 본다고 했을 때에도 그 편리함을 볼 수 있는데, react router 등의 별도 도움 없이 next로 작성된 프로젝트에서는 특정 폴더 위치에 각 페이지 코드를 넣으면 된다.
• next 프로젝트를 설정하면 pages라는 폴더가 설치되어 있다. 이 때 내 사이트의 최상단 페이지는 pages 폴더 내 index.js로 설정할 수 있다. 마찬가지로 /settings라는 페이지를 만들려면 pages 폴더 내 settings.js로 파일을 만들면 된다.

• next.js 공부는 이어서 프로젝트를 만들어 보면서 더 해보는 것으로!