토이프로젝트 진행중에 며칠째 잘 해결이 되지 않아 질문 드립니다.

Question

로컬에서만 작업하다가 이번에 처음으로 서비스화를 연습해보려고 토이프로젝트를 진행하고 있습니다.클라이언트는 react, 서버는 express로 이루어졌구요 aws ec2에 올려보려고 합니다.ec2에 퍼블릭 IP로 접근하면 nginx가 클라이언트 3000번 포트로 프록시 패스를 해줍니다.로그인도 문제없고 화면 로딩도 문제가 없지만 처음 페이지에서 express 서버를 통해 데이터를 가져올때 문제가 생겼습니다.해당 코드는 다음과 같습니다. (예외처리 로직은 제외하였습니다.) useEffect(() &#61;> { async function fetchData() { await axios.get(&#96;/v1/contents&#96;).then((res:any) &#61;> { let country &#61; Intl.DateTimeFormat().resolvedOptions().timeZone; let rows &#61; res.data.contents.rows.map((data:any) &#61;> { let format &#61; 'YYYY-MM-DD HH:mm:ss'; data.createtime &#61; moment.utc(data.createtime).tz(country).format(format); return data; }) setRows(rows); }) } fetchData(); },[])처음에 주소를 http://localhost:4000/v1/contents로 호출하니 cors에러가 나서 클라이언트 소스에http-proxy-middleware의 createProxyMiddleware를 사용하여 다음과 같이 선언해준 후module.exports &#61; function (app) { app.use( createProxyMiddleware(&#34;/v1&#34;, { target: &#34;http://localhost:4000&#34;, changeOrigin: true, }) ); };재로딩 후 다시 접속해보니 cors에러는 해결이 되었고 다시 서버를 띄워 조회를 해보니 다음과 같은 메시지를 볼 수 있었습니다.TypeError: Cannot read properties of undefined (reading 'rows')rows 이전라인에 콘솔을 찍어보니까 호출 자체는 200이었는데 response 데이터가 react의 build 된 폴더에 안에 있는 index.html이 넘어오고 있었습니다.어떤 셋팅이 누락되어서 이렇게 호출이 되는 건가요?제가 내도록 제이쿼리만 써보다가 처음으로 리액트로 작업하고 있는데 이렇게 막히는 건 생소하네요...

Gear · Accepted Answer

https://okky.kr/questions/1468496#answer-680084제 답변의 추가내용 1 참고 바랍니다

rarity · Answer

res.data.contents.rows //이게 호출이 잘못된겁니다. 오브젝트 다시 확인해보세요

토이프로젝트 진행중에 며칠째 잘 해결이 되지 않아 질문 드립니다.

2개의 답변

기술 목록