# Facebook의 테크스택 재구축 이야기

> Clean Markdown view of GeekNews topic #2049. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=2049](https://news.hada.io/topic?id=2049)
- GeekNews Markdown: [https://news.hada.io/topic/2049.md](https://news.hada.io/topic/2049.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2020-05-09T12:01:59+09:00
- Updated: 2020-05-09T12:01:59+09:00
- Original source: [engineering.fb.com](https://engineering.fb.com/web/facebook-redesign/)
- Points: 15
- Comments: 2

## Topic Body

간단한 PHP로 시작한 페이스북이 이번 새 디자인에 맞게 React + Relay(GraphQL) 로 바꿔온 과정과 교훈

CSS,JS,Data,Navigation 각각에 빠른 앱을 위한 기본원칙 적용

1. 필요한 자원만 최대한 빨리 전송

2. 사용자 경험을 위한 엔지니어링 경험

CSS

- Atomic CSS로 CSS를 80%줄이고, 필요없는 CSS는 다운받지 않게 변경

- 접근성을 위해 rems 사용, px → rems 수동 변환할때의 버그를 줄이기 위해 빌드도구에서 이를 자동 변환

- Theming(다크모드)를 위해 CSS 변수 사용

- 깜박임 방지를 위해 Inline SVG 사용(img 에 SVG파일 넣는 대신). 이를통해 색상 변경도 런타임에서 가능해짐

JS

- 3단계 Code-splitting 한 JS를 단계별로 전송

ㅤTier 1. 로딩시 UI Skeleton을 빠르게 보이기 위한 베이직 레이아웃

ㅤTier 2. 화면에 보이는 모든 콘텐츠를 완전히 렌더링 하기 위한 JS. 완전히 동작가능하고, Tier 2 이후에 코드가 로딩되더라도 화면 구성이 바뀌면 안됨

ㅤTier 3. 화면 출력후 필요한 모든 것. 로깅코드, 실시간 업데이트 구독 등.

- 500KB의 JS가 50KB Tier 1, 150KB Tier 2, 300KB Tier 3 로 분할 → 로딩 및 화면 표시가 매우 빨리 끝나는 효과

- 분할 덕분에 A/B 테스트 시에도 양쪽에서 필요한 코드만 받게 설정이 가능해짐

- Data-Driven React 앱을 만들도록 도와주는 Relay 의 기능을 이용, 어떤 데이터를 가져올 지에 따라 필요한 컴포넌트만 로딩하게 변경

- Product별 JS Budget(예산) 제도를 도입. 성능 목표, 기술적 제약 및 제품 고려사항을 기반으로 예산을 설정. 시간이 흐른뒤에도 코드가 늘어나는 것을 방지.

Data

- Relay 를 이용, 모든 데이터 페칭을 GraphQL 로을 이용하도록 표준화

- Realy 덕분에 페이지 요청단계부터 먼저 필요한 데이터를 병렬로 다운로드. 화면에 빠르게 보여주도록 가능

- GraphQL 내부 확장인 @stream을 이용해서 뉴스피드 같은 걸 여러번의 라운드트립없이 한번의 쿼리로 데이터를 차례차례 보내게 함

- @defer + React Suspense 로 당장 필요하지 않은 데이터는 나중에 로딩하도록

Navigation

- SPA 네비게이션시 새 페이지 로딩할때 자원 로딩 시간및 라운드트립을 줄이기 위해 Route Map을 구성

- 필요할 때마다 최대한 빨리 Route Map에 Route 정보를 분할하여 로딩

- 자원은 가능한 빨리 먼저 프리페칭 (호버시 프리페치, 마우스 다운시 코드와 데이터 가져오고, 클릭이 일어나면 React 상태 변경)

- 네비게이션 간에 빈화면을 보여주는 것 대신, React Suspense 트랜지션을 활용하여 새 Route 가져오기 전에 기존 Route 를 지속해서 보여주기

- EntryPoints ( 코드 분기 포인트 와 데이터 쿼리를 Wrapping 한 작은 파일) 를 이용해서 코드 및 데이터 다운로드를 병렬화

## Comments



### Comment 1762

- Author: xguru
- Created: 2020-05-10T11:44:31+09:00
- Points: 1

페이스북 새 디자인의 CSS에서 알게된 것들 https://news.hada.io/topic?id=1819

글도 같이 참고하시면 좋습니다.

### Comment 1754

- Author: xguru
- Created: 2020-05-09T12:02:04+09:00
- Points: 1

Relay - The production-ready GraphQL client for React https://relay.dev/