react + express + mongoDB

리액트로 로그인 만들어보기 연습하기위해서 기본적인 세팅이 필요

1. 데이터베이스로는 mongoDB사용 ( next.js에서 auth 연습 할 때 mongoDB를 사용했어서 다시 사용 )

2. 서버를 편하게 사용하기 위해 expresss 라이브러리를 설치해서 사용

 

과정)

1. 먼저 client파일과 server파일을 분리했다.

- backend라고 이름을 지은 폴더를 root경로에 하나 만들어주고 그 폴더 안에 들어가서  npm init -y 명령어 입력 (package.json 생성)

- 그리고 같은 명령창에 npm i express를 해준다. (node_modules생성)

- 갑자기 파일이 무지막지하게 생겼으므로 .gitignore파일 생성해서 node_modules 입력해주자.

 

2. backend폴더 안에 index.js 파일을 만들어준다.

- 만들어 준 파일안에 아래와 같이 코드를 작성한다.

- npm i mongoose를 설치해준다. ( mongoDB를 좀 더 편하게 쓸 수 있도록 함)

const express = require('express');
const app = express();
const port = 8080;

const mongoose = require('mongoose');
mongoose
  .connect(
    'mongoDB database만들 시에 썼던 비번 포함 주소 넣어주기',
    {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    }
  )
  .then(() => console.log('MongoDB Connected...'))
  .catch((err) => console.log(err));
app.get('/', (req, res) => {
  res.send('hello world!');
});
app.listen(port, function () {
  console.log('server start on 8008');
});
// Schema for users of app

*참고로 처음 Port 번호를 5000을 해줬더니 계속 포트가 사용중이라는 오류가 떴다. 알고보니 맥북일 경우 맥북에서 5000번을 사용하고 있다고 한다. 설정에가서 airplay?라고 하는 것을 꺼주면된다고 하는데 그냥 포트번호를 8080으로 했다.

그리고 npm start를 해주니 서버와 MongoDB 연결 끝

 

3.추가

package.json에 들어가서 script부분에 start를 넣어준다.

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js",
    "nodemon": "nodemon index.js"
  },

nodemon 설치를 했을경우 위와같이 script에 추가해도된다.

 

이제 로그인기능 구현 하러 가자