React-tutorial-start-vite

[React – 기초강좌] Vite를 이용한 프로젝트 시작하기 (with Typescript)

by

Vite는 빠르고 가벼운 React 개발 환경을 제공하는 차세대 프론트엔드 빌드 도구입니다.

기존 Create React App(CRA)보다 더 빠른 개발 서버와 빌드 속도를 자랑하며, ESM을 활용해 효율적인 모듈 로딩을 지원합니다.

이 포스팅에서는 Vite를 이용한 React 프로젝트 설정 방법과 TypeScript 통합, 플러그인 활용법을 안내합니다. 또한 Vite와 CRA의 차이점, 환경 변수 설정, 배포 과정까지 폭넓게 다룹니다.

vite-development

Vite란 무엇인가?

Vite는 차세대 프론트엔드 개발 도구로, 빠른 빌드 속도와 개발 환경에서의 핫 리로드 기능을 제공하는 도구입니다.

기존의 Create React App(CRA)과 같은 도구보다 훨씬 빠르고 효율적입니다.

Vite는 ES Module(ESM)을 활용하여 브라우저가 필요한 모듈만 즉시 로드하게 하고, 초기 번들링 시간을 최소화합니다.

Vite의 특징과 장점

  1. 초고속 개발 서버
    • ESM 기반의 서버로 즉각적인 모듈 로드가 가능합니다.
    • 대규모 프로젝트에서도 빠르게 리로드됩니다.
  2. 빠른 빌드 시간
    • Rollup을 활용한 최적화된 빌드 시스템을 제공합니다.
    • 초기 번들링 시간을 줄여 대규모 프로젝트에서 효율적입니다.
  3. 플러그인 생태계
    • Rollup과 호환되는 다양한 플러그인을 사용할 수 있습니다.
    • 커스터마이징이 쉬워 React, Vue, Svelte 등과 함께 사용 가능합니다.
  4. 경량 프로젝트 설정
    • CRA보다 의존성이 적고, 프로젝트가 가벼움.
    • 불필요한 설정을 줄여 개발 환경이 단순해집니다.

Vite와 CRA의 차이점

항목ViteCreate React App (CRA)
빌드 속도빠름 (ESM 기반)느림 (웹팩 기반 번들링)
핫 리로드즉각적 핫 리로드다소 느림
설정 파일간결한 설정 (Rollup 사용)더 많은 설정 필요 (Webpack 사용)
의존성 크기작음상대적으로 큼

Vite를 활용한 React 프로젝트 설정하기

1. Vite 설치 및 초기 설정

터미널에서 아래 명령어를 실행합니다:

npm create vite@latest 02-project-with-vite
  • 02-project-with-vite: 원하는 프로젝트 이름을 지정하세요.
  • react 와 typescript를 선택하여 프로젝트를 생성합니다.

프로젝트 폴더로 이동한 후 의존성을 설치합니다:

cd 02-project-with-vite
npm install
npm run dev

2. ESLint 및 Prettier 설정

코드 품질 유지와 포맷팅을 위해 ESLint와 Prettier를 설정합니다.

2.1 ESLint 설치
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y --save-dev
2.2 ESLint 초기화

아래 명령어를 실행해 ESLint를 설정합니다:

npx eslint --init

설정 과정에서 다음 옵션을 선택합니다:

  • How would you like to use ESLint?: To check syntax, find problems, and enforce code style
  • What type of modules does your project use?: JavaScript modules (import/export)
  • Which framework does your project use?: React
  • Does your project use TypeScript?: Yes
2.3 ESLint 설정 파일 업데이트 (eslint.config.js)
import globals from "globals";
import pluginJs from "@eslint/js";
import parser from "@typescript-eslint/parser"; // TypeScript 파서
import pluginReact from "eslint-plugin-react"; // React 플러그인

export default [
  pluginReact.configs.flat.recommended,
  pluginJs.configs.recommended,
  {
    // 파일별로 규칙 적용
    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
    languageOptions: {
      parser, // TypeScript 파서 사용
      globals: globals.browser, // 브라우저 전역 변수 설정
    },
    settings: {
      react: {
        version: "18.0", // React 18 버전 명시
      },
    },
    rules: {
      "react/react-in-jsx-scope": "off", // React 18+에서는 불필요한 규칙 비활성화
    },
  },
];
2.4 Prettier 설치 및 설정
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

프로젝트 루트에 .prettierrc 파일을 생성하고 다음과 같이 설정합니다:

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

아래 명령어로 Vite 개발 서버를 실행합니다:

npm run dev

출력 예시:

  VITE v5.4.9  ready in 181 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

3. Vite 프로젝트 폴더 구조

02-project-with-vite/
├── index.html        # HTML 진입 파일
├── package.json      # 의존성 및 스크립트 설정
├── src/              # 소스 코드 폴더
│   ├── App.tsx       # 메인 React 컴포넌트
│   ├── main.tsx      # ReactDOM이 렌더링되는 진입 파일
├── vite.config.ts    # Vite 설정 파일
├── .eslintrc.json    # ESLint 설정 파일
├── .prettierrc       # Prettier 설정 파일

4. 환경 변수 설정

Vite에서는 .env 파일을 사용해 환경 변수를 설정합니다.

4.1 .env 파일 생성

프로젝트 루트에 .env 파일을 생성하고 다음과 같이 작성합니다:

VITE_API_URL=https://api.example.com
4.2 환경 변수 사용

JavaScript/TypeScript 코드에서 환경 변수를 다음과 같이 사용할 수 있습니다:

console.log(import.meta.env.VITE_API_URL);

5. TypeScript 설정 커스터마이징

Vite에서 기본적으로 제공하는 tsconfig.json 파일을 수정하여 프로젝트에 맞게 타입 검사를 강화할 수 있습니다.

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

6. 프로젝트 배포

Vite는 빌드된 정적 파일을 dist/ 폴더에 저장합니다. 아래 명령어로 프로젝트를 빌드하세요:

npm run build

이제 dist/ 폴더의 파일을 Netlify, Vercel과 같은 배포 플랫폼에 업로드할 수 있습니다.

7. ESLint와 Prettier 통합 테스트

코드 품질을 확인하려면 다음 명령어를 실행하세요:

npx eslint src/**/*.tsx

자동으로 코드 스타일을 정리하려면 아래 명령어를 사용합니다:

npx prettier --write src/**/*.tsx

8. Vite에서 React Router와 상태 관리 추가하기

Vite 프로젝트에서 React Router와 상태 관리를 사용하려면 추가 패키지를 설치하세요.

npm install react-router-dom recoil
  • React Router: 라우팅 기능을 제공합니다.
  • Recoil: 상태 관리를 위한 라이브러리입니다.

참고 링크

devitworld github repository

vite links

36 thoughts on “[React – 기초강좌] Vite를 이용한 프로젝트 시작하기 (with Typescript)”

  1. This topic has become increasingly relevant among travelers looking for meaningful and unconventional experiences. From personal adventures and numerous travel blogs, it’s clear that more people are shifting toward discovering hidden gems, immersing in local cultures, and minimizing environmental impact. Exploring new places isn’t just about sightseeing anymore—it’s about forming connections, gaining new perspectives, and sometimes, rediscovering oneself. Whether it’s walking through a quiet village, joining a traditional cooking class, or simply watching wildlife in its natural habitat, these moments are what truly enrich the travel experience. With the growing awareness around sustainability and authentic experiences, it’s time we look beyond the mainstream and embrace journeys that are both enriching and responsible. For anyone planning their next trip, considering these aspects can make a world of difference.

    Reply

  3. Fantastic read! 👏 I really appreciate how clearly you explained the topic—your writing not only shows expertise but also makes the subject approachable for a wide audience. It’s rare to come across content that feels both insightful and practical at the same time. At explodingbrands.de we run a growing directory site in Germany that features businesses from many different categories. That’s why I truly value articles like yours, because they highlight how knowledge and visibility can create stronger connections between people, services, and opportunities.Keep up the great work—I’ll definitely be checking back for more of your insights! 🚀

    Reply

  4. Thank you for sharing such a well-structured and easy-to-digest post. It’s not always easy to find content that strikes the right balance between informative and engaging, but this piece really delivered. I appreciated how each section built on the last without overwhelming the reader. Even though I’ve come across similar topics before, the way you presented the information here made it more approachable. I’ll definitely be returning to this as a reference point. It’s the kind of post that’s genuinely helpful no matter your level of experience with the subject. Looking forward to reading more of your work—keep it up! profis-vor-ort.de

    Reply

  5. I would like to thank you for the efforts you’ve put in writing this blog.

    I’m hoping to see the same high-grade content from you later on as well.
    In fact, your creative writing abilities has inspired
    me to get my very own site now 😉

    Reply

  6. 这篇指南写得非常清晰！跟着步骤一步步操作，Vite项目环境设置得又快又好，尤其是ESLint和Prettier的配置部分，让我对代码质量有了更好的把控。推荐给所有想用Vite+TS开发现代的React开发者的实用教程！

    Reply

  8. This guide is incredibly helpful for setting up a Vite project with TypeScript and React. The step-by-step instructions on ESLint, Prettier, and project structure are clear and practical, making it easy to get started. Great resource for beginners!olympic

    Reply

  9. This guide is incredibly helpful for setting up a Vite project with TypeScript and React. The step-by-step instructions are clear and easy to follow, making the setup process smooth. Great job!Golf

    Reply

  15. This guide is incredibly helpful for setting up a Vite project with TypeScript and React. The step-by-step instructions on ESLint, Prettier, and project structure are clear and practical. Great resource for beginners!SunPerp

    Reply

  20. This guide is incredibly helpful for setting up a Vite project with TypeScript and React. The step-by-step instructions on ESLint, Prettier, and project structure make it easy to follow. Great resource for beginners!SunPerp

    Reply

  25. This guide is incredibly helpful for anyone starting a Vite project with TypeScript and React! The step-by-step setup of ESLint and Prettier made code quality management so much clearer, and the explanation of integrating React Router and Recoil was just the push I needed to enhance my project. The inclusion of environment variable setup and deployment tips saved me a ton of time. However, I did wish there were more details on debugging common issues that might arise. Overall, though, it’s a fantastic resource for beginners and a great quick reference for pros! Highly recommend for anyone looking to jumpstart their Vite workflow with TypeScript.unlock football bros

    Reply

  26. 이 글 정말 명확하게 Vite 설정까지 다 해주니 감사합니다! 특히 ESLint와 Prettier 설정 부분은 정말 유용했어요. 근데 저는 왜 VITE_API_URL에 https://api.example.com 이런 걸 넣어놓으셨지요? 저희 프로젝트는 뭔가 좀 특별한 API를 쓰는 건가요? 개인적으로는 좀 더 재미있는 URL을 추천해주실 수 있을까요? 😄 아무튼 정말 좋은 가이드 잘 읽었습니다!

    Reply

  27. I love how this guide turns Vite setup into a laugh-out-loud adventure! The step-by-step ESLint/Prettier dance was hilarious, especially when React 18+ threw a party and react-in-jsx-scope decided to skip. The joke about explodingbrands.de felt like a plot twist in a mystery novel. Who knew Vite could be this much fun? Now I’m ready to build a website that’s both performant and less prone to code meltdowns. 🚀💻

    Reply

  28. 이 글 잘 읽었습니다! Vite, ESLint, Prettier 설치까지 한 번에 보니 정말 편리하네요. 뭐, 코드가 깔끔해지긴 좋지만, 사실 저는 ESLint가 뭘 잘못한 건지 계속 물어보는 것을 놀라웠습니다. Prettier는 꽤 유용하지만, 때로는 나는 이렇게 하고 싶다!고 저항하기도 하죠. 그래도 Vite로 빠르게 프로젝트를 시작할 수 있다는 점은 진짜 강력해요. React와 TypeScript를 함께 사용하니까 코드가 더 안정적이긴 하지만, 뭔가 뭘 해야 하는지 계속 헷갈리는 건 사실이죠. 그래도 이 가이드 덕분에 좀 더 유능한 개발자로 발전하겠습니다! 😄

    Reply

  29. 이 글 정말 대박! Vite 시작부터 배포까지 레퍼런스였네요. 특히 ESLint와 Prettier 설정 부분은 코드 교정 마스터 같은 느낌. 근데 저는 `.env` 파일에서 API URL을 https://api.catfact.com로 바꾸고 로컬 환경 변수로 사용해보는데, 생각보다 재밌더라구요. React Router와 Recoil 추가 설치는 마법의 상자 열기 같은 느낌이었습니다. ㅎㅎ Vite 빌드 후 Netlify에 올리는 건 마법의 지팡이 수준이네요. 코드 스타일 통합 테스트는 소독기 작동 같아서 웃었습니다. 정말 유용한 가이드였습니다! 👍vows for her

    Reply

  30. 이 가이드는 정말 유용하네요! Vite, ESLint, Prettier 설정까지 친절하게 설명해주어 개발 환경 설정에 어려움을 겪고 있는 분들에게 큰 도움이 될 것 같습니다. 특히 ESLint와 Prettier 설정 부분은 처음에는 복잡해 보였는데, 이 가이드를 통해 좀 더 깔끔하게 해결할 수 있을 것 같아요. 브라우저 전역 변수 설정이나 React 18 버전 명시 같은 세부 사항까지 신경 쓰는 점이 인상 깊습니다. 물론, 환경 변수 사용이나 TypeScript 설정 부분은 이미 익숙하지만, 다른 분들에게는 정말 중요한 내용이 될 거예요. 프로젝트 배포와 통합 테스트까지 포함한 설명은 한 번에 여러 가지를 해결할 수 있어서 편리하네요.요약하자면, 이 가이드는 Vite 프로젝트 시작을 위해 필요한 모든 것을 포함하고 있어서 정말 좋습니다!

    Reply

  31. 이 글 대박! Vite, ESLint, Prettier 설치부터 배포까지 라이프사이클 다 담고 있어. 특히 `.env` 파일 환경 변수 사용법까지! 뭔가 개발자는 환경 변수 없이는 살 수 없는 생물인가 싶네요. 😂 타입스크립트 설정도 간단하게 안내해주니 초보 개발자도 힘들지 않게 시작할 수 있겠다. 물론 최종적으로 Netlify, Vercel 배포까지 해줘서 완벽 그 잡채! 하지만 저는 좀 더 웃긴 거 있어요. 댓글에 Putzfirma라는 독일 청소 업체와 explodingbrands.de라는 마케팅 회사 얘기 어쩐지 왜 여기 나와있는 거지? 개발 블로그에 마케팅 플랫폼 얘기는 좀 그렇지 않나요? 뭐, 그래도 Vite 시작 가이드는 정말 잘 만들었어요! 👍laser marking machine

    Reply

  32. 이 글 대로 Vite, ESLint, Prettier 설치하니 코드 짜기가 뭔가… 프로 같아졌네요! 특히 ESLint가 뭘 하고 싶은지 질문 끝에 코드 스타일 강제라고 답해주는 거 보면, 컴퓨터가 코드 주제에 대해 자기도 모르게 라이브러리를 개발한 건 아닌지 의아해지네요. Prettier는 정말 꼼꼼하게 코드를 정리해주니, 이제 코드 품질을 측정하는 게 아니라 Prettier의 정리 능력을 측정해야 할지도 모르겠습니다. 배포까지 다 되어있는데, 이제 남은 건 코드를 짜는 거 뿐인데요? 뭔가 모든 것이 완벽하게 갖춰져 있어서 약간 위화감이 느껴지는군요.football bros

    Reply

  33. 이 글 대로 설정하니까 코드가 깔끔해졌는데, ESLint랑 Prettier랑 둘이 힘을 합쳐서 코드 주변을 정리하는 거 진짜 유용하네요! 특히 Vite로 프로젝트 시작하는 거 너무 편하다 생각합니다. 하지만 터미널에 명령어 쳐야 하는 거 좀 귀찮긴 한데, 코드가 깔끔해지니까 뭐… 감수해야죠! React랑 TypeScript 같이 쓰니까 훨씬 진짜 개발하는 느낌이 듭니다. 배포까지 너무 쉬워서 놀랐습니다. 거의 코드 넣기 완료 버튼 같아요! 뭐, 이제 좀 Vite 세계로 완전히 빠져들었나 보네요. 👍speed stars cho iOS

    Reply

  34. 이 글 정말 친절하다! Vite 설정까지 한 줄에 다 담으려다 보니 코드 블록 깨지는 거 봐서 잠시 숨을 골랐습니다. 😂 ESLint와 Prettier의 연인 같은 설정, `.env` 환경 변수는 마치 백엔드 개발자를 기다리는 아이처럼 기대되네요. TypeScript 설정은 strict mode 켜기는 쉬운데, 근데 React 18에서 `react-in-jsx-scope` 규칙은 왜 꺼야 하는지는 좀 이해하기 어렵게 느껴졌습니다. 배포는 `dist` 폴더에서 바로 Netlify, Vercel로 띄우니 벌써 환상적이네요. 근데 좀 우려되는 건, 이렇게만 하면 다들 뒤뜰에 풀뿌리 씨앗만 심는 건 아닐 거라는 점이에요. React Router와 Recoil 같은 친구들 추가 설정은 또 언제 할 건지 모르겠네요. 😅 좋은 가이드 감사합니다!bulk ai image generator

    Reply

  35. 이 글 정말 친절하네요! Vite, ESLint, Prettier 깔끔하게 세팅하는 부분이 마치 맛있는 커피 만드는 레시피 같아서 재미있었습니다. 특히 `.env` 파일에서 환경 변수 사용법까지 알려주니, 콘솔에 API 주소 뿅! 하고 찍어보는 순간이 정말 성취감이랄까요! 😄 뭐, React Router와 Recoil 설치 부분이 나올 줄은 몰랐는데, 아, 이거 하면 홈페이지 만들기 쉬워지는구나! 하고 생각했습니다. 물론 배포까지 가는 과정은 또 새로운 모험겠지만요. 쉽고 명확한 설명으로 많은 분들에게 도움이 될 것 같아요! 👍Grow a Garden Calculator pet

    Reply

  36. 이 글 잘 읽었습니다! Vite, ESLint, Prettier 설정까지 정말 체계적으로 설명해주셔서 감사합니다. 특히 `react/react-in-jsx-scope` 규칙을 React 18에서 비활성화하는 부분이 React 18+에서는 불필요한 규칙 비활성화라며 쓰신 점이 웃겼습니다. 코드 품질 유지는 중요하지만, 때로는 이런 규칙들이 개발 생산성을 저하시키기도 하는데, Vite 설정으로 한 번에 해결하는 것도 장점이겠네요. `.env` 파일 설정 부분도 깔끔하고 좋습니다! Netlify나 Vercel 배포까지 정리해주셔서 초보 개발자 입장에서 정말 큰 도움이 됩니다. 거의 A to Z 가이드 같아요! 👍tải video YouTube

    Reply

Leave a Comment

© 2025 Marketer • Built with GeneratePress
Privacy PolicyTermsContact