'Rolling' 프로젝트 회고

단단·2024년 3월 12일

코드잇 프로젝트 프론트엔드 회고

프로젝트

목록 보기

3/10

▲ USERFLOW

프로젝트

power12team 깃허브
배포 링크
노션 링크

내가 구현한 것

MessageTo 페이지에서 backgroundImageUrl GET 요청

const fetchBackgroundImageUrls = async () => {
  try {
    const response = await axios.get(`${API_BASE_URL}background-images/`);
    if (response.status !== 200) {
      throw new Error("Error fetching image urls:", response.status);
    }
    return response.data.imageUrls;
  } catch (error) {
    throw new Error("API Error", error);
  }
};

MessageTo 페이지에서 페이퍼 POST 요청

const fetchPostPaper = async (recipientData) => {
  try {
    const response = await axiosInstance.post("recipients/", recipientData);
    return response.data;
  } catch (error) {
    throw new Error(`"Error fetching data:", ${error.message}`);
  }
};

공용 버튼 컴포넌트 구현

const Button = ({ size, type, disabled, onClick, children }) => {
  const selectedSize = SIZE[size];
  return (
    <button
      className={selectedSize}
      type={type}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>

트러블 슈팅

recipientData post 요청 400 에러 발생
-> 원인: POST 요청은 잘 작성했으나 then으로 가져오는 과정에서 recipientData를 인자로 넣지 않았다.
-> 해결: then으로 가져오는 fetchPostPaper 함수 인자로 recipientData를 양식에 맞춰 작성했다.
페이퍼 배경을 컬러와 이미지 중 하나를 선택했는데 토글하면 초기값이 제대로 표시되지 않았다.
-> 원인: handleSelect 함수에 컬러, 이미지 setState를 함께 넣어 클릭 시 컬러와 이미지를 동시에 바뀌게 했다.
-> 해결: 컬러와 이미지 선택 함수를 각각 만들어 서로 영향을 받지 않게 따로 이벤트를 줬다.

프로젝트 주요 기능

무한 스크롤 구현: useEffect를 써서 LIMIT 이상 카드가 로드되면 다음 카드를 로드하게 한다. / intersetction-observer 라이브러리(타겟 엘리먼트가 조상 엘리먼트의 교차영역에서 발생하는 변화를 비동기로 관찰한다.)를 사용했다.

useEffect(() => {
    const handleIntersection = (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting && hasNext) {
          loadMessages({ recipientId, offset, limit: LIMIT });
        }
      });
    };

    const observer = new IntersectionObserver(handleIntersection, IO_OPTIONS);

    observer.observe(SENTINEL.current);

    return () => {
      /* 페이지 전환 시 element 사라짐 대응 조건식 */
      if (SENTINEL.current) {
        observer.unobserve(SENTINEL.current);
      }
    };
  }, [offset, hasNext]);

KPT 회고

나의 목표: 맡은 역할을 잘 해내고, 팀원들과 소통을 잘하고, 회고를 잘 남긴다.

KEEP

노션 정리를 잘해서 일정과 놓치고 있는 부분을 잘 관리했다.
맡은 부분을 목표한 기간 내에 끝냈고, 피드백을 받으면 바로 수정했다.
문제가 보이면 바로 피드백해서 이를 수정할 수 있게 했다.
팀원들이 고생한 부분을 고맙게 여기고, 고생했다고 말했다.
질문이 생기거나, 막히는 부분이 생기면 혼자 앓기 보단 팀원과 동료에게 도움을 요청했다.
내가 맡은 부분이 끝나면 끝나지 않은 부분을 찾아 진행했다.

PROBLEM

각자 역할을 다 했을 때 미처 분배하지 못한 일을 나누는 게 어려웠다. 팀원들이 솔선수범해서 처리하긴 했지만 팀장에게 역할이 가중된 게 문제다. 누군가에게 일을 주는 게 참 어렵다.
처음에 깃허브 프로젝트 브랜치를 팀장이 만들고, 이를 팀원들이 FORK해서 사용했다. 그래서 팀장의 할 일이 많아진 부분도 있다. 다음 번엔 깃허브 ORGANIZATION을 사용해봐야겠다.
배포 링크를 컴퓨터로만 확인했고, 발표 전날에 휴대폰으로 확인했더니 반응형 UI 문제를 많이 발견했다. 배포 링크를 미리 휴대폰으로 확인해야겠다.

TRY

내가 맡은 부분이 다른 부분에 비해 쉬웠다. 그래서 트러블 슈팅도 치열하게 하지 못했다. 어려운 기능을 맡아야 구현하면서 실력이 는다는 말을 공감한다. 다음 프로젝트에선 어려운 부분을 맡는 도전을 해봐야겠다. 팀에 피해를 끼치지 않는 선에서 말이다.
프로젝트는 완성 속도만 중요한 게 아니라 개개인의 성장도 중요하다는 것을 명심해야겠다. 나는 협업에서 막히는 부분이 있으면 공유하고, 함께 도와줘야 효율적으로 할 수 있다고 생각한다. 그런데 협업은 빨리 끝내는 것만 중요한 게 아니다. 팀원들 각자의 성장도 중요하다. 그러므로 누군가가 스스로 해보겠다고 하면 프로젝트 마감에 영향을 주지 않는 한 존중하는 태도를 가져야겠다.

총평

걱정 반 기대 반이었던 첫 프로젝트를 마무리했다. 첫 주에 기능을 구현하면서 기한 내 마무리하지 못하면 어쩌지라는 걱정과 부담감이 컸다. 그러나 "잘하지 않아도 굴하지 않는다"라는 마음가짐으로 프로젝트를 진행했다. 내 역할을 충실히 하고 싶었고, 이를 어느정도 이뤘다. 프로젝트를 하면서 솔선수범하는 팀원들을 보며 나도 그렇게 하려고 노력했다. 성실하고, 책임감있고, 수용적인 팀원들에게 고맙다. 나 스스로도 프로젝트를 잘 마무리하는데 기여해서 뿌듯하다.

확실하게 배운 것

CSS 모듈 클래스 2개 쓰는 방법: className={${styles.ChooseButton} ${styles.ChooseButton}}
Input 태그에 클래스를 지정하지 않고 스타일을 그대로 줘서 에러를 처리할 때 사용한 다른 클래스가 적용되지 않았다.
jsx에선 img를 써야한다.
이미지 경로 잘 확인해야한다. 크롬 개발자 도구에서 확인할 수 있다.
스타일 속성을 클래스 또는 컴포넌트로 조절할 수 있다.
형제 컴포넌트 간 프롭을 주고 받을 수 없고 부모 컴포넌트에서 내려줘야 한다. 리액트는 단방향으로 동작한다. 이게 재사용의 관건
깃허브 푸쉬 확인하기 전까지 페치하지 말아야 한다. 페치는 위험하다. 머지되면 깃 풀로 로컬에 당겨받아야 한다.
깃허브 브랜치는 커밋한 상태에서 옮기지 않는게 좋다.
api 연동 시 url 확인, 특히 마지막 /여부를 잘봐야 한다.
화살표 함수에서 ()=>{} 리턴문을 써줘야한다.
css 우선순위 생각보다 문제를 일으킨다.
객체 선언 등은 컴포넌트 외부에서 해야 메모리가 적게 든다.
API 데이터 가져올 때 useState, useEffect, .then을 사용해서 객체로 리턴해야 한다.
NETLIFY 배포 시 npm run build로 생성한 build 폴더만 업로드해도 된다.