[react] 개발 환경을 구축하자

 

🎈 npm 명령어를 사용하기 위해서는 Node.js 설치가 필요하다.

https://nomoneynohappy.tistory.com/entry/%EC%9C%88%EB%8F%84%EC%9A%B0%EC%97%90%EC%84%9C-npm-%EB%AA%85%EB%A0%B9%EC%96%B4-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-npm-nodejs-%EC%84%A4%EC%B9%98

 

윈도우에서 npm 명령어 사용하기 (npm, node.js 설치)

 

 

 

👉🏻 01. 리액트 프로젝트 생성

• npm init react-app .(현재 폴더)

 

-- Typescript

• npx create-react-app . --template typescript

 

 

 

👉🏻 02. react router dom 설치

npm install react-router-dom

 

　index.js

import {BrowserRouter} from 'react-router-dom';

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

　구성

<Link to/>

<Routes>
	<Route path, element />
</Routes>

https://ddiddibbung.tistory.com/6

 

 

 

👉🏻 03. Axios 설치

https://www.npmjs.com/package/axios

 

 

👉🏻 04. JSON Server 설치

https://www.npmjs.com/package/json-server

 

• package.json : 명령어와 port번호를 간편하게 바꾸자

  "scripts": {
    "db": "json-server --watch db.json --port 3001",
  },

 

• db.json 파일을 생성하자

{
  "posts":[]
}

 

• npm run db : json-server 실행하자

 

 

👉🏻 05. 개발모드 실행

npm (run) start

 

👉🏻 06. 개발모드 종료

ctrl + c

 

 

👉🏻 07. styled-components 설치

> npm i styled-components
> npm i @types/styled-components // typescript 사용시