"Frontend" 태그로 연결된 2개 게시물개의 게시물이 있습니다.

SSR and Next.js#

서버 사이드 렌더링(SSR)이란 서버에서 코드를 실행해서 렌더링하는 것을 말한다.

다음의 장점을 가진다.

• 검색 엔진 최적화(SEO)

• 빠른 첫 페이지 렌더링

짧은 히스토리#

• (AJAX가 없던 시절) 서버에서 전체 HTML을 만드는 방식

• AJAX의 등장

  • 비동기적으로 서버와 브라우저가 데이터를 교환하여 페이지 전체를 다시 렌더링하지 않고, 갱신이 필요한 일부만 렌더링할 수 있게 됨.

  • 동적으로 HTML을 만들면서 JavaScript의 역할이 늘어나게 됨.

• SPA로..

• JavaScript MVC Framework의 등장

  • Backbone.js, Ember, Knockout ...

  • MVC Framework의 끝판왕 AngularJS

• React의 등장

  • Virtual DOM을 이용

  • Flux 아키텍쳐

  • 서버 사이드 렌더링 지원

    • (배경) V8 엔진, Node.js 등으로 서버에서도 JS 기반의 클라이언트의 라이브러리를 동작할 수 있음

서버 사이드 렌더링은 두 번 렌더링 한다. 서버 사이드에서 생성된 HTML에는 이벤트 속성이 없다. 두 번째 렌더링할 때 이미 서버 사이드 렌더링이 되어 있다면, 생성된 DOM에 오직 이벤트 속성만 추가한다.

왜 React와 서버 사이드 렌더링인가?

리액트와 서버 사이드 렌더링#

• renderToString : 문자열을 반환하여 HTML에 DOM을 추가한다.

• hydrate : 돔 요소에 필요한 이벤트 처리 함수를 연결한다.

📌 나중에 직접 해봐야겠다..!

Next.js#

Next는 서버사이드 렌더링에 특화된 프레임워크다.

• 서버사이드 렌더링의 장점

  • SEO

  • 초기 로딩 성능 개선

• 이미지 리소스 최적화

• 정적 파일 서빙

  • 배너 이미지, 아이콘 등등에서 사용함

• 코드 스플리팅 자동화

• 웹팩 기반 환경 (create-react-app과 달리 웹팩 설정 변경이 쉽다.)

서버에서 생성된 데이터 전달하기#

• getInitialProps : 구버전에서 사용한 data fetching 방식

• getStaticProps : 빌드 시 고정되는 값으로 빌드 이후에는 변경이 불가능하다.

  • static data를 위해 (변경되지 않을 데이터. 블로그 포스트 등등 ...)

• getServerSideProps : 빌드와 상관없이 매 요청마다 데이터를 서버로부터 가져온다.

  • 매번 변경될 수 있는 데이터를 위해 (상품 목록. 실시간 뉴스 등등 ...)

• getStaticPaths : 빌드 타임 때 정적으로 렌더링할 경로 설정.

CSS#

• @import : 다른 스타일 시트에서 스타일 규칙을 가져옴

• 사용자 지정 CSS 속성(CSS 변수, 종속 변수)

  • 선언

  element {    --main-bg-color: brown;}

  복사
  • 사용

  element {    background-color: var(--main-bg-color);}

  복사

하위 호환성 및 프론트엔드 빌드#

Can I use... Support tables for HTML5, CSS3, etc

ECMAScript 6 compatibility table

• transpilling을 통해서 하위 브라우저에서도 동작하게 문법을 바꾼다.

• polyfill을 통해서 지원하지 않는 native API를 다른 코드로 동작하게 한다.

• npm init -y : npm init -—yes 로 npm init 시에 나오는 설정에 모두 yes로생략하여 진행함

• --save-dev is used to save the package for development purpose. Example: unit tests, minification..

• --save is used to save the package required for the application to run.

babel#

하위 브라우저가 지원가능하도록 transpiling

Webpack#

모듈 번들러

JavaScript modules

var path = require('path');
module.exports = {    mode: 'none',    entry: './index.js',    output: {        filename: 'bundle.js',        path: path.resolve(__dirname, 'dist'),    },    module: {        rules: [            {                test: /\.css$/,                use: ['style-loader', 'css-loader'],            },        ],    },};

• mode : development, production, none 모드 중 설정

• entry : 시작점

• output : 결과물

• module : 로더

DOM#