RIDIBOOKS Clone Project 회고

▶︎ 팀명 : RIDIBOOKSLBOOKSL (리디북슬북슬)

▶︎ 개발기간 : 2021.10.18 ~ 2021.10.29

▶︎ 개발 인원

Front-End 4명 : 김수민, 김용현, 박세연, 이나영
Back-End 2명 : 이기용, 이정아

▶︎ 적용 기술 및 구현 기능

Frontend: HTML/CSS JSX React(CRA) Styled-components
(Library: React-router-DOM, React-pdf, React-slick)
Backend: Python, Django Web Framework, AWS, MySQL
Common: 버전관리 Git & GitHub, 소통 Slack, 일정관리 Trello

2차 Lush Clone -리디북슬북슬

프론트엔드 깃허브

백엔드 깃허브

리디북슬 트렐로

---

▶︎ 나의 기술

1. 푸터 구현
   • onClick Event 적용과 상수데이터+맵함수로 반복되는 코드 최소화
2. 메인페이지 구현
   • react-slick 라이브러리를 이용하여 슬라이더 구현
   • useEffect( ), setInterval( ) 이용하여 현재시간 화면에 렌더

▶︎ 기억하고 싶은 코드

00시 00분으로 현재시간을 메인 페이지에 렌더하기

부모컴포넌트

const Main = () => {
  const [time, setTime] = useState(0);

  const getTime = () => {
    const current = new Date().toLocaleTimeString('en-US', {
      hour12: false,
      hour: '2-digit',
      minute: '2-digit',
    });
    setTime(current);
  };
  
  useEffect(() => {
    setInterval(getTime, 1000);
    return () => {
      setInterval(getTime, 1000);
    };
  }, []);
;
  
  return (
      <CurrentTime
        hour={time.toLocaleString().split(':')[0]}
        min={time.toLocaleString().split(':')[1]}
    // console.log찍어보면 00:00 으로 나오기 때문에 ':' 기준으로 시간과 분을 나누어서 props 전달.
      />
  );
};

export default Main;

부모컴포넌트에서 자식컴포넌트로 state값을 props로 넘기기 위해 부모컴포넌트에서 실시간함수getTime을 만들었고, 해당 함수에서 new Date()를 가져왔다. toLocaleTimeString() 을 통해 현재시간을 문자열로 표시했다.
"2021. 11. 3. 오전 9:21:19" 식으로 나온다.
이 값을 split을 해서 시와 분을 자식컴포넌트에 보내준다.

자식컴포넌트

const CurrentTime = ({ hour, min }) => {
  //{ hour, min } 으로 표기함으로써 별도로 구조분해할당을 할 필요가 없다.
  return (
    <TimeBox>
      <div>
        <i className="fas fa-clock" />
        {` ${hour}시 ${min}분`}
      </div>
    </TimeBox>
  );
};

export default CurrentTime;

▶︎ 아쉬움

메인에 추가구현으로 카카오 실시간 채팅을 한 번 넣어보고 싶었는데 쉽지 않았다.ㅠㅠ
카카오채널까지는 만들었는데 가져오는 걸 못해서 다음 프로젝트에 한번 사용해보고 싶다.

2차 프로젝트여서 그런가 다들 해야할 부분을 잘 알기에 첫 미팅을 빡시게 했다.
서기까지 담당해주신 용현님이 잘 써주셔서 회의록도 누락되지 않도록 꼼꼼히 작성했고, 트렐로도 착착착 정리+업데이트 되었다.

2차 프로젝트에서는 다양한 로직구현을 못한 게 아쉬운 점이 좀 크다.

▶︎ 마무리

두번째 프로젝트를 정말 잘 마무리했다.
메인페이지를 맡게되서 겁을 많이 먹었는데 우리 팀원분들
수민님, 용현님, 나영님, 기용님, 정아님 많이 응원도 해주시고, 격려를 해주셨다.!!!!

특히 용현님이 내가 고민하는 부분 왜 슬라이더의 화살표가 안보이는지, 슬라이더의 위치가 맞는지, images && text가 가운데 정렬인지 를 옆에서 봐주셨다.
부적처럼 계시다보니 잘 풀린 것 같다.!
용한 용현부적ㅋㅋㅋㅋㅋㅋ
센스가 있으셔서 그런가 메인슬라이더 이미지도 예쁘게 만들어주셨다.
이번엔 디자인쪽에 많이 집중하고, 신경을 쓴 것 같다.
메인 페이지를 호다닥 마무리 해서 팀에 도움이 될 수 있도록 노력했다.
백엔드에서 필요한 이미지도 찾고, 나름 PPT도 만들었다.
너무나도 부족했지만 팀원들이 너무나도 감사하게 배려해주고, 이해해주셨다.
이 자리를 빌어 다시 또 감사드립니다.ㅠㅠ

이번 프로젝트에서는 다양한 경험을 했다.

외부라이브러리 slick도 써보고, 컴포넌트재사용도 해봤다.
하기 전에는 겁도 먹고 내가 할 수 있을까하는 걱정이 많았는데 막상 닥치면 다 하게 되는 것 같다.

정말 겁 먹을 필요가 없는데 왜 항상 걱정과 생각이 많아지는건가 싶은데 인간은 생각하기에 존재함으로써 어쩔 수 없다는 점..

겁먹어도 잘 해내는 걸 알기에 자신을 믿는 것이 중요하다고 생각이 되는 시점이다.
구글링을 하거나 강의를 찾아서 듣거나 동기님들/멘토님들에게 물어보거나!

찾을 수 있는 길은 많기에 우리모두 많은 걱정을 하더라도 자신을 믿고 이겨냅시다.!

기업협업 나간 동기님들, 원티드/위코드 하고계시는 동기님들!
모두 다 잘될 거예요. 항상 응원합니다!🤩🥳

---

용현님이 만드신 우리팀 이미지... 깨알귀여움

---

---