Main Project | 우리팀이 만든 자취생 냉장고 앱 회고

메인프로젝트가 끝나고 느끼는 점

추석 이전에 시작한 메인 프로젝트가 10월 11일에 개발 마감을 하고 12일에 데모데이도 하고... 정말 이렇게 바쁘고 intensive하게 달려온 적이 있었던가..?

우리 팀이 직접 아이디어도 구상하고, 기획을 하고, 디자인도 하고, 정말 내 삶이 개발 개발 코딩으로 가득!! 차있던 그런 몰입감 높은 경험을 했다. 프로젝트 기간동안 밥도 제때 먹지 못하는 날도 많았고, 그렇게 산책을 좋아하는 내가 집에서 한발짝도 산책을 못나간적도 많지만.. 결과적으로 프로젝트를 성공적으로 마치게 되어 정말 뿌듯하고 아직 해야될 공부가 더 많긴 하지만 어느정도 조금 그래도 자신감도 살짝 생긴 것 같다. 엄청난 자신감은 아니지만 .. 웹개발을 처음 해보는거고 인생 거의 첫 팀 프로젝트이지만 나 이것도 만들 수 있어! 라는 살짝의 자신감.. 

확실히 우리가 직접 기획하고 디자인한대로 개발을 하다보니 프리프로젝트때 했던 스택오버 플로우 코딩보다 프로덕트에 대한 애정도가 당연히 더 컸고 하나하나 쌓아가는 재미가 있었다. 그리고 정말 정말 개발이 재미있어서 (주로 서버 통신하기 이전에 그냥 막 혼자 페이지 만들때ㅋㅋㅋ 통신은 늘 어렵다..ㅜㅠ) 뇌에서 세로토닌이 마구마구 나오는 기분이 들때도 많았다.

물론 중간에 힘든 생각도 분명 들때도 있었지만. 예를 들면 난 왜 수진님처럼 빨리 구현을 못하고 이렇게 시간이 많이 걸릴까..? 프로젝트가 끝나면 오히려 자존감이 낮아진다는데 왠지 알겠다.. 이걸 정말 내가 다 다시 구현하라고 하면 할 수 있을까?! 수진님은 백엔드 분들께 필요한 api도 요청하시고 이것저것 정말 많이 아시는 것 같은데 나는 저게 무슨말인지 정말 모르겠다.. 등등..

그치만 나를 잠깐 괴롭히는 이런 생각들에서 벗어나 긍정적인 방향으로 생각을 많이 했던 것 같다. 나는 수진님같이 물어볼 사람이 있어 정말 다행이다.! 라던지 .. 프로젝트 경험에서 한번 겪어본 것들이니 내가 다음에 하면 더 짧은 시간에 더 잘 구현할 수 있겠지 ..! 

확실한 건 정말 팀원들 운이 좋았고, 우리 백엔드 프론트엔드 서로 얼굴 붉힌 적 한번 없이 다들 맡은 바를 정말 잘 해주었고 다들 넘나 스마트하신 것.. 

특히 나와 함께 엄청 많은 시간을 함께 전우처럼 불태운..ㅠㅠ 수진님같이 나랑 잘 맞고 좋은 분을 만나서 정말 개발하는 내내 많은 힘이되었고 좋았다.. 💜

 

회고

좋았던 부분

• 프리프로젝트땐 그럼 나 이제 뭐해야되지?하고 고민해야되는 시간이 은근 있었는데 메모장에다가 그날 그날 내가 해야될 일을 적어서 내가 해야될 일을 까먹지 않고 세세하게 적어서 해야될 퀘스트를 관리 할 수 있었다. 

• 프리프로젝트 때보다 컴포넌트 재사용을 고려해서 설계하고 재사용 가능한 컴포넌트로 작게 만든 것 
• redux tookit에 조금 더 익숙해지고 redux persist도 도입하여 새로고침시 상태가 유지되게 한 점 
• 라이브러리를 쓰지 않고 모달창, 드롭다운, 탭을 직접 구현한 것 
• Styled components에 조금 더 익숙해져서 마크업 구조를 짜고 css 속성들도 props로 활용하여 어느페이지에서든 css 속성도 props로 바로 가져다가 다른 css를 적용할 수 있었던 점..! (프리땐 이걸 못했다니..)

return (
    <Button
      disabled={disabled}
      className={className}
      width={width}
      height={height}
      backgroundColor={backgroundColor}
      color={color}
      hoverBackgroundColor={hoverBackgroundColor}
      hoverColor={hoverColor}
      onClick={onClick}
      margin={margin}
    >
      {" "}
      {children}{" "}
    </Button>
  );
};

const Button = styled.button`
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: none;
  width: ${(props) => props.width || " 300px"};
  /* width: ${({ width }) => width || "300px"}; //props 이렇게 내려도 똑같음 */
  height: ${(props) => props.height || "35px"};
  ...
  `

• 디자인이 깔끔하고 예쁘다는 평가를 많이 받은 것
• 반응형으로 모바일 버전과 데스크탑 버전으로 모두 완성

 

아쉬웠던 부분

• 시간 상 관리자 페이지에서 레시피만 삭제를 구현하고 사용자를 삭제하는 기능은 구현하지 못한 점
• 배포환경은 또 다를 줄 이야..!! 프로젝트 시작때에는 금요일을 배포일로 정했었는데 또 막상 기능 구현하는데 급급해서 배포를 조금 막바지에 했던 점
  • 로컬환경에서는 새로고침을 할때 refresh 요청이 두 번 되어도 기능적으로는 문제 없이 데이터를 잘 받아왔었다 (첫요청 실패, 두번째 요청에서 성공했던 것 같다). 실제로 vercel 배포환경에서는 useEffect의 마운트가 딱 한번만 일어나는 것인지 새로고침시 refresh 요청이 한 번만 되고, 순서도 데이터를 받아오는 요청이 먼저 요청이 보내져 401 unauthorized 에러가 나고 서버에서 받는 데이터가 화면에 안띄워지는 문제가 있었다.
  • 배포를 조금 더 일찍 했으면 ... 배포환경에서도 개발을 더 많이 해볼 수 있었을 것 같아 좋았을 것 같다. 
• 리액트의 클래스 컴포넌트에서 사용하는 생명주기 네가지 메소드가 있는데 로그인을 구현할때 유명한 블로거가 작성한 클래스형 컴포넌트의 componentDidMount 메소드가 useEffect hook에서는 어떻게 써야하는지?에 대한 공부가 부족했던 점

 

개선이 필요한 부분 

• 검색 모달창 input에 검색어를 입력하고 지우는 기능이 없음

• 의외로 사람들이 가장 궁금해하는게 검색 모달창에서 실시간으로 검색되는 기능이었는데, 이 부분은 데모데이때 교육엔지니어님의 피드백을 받은 부분이기도 하다. 
• 다른 유명한 웹사이트에가서 어떻게 구현이 되었나 눈으로 많이 보고 익혀보라고 하셨다. 트래픽이 많은 사이트인 경우 개발자들이 그만큼 ux에 대한 고민을 많이한 결과물일테니 잘 살펴보고 내가 코드로 작성할때도 하라고 하셨다. 

 

to be added ..!