[React] 창업 아이템 개발#4

이명환·2021년 5월 20일
0

MAAS

목록 보기
4/5

오랜만에 다시 포스팅하러 왔다! 왜 이렇게 텀이 길었는가 하면.. 아이템에 쓸 데이터들을 정한다고 오랜 시간이 걸렸고, 창업 도전 유망팀 300에 서류심사를 합격하여 발표심사를 준비하는 과정에서 또 시간이 걸렸다.

이제야 오랜만에 개발을 다시 시작하는데 아주 반갑다..! 이제부터 좀 쓸 이야기가 많아질 것 같다.


서비스 백엔드 구성

내가 만드는 서비스는 클라이언트에서 사용자가 지도에서 선택한 위치의 좌표값을 서버로 보내고, 서버단에서 좌표값을 근거로 데이터를 가공한다. 그리고 가공한 데이터를 다시 클라이언트에게 보내줘야 한다.

이러한 형태가 될 것 이다.

일단은 그래서 server를 먼저 node.js express로 구성하기로 했다.

next.js가 react에서 쓰기에 아주 좋다고는 하는데 자료가 express 보다 없어서 next.js를 쓰면 거의 맨땅박치기를 해야했다.

프로토타입 개발이 아주 시급했기 때문에 next.js는 다음에 써보는걸로 결정했다..


node.js 서버 연결


node.js 를 설치 한 후 루트 디렉토리에서 npm 으로 express를 설치하고

npm add express --save

CORS정책 위반을 피하기 위해서 proxy서버로 이어주는 미들웨어 http-proxy-middleware를 설치해주었다.

http-proxy-middleware

server 디렉토리는 이렇게 구성하였다

//server.js

const express = require('express');
const app = express();
const route = require('./routes/index');
const port =process.env.PORT || 3001;


app.use(express.json());
app.use('/api', route); 

app.listen(port, ()=>{
    console.log(`express is running on ${port}`);
})

예전에는 body-parser 라이브러리를 설치하여 json 데이터를 받아왔어야 했던 것 같은데 이제는 express.json()을 사용하면 된다.

// router/index.js

const express = require('express');
const router = express.Router();

router.get('/', (req, res)=>res.json({username:'success404'}));

module.exports = router;

라우터로 아주 간단하게 json데이터를 넘겨줬다.

http-proxy-middleware가 1.0v 이전이라 아래와 같이 프록시를 설정했다. 1.0v 이후에는 createProxyMiddleware 를 사용하여 proxy를 다르게 설정해야한다

// src/setupProxy.js
const proxy = require('http-proxy-middleware');

module.exports = function(app) { 
  app.use( 
    proxy('/api', {
       target: "http://localhost:3001/",
      changeOrigin: true 
    }) 
  ); 
};

그리고 fetch로 데이터를 불러오면 끝~!

  useEffect(() => {
    fetch('/api')
      .then(res => res.json())
      .then(data => setUsername(data.username));

   });

어떤식으로 동작하는지 아직 제대로 이해는 못했지만 연결에 성공 했다는 것이 아주 기쁘다. 다음에는 postgreSQL과 연동하여 데이터 베이스를 써보겠다.

profile
Si vales bene, valeo

0개의 댓글