1. apllo - qraphqh 클라이언트
2. priteer, eslint - 코드 설정
3. immer - 불변성 관리
4. jest, enzyme - 테스트
mkdir (project-name)
프로젝트 파일 생성
cd (project-name)
프로젝트 파일 이동
yarn init -y
package.json 생성 및 업데이트
yarn 을 설치해야 사용 가능
-y : package.json default 생성하는 옵션
package.json 추가
{
...
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"lint": "eslint pages/**/*.tsx",
"lint:fix": "eslint --fix pages/**/*.tsx"
}
}
tsc -init
typescript 미리 설치해야 함
tsconfig.json 생성
yarn add react react-dom next
react next 추가
yarn add typescript --dev
TypeScript 추가
yarn add eslint eslint-config-airbnb-base eslint-plugin-import --dev
ESLint packages
yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser --dev
TypeScript ESLint packages
touch .eslintrc.js
// .eslintrc.js use vim
module.exports = {
parser: "@typescript-eslint/parser",
plugins: ["@typescript-eslint"],
extends: [
// Airbnb style guide 적용
"airbnb-base",
// TypeScript ESLint recommanded style 적용
"plugin:@typescript-eslint/eslint-recommended"
]
};
mkdir pages
Nextjs 규칙 적용
touch pages/index.tsx
vim pages/index.tsx
function Home () {
return <div>Welcome to Next.ts!</div>
}
export default Home
tsconfig.json 주석 해제
"jsx": "preserve",
yarn run lint
eslint 설정과 다른 곳 경고
yarn run lint:fix
eslint 설정과 다른 곳 자동 수정
yarn run dev
서버 확인
혹시나 이상한 부분이 있다면 댓글 달아주시면 내용 수정하겠습니다!