[React] Create React App으로 리액트 프로젝트 시작하기

1. create react app

npm install -g create-react-app
create-react-app flit
npm install -g yarn

2. git 연결

git remote add origin https://github.com/IILLLLII/flit.git
git push --set-upstream origin master

3. Chakra UI 설치

1. Chakra UI 설치

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

2. App을 ChackraProvider로 감싸주기

import { ChakraProvider } from '@chakra-ui/react';

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

4. client 폴더 생성 및 package.json 생성

1. 프로젝트 폴더 내에 client 폴더를 생성하고 모든 파일을 이동시킨다.

2. package.json 파일을 생성하고 다음과 같이 입력한다.

{
    "name": "flit",
    "version": "1.0.0",
    "scripts": {
        "client": "cd client && yarn start",
        "server": "nodemon server.js",
        "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
    },
    "dependencies": {
        "body-parser": "^1.18.3",
        "express": "^4.18.2",
        "nodemon": "^2.0.21"
    },
    "devDependencies": {
        "concurrently": "^7.6.0"
    }
}

[22.03.17 추가] 다음과 같이 설치하는 방법도 괜찮을것 같다.

npm install nodemon body-parser express 

3. server 구동은 nodemon server.js로 실행한다. server.js 파일을 생성하자

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = process.env.port || 5000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.get('/api/hello', (req, res) => {
    res.send({message:'Hello Express!!'})
});

app.listen(port, () => console.log(`Listening in port ${port}`));

5. nodemon으로 서버 실행

npm install -g nodemon

// node server.js 확인
node server.js
Listening in port 5000

// server 실행 방법
yarn server

// app & sever 구동 방법
yarn dev