🥞 오늘 한 일

• 뉴스피드 프로젝트
  • 게시물 페이지 데이터 로직 재작성
  • 게시물 삭제 코드 재작성
• 알고리즘 코드카타
  • 수업 수강
  • week3 practice1 풀이
• 스탠다드반 수업
  • supabase 학습

뉴스피드 프로젝트

기존에는 전체 데이터를 가져와서 해당 데이터 중, 현재 페이지의 파라미터값(id)과 같은 id를 가진 데이터만 가져오는 식으로 로직을 짰고, 리덕스에까지 적용시켰다.
그러나 팀원분과 함께한 튜터님과의 대화를 통해 해당 코드에 불필요한 부분이 있다고 느꼈고, 대화가 끝난 후 튜터님께 메세지가 이렇게 왔다.

아까 함께 말한 것처럼 상세페이지에선 supabase로 데이터를 하나만 가져오는 게 맞고,
useState로 상세페이지를 보여주는게 일단은 가장 적절한 방법인 것 같습니다.
상세페이지 데이터도 redux로 관리해도 되지만 다소 불필요한 세팅인 것 같아요.
근데 문제는 수정, 삭제 시에 useState도 변경하고, 기존 목록 (redux)도 변경해줘야할 수도 있다는 점인데요.
하지만 현재 ㅇㅇ님조는 수정, 삭제 후 바로 다른 페이지로 이동하고 다시 데이터 목록을 가져오기 때문에 이 작업이 없어도 변경된 사항이 잘 적용될 것 같긴합니다!

때문에 데이터를 하나만 가져오는 로직으로 변경했고, redux로 관리하는 부분을 삭제했다.

// NewsfeedPost.jsx

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

	const [post, setPost] = useState({});

	async function getPost() {
		const data = await getSelectedNewsfeed(feedId);
		setPost(data[0]);
	}

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

	const { id, title, userId, date, content } = post;

	// 게시물 삭제 핸들러
	const deletePostHandler = async () => {
		const confirmDelete = confirm("정말 삭제하시겠습니까?");
		if (confirmDelete) {
			const { error } = await supabase.from("newsfeed").delete().eq("id", feedId);
			navigate("/");
		}
	};

	return (
		<StyledNewsfeedPost>
			<div className="container">
				<StyledPostItem>
					<StyledPostHeader>
						<StyledPostHeaderLeft>
							<StyledImgBox>
								<img src="/imgs/default-user-profile.png" alt="유저 아이디" />
							</StyledImgBox>
							<StyledInfoBox>
								<StyledListTitle>{title}</StyledListTitle>
								<div>
									<span>{userId}</span> | <span>{date}</span>
								</div>
							</StyledInfoBox>
						</StyledPostHeaderLeft>
						<div>
							<Link to={`/feed-edit/${id}`}>
								<StyledButton>수정하기</StyledButton>
							</Link>
							<StyledButton onClick={() => deletePostHandler()}>삭제하기</StyledButton>
						</div>
					</StyledPostHeader>

					<StyledPostContent>{content}</StyledPostContent>
					<StyledPostFooter>
						<LikeButton />
						<ShareButton />
					</StyledPostFooter>
				</StyledPostItem>
			</div>
		</StyledNewsfeedPost>
	);
};

// getSelectedNewsfeed.jsx

export async function getSelectedNewsfeed(feedId) {
	const { data: newsfeed, error } = await supabase.from("newsfeed").select("*").eq("id", feedId);
	if (error) throw error;
	return newsfeed;
}

현재 페이지의 데이터는 useState로 관리해주었다. 기존에는 전체 데이터를 가져왔지만, 새로운 getSelectedNewsfeed 함수를 통해 현재 id와 같은 데이터만 가져와 해당 데이터를 화면에 나오도록 했고, 기존의 redux로 관리하던 부분은 삭제를 하여 불필요한 코드를 깔끔하게 정리했다.

🍽️ 문제 해결

알고리즘 코드카타

nums 배열이 주어졌을 때, 앨리스와 밥이 게임을 합니다. 매 라운드마다 앨리스는 nums에서 최소 요소를 제거하고, 그 다음 밥이 같은 작업을 합니다.
밥은 제거한 요소를 결과 배열 arr에 추가하고, 그 다음 앨리스가 제거한 요소를 추가합니다. 이 과정을 nums가 비워질 때까지 반복합니다.
최종적으로 결과 배열 arr을 반환하세요.

다음의 조건을 만족해야 합니다: sort, Math.min, indexOf 함수를 사용하지 마세요.

function minimumNumberGame(nums) {
  const arr = [];
  while (nums.length > 0) {
    let aliceIdx = 0;
    for (let i = 0; i < nums.length; i++) {
      if (nums[i] < nums[aliceIdx]) {
        aliceIdx = i;
      }
    }
    const aliceEl = nums.splice(aliceIdx, 1);
    let bobIdx = 0;
    for (let i = 0; i < nums.length; i++) {
      if (nums[i] < nums[bobIdx]) {
        bobIdx = i;
      }
    }
    const bobEl = nums.splice(bobIdx, 1);
    arr.push(...bobEl, ...aliceEl);
  }
  return arr;
}

nums가 아직 남아있는 동안에는 계속 반복하는 while 문을 작성한다.
우선 alice가 nums에서 가장 작은 수를 제거해야하기 때문에, 반복문을 통해 가장 작은 숫자의 index를 추출하고, 해당 값을 nums에서 splice를 통해 제거하며 가져온다.
bob 역시도 같은 방법으로 남은 nums에서 가장 작은 수를 가져오면서 동시에 nums에서 제거한다.
bob이 먼저 arr에 숫자를 넣어주어야하므로, bob, alice 순으로 현재 가지고 있는 수를 추가한다.
nums가 빌 때까지 반복하고, 반복이 완료되었을 경우 arr을 return한다.

🍪 배운 것

알고리즘 특강

• 정규식을 조금 알아두면 좋다. 이메일 정규식 같은 건 너무 어려우니까 검색하면서 사용하고, 문자나 숫자만 골라내는 정규식 정도는 알아두면 좋다.
• 사전 순으로 정리할 때 localeCompare 메서드를 사용해도 좋다.
• 말이 안 되는 값이 함수에 들어왔을 때 바로 return하도록 초기 검증 과정을 넣어주면 좋다.

🍴 돌아보기

• 뭔가 바쁘게 이것저것 많이 한 날인 것 같은데 막상 정리해봤을 때 그다지 한 게 별로 없는 것 같아서, 기록에 좀 더 신경을 써야겠다고 생각했다. 이제 뉴스피드 프로젝트가 고작 3일밖에 남지 않았는데, 3일 간 미친듯이 달려야겠다!

🍳 내일 할 일

• 뉴스피드 프로젝트
  • 게시물 수정 기능 구현
  • (로그인 회원가입 기능 구현 시) 마이페이지 이미지 변경 기능 구현
  • supabase 데이터 로직 관련 회의 안건 올리기