어제 TIL을 쓰고 아침 7시에 잠들었다. 새벽에 가짜 데이터를 넣어놓은 json 파일 때문에 터진 오류를 해결하다가 결국 데이터 구조 문제에 봉착해서 포기하고 잤지만, 어쨌든 늦게 잔 후폭풍은 지대했다.. 출근도 1시간이나 늦었고ㅠㅠ 오전에는 게더가 터져 버려서 줌에서 간신히 미팅을 진행했고, 새벽에 맞닥뜨린 문제를 공유했다. 지금 생각해보니 API URL이 사이트 주소와 전혀 상관없다는 걸 어제 배웠었는데... 머리가 잘 돌아가지 않아서 그걸 다시 떠올리지 못하고 다시 비슷한 질문을 했던 것 같다. 아무튼 데이터 구조는 API 리스트에 적힌 거 말고는 당연하게도 새삼 혼자 고민하고 말고 할 게 없다는 것!
점심 나절에 백엔드에서 서버를 배포했고, 우리의 컴포넌트를 서버에 연결했다. 연결하고 나니 위에서 고민했던 그 문제는 처음부터 없었던 것과 다름없는 상태가 되었다. API 리스트의 데이터 구조 그대로를 적용한 백엔드의 서버에 직접 연결한 거니까, 적혀 있는 대로 불러오기만 하면 되는 거였다. 그리고 나 혼자 진행하는 프로젝트에서 파이어베이스를 붙이고 거기서 데이터를 끌어오는 것보다 axios로 서버에서 데이터를 가져오는 게 코드도 짧고 여러 모로 훨씬 수월했다.
전체 게시글의 정보는 메인 페이지에서 받고, 그 메인 페이지의 게시글을 클릭하면 해당 게시글 정보를 상세 페이지에 props로 넘기면서 상세 페이지가 렌더링 된다. 하지만 상세 페이지의 링크를 타고 직접 접속해버리면 메인 페이지를 거치지 않으므로 props가 undefined 되어 게시글 내용을 불러올 수 없다. 이 점을 보완하기 위해 props가 없는 경우 상세 페이지 자체적으로 서버에 연결해 데이터를 가져오는 코드를 짰다.
상세 페이지에서 불러온 댓글을 수정하고 삭제하는 코드를 짰다. 그런데 주특기 기본 주간 과제와 마찬가지로 페이지를 새로고침 해야만 변경된 데이터가 적용되었다. 새로고침 하는 함수를 넣자니 전체 화면이 반짝거리는 게 마땅찮고, 또 컴포넌트를 기본으로 하는 리액트의 사용 취지에도 맞지 않는 것 같아 고민이 된다. 저번 과제 때는 이걸 해결하지 못해서, 글을 작성해서 등록하고 나면 팝업창을 띄워서 메인 페이지로 이동하는 버튼을 누르게끔 만들었었다. ...일단은 더 좋은 방법을 찾을 때까지는 부모 컴포넌트의 window.location.reload();로 버텨보기로. 나는야 리액트바보
내일 할 일
로그인, 회원가입 페이지를 서버와 연결하고, 로그인 여부에 따라서 구현되는 화면 구성을 분기한다.