[48기 이인재] PostList 기능 구현 #3
Conversation
README.md
Outdated
There was a problem hiding this comment.
이 PR에선 README.md 파일이 삭제되면 안됩니다.
다른 PR에서 README.md 파일이 수정된 후 이 PR이 병합되면, 수정한 내용까지 지워버릴 수도 있습니다!
There was a problem hiding this comment.
새로 생성해서 깃헙에 있는 내용들 추가했는데 맞을까요..?
src/pages/PostList/PostList.jsx
Outdated
| const handleRemove = targetId => { | ||
| const newList = feedsData.filter(data => data.id !== targetId); | ||
| setFeedsData(newList); | ||
| }; |
There was a problem hiding this comment.
삭제 기능을 실제로 백엔드 서버와 붙이는 것까지 고려했다면, 이 부분은 프론트 단에서만 작동하는 코드이기 때문에 실제로 반영하려면 다른 방식이 필요할 수도 있습니다.
추후에 서버와 기능을 붙여볼 때 참고해 주세요!
src/pages/PostList/PostList.jsx
Outdated
| .then(data => setFeedsData(data)); | ||
| }, []); | ||
|
|
||
| const noListMessage = '게시글이 없습니다.'; |
There was a problem hiding this comment.
컴포넌트가 렌더링 될 때마다 다시 그려질 필요가 없는 상수 데이터이기 때문에, 컴포넌트 외부에 작성해도 됩니다.
그리고 개인의 성향일 수 있지만, '게시글이 없다'라는 text는 따로 관리할 중요한 변수는 아닌 것 같다는 생각이 드네요! 인재님만의 기준을 세워가는 것이 중요할 것 같습니다.
There was a problem hiding this comment.
그러면 게시글이 없는 것을 현재 상태에서 어떻게 보여주면 좋을까요?
There was a problem hiding this comment.
말씀드린 제 기준에 따른다면, 따로 변수로 지정하지 않고 리터럴하게 직접 JSX Element 안에 작성할 것 같습니다.
| const handleHeartToggle = () => { | ||
| setHeartToggle(!heartToggle); | ||
| setLike(heartToggle ? like - 1 : like + 1); | ||
| }; |
There was a problem hiding this comment.
이 부분도, 위에 삭제 관련된 코멘트 참고해주세요!
1. 본 PR이 우리 팀의 웹 서비스 제품성에 어떠한 기여를 하였고,
사용자에게 어떠한 기대효과를 전달하는지 작성해주세요.
유저들이 작성하는 게시글을 보여줄 수 있는 PostList 페이지에서,
좋아요 버튼을 누르면 하트가 채워지면서 좋아요 수를 올렸다 줄였다가 할 수 있어 좋아요 수를 확인 가능하게 합니다.
게시글을 삭제하고 싶을 때 삭제 버튼을 눌러서 선택한 리스트만 삭제가 가능하도록 합니다.
초기값을 Feed 내용 숨기기로 하여 보고 싶은 Feed의 댓글만 볼 수 있도록 합니다.
Feed에 댓글을 달 수 있게 합니다.
달린 댓글을 삭제할 수 있게 합니다.
유저는 자신의 게시글뿐만 아니라 다른 사람들의 게시글도 볼 수 있고 좋아요 수를 볼 수도 있습니다.
또한, 삭제도 할 수 있어 자신이 마음에 들지 않으면 삭제가 가능하여 게시글을 올리는 데 더 편리하게 사용할 수 있습니다.
피드 내용을 삭제하고 프로필 영역만 남겨두어 보고 싶은 내용만 볼 수 있고 한 번에 보기 편리합니다.
Feed에 댓글을 달아 자신의 의견을 공유할 수 있습니다.
댓글을 삭제할 수 있어 마음에 들지 않거나 잘못 작성된 댓글을 보지 않을 수 있습니다.
2. 이 브랜치에서 어떤 내용을 개발했는지 큰 제목과 상세 내역을 적어주세요.
좋아요 숫자 변경 기능 구현
게시글 삭제 기능 구현
Mock Data로 다양한 데이터 전달
게시글의 내용 숨기기 기능 구현
컴포넌트화
댓글 게시 기능 구현
댓글 삭제 기능 구현
3. 개발한 화면을 캡쳐해서 첨부 해 주세요.
4. 이 브랜치에서 개발하면서 느낀 개발 성장포인트를 적어주세요.
배열메서드 filter를 사용하여 리스트를 삭제할 수 있게 되었습니다.
Mock Data와 map 메서드로 반복되는 UI를 그릴 수 있게 되었습니다.
Mock Data를 props로 받아오는 것을 할 수 있게 되었습니다.
좋아요 버튼을 토글하며 좋아요 수도 리렌더링되게 할 수 있게 되었습니다.
filter 메서드로 삭제를 할 수 있다는 것을 알게 되었습니다.
react에서의 조건문을 더 잘 사용할 수 있게 되었습니다.
e.preventDefault()를 언제 사용하는지 더 잘 알게 되었습니다.
배열 내에서 이전 값들이 사라지지 않고 이어서 작성하는 방법을 더 잘 알게 되었습니다.
filter 메서드로 삭제한 것 이외에도 slice오 concat을 이용해 삭제 기능을 구현할 수 있다는 것을 알게 되었습니다.