22% - 2차 프로젝트 정리(첫번째)

장운서·2021년 8월 7일

프로젝트

목록 보기

5/6

문제 없이 잘 진행하다가, 장염으로 인한...고군분투가 많았던 프로젝트이다.
1차 프로젝트는 그냥 단순한 기능들 하나하나에 시간이 오래걸렷다면
이번 프로젝트는...잘 진행하다가 아파서...그저 아파서 시간내로 많이 진행을 못한 프로젝트이다.
너무 아쉽다.

8% 클론 프로젝트 - 22%

기간 : 2021. 7. 05.~16. (2주)
백엔드 개발자 : 이동명, 이준영, 전수현
프론트 개발자 : 장운서, 정빛열음, 황소미

프로젝트 방식 "SCRUM"

sprint : 1주일
Daily Stand Up Meeting : 오전 11시, 다르게 또 회의할일이 있으면 회의를 잡음
스케줄 관리 : noction

1차 sprint 회의

1차 회의에서 동명님이 noction에 좋은 템플릿이 있어서 그걸 활용하기로 했다,
1차 때보단 새로운 기술도 배우고 퍼포먼스적으로 많이 나오기 힘들다는 멘토님들 얘기로 일단 최소한의 페이지로 가고 추후 시간이 된다면 다른 페이지들도 구성하기로 했다.

Front 목표
Page: 메인, 로그인, 로그아웃, 투자하기(부동산, 개인신용),마이페이지

Detail Page

componenet css 를 쓴다는게 굉장히 시행착오가 많앗다.

html 을 생성해주는 css 라이브러리를 쓴다는게 굉장히 생소했다.
처음에 네스팅을 해주고 대부분 큰 componenet 들은 componenet css를 써줫더니 내 코드를 본 선임분들이 componenent css를 쓸거면 처음부터 다 써야된다는 것을 느끼고 잇었다.

실제로 해당 컴포넌트 관련 커밋을 남겨주셨고 해당 부분을 수정하느라 오랜 시간이 걸렷다.

부동산 상품 디테일 페이지는 단락별로

투자포인트
상품개요
담보안정성
담보상세
대출자 정보

가 있었기 때문에 하나하나 따로따로 모두 나누어주었다.

투자 포인트 쪽 슬라이드 부분을 직접 구현해주었다.
1차 프로젝트때 구현할 부분이 따로 없었기 때문에 2차 프로젝트에 슬라이드 구현 부분이 있어 부동산 상품 디테일 페이지를 고른것도 있다.


function Slide(props) {
  const TOTAL_SLIDES = props.mortgageImage.length;
  const [currentSlide, setCurrentSlide] = useState(0);
  const slideRef = useRef(null);
  const nextSlide = () => {
    if (currentSlide >= TOTAL_SLIDES) {
      // 더 이상 넘어갈 슬라이드가 없으면 슬라이드를 초기화합니다.
      setCurrentSlide(0);
    } else {
      setCurrentSlide(currentSlide + 1);
    }
    console.log(currentSlide);
  };
  const prevSlide = () => {
    if (currentSlide === 0) {
      setCurrentSlide(TOTAL_SLIDES);
    } else {
      setCurrentSlide(currentSlide - 1);
    }
    console.log(currentSlide);
  };
  useEffect(() => {
    slideRef.current.style.transition = 'all 0.5s ease-in-out';
    slideRef.current.style.transform = `translateX(-${currentSlide * 100}vw)`; // 백틱을 사용하여 슬라이드로 이동하는 애니메이션을 만듭니다.
  }, [currentSlide]);

해당 부분은 https://velog.io/@peppermint100/JSReact-Hooks%EB%A1%9C-Carousel-Slider-%EB%A7%8C%EB%93%A4%EA%B8%B0님의 블로그를 참조하며 만들었다.

TOTAL_SLIDES로 모든 슬라이드 총 갯수를 저장해주고 usteStae를 사용해서 스테이츠를 채워주고 useRef를 사용해 DOM을 직접 선택해줍니다.
useEffect를 사용해서 해당부분의 움직임을 직접 구현해줍니다.
useRef,useState,useEffect의 사용법을 이번 슬라이드 구현을 하면서 알수있었다.
안의 로직은 사실 특별히 별거 없고 버튼을 클릭하게되면 TOTAL_SLIDES를 움직이는 로직이다.

다만 useEffect로 움직임의 애니메이션을 직접 움직여준다는 특징이 있었다.

몇몇 군데 icon 들을 svg 로 구현을 해주었는데 React 에서는 따로 svg를 구현하는 방법을 성훈님 꼐서 링클을 걸어 알려주셨다.

https://kyounghwan01.github.io/blog/React/handling-svg/#svg-%E1%84%8B%E1%85%A8%E1%84%89%E1%85%B5

해당부분을 참고하여 각각의 icon의 svg로 구현한 부분들을 해당 url 과 동일하게 import 하는 방식으로 가져왔다.

8%는 전체적으로 금융관련 페이지라 데이터들을 전체적으로 그래프로 표현을 해주고있다.
해당 데이터들을 직접 구현하는데 시간이 좀 걸릴거 같아 chart.js 를 사용하기로 하였다.
첫 plug in 를 사용 해보았는데 어려운 부분은 없었고 char.js에 최신 사용법이 잘 업데이트 되지 않아 Dought chart의 선 굵기를 조정하는 option을 소미님이 찾아주셨다.