1. 📁 프로젝트 폴더 구조

📦.git
┗ ...
📦.husky
┗ 📜pre-commit
📦.vscode
┗ 📜settings.json
📦public
┗ 📜index.html
📦src
┣ 📂assets
┃ ┣ 📂images
┃ ┗ 📂icons
┃ ┃ ┗ 📜index.js
┣ 📂components
┃ ┣ 📂common
┃ ┃ ┣ 📜Header.jsx
┃ ┃ ┗ 📜Footer.jsx
┃ ┗ 📂main
┃ ┣ 📜index.js
┃ ┗ 📜Router.jsx
┣ 📂libs
┣ 📂pages
┃ ┣ 📜index.js
┃ ┣ 📜Main.jsx
┃ ┣ 📜NotFound.jsx
┃ ┗ 📜Page1.jsx
┣ 📂styles
┃ ┣ 📂fonts
┃ ┣ 📜global-style.js
┃ ┗ 📜theme.jsx
┣ 📜App.js
┗ 📜index.js
📜.eslintrc.js
📜.gitignore
📜.prettierrc
📜LICENSE
📜package.json
📜README.md
📜yarn.lock

2. 📚 각 폴더의 구성 방식

src > assets

• 필요한 icon 파일은 Figma 에서 svg로 export 한 후 icons 폴더에 넣기
• 이미지들의 경우에는 images 폴더에 넣기
  

굳이?
svg 파일들은 컴포넌트로 import 해서 사용할 것이고, image들은 src에 넣어서 사용할 예정이기 때문에 다른 폴더로 하는 것이 맞다고 생각했습니당! 불편하면 상의 후 바꿔도 좋습니다!

// svg 파일 사용법
import { ReactComponent as MailIcon } from "../../assets/header/mailIcon.svg";
...
  &<MailIcon alt="github" fill="darkgray" />

// images 폴더의 내용들을 담아서 한 번에 불러오기 - index.js 사용
import { profileImg, tempImg, tempImg2 } from "../../assets";
...
  <img src={profileImg} alt="profileImg" />

src > components

페이지별로 필요한 컴포넌트들을 모아두는 곳입니다.

• common 폴더에서는 Header와 Footer와 같이 페이지에 관계없이 변하지 않는, 공통으로 사용되는 컴포넌트를 모아둡니다.
• 모든 컴포넌트들은 index.js에 모아서 필요할 때 한 번에 import할 수 있도록 합니다.

// src/components/index.js
export { default as Header } from "./common/Header";
export { default as Footer } from "./common/Footer";
export { default as MainWrapper} from "./common/MainWrapper";

// 기존 컴포넌트 import 방식
import ArticleBody from "../components/write/ArticleBody";
import ArticleFooter from "../components/write/ArticleFooter";
import ArticleTag from "../components/write/ArticleTag";
import ArticleTitle from "../components/write/ArticleTitle";
import PublishScreen from "../components/write/PublishScreen/index";

// src/components/index.js 정리 후 import 방식
import { ArticleBody, ArticleFooter, ArticleTag, ArticleTitle, PublishScreen } from "../components";

• Router.jsx
  Routing과 관련한 내용을 모아볼 수 있는 페이지입니다. react-router-dom이 v6로 업그레이드되면서 더욱 편리해졌습니다!
  자세한 내용은 v6에 대해 정리한 글을 확인하시면 됩니다.

src > libs

서버 연결에서 사용할 api를 모아두기 위한 폴더입니다.

src > pages

Route에 들어갈 page들을 모아둔 폴더입니다. 마찬가지로 index.js에 정리해서 사용할 예정입니다.

src > styles

style과 관련한 내용을 모아두기 위한 폴더입니다.

• fonts폴더에 프로젝트에 사용될 font들을 모아두고 global-style.js에서 정의하여 사용합니다.
• global-style.js와 theme.js는 styled-components에서 제공하는 GlobalStyle과 themeProvider를 사용하기 위함입니다.
• GlobalStyle은 프로젝트 전반에 적용될 css를 정의해두는 곳입니다. App.css와 index.css에서 하던 내용들을 정리한다고 생각하면 됩니다!
• theme에서는 프로젝트에서 사용될 각종 폰트크기, 색상, 반응형 사이즈 등을 정리해서 사용합니다! #뭐시기들의 색들을 다 외울필요가 없습니다 :)

  eslint와 prettier의 차이
  eslint는 정의된 rules에 따라 불가능한 것을 검사합니다.
  (ex. "세미콜론 없잖아!" "여기 사용되지 않는 변수 있자나!" 등)
  prettier는 더 똑똑한 친구로 "이렇게하면 더 예뻐~"라는 식의 오류를 보여줍니다.
  prettier가 먼저 바꿀 수 있는 만큼 바꾸고, 고쳐주면 eslint에서 태클을 거는 방식입니다. 그러다보디 아무생각없이 추가하다보면 둘이 충돌할 가능성이 아주 농후합니다. 그래서 각 파일을 따로 생성합니다.

2. ⚙ 잠깐만요~

설치 먼저 하실게요~

vscode extension을 설치합시다!

yarn add 할 때 끝에 —save를 적어도 됩니다.
--save 옵션은 로컬 모드와 유사하지만 현재 프로젝트의 package.json에 의존성(dependencies)으로 기록합니다. package.json에 의존성이 기록되어 있으면 다른 컴퓨터에 현재의 프로젝트를 이식할 때 'npm install' 명령어로 기록된 의존성 패키지들을 모두 설치할 수 있습니다.

yarn add -D

다음을 입력합니다. -D는 배포에서 불필요한, 개발에서만 사용될 아이들을 말합니다.

yarn add -D eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks lint-staged husky

HOXY 오류나세요?

error @eslint/eslintrc@1.0.4: The engine "node" is incompatible with this module. Expected version "^12.22.0 || ^14.17.0 || >=16.0.0". Got "14.16.1"error Found incompatible module.

error @eslint/eslintrc@1.0.4: The engine "node" is incompatible with this module. Expected version "^12.22.0 || ^14.17.0 || >=16.0.0". Got "12.20.0"error Found incompatible module.info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

node -v 했을 때 버전이 16이상이어야합니다. 업그레이드 하시구 그래도 안되면 다시 까세요!

yarn add

yarn add axios react-router-dom styled-components

프로젝트에서 사용할 아이들을 설치합니다.

package.json 확인

- 2021.11.13 update
package.json 파일의 scripts에 아래 내용을 추가합니다. 정의된 scripts의 명령어들을 yarn lint 식으로 사용하면 다음의 내용을 실행하겠다는 의미입니다. 명령어를 미리 정해주는거죠!

"lint": "npm run lint-eslint && npm run lint-prettier",
"lint-eslint": "eslint --ignore-path .gitignore src/**/*{js,jsx} --fix",
"lint-prettier": "prettier --write \"src/**/*.(js|jsx)\""

• lint-eslint: igonre에 있는 내용들은 제외하고 src 내에 있는 js와 jsx 파일들에 대해서 eslint를 적용하겠다는 의미입니다. —fix의 의미는 가능한 만큼 알아서 해주겠다는 의미입니다.
• lint-prettier: js와 jsx 파일에 대해서 prettier를 적용하겠다는 의미입니다.
• lint: 위에서 정의한 두 개의 명령어를 동시에 사용할 수 있도록 해줍니다. yarn lint를 사용하면 내가 작업한 모든 파일들에 대해서 eslint와 prettier를 한 번에 적용해줍니다.

3. 📿 eslint 설정

최상위 폴더에 .eslintrc.js 파일을 만들어 eslint 설정을 합니다.

사용 X
yarn eslint --init

위 명령어를 사용하면 eslint 기초 세팅을 해준다고 하지만, 실행해보면 npm을 사용하여 설치하는 것을 볼 수 있습니다. yarn과 npm을 혼용하게 되면 package-lock.json이 생성되는 등 각종 충돌이 발생할 수 있으니 사용하지 않습니다.

단계별로 따라하기

1. 기본 세팅

// eslintrc.js
module.exports = {
  env: {
    browser: true,
    node: true,
  },
  extends: ["eslint:recommended", "plugin:react/recommended"],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2020,
    sourceType: "module",
  },
  plugins: ["react"],
  rules: {},
};

이대로 실행하면 다음과 같은 오류가 납니다.

'React' must be in scope when using JSX eslint(react/react-in-jsx-scope)

과거에는 import React from 'react'가 필수였기 때문에 생긴 에러입니다. 이제는 없어도 무방하기에 .eslintrc.js의 rules에 아래 내용을 추가하여 이 에러는 꺼버리겠습니다!

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

참고로 위의 경고 문구 중 마지막 eslint(react/react-in-jsx-scope)의 내용들은 rules들의 이름이라고 생각하면 됩니다. 오류가 나는 내용들에 대해서 이상에서처럼 rules의 이름을 적고 off, warn, error 등으로 표기하면 됩니다.

3. 이제 yarn lint를 실행하여 나오는 오류들을 하나 둘 해결해보세요!

module.exports = {
  env: {
    browser: true,
    node: true,
  },
  extends: ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2020,
    sourceType: "module",
  },
  plugins: ["react"],
  rules: {
    "react/react-in-jsx-scope": "off",
    "react/prop-types": "off",
    "react/display-name": "off",
    "prettier/prettier": ["error", { endOfLine: "auto" }, { usePrettierrc: true }],
  },
};

4. prettier와 eslint의 충돌을 방지하기 위해서 extends를 아래 내용으로 변경합니다.

extends: ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],

이거 넣었더니 혹시 eslintrc.js에 빨간 밑줄이 뜨셨나요? Delete CR 어쩌구,,
이건 윈도우에서만 생기는 에러인데, 맥과 윈도우가 엔터를 표현하는 방식이 달라서 생기는 것입니다. 깃헙 푸시할 때 CRLF 워닝이 뜨는 것도 같은 원리입니다. ಥ_ಥ
.eslintrc.js의 rules에 아래 내용을 추가하고 저장하면 해결됩니다!

"prettier/prettier": ["error", { endOfLine: "auto" }, { usePrettierrc: true }],

4. 👕 prettier 설정

.prettierrc 파일을 만들고 아래 내용을 넣습니다.

{
    "semi": true,
    "tabWidth": 2,
    "printWidth": 120,
    "trailingComma": "all",
    "bracketSameLine": true
}

5. ⚒️ vscode 설정

폴더의 빈공간에서 오른쪽 클릭 후 폴더 설정(Open folder settings)를 클릭해서 format on save를 검색해서 체크해주세요!! 이렇게 하면 lint가 적용된 내용이 자동으로 적용되어 저장됩니다!

ctrl/cmd + ,를 클릭해서 나오는 setting에서 하면 안되나요?
프로젝트 폴더 내에서 format on save를 해줘야 .vscode폴더가 생기고 그 아래 settings.json에 해당 내용이 담깁니다. 나의 프로젝트 동료들이 클론 받아 사용할 때도 같은 설정을 유지할 수 있게 됩니다.

// .vscode/settings.json
{
    "editor.formatOnSave": true
}

6. ✅ husky 설정

husky는 lint로 인한 conflict을 막기 위해 commit 전에 해당 내용을 검사해주는 역할을 합니다. 프로젝트 폴더에 만들어져있을 .husky내에 pre-commit 파일을 만들어 아래 내용을 넣어주세요!

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn lint-staged