README.ko-KR.md

Next-Plate

🦸‍♀️ 유용한 툴이 포함된 Next.js 템플릿

---

---

---

🌎 번역

🚀 데모 →

클릭 몇 번으로 이 템플릿의 복사본을 배포하세요!

📖 소개

이 템플릿은 당신의 다음 React 프로젝트에 필요한 모든 것과 JAMStack 의 모든 모범 예제를 담고 있습니다.

이 템플릿에는 여러 폴더, 코드 예제 및 구성이 포함되어 있습니다. 이 README 파일을 포함해 자유롭게 편집하거나 삭제하세요!

원하는대로 수정하고 즐기세요!

📚 설명서 →

🌟 특징

이 프로젝트에는 최신 웹 개발 툴들과 예시들이 포함되어 있습니다!

프레임워크

• ⚛️ Next.js – 하이브리드 및 서버 렌더링을 위한 완벽한 React 프레임워크

데이터 가져오기

• ✳️ React Query – React에서 비동기 데이터를 가져오고 캐싱하고 업데이트하기 위한 Hooks
• ❇️ SWR (React Query의 대안) – 데이터를 가져오기를 위한 React Hooks 라이브러리
• 🔄 Axios – 브라우저 및 Node.js에 대한 Promise 기반 HTTP 클라이언트

상태 관리

• 🐻 Zustand – 단순화된 플럭스(사용자 인터페이스 구축을 위한 애플리케이션 아키텍처) 원칙을 사용한 작고, 빠르고, 확장 가능한 상태 관리 솔루션
• 👍 react-use – 필수 React Hook 컬렉션

디자인 시스템과 애니메이션

• 🎨 Chakra-UI – React 앱을 빌드하기 위한 빌딩 블록을 제공하는 간단한 모듈식 컴포넌트 라이브러리
• 🎞️ Framer Motion – React용 프로덕션 준비 모션 라이브러리
• ✨ React Icons – React 프로젝트에 자주 사용되는 아이콘 모음

폼 유효성 검사

• 📋 React Hook Form – 사용하기 쉬운 검증을 통해 성능, 유연성 및 확장성이 뛰어난 폼
• 🚨 Yup – 폼 유효성 검사 런타임 값 구문 분석 및 유효성 검사를 위한 스키마 빌더

테스트

• 🃏 Jest – 단순성에 초점을 맞춘 즐거운 JavaScript 테스트 프레임워크
• 🐙 Testing Library – 우수한 테스트를 제안하는 간단하고 완벽한 테스트 유틸리티

디자인 패턴

• ⛔ ESLint – JavaScript 코드 내 문제 찾기 및 해결
• 🎀 Prettier – 다양한 언어 및 코드 편집기를 지원하는 코드 포맷터
• 🐺 Husky – 간편한 모던 네이티브 Git Hooks
• 💩 lint-staged – 준비된 git 파일에 대해 린터를 실행하고 💩이 코드 베이스에 들어가지 않도록 지원
• 📓 commitlint – 팀이 커밋 규칙을 준수하도록 지원
• 🏷️ Standard Version – 기존 커밋으로 구동되는 sember 및 CHANGELOG 생성을 이용한 버전 관리 유틸리티

분석

• 🕵🏻‍♂️ why-did-you-render (선택 사항) – 잠재적으로 피할 수 있는 재렌더에 대해 알림

추가적인 플러그인

• 🗃️ next-compose-plugins – Next.js의 플러그인과 더 깨끗한 API를 제공
• 📱 next-pwa – Next.js 전용 PWA 플러그인
• 📈 next-seo – Next.js 프로젝트에서 SEO를 더 쉽게 관리할 수 있는 플러그인
• 🤖 next-sitemap – Next.js 전용 사이트 맵 생성기
• 🎉 Partytown – 리소스 집약적인 타사 스크립트를 메인 스레드에서 웹 작업자로 재배치

▶️ 시작하기

📙 GitHub에서 새 레포지토리 만들기

1. "Use this template" 버튼을 클릭합니다.
2. 새 레포지토리를 구성하고 "Create repository from template" 버튼을 클릭합니다.
3. 이제 생성된 레포지토리를 로컬에 복제할 수 있습니다. :

 $ git clone https://github.com/<YOUR-GITHUB-LOGIN>/<NAME-OF-YOUR-GENERATED-REPOSITORY>.git

🛠️ 설치

슈퍼 앱 개발을 시작하기 전에 프로젝트의 종속성을 설치해야 합니다.

프로젝트의 루트로 이동합니다. :

$ cd <NAME-OF-YOUR-GENERATED-REPOSITORY>

다음 단계에서는 패키지 관리자를 선택하고 package.json 스크립트에 포함된 명령어를 선택하고 변경합니다. 자세한 내용은 아래 설명서를 참조하세요.

• PNPM
• NPM
• Yarn

프로젝트의 모든 종속성을 설치합니다. :

# PNPM
$ pnpm install
# NPM
$ npm install
# Yarn
$ yarn install

⌨️ 개발

모든 종속성이 설치되면 로컬 개발 서버를 실행할 수 있습니다. :

# PNPM
$ pnpm run dev
# NPM
$ npm run dev
# Yarn
$ yarn dev

이제 코딩하면 됩니다!

🖥️ 배포

변경 내용을 적용한 후 프로덕션 환경에 테스트 및/또는 배포할 빌드를 생성할 수 있습니다.

프로덕션 빌드 만들기 :

# PNPM
$ pnpm run build
# NPM
$ npm run build
# Yarn
$ yarn build

그런 다음 빌드를 실행합니다. :

# PNPM
$ pnpm start
# NPM
$ npm start
# Yarn
$ yarn start

사용할 수 있는 추가 명령 보기

린트

# PNPM
$ pnpm run lint
# NPM
$ npm run lint
# Yarn
$ yarn lint

린트와 버그 해결

# PNPM
$ pnpm run lint:fix
# NPM
$ npm run lint:fix
# Yarn
$ yarn lint:fix

테스트

$ pnpm run test # or pnpm run test:watch
# NPM
$ npm run test # or npm run test:watch
# Yarn
$ yarn test # or yarn test:watch

타입 검사

# PNPM
$ pnpm run type-check
# NPM
$ npm run type-check
# Yarn
$ yarn type-check

포맷(서식)

# PNPM
$ pnpm run format
# NPM
$ npm run format
# Yarn
$ yarn format

상호작용 업데이트 도구

# PNPM
$ pnpm run up
# NPM
$ npm run up
# Yarn
$ yarn up

모든 종속성 업데이트

# PNPM
$ pnpm run up-latest
# NPM
$ npm run up-latest
# Yarn
$ yarn up-latest

메이저 버전으로 릴리즈

# PNPM
$ pnpm run release-as-major
# NPM
$ npm run release-as-major
# Yarn
$ yarn release-as-major

마이너 버전으로 릴리즈

# PNPM
$ pnpm run release-as-minor
# NPM
$ npm run release-as-minor
# Yarn
$ yarn release-as-minor

패치 버전으로 릴리즈

# PNPM
$ pnpm run release-as-patch
# NPM
$ npm run release-as-patch
# Yarn
$ yarn release-as-patch

릴리즈 퍼블리시

# PNPM
$ pnpm run push-release
# NPM
$ npm run push-release
# Yarn
$ yarn push-release

원격에서 업데이트 가져오기 및 현재 변경 내용 유지

# PNPM
$ pnpm run pull
# NPM
$ npm run pull
# Yarn
$ yarn pull

⚙️ 추가 구성

SWR

SWR로 전환

프로젝트에 SWR 설치 :

# PNPM
$ pnpm install swr
# NPM
$ npm install swr
# Yarn
$ yarn add swr

src/pages/_app.tsx 및 src/pages/[login].tsx에 있는 React Query의 모든 import 라인, provider 및 코드 블록을 제거합니다.

바로 그겁니다! 앱에서 데이터를 가져오려면 useFetch 함수를 사용합니다.

데모를 보고싶다면 src/pages/[login].tsx에서 SWR 구현의 모든 import 라인 및 코드 블록의 주석을 해제합니다.

렌더링한 이유

활성화 방법

프로젝트 루트에 src/scripts 경로의 babel.config.js 파일을 넣고 .babelrc 파일을 삭제합니다.

pages/_app.tsx에서 wdyr import 라인의 주석을 해제합니다.

바로 그겁니다! 이제 React 재렌더를 모니터링할 수 있습니다!

제거하는 방법

babel.config.js, wdyr.ts 파일을 삭제하고 pages/_app.tsx에서 wdyr import 라인을 삭제합니다. :

# PNPM
$ pnpm uninstall @welldone-software/why-did-you-render
# NPM
$ npm uninstall @welldone-software/why-did-you-render
# Yarn
$ yarn remove @welldone-software/why-did-you-render

📁 파일 트리

템플릿의 구조에 대해서는 아래 파일 트리를 참조하세요.

파일 트리 보기

(**)로 표시된 폴더와 파일은 선택 사항이므로 삭제할 수 있습니다.

📂 next-plate/
┣ 📂 .github/                   # GitHub's folder configs **
┣ 📂 .husky/                    # Husky's folder
┃ ┣ 📃 commit-msg               # Commitlint git hook
┃ ┗ 📃 pre-commit               # Lint-staged git hook
┣ 📂 .vscode/                   # VSCode's workspace **
┣ 📂 public/                    # Public folder
┃ ┣ 📂 static/                  # Static files folder **
┃ ┃ ┣ 📂 icons/                 # Icons folder **
┃ ┃ ┣ 📂 images/                # Images folder **
┃ ┃ ┣ 📂 sounds/                # Sounds folder **
┃ ┃ ┗ 📂 videos/                # Videos folder **
┃ ┣ 📂 docs/                    # Documentation folder **
┃ ┃ ┣ 📂 demo/                  # Demonstrations project **
┃ ┃ ┗ 📂 translations/          # Translations folder **
┃ ┣ 📃 favicon.ico              # Icon tab browser
┃ ┣ 📃 site.webmanifest         # PWA config
┣ 📂 src/
┃ ┣ 📂 animations/              # Framer Motion Animations **
┃ ┣ 📂 components/              # App Components
┃ ┃ ┗ 📂 Motion/                # Chakra + Framer components **
┃ ┣ 📂 hooks/                   # React Hooks **
┃ ┃ ┗ 📃 useFetch.ts            # SWR fetch hook (optional) **
┃ ┣ 📂 interfaces/              # TypeScript Interfaces
┃ ┣ 📂 pages/                   # App pages
┃ ┣ 📂 scripts/                 # Additional scripts **
┃ ┃ ┣ 📃 babel.config.js        # Babel config with WDYR **
┃ ┃ ┗ 📃 wdyr.ts                # WDYR file **
┃ ┣ 📂 services/                # Services
┃ ┃ ┣ 📂 global/
┃ ┃ ┃ ┗ 📃 api.ts               # AXIOS config
┃ ┃ ┗ 📂 users/
┃ ┃   ┣ 📃 index.ts             # React Query Configuration
┃ ┃   ┗ 📃 keys.ts              # React Query Key
┃ ┣ 📂 stores/                  # Zustand stores
┃ ┣ 📂 styles/                  # Styles folder
┃ ┃ ┣ 📃 bgImages.ts            # SVG background images **
┃ ┃ ┗ 📃 theme.ts               # Chakra-UI theme
┃ ┗ 📂 utils/                   # Useful functions **
┣ 📃 .babelrc                   # Default Babel config
┣ 📃 .editorconfig              # Editor config
┣ 📃 .eslintignore              # ESLint ignore
┣ 📃 .eslintrc                  # ESLint config
┣ 📃 .gitignore                 # Git ignore
┣ 📃 .versionrc                 # Versioning config
┣ 📃 .commitlintrc              # Commitlint config
┣ 📃 jest.config.js             # Jest config
┣ 📃 jest.setup.js              # Jest setup
┣ 📃 LICENSE                    # License of the project
┣ 📃 next-env.d.ts              # Next.js types to TypeScript
┣ 📃 next-seo.config.js         # Next-SEO config
┣ 📃 next-sitemap.config.js     # Next-Sitemap config
┣ 📃 next.config.js             # Next.js config
┣ 📃 .prettierrc                # Prettier config
┣ 📃 README.md                  # Main README
┣ 📃 renovate.json              # Renovate Bot config **
┣ 📃 tsconfig.json              # TypeScript config

📜 라이센스

만약 이 템플릿을 프로젝트에 재사용하신다면 프로젝트 바닥글에 제 GitHub 프로필에 대한 링크를 추가해주세요. 감사합니다!

이 프로젝트는 MIT 라이센스에 따라 라이센스가 부여됩니다. 자세한 내용은 라이센스 페이지를 참조하세요.

---

⭐ 이 프로젝트의 유지를 위해 별을 눌러주세요!

❤️ 당신의 관심에 감사드립니다!

👨‍💻 즐거운 코딩되세요!

---