[TIL] 클론 프로젝트 회고

안치영·2022년 11월 7일
0

TIL

목록 보기
12/15

실전 프로젝트에 들어가기 앞서 클론 프로젝트를 1주일간 진행 했다.
우리 조는 과거에 서비스 했던 싸이월드를 클론 코딩 하기로 했다.

내가 맡은 부분은 다이어리, 다이어리 댓글, 플레이리스트, 프로필 이다.

우선 다이어리를 작성할 때 사진이 올라가게 했는데,
사진을 서버로 보내려면 formdata에 추가해줘서 보내야 한다는 것을 처음 알게 되었다.

다이어리 부분이 메인 기능이기도 해서 다이어리 쪽에 신경을 많이 썼는데, 크게 어려움 없이 기능 구현이 된 부분이여서 괜찮았던 것 같다.

그치만 다이어리안의 댓글을 구현할 때 정상적인 CRUD는 구현이 되었지만, 화면이 렌더링이 안되는 문제가 있었다.

useEffect를 사용해도 안되고, dispatch한 다음 다시 get요청을 해서 실행을 해봐도 안되고 어떻게 해야할지 감이 계속 안잡혀서 아쉽다.
아예 안되면 이유를 찾을 수도 있었겠지만, 어쩔때는 렌더링이 잘 되고, 어쩔때는 렌더링이 잘 안되다보니 혼란스러워서 계속 이유를 못찾았다.

아직까지 해결책을 발견하지는 못했지만.. 나중에라도 꼭 알아야 할 것 같다.

그리고 미니홈피에 보면 홈,다이어리,방명록 버튼이 있는데
왼쪽 프로필을 제외하고 해당 버튼을 누른 컴포넌트를 보여주게 하고 싶었다.

그래서 해당 컴포넌트들 상태로 만들고, 버튼에 name속성을 부여하고, 한가지 함수에다가 3가지 컴포넌트들을 포함 시킨 후 해당 버튼이 눌릴때 그 버튼의 name에 맞는 컴포넌트를 보여주는 방식을 사용해 봤다.

코드로 보자면

function HomeP() {
  // 홈피 컴포넌트 상태관리
  const [content, setContent] = useState("main");

  // 버튼의 이름으로 setContent
  const handleClickButton = (e) => {
    const { name } = e.target;
    setContent(name);
  };

  // 선택될 컴포넌트 명단
  const selectComponent = {
    main: <Main />,
    diary: <Diary />,
    guestbook: <Guestbook />,
  };
  
  return(
  	{content && <div>{selectComponent[content]}</div>}
    <Menu>
      <MenuButton className={content === "main" ? "active" : ""} onClick={handleClickButton} name="main"></MenuButton>
      <MenuButton style={{ marginTop: "2px" }} className={content === "diary" ? "active" : ""} onClick={handleClickButton} name="diary">
                다이어리
      </MenuButton>
      <MenuButton style={{ marginTop: "2px" }} className={content === "guestbook" ? "active" : ""} onClick={handleClickButton} name="guestbook">
                방명록
      </MenuButton>
    </Menu>
  )
}

이렇게 완성 시켰다.

이제 드디어 항해의 마지막인 실전 프로젝트에 들어갔다.
마지막인 만큼 최선을 다해서 잘 해내야 겠다는 생각이다.

0개의 댓글