vite / react / typeScript 프로젝트 초기 설정

어리바리 개발곤듀 밍밍이 🎀·2024년 3월 8일
Reacttypescriptvite
2
post-thumbnail

🎀 두근두근 첫 초기 셋팅

곧 중급 프로젝트가 시작된다.
미리 연습하고 공부해서 준비해보겠다!

🎀 organization 생성

  1. your organization 혹은 셋팅에 들어간다.
  2. Organization 탭에 들어가서 New Organization 선택한다.

Free로도 충분하니 꼭 필요한 상황이 아니라면 Free로 생성하세용

🎀 vite/react 설치

📌 vite란?

vite는 vue 창시가 만든 새로운 프론트엔드 도구로 프랑스어로 '빠르다'라는 의미를 가지고 있다고 한다.
그 의미 그대로 빠르고 간결한 빌드 도구이다.

모듈화 문법을 사용해서 여러개의 파일을 하나로 뭉쳐주거나 의미 있는 단위로 나눠 묶어주는 것을 '번들링'이라고 한다.
거의 대부분의 모듈은 '웹팩'이라는 번들러를 사용하여 번들링 되고 있다.

하지만 웹팩은 CSS나 이미지 같은 에셋들을 JS 코드로 변환하고 이를 분석해서 번들하는 방식을 사용하기에 다른 번들러에 비해 설정할 게 많고 구성이 복잡하다.

반면 vite는 어떨까? vite는 로컬에서 개발할 때 번들링을 하지 않고 ESM 방식을 사용하기 때문에 로컬 서버 구동 속도가 매우 빠르다.

또 vite는 esbulid를 이용하여 더 빠르게 작동한다. esbulid는 Go 언어로 작성된 매우 빠른 번들러로, Go 언어의 특화된 병렬처리로 빠르게 번들링 해준다.
(빌드 단계에서는 esbuild가 아닌 rollup을 사용한다.)

📌 현재 폴더에 설치하는 법

npm create vite@latest .

터미널에 위와 같이 입력해 설치한다.
.은 현재 폴더에 설치하겠다는 의미이다.

위 명령어를 사용하면 설치 전에 react할건지, typescript는 쓸건지 다 물어보니까 알맞게 선택해서 설치 완료하면 된다.

📌 폴더 생성 및 탬플릿 직접 지정 설치법

혹은 폴더 이름과 탬플릿을 동시에 지정해주고 싶다면 아래 명령어를 입력한다.

npm create vite {폴더이름} --template {탬플릿 명}

탬플릿 명 종류를 아래에서 선택해서 입력해 주세요.

🎀 vscode extentions

팀원끼리 설치된 extentions 들이 동일해야 프로젝트 시작할 때 문제가 없을 것이다.
그럴때 사용하는 것이 .vscode폴더 안의 extentions.json 이다.

{
  "recommendations": [
    "editorconfig.editorconfig",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "seatonjiang.gitmoji-vscode",
    "usernamehw.errorlens",
    "streetsidesoftware.code-spell-checker"
  ]
}

❗️하지만 팀원 분께 확인해 보니 자동 설치가 안되었다고... 좀 더 알아봐야겠다

📌 vscode-eslint

코딩 컨벤션과 에러 혹은 오류를 체크해주는 유명한 자바스크립트 프로그램이다.

📌 prettier-vscode

단순 코드 포매터(code formatter)이다.

📌 editorconfig

editorconfig를 사용하면 개발자들이 각자 다른 에디터나 IDE를 사용해도 동일한 코딩 스타일을 유지하도록 도와준다.

📌 gitmoji

git + emoji를 합쳐서 부르는 말로 emoji를 이용하여 commit message의 가독성을 높여주는 tool이다.

📌 errorlens

코드에 에러가 있을 경우 하이라이트 해서 알려줌

📌 Code Spell Checker

코드에 오타가 있을 경우 파란색으로 강조 표시 해줌

🎀 eslint 설정

나는 vite 설치 할 때 기본적으로 같이 셋팅이 되어져있었다.

"eslint-config-prettier": "^9.1.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jsx-a11y": "^6.8.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-react": "^7.33.2",

그래서 나는 위에 것들만 추가적으로 설치해 주었다.
lint를 도와주는 각종 플러그인들이다.

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended'],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  plugins: ['react', 'react-refresh', 'react-hooks', 'jsx-a11y', 'prettier', 'import'],
  rules: {
    'react/no-unknown-property': ['error', { ignore: ['css'] }], // 알려지지 않은 prop을 사용하지 않도록 해줌 css 제외
    'no-unused-vars': 'off',
    '@typescript-eslint/no-unused-vars': 'error',
    'react/react-in-jsx-scope': 'off', // import React from 'react'; 없어도 됨
    'react-refresh/only-export-components': 'off', // 하나의 컴포넌트를 export할 때에만 효과가 있으니 일단 끈다.
  },
};

eslint 설정 관련 참고 자료

📌 eslint airbnb

airbnb + 종속 패키지까지 설치하기
npx install-peerdeps --dev eslint-config-airbnb

eslint가 airbnb 설정을 인식할 수 있도록 한다.

eslintrc 파일에 extends에 추가

'plugin:prettier/recommended',

plugins에 추가

['react', '@typescript-eslint', 'prettier'],

참고자료

🎀 prettier 설정

npm i -D prettier eslint-plugin-prettier eslint-config-prettier

위 명령어를 사용하여 설치한다. 참고 자료

eslint-config-prettier

eslint에서 prettier와 겹치는 포매팅룰을 삭제.

eslint-plugin-prettier

eslint에 prettier의 포매팅 기능을 추가.

eslint-config-pretteir로 eslint의 원래 포매팅 기능을 없애버리고 eslint-plugin-prettier로 prettier의 포매팅 기능을 사용할 수 있다.

{
  "singleQuote": true,
  "jsxSingleQuote": true,
  "semi": true,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "all",
  "printWidth": 120,
  "arrowParens": "always",
  "endOfLine": "auto",

  "bracketSpacing": true
}

루트 경로에 .prettierrc 파일 생성하고 원하는 설정을 해준다.

오류가 발생한 파일을 알려준다.
"format": "prettier --check --ignore-path .gitignore .",

오류가 발생한 파일을 규칙에 맞게 고쳐준다.
"format:fix": "prettier --write --ignore-path .gitignore ."

package.json에서 위와 같은 명령어를 추가해 준다.

🎀 husky 설정

eslint와 prettier를 무시하고 사용할 경우 error를 띄우고 commit을 막는다.

npx husky-init && npm install
npx mrm lint-staged

위 명령어를 실행해서 설치부터 한다.
mrm은 오픈소스 프로젝트의 환경 설정을 동기화 하기 위한 도구이다. (출처)

lint-staged는 linter 적용이 모든 파일이 아니라 staged된 파일에만 될 수 있도록 설정해 준다.

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

필요한 경우 package.json 파일로 이동하여 lint-staged 설정을 변경해 준다.
js, jsx, ts, tsx 파일을 모두 검사할 것이고 prettier와 eslint도 함께 사용중이니 위와 같이 수정해 주었다.

또 아래와 같은 명령어를 추가해 준다.

"prepare": "husky install", -> 이건 자동으로 적혀있을 것임
"postinstall": "husky install",

postinstall 설정 해주면
다른 팀원들은 그냥 npm i만 하면 husky와 lint-staged가 자동으로 설치된다.

🎀 editorconfig 설정

.editorconfig

# 최상위 폴더의 EditorConfig file을 사용하겠다는 설정
# 작업중인 파일에 적용할 editorconfig를 찾기위해 해당 파일이 존재하는 루트에서부터 최상위까지 거슬러올라가며 찾는 작업을 하는데
# 그 작업을 막아준다. 일반적으로 root directory에 이 파일을 생성하고 true로 지정해주면 된다.
root = true

# [*]는 루트 하위에 모든 파일들에 적용하겠다는 의미

# Charset UTF-8 설정
# 들여쓰기 설정
# space 들여쓰기 크기 설정
# tab 들여쓰기 크기 설정
[*]
charset = utf-8
indent_style = space
indent_size = 2
tab_width = 2

# End of line 설정
# 아래 줄로 이동 하는 것이 Line Feed(LF)이고, 왼쪽 끝으로 밀어 주는 것이 Carrige Return(CR)이다.
# window에서 사용하는게 crlf, 리눅스가 lf를 사용
[*]
end_of_line = lf

# 행 끝의 공백을 제거하는 설정
[*]
trim_trailing_whitespace = true

# 파일 끝에 개행
[*]
insert_final_newline = true

#은 주석이니 주석을 제외하고 확인하여 추가하면 되겠다.

🎀 styled component 설정

npm i styled-components 
npm i -D @types/styled-components
npm i styled-reset

🎀 리덕스 툴킷 설정

npm install redux react-redux @reduxjs/toolkit

🎀 라우트 설정 (lazy loading)

📌 기존 방식

<Routes>
	<Route path='/' element={<Layout />} >
    	<Route index element={<Landing />} /> 
        <Route path='/dashboard' element={<dashboard />} />
        <Route path='/mypage' element={<mypage />} />
	</Route>
</Routes>

Routes와 Route를 활용해서 경로를 설정한다.

  <BrowserRouter> 
      <App /> 
  </BrowserRouter>

BrowserRouter로 모든 파일들을 감싸준다.

📌 React Router v6.4 방식

createRoutesFromElements를 활용해서 라우터들을 객체화 해주고,
createBrowserRouter 사용해서 객체화된 라우터들을 전달할 것이다.

📌 그 전에, Lazy Loading 이라는 것을 알고 가자.

사용자가 처음 웹페이지에 진입하면, 번들링된 js파일을 다운받게 되는데,
이때 모든 페이지를 한번에 불러오기 때문에(CSR)
TTV(Time to View, 사용자가 브라우저 내용을 보게되는 시점)과
TTI(Time to Interact, 사용자가 웹 브라우저와 인터렉션 할 수 있는 시점)가 모두 늦어지게 된다.

이를 방지하기 위해 lazy를 사용해 주는 것이다.

lazy 로딩은 번들을 여러 청크로 나눌 수 있게 해준다.
그리고 사용자에게 보여주기위한 청크만 로딩하고 필요할 때만 해당 청크를 불러온다.

나는 이전에 초급 프로젝트(오픈마인드)를 진행하면서 HM님 덕분에 해당 개념을 이해하게 되었다.

사용법은 매우 EAZY!

routes.tsx

import { lazy } from 'react';
  1. 우선 lazy를 import해 온다.
const LandingPage = lazy(() => import('@pages/landing'));
const SignInPage = lazy(() => import('@pages/sign-in'));
const SignUpPage = lazy(() => import('@pages/sign-up'));
const DashBoardPage = lazy(() => import('@pages/dashboard'));
const DashBoardTestPage = lazy(() => import('@pages/dashboard-test'));
const NotFoundPage = lazy(() => import('@pages/not-found'));

const PrimaryRoute = (
  <Route path='/' element={<Loading />}>
    <Route index element={<LandingPage />} />
    <Route path='sign-in' element={<SignInPage />} />
    <Route path='sign-up' element={<SignUpPage />} />
    <Route path='dashboard' element={<DashBoardPage />} />
    <Route path='dashboard-test' element={<DashBoardTestPage />} />
    <Route path='*' element={<NotFoundPage />} />
  </Route>
);

const baseRoute = createRoutesFromElements(PrimaryRoute);

export const router = createBrowserRouter(baseRoute);
  1. 위 코드와 같이 lazy를 이용해서 import해온 component 경로를 감싸준다.
  2. 그리고 페이지가 로드 될 동안 보여줄 로딩 컴포넌트를 루트에 추가해 준다.
  3. createRoutesFromElements를 활용해서 Route를 객체화 해준다.
  4. createBrowserRouter에 객체화된 Route를 BrowserRouter에 전달하여 라우팅을 완성시킨다.

App.tsx

<RouterProvider router={router} />
  1. RouterProvider에 넣어준다.

끄읏이 아니라

📌 라우트 권한 분리도 했으니깐요 보러와 주세요

그럼 당연히 보러가야죠!

🎀 절대경로 설정

vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      { find: '@', replacement: path.resolve(__dirname, 'src') },
      { find: '@components', replacement: path.resolve(__dirname, 'src/components') },
      { find: '@pages', replacement: path.resolve(__dirname, 'src/pages') },
      { find: '@routes', replacement: path.resolve(__dirname, 'src/routes') },
      { find: '@hooks', replacement: path.resolve(__dirname, 'src/hooks') },
      { find: '@styles', replacement: path.resolve(__dirname, 'src/styles') },
      { find: '@utils', replacement: path.resolve(__dirname, 'src/utils') },
      { find: '@constants', replacement: path.resolve(__dirname, 'src/constants') },
      { find: '@api', replacement: path.resolve(__dirname, 'src/api') },
    ],
  },
});

tsconfig.json

{
  "compilerOptions": {
    ...

    /* path */
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@api/*": ["src/api/*"],
      "@components/*": ["src/components/*"],
      "@constants/*": ["src/constants/*"],
      "@hooks/*": ["src/hooks/*"],
      "@pages/*": ["src/pages/*"],
      "@routes/*": ["src/routes/*"],
      "@styles/*": ["src/styles/*"],
      "@utils/*": ["src/utils/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

그런데 path 를 불러오지 못한다는 오류가 계속 떴다.

path 모듈은 Node.js에 기본적으로 내장되어 있으므로, 해당 모듈에 대한 타입 선언은 별도로 설치할 필요가 없습니다. 그러나, Vite 프로젝트에서는 기본적으로 Node.js 환경이 아닌 브라우저 환경에서 실행되므로 일부 모듈에 대한 타입 선언이 필요할 수 있습니다. -gpt

그래서 아래와 같이 설치를 해주었다.

npm install --save-dev @types/node






아자아자 화이팅이닷!!

profile
어리바리 개발곤듀 밍밍이 🎀
일단 해. 그리고 잘 되면 잘 된 거, 잘 못되면 그냥 해본 거!
이전 포스트

주간 회고 :: 코드잇 스프린트 3기 14주차

다음 포스트

주간 회고 :: 코드잇 스프린트 3기 15주차

0개의 댓글