내일배움캠프 4기 스파르타코딩 React B반
📒 오늘의 공부
1.프로젝트
-
마감기한을 맞추기 위해 오늘은 최대한 역할을 나눠서 맡은 부분을 하기로 했다.
- 나는 JS파일 구현을 맡았다.
-
게시물을 누르면 해당 게시물(feed)로 이동, 해당 게시물 내용이 보여야 하고 해당 게시물의 유저라면 수정, 삭제 버튼도 떠야함 = commit -
yunsukprac branch-
해당 게시물 클릭, feed page로 이동
-> 게시물을 클릭할 수 있게 temp_html에서 상위 태그를div - a로 바꾸고route(event)추가
->#feedpage로 이동 -
CSS 조금 변경
-> 수정, 삭제 버튼이 뜨는 ... 세 개는 사진 위에 마우스를 올렸을 때 뜨도록 만들기 -
feed page에서 내가 누른 게시물의 data 가져오기
-> temp_html 만들기
-> wireframe 참고, 전체적으로 div구역 재나눔
-> 게시물 id = 프로필 id 같게 만들어야 함
-
✔️
- post 1개만 불러올거니까 getOnePost 함수를 만들었는데 아무것도 안 뜸
->getPostList함수를 가져다 쓰되temp_html바꿔보기
-> 문제는 함수가 아니라 새로 만든temp_html에 오타가 있었음. console창을 잘 보니 해당 오류가 있어서 해결하니 feed page에 내가 설정한 CSS대로 포스트 내용 잘 들어옴.getOnePost함수 잘 작동!
✔️
-
loginmain page에서 게시물에 #feed 달아서 이동하면 undefined
-> 단순히 페이지 링크를 #값으로 주는 게 아니라 클릭한 게시물과 feed에 불러와지는 게시물이 같아야 함..
-> 게시물 1개만 가져오기 + 해당 게시물의 id값..? -
새로운 함수를 만들면
main.js, router.js모두 추가하기
-> 댓글 창은 함수 따로 구현했고 위치만 CSS로 잘 잡아주기!
✔️
- 해당 게시물의 유저일 경우 수정, 삭제
-> 댓글 수정, 삭제 참고!isOwner?
-> 수정, 삭제... 게시물 전체에 대한 수정과, 삭제니까 수정을 누르면 사진, 제목, 내용 바꿀 수 있어야 하고
삭제는 글 전체 삭제..!
-> 수정, 삭제 코드 보완하기!!
✔️
-
메인 페이지에서 '운동 / 공부 / 독서' 카테고리를 눌렀을 때 해당 카테고리의 글만 가져오기
-
Firebase API 사이트에 'get one data' 검색했다가 데이터 가져오기 코드를 보고 힌트를 얻음
'컬렉션에서 여러 문서 가져오기' -
카테고리별 클릭했을 때 함수를 만들고 해당 함수로 글을 가져오되 where절로 카테고리의 'value'값을 넣기!
-> 성공!! -
같은 방식으로 my page에 내가 쓴 글만 불러오기
-
'단일 문서 가져오기'로는 feed page를 완성할 수 있을 것 같다.
-
-
일단 메인 페이지에 카테고리별로 불러오는 것 성공한 것으로 만족.. my page를 없애거나.. 하기..
✔️
- 'typeerror: cannot set properties of null (setting 'innerhtml')'오류
- 초기화 코드를 주석처리하거나 하면 오류가 사라짐..
- ⭐
.innerhtml의 왼쪽에 문제가 있어서 오류가 뜨는 것!
- tutor code에서 logout code를 안 가져와서 진짜로 로그아웃이 안 됐던 것임!!(팀원 발견!)
✅
문제 해결
- 프로필 페이지 CSS 문제로 작은 창에서 요소들이 흩어지는 걸 해결한 걸 pull 받았는데 프로필 수정창의 x버튼이 비활성화 되어 있었다.
-> 어젯밤 prac 버전에서는 잘 작동해서 CSS부터 코드를 한하나 비교해봤다.
-> 프로필 상자 생기는 class에 position을 추가했던 걸 지우니 X 버튼 다시 활성화됨! - 프로필 수정창 닫기, 수정하기 버튼을 눌러 mypage로 이동할 때, loginmain에서 mypage로 이동할 때 포스팅이 안 올라옴
-> mypage에서 새로고침을 해야 올라옴
-> route함수를 안 써서 그런 것 같은데..
-> 프로필 모달 구현 실패
✔️
배운 것
- 어제 firebase 사용량 초과 뜬 이유
- 오늘 project를 들어가 보니 읽기 사용량이 수요일에 5만을 찍었다.
- 단순히 포스트를 올리는 것이 아니라 데이터를 읽어 오는 것도 다 카운트가 되는 거였구만!
