패스트캠퍼스 챌린지 30일차 (Next.js 실제3 - AMP, Babel 등)

22.2.22 (화) +30days

 

AMP Support

With Next.js you can turn any React page into an AMP page, with minimal config, and without leaving React.

Accelerated Mobile Pages 가속화된 모바일 페이지

amp.dev

Enabling AMP

To enable AMP support for a page, and to learn more about the different AMP configs, read the API documentation for next/amp.

Caveats

• Only CSS-in-JS is supported. CSS Modules aren't supported by AMP pages at the moment. You can contribute CSS Modules support to Next.js.

어떻게 빠른 렌더링을 확보하는가?

https://amp.dev/about/how-amp-works/

각종 규격을 둠(제약을 둠)

모든 스크립트는 비동기로 동작(block 방지) / 리소스의 사이즈 지정 / 외부 리소스 렌더링 차단 / 메인 페이지에서 외부 자바스크립트 차단 / CSS inline으로만 사이즈 제약 / 스타일 재계산 최소화 / GPU 활용하는 애니메이션만 사용 허용

구성요소

https://amp.dev/documentation/components/

AMP Validation

https://nextjs.org/docs/advanced-features/amp-support/amp-validation

AMP in Static HTML export

When using next export to do Static HTML export statically prerender pages, Next.js will detect if the page supports AMP and change the exporting behavior based on that.

---

Customizing Babel Config

https://nextjs.org/docs/advanced-features/customizing-babel-config

next.js에 적용된 babel 설정을 커스텀 할 수 있다.

Babel 기본

Javascript compiler

https://babeljs.io/docs/en/usage

언어를 low한 언어로 바꿔주는 compiler와 달리 babel은 tanspiler

ES6 → ES5

최신 브라우저가 아닌 경우의 사용자에게도 동일한 경험을 제공하기 위함

예시

const fn = () => 1;

npm install --save-dev @babel/core @babel/cli

./node_modules/.bin/babel babel-test.js

직접 만들어보기
./node_modules/.bin/babel babel-test.js --plugins ./babel-plugin-var.js

플러그인 모음인 프리셋 써보기

npm install --save-dev @babel/preset-env

./node_modules/.bin/babel babel-test.js --presets=@bable/env

.babelrc 파일 생성

AST(Abstract Syntax Tree)

소스 코드의 추상 구문 구조 트리

⇒ 코드를 노드로 표현한 것

Customizing PostCSS Config

https://nextjs.org/docs/advanced-features/customizing-postcss-config

Next.js compiles CSS for its built-in CSS support using PostCSS.

Autoprefixer및 기타 여러 cross browsing 이슈를 대응해둠

Target Browsers: package.json > browserslist

https://www.npmjs.com/package/browserslist

예제

{
  "browserslist": [">0.3%", "not ie 11", "not dead", "not op_mini all"]
}

정리

AMP ⇒ 렌더링 속도를 극단적으로 높이는 방법

Babel ⇒ next/babel / plugins / presets

AST ⇒ 소스 코드의 추상 구문 구조 트리

PostCSS ⇒ Autoprefixer 등 / browserslist

 

 

 

 

22.2.22 +30days

 

 

 

 

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다