MSA + React | 프로젝트 시작

제작할 프로젝트

  • 글쓰기
  • 댓글쓰기

image

종속성 문제 해결 이슈!!!

초기 프로젝트 설정 과정

  • React 애플리케이션 -> 네트워크 요청 -> 포스트 서비스, 코맨트 서비스 통신

  1. react 프로젝트 생성 (나는 visual studio code에서 진행함.) npx create-react-app client

  2. 터미널 - 서비스 폴더 생성

PS C:\Users\pc> cd Desktop
PS C:\Users\pc\Desktop> cd MSA_Project
PS C:\Users\pc\Desktop\MSA_Project> mkdir posts
PS C:\Users\pc\Desktop\MSA_Project> cd posts
PS C:\Users\pc\Desktop\MSA_Project\posts> npm init -y //JSON파일 생
PS C:\Users\pc\Desktop\MSA_Project\posts> npm install express cors axios nodemon
PS C:\Users\pc\Desktop\MSA_Project\posts> cd ..
PS C:\Users\pc\Desktop\MSA_Project> mkdir comments
PS C:\Users\pc\Desktop\MSA_Project> cd comments
PS C:\Users\pc\Desktop\MSA_Project\comments> npm init -y
PS C:\Users\pc\Desktop\MSA_Project\comments> npm install express cors axios nodemon

첫 번째 서비스; posts

  1. index.js 파일 생성
const express = require('express');
// 사용자 게시글에 무작위 ID생성
const {randomBytes } = require('crypto');
// 사용자 JSON 데이터 요청 파싱 확인
const bodyParser = require('body-parser');

const app = express();

const posts = {};

//app과 두 개의 경로를 연결

//get (게시글 검색)
app.get('/posts', (req, res) => {
    app.use(bodyParser.json());
    
    res.send(posts);
});

//post (게시글 생성)
app.post('/posts', (req,res) => {
    const id = randomBytes(4).toString('hex');
    const {title} = req.body; //사용자 제목을

    posts[id] = {
        id,title
    };

    //새 게시물이 만들어졌다는 것을 사용자에게 응답을 보냄
    res.status(201).send(posts[id]);

});

//express 프로그램이 4000포트에서 확인
app.listen(4000, ()=>{
    console.log('Listening on 4000');
});
  1. package.json 에서 시작 위치 변경
{
  "name": "posts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start" : "nodemon index.js" //Here!
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^1.4.0",
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "nodemon": "^3.0.1"
  }
}
  1. npm start

터미널 창에 Listening on 4000을 확인할 수 있음.

image

두 번째 서비스; Comments

  1. index.js 생성
const express = require('express');
// 사용자 게시글에 무작위 ID생성
const {randomBytes } = require('crypto');
// 사용자 JSON 데이터 요청 파싱 확인
const bodyParser = require('body-parser');

const app = express();

app.use(bodyParser.json());

const commentsByPostId = {};

//get (댓글 검색)
app.get('/posts/:id/comments', (req, res) => {
    res.send( commentsByPostId[req.params.id]|| []); //댓글이 없을 수도 있다는 것, 유의
});

//post (댓글 생성)
app.post('/posts/:id/comments', (req,res) => {
    const commentId = randomBytes(4).toString('hex'); //댓글마다 고유의 id 존재
    const {content} = req.body; //사용자 댓글 내용을 작성

    const comments = commentsByPostId[req.params.id] || []; //게시글 id가 일치하는 comments의 배열을 가지고 오거나, 댓글이 없는 경우에는 빈 배열을 갖고옴.
    
    comments.push({id:commentID, content}); 
    
    commentsByPostId[req.params.id] = comments;

    //새 댓글 만들어졌다는 것을 사용자에게 응답을 보냄
    res.status(201).send(comments);

});

//express 프로그램이 4001포트에서 확인 - 4000포트는 이미 다른 서비스 운영...
app.listen(4001, ()=>{
    console.log('Listening on 4001');
});
  1. package.json 수정
{
  "name": "comments",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^1.4.0",
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "nodemon": "^3.0.1"
  }
}
  1. npm start

image