공청
개발하는 금융인
공청
전체 방문자
오늘
어제
  • 분류 전체보기 (102)
    • 개인적인 이야기 (27)
    • IT에 관한 글 (15)
    • 경제, 금융 (12)
    • Python (2)
    • Javascript (6)
    • golang (2)
    • 비전공자를 위한 IT 지식 (0)
    • SQL (SQLD,SQLP) (1)
    • React (Front-end) (29)
    • 정보처리기사 (0)
    • Typescript (4)
    • (study) 모던 자바스크립트 Deep Dive (0)

블로그 메뉴

  • 홈
  • 태그
  • 미디어로그
  • 방명록
  • 글쓰기

공지사항

인기 글

태그

  • 창업
  • Golang
  • Fira Code
  • ChatGPT
  • typescript
  • HTTP
  • react-router
  • javascript
  • 트래블월렛
  • 웹개발
  • WSGI
  • react
  • 짧은생각
  • 인터넷
  • 기술스택
  • vite
  • approute
  • 언섹시비즈니스
  • 트래블카드
  • go
  • vscode
  • next.js
  • 프로그래밍
  • Effective Typescript
  • 일기
  • python
  • 미국주식
  • sql
  • 조건부렌더링
  • useref

최근 댓글

최근 글

티스토리

반응형
공청

개발하는 금융인

(React 다국어 웹 만들기) 1. Vite를 통한 React 프로젝트 세팅
React (Front-end)

(React 다국어 웹 만들기) 1. Vite를 통한 React 프로젝트 세팅

2023. 3. 8. 19:14

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

"블로그 내의 광고와 쿠팡 링크를 클릭해주시면 블로그 운영에 큰 힘이 됩니다."

반응형

 

프로젝트 세팅

터미널에서 yarn create vite를 통해 vite 세팅을 실행시키고,

메뉴에서 React -> Javascript 스택을 입력한다.

 

 

Vite를 통해서 만든 프로젝트는 임의로 다른 실행 명령(script)이 삽입되어있다.

 

확인해보고 해당 명령어를 쳐보자.

 

 

 

 

오류가 날 경우

만약에 vite command not found가 뜰 경우에는 vite 모듈이 설치가 안되어 있는 것이다.

 

npm i vite@latest로 과감히 최신 버전을 설치한다.

npm install vite@latest

테스트 프로젝트에 특정 버전을 명시하는 것은 하남자 특이다.

 

 

 

설치한 이후에 개발 실행(dev)을 해보면 아래와 같이 뜬다.

로컬에서 실행된 주소도 표기된다.

 

 

 

이렇게 웹 페이지가 뜨면 정상적으로 프로젝트가 세팅되었다.

반응형
    'React (Front-end)' 카테고리의 다른 글
    • [HOOKS] useRef의 설명과 예시코드
    • [HOOKS] useEffect의 설명과 예시코드
    • React에서 동적으로 스타일링하기 (삼항연산자, CSS 적용)
    • (React) useState hook의 setState를 통해 여러 값의 상태값을 저장하고 싶을 때
    공청
    공청
    투자, 프로그래밍, IT에 대한 글을 씁니다.

    티스토리툴바