저번달에 만들었던 나만의 아고라스테이츠 클라이언트의 서버를 만들었다.
Myagorastates 서버구축
어제 한 flightserver와 비슷하게 만들면 되서 생각보다 쉽게 만들었다.
코드 로직을 보면 먼저 미들웨어 3가지를 지정해준다.
morgan은 요청 로그가 나오는 모듈, cors는 CORS 헤더를 만들어주는 모듈, json은 request body를 바로 꺼내주는 모듈이다.
그다음 Router 모듈로 지정 주소값이 오면 Router로 이동하게 만들었다.
discussions 라우터에는 다음과 같은 2가지 경로가 있다.
⓵ parameter 없이 get 요청이 들어오면 서버에 있는 모든 데이터를 보내주고,
⓶ parameter값으로 id가 들어오면 해당 id에 맞는 데이터를 필터링하여 보내주면 된다.
⓵ findAll은 그냥 데이터를 모두 보내주면 된다.
⓶ findById는 id값이 일치하는 데이터를 보내주는데, 일치하는 id가 없으면 상태코드 404와 'Not Found'라는 문자열을 보내주도록 했다.
Myagorastates 클라이언트 연동
저번에 React로 만들었던 클라이언트에서 더미데이터가 아니라 서버에 데이터를 요청하여 응답으로 받은 데이터를 렌더링하도록 서버와 연동했다.
useEffect와 fetch를 사용하여 데이터를 받아서 기존과 같이 렌더링 하도록 하면 된다.
받은 데이터는 바로 setDiscussion 함수에 넣어서 discussion 변수에 들어가도록 했다.
* localArr은 로컬 스토리지에 담겨져 있는 데이터인데 렌더링될 때 서버로부터 받은 데이터 앞에 붙여주었다.
* eslint-disabled-next-line 주석이 없으면 경고창이 뜨는데, 실행에는 지장이 없어서 일단은 보류해뒀다.
* 경고창을 읽어보니 'localArr이 dependency array에 없어서 그렇다!' 라고 되어있어서 dependency array에 localArr을 넣어보니 또다른 경고로 'localArr이 렌더링할때마다 바뀌니까 useMemo같은거 써봐라!' 라는 경고가 떳다.
아직 useMemo에 대해서는 공부하지 못해서 일단은 보류해놓았다.
'코드스테이츠' 카테고리의 다른 글
Section 2 회고 (0) | 2023.02.10 |
---|---|
2/10 일일정리 기술면접준비 (0) | 2023.02.10 |
2/8 일일정리 Statesairline Server (0) | 2023.02.08 |
2/7 일일정리 Express서버, MiddleWare (0) | 2023.02.07 |
2/6 일일정리 CORS, node server 실습 (0) | 2023.02.06 |
댓글