NEXTJS + REACT QUERY + TYPE SCRIPT + INFINIT SCROLL : Culture Place 제작 - 1 -

일단, Boiler Plate 를 하나 만들어 두려고 한다.
어느 프로젝트에서도 항상 사용할 수 있는 것을 목적으로 한
범용 템플릿을 만들 예정.

1. Nextjs With TypeScript

yarn create next-app --typescript projectName

2. 폴더구조

components
/ elements (최소단위 재사용, button, input 등)
/ layout (전체적인 레이아웃, Header, Footer)
/ pages (각 페이지에서 해당 페이지에서만 사용되는 컴포넌트)
/views (element 보다 단위가 큰 컴포넌트)

hooks / api
interfaces
node_modules
page
public

로 잡아보았다. utils 나 config 폴더도 구성할 수 있지만 현재로써는 그 사용용도가 그다지 보이지 않아, 이번 프로젝트에서 사용하지 않는다.

폴더구조내 파일들에 대한 설명 :

components 는 page 에 사용되는 컴포넌트가 있는 폴더

hooks / api
React query 의 공식 홈페이지에서는 React Query 를
훅으로 만들어서 사용하는 것을 권장하는 편이고,
그에 대한 자세한 예시를 보여주고 있다.

다른 동기 hooks 와 비동기 react-query 의 구분을 위해
hooks 폴더의 api 폴더에 react-query 의 데이터 패치용
파일들을 넣으려고 한다.

interfaces 는 타입스크립트에서 db 에서 넘어오는
type 에 대한 것이 담길 예정이며,

그외에는 기본적인 폴더구성이다.

---

3. eslint 와 prettier 설정.

보통 eslint 는 airbnb 식 스타일을 따른 경우도 많지만,
나의 경우는 nextjs 홈페이지 공식 메뉴얼에 추천하는 방식으로,
"extends": "next/core-web-vitals" 식으로 설정을 하고
가도록 하겠다.

yarn lint

만 치면 끝.

Prettier 까지 쓰려면,

{
  "extends": ["next", "prettier"]
}

여기에 절대경로를 사용하려면,
tsconfig.json 에

"baseUrl": ".",
  

paths 를 설정하려면

  "paths": {
      "@/*": ["*"]
    }

이걸로 대부분 돌아가지만 잘 안된다면, 다음을 추가하자

next.config.js

{
    webpack(config) {
		config.resolve.modules.push(__dirname); // 추가
		return config;
	}
}

인터넷 검색시 가장 많이 나오는 airbnb 스타일 eslint 의존성 설치방법
으로 하려면 아래와 같이 하자.

yarn add --dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
yarn add -dev prettier eslint-config-prettier eslint-plugin-prettier
yarn add --dev babel-eslint eslint-plugin-babel

.eslintrc

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": [
    "next",
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:react/recommended",
    "airbnb",
    "plugin:prettier/recommended"
  ],
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["react", "react-hooks", "prettier"],
  "rules": {
    "react/react-in-jsx-scope": 0,
    "react/prefer-stateless-function": 0,
    "react/jsx-filename-extension": 0,
    "react/jsx-one-expression-per-line": 0,
    "no-nested-ternary": 0,
    "import/no-unresolved": "off",
    "react/jsx-props-no-spreading": 0,
    "prettier/prettier": 0
  },
  "globals": {
    "React": "writable"
  }
}

.prettierc

{
  "singleQuote": true,			// 쌍따옴표가 아닌 따옴표를 사용하기 위한 옵션입니다.
  "jsxSingleQuote": true,
  "semi": false,			// 세미콜론을 붙이시려면 true로 설정해주세요.
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "arrowParens": "always",
  "printWidth": 100,
  "jsxBracketSameLine": false
}

eslint와 prettier 는
이 글을 참고 하였습니다.

제대로 작성하는 지, npm run dev

2편에서는 netxtjs 의 ssr과 ssg 를 테스트해보자.