[POB] 기업과제 -미스터카멜 #2

목요일 강의를 듣고 나서 이번 과제를 같이 진행하게 될 팀원들과 게더 타운에서 회의를 진행하며 각자 맡을 기능을 분담하였고 나는 호기롭게 상세 페이지 상품 랜덤 출력과 관심 없음 등록 기능을 하기로 했는데 이게 나중에 가져올 무서움을 모른 체 고것을 확 물 어분 것이여...! 작업하다 보니까 이 부분이 생각보다 까다로웠고 쩔쩔매다 보니 나중엔 분담과는 상관없이 서로 도와주고 있었다 하하!

 

고것을 확 물어분 것이여

📋 1. 과제 요구사항 분석

1. 상품 상세 페이지 (/product)

 

• 페이지 로드 시 랜덤 상품 출력
• 상품을 조회하면 최근 조회이력에 추가
• 관심 없음 버튼 클릭 시 다른 상품 출력
• 랜덤 버튼 클릭시 관심 없는 상품과 현재 상품을 제외한 다른 상품 출력 

2. 상품 조회이력 목록 페이지 (/recentList)

 

• 00시 기준으로 최근 조회 이력과 관심 없는 상품 목록 초기화
• 별도 페이징 처리 없이 전체 로드
• 필터 - 브랜드, 관심 없는 상품 숨기기
• 팝업 - 클릭시 최신순, 가격순 팝업
• 상품 클릭시 상세 페이지로 이동
• 관심 없는 상품 클릭 시 경고 메시지 노출

👩‍💻 2. 내가 맡은 기능

• 상품 상세 페이지 (/product) 마크업, 스타일링
• 랜덤 버튼 클릭 시 상품 랜덤 출력 구현
• 00시 기준으로 최근 조회 이력과 관심 없는 상품 목록 초기화

💻 3. 기능작업

함수형 컴포넌트만 사용하다 보니까 클래스 컴포넌트 사용법을 대부분 잊어먹었다.. 허헣 그래서 급하게 사용법부터 구글링 했고 과거에 사용해봤던 경험이 있어 다행히도 나의 두뇌 메모리(?)가 저 깊은 구석에서 잠들어 있었던 사용법을 기억해내기 시작했고 금방 익숙해졌다. 

 

먼저 상세 페이지 마크업만 간단하게 하고 바로 상품 랜덤 출력 작업에 들어갔다.

 

1. 상품 랜덤출력

  randomPicker = () => {
    const { printableData, currentTitle } = this.state;

    const printableLength = printableData.length;

    let randomIndex = Math.floor(Math.random() * printableLength);
    while (
      printableLength > 0 &&
      printableData[randomIndex].title === currentTitle
    ) {
      randomIndex = Math.floor(Math.random() * printableLength);
    }
    if (!(randomIndex > printableLength || printableLength === 0)) {
      this.setState(
        {
          currentTitle: printableData[randomIndex].title,
          currentPrintData: printableData[randomIndex],
        },
        () => this.setRecentListNoInterestingData(true)
      );
    }
  };

랜덤 버튼 클릭 시 출력 가능한 데이터만 보여주기 위해 randomIndex에 동일한 index값이 할당될 경우 while 반복문을 통해 다른 값이 나올 때까지 반복! 

조건문은 지금 와서 보니까 부정 연산자를 붙이는 게 아니라 if (randomIndex < printableLength || printableLength > 0)
이게 더 가독성이 좋았을 텐데 당시에는 할 것도 많고 너무 정신이 없었다.. 다음엔 신경 써야겠다.  

 

2. 00시 기준으로 최근 조회 이력과 관심 없는 상품 목록 초기화

// App.js
  componentDidMount() {
    interval = setInterval(() => {
      this.checkTheTime();
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(interval);
  }

  checkTheTime = () => {
    const midnight = "00:00:00";
    const date = new Date();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();
    let currentTime = `${hours < 10 ? `0${hours}` : hours}:${
      minutes < 10 ? `0${minutes}` : minutes
    }:${seconds < 10 ? `0${seconds}` : seconds}`;

    if (currentTime === midnight) localStorage.removeItem("recentList");
  };

🎥 4. 결과물

🐱‍🏍 5. 회고

• 2회 차 과제는 저번과 달리 4명의 팀원으로 이루어져 있어서 좀 더 수월하겠구나 생각했지만 이것은 경기도 오산.. 1회 차의 난이도에서 살짝 업그레이드됐겠지라는 엄청난 착각이었다. 그럼에도 서로 응원해주고 칭찬의 박수를 쳐주던 우리 팀원들이 있어서 끝까지 열심히 하고 결과물을 낼 수 있었다.
• 서버에서 받아오는 데이터 정보가 불충분하다면 클라이언트 사이드에서 데이터 재가공을 해야 하는데 '굉장해 엄청나!' 스러운 로직이 탄생하게 되고 온전히 개발자가 UI작업에 몰두할 수 있는 리액트의 목적과는 벗어나는 불필요한 코드가 많이 발생한다는 것을 이번 과제를 통해 느꼈고 그렇기 때문에 백엔드 개발자와 원활한 커뮤니케이션이 필요하다는 가르침을 주기 위해 이런 시련(?)을 주셨구나란 깨달음을 얻었다.  

• 협업을 해본 적이 없어서 git을 사용하는데 많은 어려움을 느꼈다. 서윗남 성상님께서 방법을 차근차근 알려주셨고 덕분에 문제없이 git을 사용한 협업을 할 수 있었다. 완벽하진 않지만 다음 과제 진행할 때 이번처럼 얼타진 않겠지!  많이 찾아보고 많이 써보자!! 그래도 모르면 물어볼게요 그래도 괜찮을까요 성상사마..?
• 이번에 협업을 하면서 알게 된 setState의 두 번째 인자로 콜백 함수를 전달할 수 있다는 것! 컴포넌트가 렌더링 되면 호출되는 함수인데 리액트의 setState는 비동기 방식으로 실행되어서 순서를 보장받을 수 없기 때문에 인자로 콜백을 받아서 순서를 보장받을 수 있다.

 this.setState(
      (prev) => ({
        recentListData: [],
      }),
      () => this.setRecentListNoInterestingData(false)
    );

• 민기님이 기업에서 근무하는 마지막 날이라 늦으신다고 했다. 한 9시면 오실 줄 알았는데 버그가 생겨서 12시 넘어서야 회의에 합류하셨다. 몸도 마음도 지쳐있을 텐데 그럼에도 불구하고 회의에 참여하신 대단한 정신력.. 내가 그 상황이었더라면 민기 님과 같은 행동을 했을까? 피곤해서 내일 참여했어도 됐을 텐데.. 이점을 본받아 나도 맡은 바 최선을 다해야겠다!
• 성상님이 figma에서 UI 디자인 시안과 프로젝트 전체적인 플로우 모식도에 대해 미리 작업해 오셨다 ㄷㄷㄷ 아니 이걸 혼자서 다하셨다고...? 아아 너무 눈이 부셔서 모습이 보이질 않아요.. 진짜 준비해 온 자료를 보면서 여러 번 감탄했다.     
• 현정님이 react 학습 기간이 길지 않았다는 것을 게더 타운 토킹 타임 때 알았다. 아니 ~ 2주 배우셨는데 이 정도로 하신다고..? 이것이야 말로 '굉장해 엄청나!' 장차 크게 될 사람입니다.. 여담으로 짱구 성대모사를 하셨는데 아주 유쾌했다 껄껄 혹시 실례가 안된다면 '굉장해 엄청나!'와 '부리부리 부리부리!' 하나만 해주십시오

• 프리온 보딩 코스 합격 전의 나는 독학을 해왔다. 혼자서 하다 보니 그만큼 자유로워 좀 풀어지기도 하고 무엇보다 재미가 없었다. 코딩을 할 때 내가 짠 코드가 맞는지 더 좋은 방법은 없는지 문제 해결을 못하고 있을 때 나와 같이 고민해줄 사람이 있었으면 좋겠다는 생각을 수백 번은 넘게 했다. 그러던 중 원티드에서 구직정보를 찾다가 우연히 채용연계 코스 게시물을 보았고 동료들과 학습할 수 있다는 게 너무 좋았다. 누군가와 같이하는 학습에 대한 갈증을 느끼고 있었던 터라 '내가 원하던 게 바로 이런 거야!' 하며 하고 있던 모든 걸 중지하고 기술과제와 숏 에세이를 작성하는데 집중했다. 요구서류를 제출하고 드디어 23일 금요일 결과 발표만 기다리고 있었는데 오후 3시 반이 되도록 연락이 없길래 '역시 떨어졌구나..' 낙심하며 멍 때리고 있었던 도중 다행히도 44분에 합격 문자를 받았다! 후후.. 7월 31일 자로 2회 차 과제까지 마무리했는데 집단 지성의 힘과 함께하는 재미를 뼈저리게 느끼고 있고 무엇보다 우리 7 ill resource팀 분위기가 너무 좋다.. 솔직히 처음에 어색할까 봐 걱정을 엄청 많이 했는데 쓸데없는 걱정이었다 ㅋㅋㅋ 오히려 다들 너무 친해져서 나중에 팀 재구성될 때 우리 팀이 그리워질 것 같다.. 우리 모두 수료하는 그날까지 열정 열정 열정! 우리 우정 변치 말아요!

7ill resource 열정 열정 열정!