[Naver] Engineering 2021

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

Inside React(동시성을 구현하는 기술)

1. Inside React (동시성을 구현하는 기술)

Facebook의 React Team은 지난 6월, React 18 alpha 버전을 발표하고 정식 버전의 릴리즈를 준비하고 있습니다. 본 세션에서는 앞으로 공개될 React 18을 준비하며 React의 방향성을 함께 살펴보고, 핵심 특징인 Concurrent Rendering과 그것을 구현하고 있는 기반 기술에 대해 연구한 내용을 공유하고자 합니다.

 

2. Next.js, Apollo와 함께 리액트 개발의 Next Level로 가자!

프리미엄 콘텐츠의 콘텐츠 창작자를 위한 관리자 페이지인 프리미엄 콘텐츠 스튜디오에 Next.js와 Apollo Client를 도입하면서 고민했던 경험을 공유합니다.
이전 기술 스택과 Next.js와 Apollo Client의 비교를 통해 특징을 파악하고, 이전 기술에 비해 어떤 점들이 나아졌는 지 알아봅니다. 그리고 프로젝트에 Next.js와 Apollo Client를 적용할 경우 겪을만한 문제 상황을 제시하고 이에 대한 해결책을 공유합니다.

 

React => Next.js

GraphQL => Apollo Client

 

React 초기

Create React App

1. 단 하나의 의존성, React-scripts

- 의존성간의 버전 미스매치 해결

- 프로젝트 단순화

2. 무궁무진한 확장성

 

단점:

1. 자체 지원  SSR이 없음

- 서버사이드 렌더링을 위한 서버 구축

- SSR용 Code Splitting 라이브러리 필요

- 복잡한 Webpack & babel 설정

2. eject시 복잡성 증가

 

Next.js를 사용함.

Vercel 사에서 생성, 유지, 관리하는 React Framework

1. Pre-rendering

2. next.config.js

- 추가적으로 세부 설정을 수정하고 싶다면, next.config.js로 간단하게 수정 가능.

3. code-splitting

- 페이지들이 각각의 javascript 번들로 분리

- 파일, react component Dynamic Import 지원

4. Routing

- 파일 시스템에 기반한 라우팅

- 정적, 동적, 중첩 라우팅

 

Rest => Apollo Client

REST

rest: web API를 설계하는 데가장 보편적으로 사용하는 아키텍처

자원을 표현하는 URL 기반

단점:

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

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

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

 

GraphQL

- API와 런타임을 위한 쿼리 언어

- 클라이언트가 데이터를 효율적으로 가져오는 것이 목적

 

Apollo Client

1. 최신 리액트를 위해 디자인된 라이브러리

- useQuery

- useMutation

2. caching

 

SSR with Apollo Client

1. 결과 값만 보내기

- SSR 실패시 채울 값이 없이 때문에 결국 useQuery 필요

- Mutation 과정 이후 캐시 업데이트가 안 됨.

2. 결과 값과 캐시 모두 보내기

- 결과 값과 캐시에 중복된 값을 보내서 코드가 더 복잡해지는 느낌

3. 캐시만 보내기

- 데이터 중복 없이 필요한 정보만 보내짐

- SSR 성공: useQuery에서 로딩 과정 없이 캐시에 있는 데이터를 사용

- SSR 실패: useQuery에서 로딩 ~ 패칭의 과정 진행