프로젝트 진행 전 유의사항

1. 컨벤션 가이드 정하기

• 코드 컨벤션
• esLint 컨벤션
• Prettire 컨벤션

 

[vite 설치]

npm init vite 

 

 

[esList 컨벤션]

 

 

• off 할 요소는 정해서 추가

 

 

 

 

[Prettire 컨벤션]

 

1. vscode에 repository clone

 

2. 작업 폴더에 vite 개발환경 구성

 

3. 프리티어 설정

파일명 js / cjs 모두 가능

 

아래 설정값 추가

module.exports = {

  // 문자열에 single quote 사용(기본값 true)

  singleQuote: true,

  // 코드 마지막에 세미콜론 추가(기본값 true)

  semi: true,

  // 들여쓰기를 탭으로 지정할지 여부(기본값 false)

  useTabs: false,

  // 들여쓰기 너비 2칸(기본값 2)

  tabWidth: 2,

  // 여러 줄의 쉼표로 구분된 구문 구조에서 후행 쉼표를 추가(none: 설정 안함, es5: 객체,배열에 설정, all(기본값): 함수 정의나 호출 등 가능한 모든 곳에 설정)

  trailingComma: "all",

  // 한줄에 80 글자가 넘어가면 줄바꿈(기본값 80)

  printWidth: 80,

  // 화살표 함수의 매개변수가 하나만 지정될 때 괄호 생략(always: 항상 괄호 명시, avoid: 가능하면 생략)

  arrowParens: "avoid",

  // windows에 뜨는 'Delete cr' 에러 해결

  endOfLine: "auto",

};

 

 

*esList와 Prettier와의 충돌 막기 위해, eslint 는 문법 관련 / prettier는 디자인만 관리하도

 npm i -D eslint-config-prettier

 

[eslint 수정]

module.exports = {

  root: true,

  env: { browser: true, es2020: true },

  extends: [

    'eslint:recommended',

    'plugin:react/recommended',

    'plugin:react/jsx-runtime',

    'plugin:react-hooks/recommended',

    'prettier'

  ],

  ignorePatterns: ['dist', '.eslintrc.cjs'],

  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },

  settings: { react: { version: '18.2' } },

  plugins: ['react-refresh'],

  rules: {

    'react/jsx-no-target-blank': 'off',

    'react-refresh/only-export-components': [

      'warn',

      { allowConstantExport: true },

    ],

  },

}

config 모듈을 생략하기 위해서 extends에 추가해주면, prettier의 디자인 관련 사항들이 모두 off된다.

 

 

 

세팅변경

workspace에서

 

 

깃모지 설정

settings 열기

 

.vscode > settings.json에 추가

{
  "gitmoji.addCustomEmoji": [
    {
      "emoji": "✨",
      "code": ":feat:",
      "description": "새로운 기능 추가"
    },
    {
      "emoji": "👔",
      "code": ":logic:",
      "description": "비즈니스 로직 수정"
    },
    {
      "emoji": "🚧",
      "code": ":cont:",
      "description": "진행중인 작업"
    },
    {
      "emoji": "♻️",
      "code": ":refactor:",
      "description": "코드 리팩토링"
    },
    {
      "emoji": "🔥",
      "code": ":remove:",
      "description": "파일 삭제"
    },
    {
      "emoji": "🚚",
      "code": ":rename:",
      "description": "파일명 수정/이동"
    },
    {
      "emoji": "⚰️",
      "code": ":cleanup:",
      "description": "코드 정리"
    },
    {
      "emoji": "💄",
      "code": ":style:",
      "description": "UI/Style 추가/수정"
    },
    {
      "emoji": "🐛",
      "code": ":fix:",
      "description": "버그 수정"
    },
    {
      "emoji": "📝",
      "code": ":docs:",
      "description": "문서 추가/수정"
    },
    {
      "emoji": "➕",
      "code": ":adddep:",
      "description": "의존성 추가"
    },
    {
      "emoji": "➖",
      "code": ":remdep:",
      "description": "의존성 삭제"
    },
    {
      "emoji": "🔧",
      "code": ":conf:",
      "description": "설정파일 추가/수정"
    }
  ],
  "gitmoji.onlyUseCustomEmoji": true,
}

수정 완료

 

 

 

bruno 로 api 관리

1. create collections

경로는 project 밑에 api폴더 밑에

폴더와 리퀘스트는 왼쪽 바에서 구분한다. 

 

body > JSON 으로 변경 후 테스트 

 

프로젝트마다 다른 header로 보낼 예정 (client-id)

 

 

 

우측 상단 environment > configure > create 눌러서 지정

 

 

환경변수 사용 시 초록색으로 뜬다. 

 

토큰 값은 Script 탭에서 

pre 는 도착하기 전, post는 도착하고 나서 실행할 작업 작업

 

if(res.status === 200){
  bru.setEnvVar('accessToken', res.body.item.token.accessToken);
  bru.setEnvVar('refreshToken', res.body.item.token.refreshToken);
}

위와 같이 Post Response에 자바스크립트 작성 후

오른쪽 상단 눈 누르면 variables에서 확인 가능

 

Auth> BearerToken > accessToken 변수를 입력해서 테스트

 

bruno의 다른사람 collection 오픈하기 

 

 

 

 

---

 

vite 설정

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      { find: "@", replacement: "/src" },
      { find: "@components", replacement: "/src/components" },
      { find: "@pages", replacement: "/src/pages" },
      { find: "@hooks", replacement: "/src/hooks" },
    ],
  },
})

 

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["/*"],
      "@components/*": ["components/*"],
      "@pages/*": ["pages/*"],
      "@hooks/*": ["hooks/*"],
    }
  }
}