노드랑 리액트 실행

수정된 리액트 실행 단계 (프로젝트 이름: ottwep)

1. 리액트 프로젝트 생성
   • 터미널이나 명령 프롬프트에서 다음 명령어를 입력하여 "ottwep"라는 이름의 새로운 리액트 프로젝트를 생성합니다:
   •  
     npx create-react-app ottwep
   • bash
     코드 복사
2. 프로젝트 디렉토리로 이동
   • 생성된 프로젝트 디렉토리로 이동합니다:
   • bash

     코드 복사
     cd ottwep
3. 리액트 개발 서버 실행
   • 개발 서버를 실행하여 리액트 애플리케이션을 로컬에서 확인합니다:
   • bash

     코드 복사
     npm start

이제 "ottwep" 프로젝트를 성공적으로 생성할 수 있을 것입니다.

---

 

리액트와 Node.js 서버 동시 설정 단계

1. 리액트 프로젝트 생성

• 먼저, 리액트 프로젝트를 생성합니다. 프로젝트 이름은 "ottwep"으로 설정합니다:
• bash

  코드 복사
  npx create-react-app ottwep
• 프로젝트 디렉토리로 이동합니다:
• bash

  코드 복사
  cd ottwep

2. Node.js 서버 설정

• ottwep 프로젝트 내에 server라는 폴더를 생성합니다:
• bash

  코드 복사
  mkdir server cd server
• Node.js 프로젝트를 초기화합니다:
• bash

  코드 복사
  npm init -y
• Express와 CORS를 설치합니다:
• bash

  코드 복사
  npm install express cors
• server 폴더 안에 index.js 파일을 생성하고, 간단한 Express 서버를 설정합니다:
•  
• javascript

  코드 복사
   
• const express = require('express');
  const cors = require('cors');
  const app = express();
  
  app.use(cors());
  app.use(express.json());
  
  // 간단한 라우트 예시
  app.get('/api', (req, res) => {
    res.send('Hello from the server!');
  });
  
  const PORT = process.env.PORT || 5000;
  app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
  });

3. 프로젝트 구조

• 프로젝트의 디렉토리 구조는 아래와 같이 구성됩니다:
• java

  코드 복사
  ottwep/
  ├── node_modules/
  ├── public/
  ├── src/
  ├── server/
  │   ├── node_modules/
  │   ├── index.js
  │   └── package.json
  ├── package.json
  ├── README.md
  └── .gitignore

4. Node.js 서버 실행

• server 디렉토리로 이동한 후, 서버를 실행합니다:
• bash

  코드 복사
  node index.js
• 서버가 http://localhost:5000에서 실행 중임을 확인할 수 있습니다.

5. 리액트와 서버 동시 실행 (선택 사항)

• concurrently라는 npm 패키지를 사용하여 리액트와 Node.js 서버를 동시에 실행할 수 있습니다. ottwep 루트 디렉토리로 이동하여 다음 명령어를 실행합니다:
• bash

  코드 복사
  npm install concurrently
• package.json 파일에 다음 스크립트를 추가합니다:
• json

  코드 복사
  "scripts": { "start": "concurrently \"npm start\" \"cd server && node index.js\"" }
• 이제 다음 명령어로 리액트와 Node.js 서버를 동시에 실행할 수 있습니다:
• bash

  코드 복사
  npm start

 

<server>

 

package.json

0.00MB

index.js

0.00MB

package-lock.json

0.03MB

 

<밖에 리액트 파일>

package.json

0.00MB