Next.js & Apollo관련 영상 정리

hodu·2023년 2월 14일
0

3줄 요약

1. CRA와 비교를 통한 CNA 장점

2. REST API와 비교를 통한 GraphQL 장점

3. 느낀 점

React Query를 사용하다보니 GraphQL에 대한 호기심이 생겼고,
이번에 준비중인 프로젝트에 적용하여 사용하려고 하다보니
자연스럽게 영상을 찾아보게 되었다.


https://tv.naver.com/v/23652620

1. CRA와 비교를 통한 CNA 장점

React

CSR
react-scripts으로 왠만한 문제는 해결할 수 있다.
eject를 이용해 무궁무진한 확장성이 있지만 Webpack&Babel이 복잡하다
SSR을 위한 서버 구축이 불가하다
@loadable-component와같은 SSR용 CodeSplitting 라이브러리 필요

Next

SSR,SSG 두가지 중 선택 가능
next.config.js로 간단하게 수정 가능
Code-splitting
-페이지들이 각각의 JavaScript번들로 분리
-React Component Dynamic Import 지원
Routing
-파일 시스템에 기반한 라우팅
-정적, 동적, 중첩라우팅 가능

2. REST API와 비교를 통한 GraphQL 장점

REST API

Overfetching
-불필요한 데이터가 있는경우,필요한 부분만 거르는 작업 필요

Underfetching
-한 페이지에 여러요청이 필요한경우 각각의 요청을 따로 보내야한다.

무수한 엔드 포인트
-자원이 많아질수록 더 많아지는 엔드포인트

GraphQL

-API와 런타임을 위한 쿼리 언어
-클라이언트가 데이터를 효율적으로 가져오는 것이 목적

필요한 데이터만 쏙쏙
여러 요청을 한번에
단 하나의 엔드 포인트

GraphiQL
-GraphQL 서버를 자유롭게 테스트 해볼 수 있는 도구

Apollo
-ApolloGraph에서 제작한 GraphQL 클라이언트

최신 리액트를 위해 디자인된 라이브러리
-useQuery
-useMutation

3. 느낀 점

Next는 오늘 아침에 해본 결과 아이폰 같은 느낌에 되게 세련되었고,
개발자로서 흥미가 많이 간다. 하지만 SSG와 SSR에 대한 이해도가 부족해서
이 부분을 더 공부해볼 생각이다.

GraphQL은 React Query와 쓰는 방식이 비슷하다고 생각했고
그런데 Query에 몇가지 더 추가된듯한 느낌을 받았다.

profile
잘부탁드립니다.

0개의 댓글

관련 채용 정보