[#0] 음향기기 쇼핑몰 RE:PLAY 프로젝트 세팅 | React + Typescript + Vite.ZIP

 

2022년에 디자인 했던 RE:PLAY! 앱 디자인이지만 리액트를 이용해 반응형으로 만들어보고 싶다는 생각이 들었다. 자세한 디자인 링크

 

 

프로젝트는 React + Typescript + Vite를 사용한다.

이 프로젝트로 Vite를 처음 사용해보기 때문에 사람들이 말하는 Vite의 장점(서버 실행 속도 등) 을 느껴보고 싶다!

 

이번 프로젝트에서는 위의 내용을 더욱 공부해보고 싶었기 때문에 Vite + React + Typescript 를 사용하게 되었다.

• typescript 사용
• 빠른 개발 환경 구축
• Vite와 관련된 주의사항, 빌드 방법 등(Vite app의 보일러플레이트 구조)

물론 프론트 개발 시에는 vite가 속도도 빠르고 좋지만, 따로 리액트나 뷰를 사용하지 않고 npm처럼 JS 라이브러리 형태로 만든 간단한 500줄 되는 js파일을 빌드해 본 결과 정말 작은 파일같은 경우는 웹팩이 더 빠릅니다:D 때에 맞게 유용하게 사용하면 좋을 것 같습니다!

 

흐음 프론트엔드와 백엔드 작업 모두 내가 할 거라서 어떤 식으로 작업을 할까 고민하다가

퍼블리싱 먼저 하고, 프론트엔드 작업(API 연결), 백엔드 작업(DB 설계, 서버, API 문서 작성) 순서로 진행해보려고 한다!

혼자 모든 부분을 하는 건 처음이라 작업하다가 바뀔 수도 있지만 일단 이렇게 시작합니다.

 

---

 

# 프로젝트 생성

npm create vite@latest
yarn create vite

 

먼저 이 명령어를 입력하면 사용할 언어(js or ts), 프레임워크를 직접 선택할 수 있지만 한 번에 설치하고 싶은 사람은

 

// npm 6.x
npm create vite@latest [프로젝트 명] --template react-ts
// npm 7+, extra double-dash is needed:
npm create vite@latest [프로젝트 명] -- --template react-ts

 

이 명령어를 입력하면 됩니다.

(각자 npm 버전에 맞춰 설치하시면 됩니다, 본인의 npm 버전을 모르면 터미널에 npm -v 로 확인해보세요!)

 

 

사진에 있는 언어와 프레임워크 확인 후 본인 프로젝트에 맞게 생성하세요!

아래 명령어를 실행하면

npm run dev

 

이렇게 사진과 같은 화면이 나오면 성공적으로 설치된 것을 알 수 있습니다!

이제 본격적으로 개인 프로젝트를 시작해보겠습니다:D