🥞 오늘 한 일

• 뉴스피드 프로젝트
  • 게시물 페이지 마크업
  • 게시물 페이지 데이터 받아오기
  • 게시물 삭제 기능 구현
  • 게시물 수정 기능 구현

우선 게시물 페이지의 마크업을 완료한 후, supabase를 사용해 메인 페이지에서 게시물 클릭 시 해당 게시물의 데이터를 게시물 페이지에서 가져와 화면에 뿌려주는 기능을 제작했다. 또한 삭제 후 메인 페이지로 돌아가는 버튼 역시 제작했다.

const NewsfeedPost = () => {
	const navigate = useNavigate();
	const dispatch = useDispatch();
	const { feedId } = useParams();

	const newsfeedList = useSelector((state) => state.newsfeed.list);
	async function getData() {
		const data = await getNewsfeed();
		dispatch(getInitalFeed(data));
	}

	useEffect(() => {
		getData();
	}, []);

	const getPost = newsfeedList.find((newsfeed) => {
		return newsfeed.id === feedId;
	});
	const { title, userId, date, content } = { ...getPost };

	const deletePostHandler = async () => {
		const { error } = await supabase.from("newsfeed").delete().eq("id", feedId);
		navigate("/");
	};
    
	return (
		<StyledNewsfeedPost>
			<div className="container">
				<StyledPostItem>
					<StyledPostHeader>
						<StyledImgBox>
							<img src="/imgs/default-user-profile.png" alt="유저 아이디" />
						</StyledImgBox>
						<StyledInfoBox>
							<StyledListTitle>{title}</StyledListTitle>
							<div>
								<span>{userId}</span> | <span>{date}</span>
							</div>
						</StyledInfoBox>
						<StyledDeleteButton onClick={() => deletePostHandler()}>삭제</StyledDeleteButton>
					</StyledPostHeader>
					<StyledPostContent>{content}</StyledPostContent>
					<StyledPostFooter>
						<LikeButton />
						<ShareButton />
					</StyledPostFooter>
				</StyledPostItem>
			</div>
		</StyledNewsfeedPost>
	);
};

새로고침을 해도 계속 데이터를 가져와야하기 때문에, 기존의 getData 함수를 가져왔다. 이 부분도 나중에 전역으로 사용할 수 있지 않을까 하는 생각이 든다. 우선 현재는 기능 구현 자체에 집중하기 위해 그대로 가져왔고, newsfeedList에서 params로 가져온 id와 같은 객체만 가져와, 해당 객체의 데이터들로 화면을 구성한다.
사실 가계부 프로젝트 때는 페이지 이동 시 navigate를 사용해 데이터를 넘겨줬지만, 이번에는 넘겨진 파라미터 값을 통해 기존 데이터를 가져와서 해당하는 id를 찾아 가져오는 방식을 택했다.
아직 마이페이지에 대한 작업을 하기가 애매한 상황이라, 삭제 기능을 마저 구현했다.
supabase 데이터베이스에서 삭제를 해주고, 삭제가 됐을 경우 navigate를 통해 메인 페이지로 돌아가도록 했다.

게시물 수정 기능도 구현했지만 아직 코드가 매끄럽지 않아 내일 더 다듬고 올려야겠다.

🍪 배운 것

• supabase를 사용하여 클릭한 게시물에 대한 데이터를 넘기는 방법

🍴 돌아보기

좀 더 효율적인 코드가 있을지 고민해보면서, 코드 한 줄마다 어떤 기능이 있는지 이해하면서 코드를 짜야겠다는 생각이 들었다. 당장 기능 구현도 중요하지만, 그보다 중요한 것은 이해를 하면서 코드를 치는 것.

🍳 내일 할 일

• 뉴스피드 프로젝트
  • 게시물 페이지 삭제 기능 구현
  • 마이페이지 마저 제작