[Project] Hobbyt - 개발환경 세팅

Heera1·2022년 12월 26일

hobbyt project

[Project] Hobbyt

목록 보기

1/6

새로 시작하는 프로젝트 우당탕탕 개발환경 세팅하기

1. client, server 폴더 만들기

처음엔 프론트 개발 세팅을 모두 끝내고 push를 했었는데 server 폴더만 올라가지고, client 폴더는 올라가지지 않아서 당황했다.

이런저런 시도를 해 보다가 client 폴더, server 폴더에 example.tsx 파일만 넣어서 push를 해 보았다. 다행히 정상적으로 올라가졌고, 그것을 clone 받아와 client 개발 세팅 다시하고 push 했더니 잘 올라가졌다.

2. Node, Npm 버전 맞추기

우리는 node LTS 버전으로 맞추기로 했다. (v.18.12.1)
나 같은 경우 nvm install 18.12.1 을 실행하니 저절로 node 버전이 바뀌면서 npm 버전이 원래 사용하던 8.19.2 가 되었다.

그런데 프론트 팀원분은 nvm use v.18.12.1 을 하면 npm 버전이 9.1.1 로 변경되었다. 프론트 팀원분께서 npm 버전만 바꿔보려고 이런저런 시도를 해보셨으나 잘 되지 않았다. 일부로 다운그레이드 하는 것보단 내가 버전을 올리는 게 나을 것 같아서 npm 버전을 9.1.1 로 통일하기로 하였다. (최신버전 9.2.0)

처음 시도했던 것은 npm install npm@9.1.1 인데 npm 버전이 바뀌지 않았다. 그래서 -g 로 다시 시해보았더니 버전이 잘 바뀌었다. npm install -g npm@9.1.1

3. .eslintrc.js

사용 : typescript, Next.js, airbnb, Prittier

최종 파일

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "airbnb",
    "airbnb/hooks",
    "airbnb-typescript",
    "next/core-web-vitals", //next.js에서 사용
    "prettier", //prettier 사용시
  ],
  overrides: [],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: ["./tsconfig.json"],
    tsconfigRootDir: __dirname,
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["react", "@typescript-eslint"],
  ignorePatterns: [
    ".eslintrc.js",
    "next.config.js",
    "postcss.config.js",
    "tailwind.config.js",
  ], //module 에러 나는 파일들을 예외처리해줌
  rules: {
    "react/prop-types": "off",
    "import/no-unresolved": "off",
    "react/react-in-jsx-scope": "off",
    "react/jsx-props-no-spreading": "off",
    "no-alert": "off",
    "no-console": "off",
    "import/no-extraneous-dependencies": ["error", { devDependencies: true }],
    "react/button-has-type": "off",
  },
};

"react/react-in-jsx-scope": "off"

Next.js 를 사용할 때 import React from 'react' 는 필요하지 않은데 ESLint에서 추가하라고 에러를 띄울 때 'react/react-in-jsx-scope': 'off' 를 .eslintrc.js 파일에 추가하면 된다. (참고)
// 'React' must be in scope when using JSX 에러 지우기(Next.js)

"react/jsx-props-no-spreading": "off"

Next.js 로 ESLint 를 설정할 때 넣어야 하는 항목. 자세한 내용은 추후 수정.

"no-alert": "off"

alert 사용시 에러를 띄울지 여부
Off로 해두면 alert 사용 가능

"no-console": "off"

console.log() 사용시 에러를 띄울지 여부
Off로 해두면 console 사용 가능

"import/no-extraneous-dependencies": ["error", { devDependencies: true }],

index.tsx 에 import tw from "tailwind-styled-components"; 부분에 'tailwind-styled-components' should be listed in the project's dependencies, not devDependencies.eslintimport/no-extraneous-dependencies 라는 에러가 떴을 때 사용.