Nextjs 와 graphql 을 사용해보자

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
    서버 확인


chapter2 예고 - jest, enzyme 추가 및 applo 연동

혹시나 이상한 부분이 있다면 댓글 달아주시면 내용 수정하겠습니다!