파이어베이스를 백엔드로 쓰려다가 포기..
생각보다 nosql이 러닝커브가 꽤 된다.
게다가 백엔드에서 그냥 처리할 걸 서버리스 상태로 어떻게 처리해야 하는지 고민할 시간에
백엔드에서 구현하는것이 훨씬 빠를것 같아서 방향을 틀었다.
프론트는 그대로 react로 가고 backend는 express를 쓰기로 했다.
그럼 기존에 react + firebase를 react + express로 변경해야한다.
이 과정을 기록한다.
서버 구성
client와 같은 레이어로 만든다.
express 프로젝트 구축
$npm install express --save
$npx express server
$cd server
$npm start
마찬가지로 환경변수파일(.env)을 만들어준다.
react 포트가 3000번이어서 나는 3001번으로 포트를 환경변수파일에 넣었다.
cra로 프로젝트를 만들면 .env를 바로 사용가능한데 express는 안되나보다.
dotenv를 설치해주자
bin/www 파일에서 .env파일을 읽어오자
var dotenv = require('dotenv');
dotenv.config()$npm install --save dotenv
소스 변경시 로컬 서버를 재실행 시켜주는 nodemon도 설치하자. nodemon은 개발용이다.
$npm install nodemon —save -dev
nodemon적용을 위해 start스크립트를 바꿔준다.하는김에 디버그도 찍자
기존 : node ./bin/www
변경 : DEBUG=express:* nodemon ./bin/www
$npm start
3001번으로 서버가 실행된 로그가 뜸
route/index.js파일에 간단한 api를 추가해보자
var express = require('express');
var router = express.Router();
/* GET home page. */
/*router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});*/
router.get('/', (req, res) => res.json({data:'this is index.'}));
module.exports = router;클라이언트 구성
먼저 프로젝트 디렉토리를 생성후
리액트 프로젝트 구축
$mkdir pocket-market
cd pocket-market
$npm create-react-app --save
$npx create-react-app client
$cd client
$npm start
잘 된다면 환경변수 파일(.env)을 만들어주자
난 카카오 api를 쓰기위해 jskey를 환경변수로 넣었다.
일단 리액트에서 서버 데이터를 가져올 수 잇는지 보자
암때나 로딩 되는곳에 추가함
axios.get('http://localhost:3001')
.then(res => {
console.log(res);
})위에서 추가한 {"data":"this is index."} 를 가져와야 하는데..
실행시켜보니 아래와 같음
cors에러가 난다. cors가 뭔지는 별도로 포스팅을 할 예정이다.
상당히 역사가 복잡한 넘이다. 일단 허용 도메인을 설정해주는 개념이라고 생각해라
여튼 저 에러를 안뜨게 하려면 서버에서 cors를 허용해주어야 한다.
cors를 허용하는 방법에는 몇가지가 있는데 나는 cors모듈로 허용해주겠다.
cors모듈 적용
server 디렉토리로 이동
#npm install cors —save
// CORS 설정
app.js파일에 추가var cors = require('cors');
app.use(cors());다시 테스트..
성공
바벨 적용
- 의존성 설치
$npm install @babel/node
$npm install @babel/preset-env
$npm install @babel/core
- .babelrc 파일 생성 후 내용 추가
{
"presets": ["@babel/preset-env"]
}- app.js 수정(바벨문법 적용해보기)
// const express = require('express');
import express from "express";- package.json 파일을 수정한다.nodemon도 같이 실행하는 명령어임
"scripts": {
"start": "nodemon --exec babel-node index.js"
},