11주차 토요일

11주차 토요일

1. 배운 것

• mern스택 crud 연습

2. 내용 정리

[Express] res.sendFile

서버에서 응답으로 보내 줄 index.html 파일은 client에서 npm run build 하여 build 폴더에 압축된 index.html 파일을 보내주어야 한다.

// client
npm run build

---

1. 클라이언트: 리액트 앱 빌드하기
2. 서버: path모듈 설치
3. 서버: static 폴더 사용하기 (app.use)
4. path모듈 사용하면서 join메서드로 sendFile 경로지정.

// server > server.js
// npm i path

const express = require('express');
const path = require('path');
const app = express();
const port = 3001;

app.use(express.static(path.join(__dirname, '../client/build')));

app.listen(port, () => {
  console.log('listening on port 3001');
});

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, '../client/build/index.html'));
});

• build 폴더 안의 요소들을 다 static으로 쓰기 위해서 app.use 경로는 build 폴더로.

---

MongoDB + Mongoose

entry 설정 모든 아이피에서 접속할 수 있도록 하려면 ip 주소를 0.0.0.0/0 으로 entry 추가.

mongodb 연결시 connect하는 주소에 내 아이디와 비번, 클러스터명이 주소에 포함되는데, 이 비밀번호를 깃허브에 그대로 올리면 당연히 안되기 때문에 config 폴더 하나 만들고 개발환경과 배포환경을 분리해서 환경변수 설정을 해주고 내 비밀번호가 들어가있는 파일을 gitignore에 추가시키면 된다.

참고: https://velog.io/@chy0428/Node-JS-비밀-설정-정보-관리

axios & cors

이번엔 axios로 api를 짜봤다.

클라이언트는 3000번 포트, 서버는 3001번 포트로 동작중이라 cors 이슈가 발생하므로 해결해야 한다.

내일 여기 파트부터 다시 하기로..!

그 외 기타등등

• npm5 부터는 --save 옵션을 기본 옵션으로 적용한다. 따라서 --save를 사용하지 않아도 dependencies에 설치시 항목이 추가됨.