[React clone coding] #2. 리액트 환경 세팅 (스타벅스 사이렌 오더)

 
 

📌 토이프로젝트 기록

• 리액트로 스타벅스 사이렌 오더 클론코딩 하기
• 본 프로젝트는 학습을 위해 스타벅스 사이렌 오더 어플을 리액트로 재구성 한 것입니다.

---

 

✅ node를 먼저 설치

 

✅ 원하는 폴더명으로 리액트 프로젝트를 생성해준다.

• 나는 js가 아닌 ts로 작업할거라서 두번째의 명령어로 리액트 프로젝트를 생성했다.

//js로 작업할 경우
npx create-react-app 프로젝트폴더명

//ts로 작업할 경우
npx create-react-app 프로젝트폴더명 --template typescript

 
 

✅ 설치 후 src폴더에서 파일 확장자 확인

• ts 템플릿으로 리액트 프로젝트를 만들었기 때문에 App, index등의 확장자는 js가 아닌 tsx임을 확인 할 수 있다.

 

 

✅ 불필요한 파일 삭제

• 하단 이미지에 있는 파일만 남겨둔 채로 모두 삭제

 
 

✅ App.tsx와 index.tsx 파일 정리 하기

//App.tsx
import React from 'react';

function App() {
  return (
    <>test</>
  );
}

export default App;

//index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

 
 

---

 
 
 
스타벅스 클론코딩인 만큼 스타벅스 디자인 가이드를 많이 참고해서 디자인 작업 시작!
https://creative.starbucks.com/

Starbucks Creative Expression