[React] 간단한 성냥퍼즐 웹 서비스 만들기 1일차 (Vite 초기 설정)

안녕하세요! 저는 최근 부캠을 수료하고 개발자가 되고 싶은 흔한 비전공자 취준생입니다.

취준백수의 넘쳐나는 시간에 공부도 할 겸 개인 프로젝트를 하나 하고 싶었는데 마침 유튜브 알고리즘으로 예전에

즐겨봤던 문제적 남자에 자주 출제되던 성냥개비 문제를 보고 바로 한번 만들어보기로 했어요 ㅋㅋㅋㅋ

 

그럼 바로 가자~~!!

---

⛏️  React-Vite 설치(JavaScript + SWC)

npm create vite@latest matchstick-puzzle

프로젝트 시작하다가 발견했는데 react가 19 버전이 나왔더라구요 Next도 15 ㄷㄷ 시간 왤케 빨라.. 아 공부할게 늘었네

 

Next는 13->14 만큼의 변화는 없어보여 일단 안심했고 React 19에서 동시 렌더링 지원하는 거랑 특히 Suspense로 useFormState와 useFormStatus 를 사용하지 않고 폼 관리를 구현할 수 있다고 하는데 다음기회에 써보기로 하고 일단 18 버전으로 만들기로 하였다!ㅎㅎㅎ

 

📦 ESLint + Prettier 세팅

지금까지 프로젝트를 하면서 한번도 써본 적이 없는데 어디선가 저거 모르면 개발하지 말라는 글을 보고 혼자 하는 프로젝트이지만 정말 간단하게 써보기로 하였습니다! ( 개발자 소양 +1 )

 

저처럼 모르시는 분들을 위해 설명드리자면 코드를 작성방식을 일관성있게 구현하도록 도와주는 도구입니다.

 

우선 ESLint와 Prettier를 사용하시려면 VS Code에서 확장 프로그램을 설치해야 합니다.

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

 

.eslintrc.json 파일을 생성하고 다음 내용만 추가해 주었습니다.

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

 

.prettierrc 파일도 생성해 주고 아래 내용을 추가하였다.

{
  "semi": false,
  "singleQuote": true,
  "singleAttributePerLine": true,
  "bracketSameLine": true,
  "endOfLine": "lf",
  "trailingComma": "none",
  "arrowParens": "avoid"
}

 

🦭TailwindCSS 세팅

마지막으로 저의 최애 CSS 프레임위크인 테일윈드를 설치하고 설정을 마치도록 하겠습니다.

npm install -D tailwindcss postcss autoprefixer

# Tailwind 설정 파일 생성
npx tailwindcss init -p

 

tailwind.config.js 파일을 다음과 같이 수정해 줍니다.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

src/index.css 파일에 다음 3줄을 추가하면 끝입니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

 

npm run dev로 돌아가는지 테스트~!

 

읽어주셔서 감사합니다