[Learning React] 12장 - 리액트와 서버 (마지막)

12.1 아이소모피즘과 유니버설리즘 비교

  - isomorphic; 브라우저가 아닌 플랫폼에서 리액트를 렌더링한다는 의미

    - UI를 서버에서 렌더링한 결과를 브라우저에 보내서 표시

    - 서버 사이드 렌더링; 앱의 성능, 이식성, 보안 향상

  - Universal; 완전히 같은 코드를 여러 환경에서 실행할 수 있다는 의미

    - 같은 코드를 브라우저나 서버에서 모두 사용 가능

    - 노드를 사용해서 서버 구축 시 브라우저와 서버 환경에서 상당한 양의 코드 재사용 가능

    - 서버와 브라우저에서 실행될 수 있는 코드

  - 클라이언트와 서버 도메인

    - 노드 사용시 isomorphic-fetch/https 모듈을 사용하여 fetch 구문 활용 가능

12.2 서버 렌더링 리액트

  - ReactDOM.renderToString 메서드

    - UI를 서버에서 렌더링 가능

  - ReactDOM.hydrate 메서드

    - ReactDOMServer에 의해 렌더링 된 컨테이너에 콘텐츠를 추가하기 위해 쓰임,

      그 이외는 render와 동일

    - 연산 과정

      - 앱의 정적인 버전 렌더링, 페이지 완전 로딩 전에 사용자에게 무언가 보여줄 수 있음

      - 동적 JS 요청

      - 정적 콘텐츠 -> 동적 콘텐츠로 교체

      - 사용자 상호작용 원활히 동작

    - 서버 사이드 렌더링이 종료되면 앱 rehydrate

      - 콘텐츠를 정적 HTML로 정적 loading

    - nodemon 모듈

      - 서버가 서비스중인 콘텐츠의 소스 코드가 변경되면 즉시 반영

12.3 넥스트.js를 사용한 서버 렌더링

  - Next.js

    - 직관적인 라우팅, 정적인 최적화, 자동화된 분리 등 제공

    - getInitialProps/getServerSideProps; Next.js가 각 요청에 맞춰 페이지 렌더링 해줌

      - 페이지가 pre-rendered 대신 서버쪽에서 렌더링 됨 (서버 사이드 렌더링)

  - ismorphic-unfetch 모듈

  - 용어

    - Client Side Rendering

      - 앱을 브라우저에서 렌더링

      - DOM 사용, create-react-app 기본 방식

    - Server Side Rendering

      - 서버쪽에서 클라이언트 앱이나 유니버설 앱을 HTML로 렌더링

    - Rehydrate

      - 서버에서 렌더링한 HTML의 DOM 트리와 데이터를 재사용하면서 JS view를 클라이언트에서 로딩

    - Pre-rendering

      - 빌드 시점에 클라이언트쪽 애플리케이션을 실행해서 초기 상태를 잡아내어 정적 HTML로 만듦

12.4 개츠비

  - 블로그나 정적 콘텐츠 서비스할 때 유용

  - API에서 데이터를 로딩하는 등의 동적 콘텐츠 처리 가능, 다른 프레임워크와 통합 등 기능 제공

  - layout.js

    - useStaticQuery 훅을 사용해 사이트로부터 GraphQL로 데이터를 쿼리해 받음

  - seo.js

    - 검색 엔진 최적화를 위해 페이지 메타 데이터에 접근 가능하도록 해줌

  - 정적 콘텐츠

    - 사이트를 정적 파일로 구축 가능, 서버 없이 배포 가능

  - CDN 지원

    - 사이트를 CDN에 캐싱하여 성능과 가용성 향상시킴

  - 반응형 및 진행형 이미지

    - 흐릿한 placeholder를 표시해서 이미지 로딩

    - 모든 자원 로딩 전에 사용자들이 렌더링 되는 모습 지켜볼 수 있음

  - 연결된 페이지 미리 불러오기 (pre-fetch)

    - 다음 페이지를 로딩하기 전에 필요한 콘텐츠를 클릭 전에 백그라운드 작업으로 로딩해둠

12.5 리액트의 미래

  - 모바일 애플리케이션 => React Native

  - 선언적으로 데이터 불러오기 => GraphQL

  - 콘텐츠 기반 웹 사이트 => Next.js, Gatsby

  - 리액트와 선언적인 함수형 JS

---

[Source Code] 러닝 리액트 Ch12. 리액트와 서버

 

p.s) 회사 첫 출근 전에 설 연휴를 활용하여 러닝 리액트 책 1회독을 마쳤습니다.

회사에 가서 첫 프로젝트로 리액트를 사용하게 될 것 같아서 빠르게 실습하면서 읽었습니다.

제가 알기로는 리액트가 최근에 업데이트가 많이 되서 변화가 조금 있는 것 같은데,

공식 문서를 통해 다시 한번 확인해야겠습니다.

아직은 막연하고 추상적이지만 리액트에 대한 개념과 느낌을 조금은 알게 된 것 같아서

설 연휴를 나쁘지 않게 보낸 것 같습니다.

이제 회사에 가면 실전입니다. 성장을 하기 위해 많은 시행착오를 거치면서 여러 경험을 쌓도록 노력하겠습니다.

앞으로는 개인적으로 타입스크립트 프로그래밍 책을 활용하여 학습할 계획입니다.

회사를 다니지만 그 이외 시간을 잘 활용해서 2월 안으로는 1회독을 할 수 있을거라 생각합니다.

좋은 개발자로 성장하려고 노력하시는 모든 분들 다 화이팅입니다!