Portfolio

team-gidong-design

team-gidong-design has one repository available. Follow their code on GitHub.

https://github.com/team-gidong-design

참고한 레포

travelmakers next 보일러 플레이트 (멘토님 언급)

승준님 next 보일러 플레이트 (허락o)

우리 팀원들 전 프로젝트

이슈/논의

🚧 현재 npm run storybook 실행했을 때 발생하는 에러

Error message "error:0308010C:digital envelope routines::unsupported"

예상 원인: node LTS 버전이 아니거나 react-script 버전이 5 이하이거나

→ nvm으로 LTS 버전 싱크 → 해결x

NODE_OPTIONS=--openssl-legacy-provider 를 명령어 앞에 추가


"storybook": "export SET NODE_OPTIONS=--openssl-legacy-provider && start-storybook -p 6006"

node 버전 16으로 다운그레이드하거나 OpenSSL 다운그레이드하는 건 임시 해결 방법이고 개발 환경에서만 적용됨. 배포했을 때 똑같은 문제 발생 가능

npm audit fix 시도

계속 다른 패키지 설치할 때마다 에러 반복 발생 → 해결x

개발환경 적용은 끝났다. 테스트코드나 ci cd까지 추가하는 건 너무 광범위하다고 생각해서 다루지 않을려고 했다. 그런데 storybook을 적용하면서 몇가지 문제점이 생겨서 적용방법만 소개해보려고 한다. 스토리북 설치하기 다음 명령어로 스토리북을 설치하자. 참고로 yarn이아니라서 그냥 레포에 직접 들어가서 명령어를 입력하면 된다. npx는 yarn 환경이라면 yarn으로 알아서 설치해준다. npx sb init --builder @storybook/builder-vite 이게 끝이면 내가 글을 쓰지 않았다. yarn story명령어로 스토리북을 실행하면 import를 할 수 없다는 에러가 발생한다. 해당 라이브러리를 찾아보니 실제로 설치되지 않은 라이브러리다. 아마 내부에서 사용되는 것 같은데... ..

최신 프론트엔드 개발환경 적용하기4(storybook with vite,emotion))

https://ms3864.tistory.com/441

commitlint → 적용X (논의는 안 했지만 린트까지 적용해야 할까..? 일단 정해놓은 prefix대로 해보고 린트 적용이 필요하다고 느껴지면 추가하는 게 좋을 것 같음)

stylelint → 확정X (관련 자료 찾아보고 장단점 정리하기)

package.json에서 version 수정(추후 배포 시 고려)

~~레포 권한 요청하기~~

~~불필요한 기본 파일 삭제~~

세부 설명

nvm

명령어로 노드 버전 싱크

.nvmrc — node lts 버전(v18.14.0)으로 설정함

설치

Windows: nvm-windows 참고

Mac: brew install nvm 참고

실행

해당 버전으로 변경하려면 nvm use

해당 버전이 설치되어 있지 않다면 nvm install (nvm use까지 자동으로 실행됨)

prettier

npm i -D prettier

기본 설정과 다르게 되어 있는 환경에도 대응할 수 있게 최소한의 기본 세팅까지 명시

.prettierrc.json



{
  "parser": "typescript",
  "singleQuote": true,
  "printWidth": 90,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": true,
  "trailingComma": "es5",
  "arrowParens": "always",
  "endOfLine": "auto",
  "bracketSpacing": true,
  "bracketSameLine": true,
  "jsxBracketSameLine": false,
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve"
}

eslint

npm i -D eslint

설치한 패키지(devDependencies)

@typescript-eslint/eslint-plugin

@typescript-eslint/parser

eslint

eslint-config-prettier

eslint-plugin-import

eslint-plugin-prettier

eslint-plugin-react

eslint-plugin-simple-import-sort

.eslintrc.json


{
  "env": {
    "browser": true,
    "es2021": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "prettier",
    "@typescript-eslint",
    "simple-import-sort",
    "import"
  ],
  "rules": {
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error",
    "import/first": "error",
    "import/newline-after-import": "error",
    "import/no-duplicates": "error",
    "prettier/prettier": [
      "error",
      { "singleQuote": true, "endOfLine": "auto", "bracketSameLine": true }
    ],
    "react/react-in-jsx-scope": "off",
    "no-undef": "off",
    "@typescript-eslint/no-unused-vars": "error"
  }
}

husky + lint-staged

npm i -D husky lint-staged

npx husky install

npx husky add .husky/pre-commit “npx lint-staged”

eslint와 prettier 규칙에 맞지 않는 코드가 커밋되는 것을 막기 위해 사용

husky: git에서 특정 이벤트(커밋, 푸쉬 등)을 실행할 때 이벤트에 hooks를 설정하여 hooks에 설정된 스크립트를 실행할 수 있다.

git hooks: 클라이언트 훅(커밋과 머지 또는 푸시 전에 클라이언트에서 실행하는 훅), 서버 훅(원격 레포로 푸시할 때 서버에서 실행하는 훅)

lint-staged: git에 staged 상태인 파일에 명령어를 실행하도록 해주는 도구. staged된 파일을 수정하더라도 다시 add를 하지 않아도 된다.

husky를 통해 커밋되기 전(pre-commit) lint-staged 실행
설정한 파일들이 변경되면 설정해놓은 명령어 실행
eslint cli / prettier cli
.lintstagedrc 파일로 따로 설정할 수도 있음

package.json


"lint-staged": {
  "**/*.{ts,tsx}": [
    "eslint --fix",
    "prettier --write"
  ]
},

절대경로

변경사항

@vitejs/plugin-react 삭제(라이브러리 중복)

@types/node 설치


@/src
@/components
@/types
@/stories

참고

GitHub Issue/PR 템플릿

추후 논의 후 추가 예정!

라벨, GitHub Action도 추가하기

나영팀 참고

vite + React + TS

yarn create vite hit --template react-ts

emotion + tailwind → daisy UI(추천, 프로젝트 시간없어서 좋을듯)

yarn add @emotion/react @emotion/styled
yarn add -D tailwindcss postcss autoprefixer
yarn tailwindcss init -p
yarn add daisyui
<h1>, <li>와 같은 시멘틱 태그의 스타일 적용이 안되는 이유 : https://tailwindcss.com/docs/preflight

recoil

yarn add recoil

prettier eslint

yarn add prettier eslint-plugin-prettier eslint-config-prettier

eslint-typescript-react recommend 세팅법

eslint-plugin-react

React 문법 규칙들을 사용

typescript-eslint/parser

TypeScript 파서를 사용

typescript-eslint/eslint-plugin

typescript-eslint의 규칙들을 사용

eslint-config-prettier

ESLint가 원래 formatting 기능이 있기 때문에 prettier와 겹칠 수 있음 → 충돌을 피하기 위해 이 패키지를 통해 ESLint의 formatting 기능을 삭제함

참고

https://yrnana.dev/post/2021-09-02-eslint

https://gingerkang.tistory.com/98

nvm - node lts버전으로 확정

각자 버전 적기
건오: v16.18
수화: v16.16.0
명재, 별: v18.13.0
천욱: v18.2.0

husky lint-staged (자동화 붙이는 것: git pre-commit) → (제안) lint CI

🛠️ 기술 스택

타입스크립트

React - vite

상태관리 → recoil

API → Axios

CSS → tailwindCSS + emotion + DaisyUI

코딩스타일 → eslint, prettier, husky, lint-staged

배포 → netilfy

프로젝트 세팅