내일배움캠프 4기 스파르타코딩 React B반
📒 오늘의 공부
1. React App Project_기능 개발_2
- 본문 수정 페이지
- 디테일 페이지에서 본문의 수정버튼을 누르면 이동하는 페이지
- 여기서 본문의 주제, 선택분류를 가지고 와서 수정을 한다.
시도
- db에 post 데이터 임의로 넣기
-> 임시 포스트의 id를 1로 하고 param.id 대신 넣음
문제
- 어제부터 계속 보이는 문제 - state가 정의되지 않았음
시도
- db에는 데이터가 있는데 그걸 불러오기 위해 __getPost를 써야하는 것 같은데..
- 일단 __getPost 함수를 만들어서 데이터 확인하니 잘 받아옴. useEffect로 EditPage에 넣었는데 여전히 state에 접근을 제대로 못함
- log보니 useEffect는 Editpage에서 잘 작동함
해결
- 결국 팀원에게 도움 요청
- 비슷한 문제였지만 해결법이 항상 달라서 헷갈렸던 것 같다
- 이번엔 getpost thunk 함수 만들어놓고 extraReducer에서 구현을 안 했다.
-> 구현을 하니 정상 작동
- redux toolkit edit page 코드 참고해서 새로고침했을 때도 가져온 input의 값이 사라지지 않게 처리
문제
- 해당 id의 값이 잘 불러와지고 수정도 잘 되는데 input에 값을 입력할 때 기존 데이터가 사라지지 않음
- 수정 완료 취소를 눌러도 내용이 다 사라짐
-> input 초기화 코드 위치를 dispatch 밖이 아닌 안으로 바꾸니 해결
시도 및 해결
- 이전에 했던 ToDoList 보니 데이터가 사라지지 않는 게 맞다...
- input올려서 사라지면 한 글자만 바꾸고 싶은데 그럴 수가 없으니...
- 댓글 조회, 등록 페이지에 임의로 DB 넣어서 Post랑 연결해보기
- 해당 포스트의 id를 comment에 추가해서 넣고 id가 같은 댓글들만 불러오기
- 댓글에 카테고리 내용 보이게 하기
-> isA의 true, false값에 따라 categoryA, B 보이게하기
-> 일단 isA의 값에 따라 다르게 보이게 구현 먼저 했음
- 본문의 categoryA,B를 라디오 버튼에 불러오기
시도
- db의 posts에 접근해서 데이터를 불러온 다음 stat.posts로 데이터를 가져와야 한다.
- updatePost를 pull해와서 이미 있는 __getPost를 DetailPage에 useEffect로 불러옴
해결
-
posts 데이터 가져오기 성공
-
댓글 입력할 때 카테고리 내용 post에 있는 내용으로 가져오기도 성공!
-
댓글 조회, 등록은 param.id로 해당 아이디를 가져오는 부분만 수정하면 모든 것 구현 완료!
-
CSS 수정
- category에 따라 댓글에서도 색 다르게 보이게 하기
-> 분리되어 있는 건 당연하게도 쉽게 됐는데 삼항연산자로 나뉘는 부분은 잘 안 됨
-> 팀원들 도움으로 성공..
-> true, false가 문자열로 되어 있어서 "" 안에 넣었어야 했다..
- category에 따라 댓글에서도 색 다르게 보이게 하기
- 댓글 내림차순 정렬
- 찾아보니 내림차순 정렬할 기준이 있어야 함
- 현재 댓글엔 그 기준이 없어서 파이어베이스 튜터님코드 참고해서 댓글에
createdAt:date.now()추가 - 어디다
orderBy("createdAt", "desc")를 넣어야 할 지 모르겠음 - data에 집어넣을 때, 엑스트라 리듀서에서, jsx 안에서 해봤는데 위치가 잘못된 건지 계속 오류
- axios 주소를 바꾸면 된다.
-> 주소 뒤에?sort_by=createdAt했더니 안 됨
팀원이 찾아준 방법
-> 주소 뒤에?_sort=createdAt&_order=DESC
-> 모든 get 주소에 저렇게 바꾸니 댓글을 새로 달아도 새로고침해도 다 내림차순으로 잘 됨!!
- 댓글에 날짜 보이게 하기
- 댓글에 날짜 넣기
-> 댓글 등록할 때date: new Date()
-> createdAt은 삭제
-> slice 사용해서 년월일만 보이게 하기 성공
- 댓글에 날짜 넣기
프론트엔드 개발자