일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- 백준 2133
- OpenVidu
- 풀이
- 2623
- WebRTC란
- REACT
- 9996
- dp
- 데이터 링크 계층
- 13459
- 메모리계층
- 자료구조
- 백준
- LOLIN D32
- TDD란?
- 3XN 타일링
- 1796
- 페이지교체알고리즘
- RBT
- 구슬탈출
- mediastream
- Vite 사용 이유
- 테스트주도개발
- c++
- stl
- 구현
- tfjs
- 적두트리
- TDD
- ESP32
- Today
- Total
그냥 블로그
[Next.js] PJT 시작하기 + 버전 및 기타 라이브러리 붙이기 본문
에전에 한 번 CSR SSR을 다뤘던 적이 있다. + SPA MPA까지
아무래도 Framework을 다루는 FrontEnd한테는 무시할 수 없는 개념인 것 같다.
또, 많은 기업들에서 사용하고 있기도 하고... 이번에 플젝 + 리팩에서 검색 엔진에 걸리게 해야할 부분이 생겨
Next.js를 사용해보기로 했다. 근데 생각보다 고려해줘야 할 게 많아서 한 번 블로그 글로 정리해보려고 한다.
사실 SSR은 예전에 쓰던 렌더링 방법이니 조금이라면 VanilaJS 섞어서 쓰면 될 거 같기도 하고?? 이 부분도 나중에 한 번 알아봐야... CRA안 쓰면 되지 않을까..?
SSR 구현 방법
알아보니 SSR을 구현하는 방법도 몇 개 더 있는 것 같다. Next, Nuxt 만 알았는데...
1. Next, Nuxt 사용
2. ReactDOMServer라는 라이브러리로 구현할 수도 있는 듯 -> Nodejs 서버의 경우에만 가능한 듯
3. Vite에서도 SSR 구현을 지원하는 것 같다. ( 오히려 PJT에서는 이게 맞을 듯! )
4. Bun이라는 Node.js 대체 런타임 실행 도구? 도 있는 모양 -> 이건 신기한데 많이 쓰나????
-> 최근 꽤 떠오르고 있나 본데 나중에 한 번 써보자..!!
Next.js 프로젝트 세팅 (Node -v 18.17.1)
PJT 구성
언어 : TypeScript
스타일 : TailwindCSS, ESLint(Airbnb) + Prettier
상태 관리 : Recoil, ReactQuery
테스팅 : Jest, React Testing Library, Storybook ( + lighthouse?)
1. Next 프로젝트 생성하기
먼저, CNA를 해줍니다. (공식 문서에 따르면 Next.js를 실행하기 위해 node 버전 18.17 이상을 권장하니 확인해주세요)
저는 nvm으로 노드 버전을 관리하고 있습니다.
Next 버전 업데이트가 되면서 디폴트로 ts, tailwind, eslint를 설치해주고 있습니다.
npx create-next-app@latest
CNA 명령어를 실행하고 나면, 선택 항목이 뜰겁니다.
Typescript, eslint, Tailwind 등등 물어볼텐데, 저는 모두 Enter로 넘어가 줬습니다.
JavaScript를 사용하실 분들은 Typescript > No로 해주시면 되겠죠?(잘모름)
Jest+React Testing Library를 사용할 분들은
Next.js에서 제공하는 예시코드를 함께 설치해주시는게 편할 겁니다. -> 3번 뛰어넘기.
npx create-next-app@latest --example with-jest with-jest-app
2. Prettier + ESLint(Airbnb) + TailwindCSS
프리티어 부터 설치해 줍니다.
cd my-app
yarn add --dev --exact prettier
위 명령어를 입력하고 완료 되면, 생성되 CNA 폴더 아래에 .prettierrc.json 파일을 하나 생성해주세요. 여기엔 프리티어 옵션이 들어가는데 더 많은 옵션은 여기서 확인해주세요.
{
"singleQuote": true,
}
그리고 아래 명령어를 실행하면, prettier가 잘 작동하고 있는지 확인할 수 있습니다. 오류난다고 그럴텐데 확인 했으니 쉼표를 빼주세요 ^_^
yarn prettier . --write
ESLint를 설치해봅시다.
Next.js 설치하면서 ESLint를 함꼐 설치했고 Airbnb를 붙여주기만 하면 됩니다.
npx install-peerdeps --dev eslint-config-airbnb
yarn add eslint-config-airbnb-typescript \
@typescript-eslint/eslint-plugin@^6.0.0 \
@typescript-eslint/parser@^6.0.0 \
--dev
.eslintrc.json 파일에 다음을 붙여넣어 주세요.
{
"extends": [
"airbnb",
"airbnb-typescript",
"airbnb/hooks",
"next/core-web-vitals",
"prettier" // prettier 사용자만.
],
"parserOptions": {
"project": "./tsconfig.json"
}
}
yarn lint명렁어로 확인가능
TailwindCSS
yarn add --dev prettier prettier-plugin-tailwindcss
명렁어를 입력하고, prietterrc.json을 다음 내용으로 변경해주세요
{
"singleQuote": true,
"plugins": ["prettier-plugin-tailwindcss"]
}
마무리로 다음 명령어를 통해서 eslint와 prettier를 Intergrate 해줍니다.
yarn add --dev eslint-config-prettier
3. Jest + React Testing Library (공식문서 링크)
npm install -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom
# or
yarn add -D jest typescript jest-environment-jsdom @testing-library/react @testing-library/jest-dom
# or
pnpm install -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom
+ jest.config.ts 파일 확장자가 ts기 때문에 ts-node도 설치해줘야 합니다. (여기서 확인)
yarn add -D ts-node
package.json에 다음을 추가해주세요
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"test": "jest",
"test:watch": "jest --watch"
}
}
루트 디렉토리에 __tests__ 폴더를 만들고 page.test.jsx 파일까지 생성한 뒤,
예시 코드를 넣어주세요!
my-app/__tests__/page.test.jsx
import '@testing-library/jest-dom'
import { render, screen } from '@testing-library/react'
import Page from '../app/page'
describe('Page', () => {
it('renders a heading', () => {
render(<Page />)
const heading = screen.getByRole('heading', { level: 1 })
expect(heading).toBeInTheDocument()
})
})
my-app/__tests__/snapshot.js
import { render } from '@testing-library/react'
import Page from '../app/page'
it('renders homepage unchanged', () => {
const { container } = render(<Page />)
expect(container).toMatchSnapshot()
})
npm run test
4. StoryBook
npx storybook@latest init
설치하고
npm run storybook
실행하면 됩니다 ^_^
5. Recoil
yarn add recoil
utils 폴더 생성
utils/recoilRootProvider.tsx
'use client'
import { RecoilRoot } from 'recoil'
export default function RecoilRootProvider({
children,
}: {
children: React.ReactNode
}) {
return <RecoilRoot>{children}</RecoilRoot>
}
app/layout.tsx
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import RecoilRootProvider from '../utils/recoilRootProvider'
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'Graphy',
description: 'Project Share platform',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>
<RecoilRootProvider>{children}</RecoilRootProvider>
</body>
</html>
)
}
위처럼 Driectory와 파일을 생성해주면 끝.
6. React Query
yarn add @tanstack/react-query-next-experimental
https://cheolsker.tistory.com/82
[개인적으로 좋아보여서 첨부하는 ssr 테스팅]
[Setup nextjs airbnb-eslint-prettier-ts-tailwindcss]
https://velog.io/@gygy/Next.js-14%EC%97%90%EC%84%9C-React-query-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
https://nextjs.org/docs/app/building-your-application/testing/jest
'프로젝트 > WALFI' 카테고리의 다른 글
[Next.js] (0) | 2024.05.24 |
---|---|
[Next.js] 정적 및 동적 렌더링 (0) | 2024.05.22 |
[Next.js] app router + React Query (0) | 2024.05.20 |
[Next.js] Next.js 1 - 폴더 구조 (0) | 2024.05.10 |
[Web] WALFI Backend 연동 (JSP, MySQL) (0) | 2024.04.16 |