오늘은 섹션2에서 배운 내용을 총동원해서 하루동안 솔로 프로젝트를 진행한다!
섹션1 솔로프로젝트에서 JS DOM으로 나만의 아고라스테이츠 클라이언트를 만들었는데
오늘은 그 페이지의 서버를 만든다.
✅ 주요 개념
- HTTP / 네트워크
- Web Server
- 비동기 / Ajax 요청
1. CORS, morgan 적용, express 미들웨어 express.json() 적용
app.use(cors());
app.use(express.json({strict: false}));
app.use(morgan('tiny'));2. 메인 화면을 원하는 경로로 라우팅
app.use('/discussions', discussionsRouter)3. 서버 상태 확인 + listen
app.get('/', (req, res) => {
res.status(200).send('health check');
// throw ''; //테스트의 편의를 위해 작성
});
const server = app.listen(port, () => {
console.log('[RUN] My Agora States Server...');
});
module.exports.app = app;
module.exports.server = server;4. 주어진 repository의 data를 GET 요청에 따라 라우팅을 해주었다.
//router 구현
const router = express.Router();
router.get('/', findAll); //모든 discussion 목록을 조회하는 라우터
router.get('/:id', findById); // discussion 하나를 조회하는 라우터
module.exports = router;
//http messages
const { agoraStatesDiscussions } = require("../repository/discussions");
const discussionsData = agoraStatesDiscussions;
const discussionsController = {
findAll: (req, res) => {
const data = discussionsData.slice();
return res.status(200).json(data);
},
findById: (req, res) => {
const { id } = req.params;
const list = discussionsData.find((item) => item.id === Number(id) )
if(list) {
return res.status(200).json(list);
}
else{
return res.status(404).json('Incorrect request');
}
}
}
module.exports = { discussionsController };5. fetch API 사용
한달 전에 구현했던 클라이언트와 오늘 만든 서버를 연동했다.
script.js 파일 최하단에 fetch API 작성
/*생략*/
fetch("http://localhost:3001/discussions/")
.then(response => response.json())
.then(json => {
let agoraStatesDiscussions = json; //위에서 agoraStatesDiscussions 라는 dummy data를 사용했었다.
const ul = document.querySelector("ul.discussions__container");
render(ul); //화면에 dom elements를 render 해주는 함수를 위에서 구현했었다.
})솔로 프로젝트 회고
처음에는 막막하고 어디서부터 손을 대어야 할지 몰랐는데
하나하나 해보니까 결국 해결했다!
실전에 닥치니 fetch API를 연동하는 부분이 어려웠다.
DOM으로 일일이 구현한 미로같은 코드에서 data를 어디 부분에서 연동해야 할지,
.then()으로 json으로 변환한 data를 어떻게 사용해야 할 지가 관건이었다.
원래 script.js 파일 최상단에 let agoraStatesDiscussions; 하고 선언을 해주고 fetch 안에서 agoraStatesDiscussions = json;라고 사용해 주려 했는데 오류가 나서 변수 선언 위치를 위와 같이 변경해주었다.
agoraStatesDiscussions 가 defined라는 류의 오류가 계속 났었는데
fetch가 선언된 scope에서 사용 가능하도록 바꿔주니까 성공..!
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Errors/Not_defined
원래 기존에 만들었던 클라이언트를 react로 리팩토링 하는 것까지 진행하려고 했는데
너무 어려움 + 눈이 너무 뿌얘서 천천히 차근차근 야금야금 진행해보려 한다.
내일이면 section 2의 마지막 날이다
미라클 모닝을 시작해서 알찼던 이번 섹션...
고생 많았다..! 더 열심히 하자..!!
