[클론코딩] 3일차 진행상황

오늘 한 일

1) 아침에 PostWrite 반응형으로 만드려다가 실패 -> 추후 팀원들과 같이 논의 해볼 예정

2) PostDetail.jsx 영역 나누기 (float:left를 줬음)

3) 각 영역에  필요한 기능 구상 및 구현

4) 전체적인 View 완성

5) 메인 페이지 / 마이페이지 구현 해주신 팀원분과 Git에 merge 하던 중에 겹치고, 사라지는 문제가 발생해서 어느정도 형식 맞춰서 merge 함 (post modules에 겹치는 부분이 많아서 오류가 발생한 듯 하다.)

6) 좋아요 기능 구현 중 팀원들과 상의할 부분이 생겨수 19시 회의에서 말씀 드릴 예정!

- 좋아요 / 취소 API에서 좋아요를 눌렀을 경우, 좋아요를 취소 할 경우 구분이 안되어 있음.

-> 이 부분은 백엔드 분들이 Schema로 구분 할 수 있다고 하심.

- 페이지를 새로고침 하거나 다시 로그인 했을 때 기존에 좋아요를 눌렀는 지 안눌렀는 지 구분 할 수 있는 컬럼이 필요함. -> 페이지를 조회 할 때 새로운 컬럼에 넣어주신 다고 함!

- 페이지를 조회 할 때 imageUrl 하나만 있었는 데 프로필 컬럼과 게시물 이미지 컬럼이 각각 있어야 해서 백엔드분들께 말씀드림 -> 구분해서 넣어 주시기로 함

 

오늘 만든 거

1) div 영역 나누기, PostDetail View, PostDetail 댓글 작성 + disabled, 댓글 보기 버튼 누르면 댓글 목록 띄우기, 뒤로가기 기능, 댓글 삭제하기, 게시물 삭제하기, 좋아요 기능

 

참고한 사이트

 

- div 태그 이용해서 영역 나누기

https://jhost.tistory.com/74

[CSS] div 태그를 이용해서 프레임 나누기

 

- 댓글 목록 불러온 후 div 영역을 벗어나면 스크롤바 생기도록 설정

https://ojji.wayful.com/2015/04/HTML-DIV-tag-Scroll-Bar-Display-Hidden-Set-Overflow-auto-hidden-scroll-white-space-nowrap-overflow-x-overflow-y.html

HTML DIV tag: 스크롤바 넣기와 제어하기 - overflow: auto, scroll, hidden, white-space:nowrap

 

- hr 태그 길이 조절해서 가운데 띄우기 

https://cofs.tistory.com/123

[HTML 기초 강좌] 4. hr 태그 ( 구분선, 수평선 )

 

중간 멘토링 시간에 멘토님께서 알려주신 기능들이나 개념들

https://ui.toast.com/weekly-pick/ko_20200213

리액트 어플리케이션 구조 - 아토믹 디자인

 

권한별로 페이지 다르게 설정하는 방법!

https://cotak.tistory.com/108

[React.js] 라우터를 이용한 접근 제한 구현 (Access Control & Authentication)

https://kimchanjung.github.io/programming/2020/06/24/react-router-private-router/

[React] react-router에서 인증 및 권한 Router(Private) 구현하기(권한별 routing)

https://github.com/JunilHwang/react-facebook-clone

GitHub - JunilHwang/react-facebook-clone: 리액트로 만드는 페이스북 클론코딩