vite로 react 설치하기

2024. 11. 12. 15:55·웹개발/REACT
728x90

2이번 글에서는 Vite와 TypeScript를 사용하여 React 프로젝트를 설정하는 방법을 단계별로 설명드리겠습니다.


1. 폴더 생성

 

2. VSCode로 폴더 열기

 

3. 터미널 열기(Crtl + j) // git bash로 열어주세요.

 

4. Vite를 이용하여 프로젝트 생성

npm create vite@latest

vite@latest (파일이름) 으로 파일 이름을 지정해줘도 되지만,
우리는 이미 파일을 열었기 때문에 .(현재 파일에 설치)를 입력해줘도 됩니다.

 

5. 설치과정

Select a framework: React (리액트 사용할거니까)

Select a variant: TypeScript / TypeScript + SWC

둘 중에 어느거를 설치해도 상관없지만 저는 SWC버전으로 설치합니다. SWC는 Speedy Web Compiler의 약자로 코드를 빠르게 컴파일 할 수 있도록 도와주는 도구라고 생각하시면 됩니다.

 

6. 의존성 설치

npm install

npm install을 입력하여 필요한 의존성들을 설치해줍니다.

 

7. 5173포트에서 잘 돌아가는지 확인하기

vite에서 react를 실행시키면 5173포트에서 사용됩니다.

npm run dev

위의 명령어를 이용하여 실행시키고 잘 돌아가는지 확인해보세요.

Crtl을 누른상태로 Local의 주소를 클릭하면 다음과 같은 화면에서 확인할 수 있습니다.

위 단계들을 따르면 Vite와 TypeScript를 사용한 React 프로젝트를 쉽게 설정할 수 있습니다.

따라하시면서 잘 안되시는 분들은 댓글 남겨주시면 빠르게 확인후에 도와드리겠습니다.

728x90

'웹개발 > REACT' 카테고리의 다른 글

React Router DOM과 MPA구조  (3) 2024.11.13
React useState  (0) 2024.10.31
vite로 react설치 명령어  (0) 2024.08.02
리액트 상태 관리의 필수 도구: Redux로 상태 관리 쉽게 배우기  (0) 2024.07.31
리액트 컴포넌트와 JSX 문법: Virtual DOM의 기본 이해  (0) 2024.07.31
'웹개발/REACT' 카테고리의 다른 글
  • React Router DOM과 MPA구조
  • React useState
  • vite로 react설치 명령어
  • 리액트 상태 관리의 필수 도구: Redux로 상태 관리 쉽게 배우기
튼튼발자
튼튼발자
프론트엔드 개발자입니다. 헬스를 가끔해서인지 몸이 튼튼한거 같습니다. 그래서 튼튼한 개발자 => 튼튼발자입니다. 프론트엔드 및 관련 개발 내용 블로그 글로 정리해서 올려둡니다.
    250x250
  • 튼튼발자
    튼튼발자
    튼튼발자
  • 전체
    오늘
    어제
    • 분류 전체보기 (192)
      • 튼튼발자의 끄적끄적 (10)
      • 웹개발 (94)
        • HTML (5)
        • CSS (2)
        • JavaScript (40)
        • TypeScript (5)
        • REACT (22)
        • Next.js (13)
        • GIt (7)
      • 기타 (3)
        • 일상 (3)
      • 프로젝트 (27)
        • Componique: UI 컴포넌트 라이브러리 (18)
        • GitHub Profile Viewer (8)
        • 잇핏 (1)
      • 프론트엔드 개발자로 취업준비 (1)
        • 기술 면접 (7)
        • 코딩 테스트 준비하기 (0)
        • 자기소개서&지원서&이력서 (0)
      • 컴퓨터과학 (12)
        • 운영체제 (6)
        • 알고리즘 (6)
      • 전공 공부 (37)
        • AI(인공지능) (2)
        • 컴퓨터네트워크 (19)
        • 네트워크프로그래밍 (3)
        • SW소프트웨어응용설계 (7)
        • 클라우드컴퓨팅 (3)
        • 웹서비스프로그래밍 (3)
      • PT (0)
      • 취준일기 (0)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    componique
    JavaScript
    프론트엔드개발
    NextJs
    리액트
    JS
    ui컴포넌트
    상태관리
    트랜스포트계층
    github
    tailwind
    프로그래밍
    자바스크립트
    네트워크
    데이터전송
    프론트엔드
    웹개발
    react
    TCP
    코딩
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
튼튼발자
vite로 react 설치하기
상단으로

티스토리툴바