Next.js Lean Basic
Assets, Metadata, and CSS
Third-Party JavaScript
<Head>
<title>First Post</title>
<script src="https://connect.facebook.net/en_US/sdk.js" />
</Head>script tag를 Head Component에 추가, 이 방법은 퍼포먼스에 좋지 않을 수 있다.
Using the Script Component
export default function FirstPost() {
return (
<>
<Head>
<title>First Post</title>
</Head>
<Script
src="https://connect.facebook.net/en_US/sdk.js"
strategy="lazyOnload"
onLoad={() =>
console.log(`script loaded correctly, window.FB has been populated`)
}
/>
<h1>First Post</h1>
<h2>
<Link href="/">
<a>Back to home</a>
</Link>
</h2>
</>
)
}Head 컴포넌트 바깥에 Script 컴포넌트를 선언하여 third party javascript를 가져 온다.
strategy 프로퍼티는 로드 방식을 컨트롤한다.
lazyOnload는 브라우저가 쉴 때 lazily하게 로드하는 속성이다.
CSS
Next.js는 styled-jsx라는 CSS in JS 라이브러리가 내장되어있다.
하지만 styled-components나 emotion 등 다른 라이브러리도 설치하여 사용 가능하다.
styled-jsx
<style jsx>{`
.container {
min-height: 100vh;
padding: 0 0.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
`}</style>import css
.css나 ,scss 파일을 import 하여 사용 할 수도 있다.
Layout Component
모든 페이지에 공유될 컴포넌트
CSS module
.module.css로 끝나는 파일을 만들면 css를 모듈처럼 사용 가능
unique한 className을 자동적으로 만들어준다.
Global Styles
pages/_app.js 파일을 만든 후 styles/global.css 파일을 import 한다
Using classnames library to toggle classes
classnames는 class name을 toggle하는 간단한 라이브러리
npm install classnames
import styles from './alert.module.css'
import cn from 'classnames'
export default function Alert({ children, type }) {
return (
<div
className={cn({
[styles.success]: type === 'success',
[styles.error]: type === 'error'
})}
>
{children}
</div>
)
}PostCSS
Next.js는 CSS를 PostCSS를 통해 컴파일한다
config 하기 위해서는 postcss.config.js 파일을 top-level에 만들어 사용 할 수 있다.
Tailwind CSS를 사용 할 때 유용하다
Sass
scss를 사용한다면 npm install sass 후 사용하면 된다
Pre-rendering and Data Fetching
Pre-rendering
기본적으로 Next.js는 모든 페이지를 pre-rendering 한다
모든 페이지마다 각각의 HTML을 만들어서 퍼포먼스와 SEO에 장점이 있다
페이지가 브라우저에 로드되면 자바스크립트 코드가 실행되고 페이지가 interactive하게 만드는데 이 과정을 hydration 이라고 합니다.
Check That Pre-rendering Is Happening
브라우저의 자바스크립트를 disable 하고 page를 access하면 자바스크립트 없이 앱이 렌더된 것을 볼 수 있다. Pre-rendering된 static HTMl 파일이 존재하기 때문에 자바스크립트 실행 없이 UI을 볼 수 있다.
Next.js 없이 plain React app이라면 pre-rendering이 되지 않아서 javascript disable을 했을 때 UI를 볼 수 없습니다.
Two Forms of Pre-rendering
Static Generation: build time에 HTML 생성, 요청마다 재사용 됨
Server-side Rendering: 각 요청마다 HTML 생성
npm run dev를 사용한 development 모드에서는 모든 페이지가 요청마다 pre-rendering된다. 설령 Static Generation을 사용하는 페이지라도
Per-page Basis
Next.js는 각각의 페이지마다 어떤 pre-rendering form을 사용 할 것인지 선택 할 수 있다
When to Use Static Generation v.s. Server-side Rendering
가능하면 Statuc Generation을 사용하는 것을 추천 서버 사이드 렌더링보다 빠른 속도
요청마다 데이터가 업데이트되는 페이지라면 Server-side Rendering을 사용 할 수 있다.
더 느리겠지만 pre-rendered page가 항상 최신의 상태이게 된다.
혹은 pre-rendering을 skip하고 client-side Javascript 를 빈번한 데이터 업데이트에 사용 할 수 있다
Static Generation with and without Data
build time에 외부 데이터를 fetching하지 않는 경우 Static Generation 사용
하지만 간혹 몇몇 페이지는 외부 데이터를 first fetching 하여야 HTML을 렌더 할 수 있는 경우가 있다.
빌드 타임에 파일 시스템에 접근해야하거나 외부 API를 fetcch해야하거나 데이터베이스를 query해야하는 경우들을 Next.js가 HTML이 data fetching이 된 후에 생성되도록 지원한다. (매우 훌륭하다)
async 함수인 getStaticProps 함수를 사용한다
이 함수는 빌드 타임에 실행된다 이 함수 안에서 외부 데이터를 fetching하고 페이지의 props로 전달한다
export default function Home(props) { ... }
export async function getStaticProps() {
// Get external data from the file system, API, DB, etc.
const data = ...
// The value of the `props` key will be
// passed to the `Home` component
return {
props: ...
}
}getStaticProps 함수는 server-side에서만 실행되고 client-side에서 실행되지는 않는다
getStaticProps 함수는 page에서만 사용가능하고 page가 아닌 곳에서는 import 할 수 없다
Fetching Data at Request Time
요청 시 마다 데이터 fetch가 필요하다면 Static generation이 아닌 server-side rendering을 사용하는 것이 좋다
server-side rendering의 경우 getStaticProps가 아닌 getServerSideProps 함수를 사용한다
export async function getServerSideProps(context) {
return {
props: {
// props for your component
}
}
}context는 request 관련 파라미터들을 포함한다
Client-side Rendering
pre-render 데이터가 필요하지 않다면 client-side rendering을 사용 할 수 있다.
static하게 만들어진 페이지 부분에 외부 데이터가 필요하지 않고
페이지가 로드 된 후 클라이언트에서 외부 데이터를 fetching 할 경우 사용
이 방식은 대쉬보드 페이지들에 잘 어울린다. 대쉬보드는 private한 user-specific 페이지 이기 때문에 SEO는 관련이 없어서 pre-rendered 될 필요가 없다. 데이터는 빈번하게 업데이트되어서 request-time data fetching이 필요하다
SWR (stale-while-revalidate)
Next.js 팀은 data fetching을 위한 React hook SWR을 만들었다.
클라이언트 사이드에서 데이터를 fetching한다면 SWR을 추천한다.
캐싱, revalidation, focus tracking, refetching on interval 등을 처리한다
시각적요소 테스트 자동화하기 :: 1월 우아한테크세미나
js 테스팅 프레임워크 jest 사용
테스트 커버리지 확인 가능
api mocking
비동기 / 병렬 테스트
테스팅 툴 Puppeteer - chromium 조작 할 수 있는 툴, 브라우저 상호작용
할 수 있는 것
유저 행동 코드화
DOM 탐색 및 인터렉션
브라우저 다이얼로그 (alert, confirm 누름) 상호작용
브라우저 인스턴스 생성 후 행동 코딩
Puppeteer + Jest를 함께 사용
테스트 구성하기 관련 레포지토리
https://github.com/blueStragglr/visual-regression-test-demo
React Redux Hooks Recipes
https://react-redux.js.org/api/hooks#recipe-useactions
useActions() custom hook 만들어서 actions 불러오는 코드 간결하게 하기
useSelector 최적화 방법
- shallowEqual parameter 추가
- 값 하나하나 마다 독립적으로 useSelector 사용
- equalFunction 작성
