포트폴리오 코드 개선 1

기존 코드:

위의 사진과 같이 프로젝트를 설명하는 부분을 컴포넌트로 나누지 않고, 하드 코딩으로 글과 내용을 작성하였다.

하지만, 추후 프로젝트를 추가하고 유지보수 하는 과정에서 어려움이 있을 것 같았다.

이를 개선하기 위해

• 공통된 부분을 컴포넌트로 만듦
• 글과 이미지 부분을 객체로 분리해 보관
  과 같은 방법을 사용해 코드를 개선하였다.

그 결과 코드의 가독성이 향상되고, projects 객체를 통해 손쉽게 프로젝트 내용을 수정 할 수 있게 되었다.

const projects = [
  {
    name: "HANDPAINTING",
    explain:
      "아이들을 대상으로 수화에 대한 긍정적 인식을 높여, 청각 장애인 차별을 없애고자 사이트를 만들게 되었습니다.\n머신러닝은 mediapipe의 hands를 가져와 사용했으며, 이를 응용해 손의 상대 위치에 따라 수화 동작을 인식하고, 이를 프로세싱으로 보여주는 웹사이트를 개발하였습니다.",
    contribute: "aaa",
    image: [p1_1, p1_2, p1_3, p1_4]
  },
  {
    name: "DEPL(QLICK)",
    explain:
      "1차 MVP를 앞두고 있으며, 코드 리뷰 서비스를 제외한 blog, qna, userInfo에 관한 코드를 짜는 중입니다.",
    contribute:
      "qna 페이지의 프론트엔드 부분을 담당해 프로젝트를 진행 중에 있습니다.\napi를 연결시키는 과정에서 백엔드 팀원과의 지속적인 소통을 하며 데이터 통신이 원활하게 이루어지도록 만들었습니다.\n또한, 프론트엔드 팀원과 동시에 같은 부분을 개발하는 상황속에서 깃 커밋을 작은 단위로 쪼개는 습관을 가지게 되었으며,\nqna 댓글 기능을 개발하는 과정 속에서, 댓글이 정상적으로 업데이트가 되지 않는 문제가 발생하였는데, 이를 해결하기 위해 브라우저 동작 과정과 toast-ui editor setMarkdown 기능을 학습하고 이를 응용해 해결하였습니다.",
    image: [p2]
  },
  {
    name: "DEPL(QLICK)",
    explain:
      "초보 개발자, 혹은 사수가 없는 신입 개발자를 타겟으로, 코드 리뷰 서비스를 제공해주는 웹페이지. qna 페이지, 피드 페이지, 블로그 페이지, 코드 리뷰 서비스 페이지로 이루어져 있습니다.",
    contribute: "bbb",
    image: [p3]
  }
];

const Car = () => {
  console.log(projects);
  const { scrollY } = useScroll();
  const [doIt, setDoIt] = useState(true);
  if (scrollY < 3600 && doIt) {
    setDoIt(false);
  }
  if ((scrollY > 3600) & (doIt === false)) {
    setDoIt(true);
  }

  return (
    <div>
      {doIt && (
        <Header>
          <QuoteWrapper>
            <div>[</div>
            <div>]</div>
          </QuoteWrapper>
          <Title>프로젝트</Title>
        </Header>
      )}

      <MainStyle>
        {projects.map((project, index) => (
          <>
            <ImgArea style={{ gridRow: `${index + 1}` }}>
              <AliceCarousel
                autoPlay
                autoPlayInterval="2500"
                disableButtonsControls
                mouseTracking
                infinite
              >
                {project.image.map((img) => (
                  <Img src={img} alt="img" className="sliderimg" />
                ))}
              </AliceCarousel>
            </ImgArea>

            <ContentArea style={{ gridRow: `${index + 1}` }}>
              <Title>{project.name}</Title>
              <Subtitle>설명</Subtitle>
              {project.explain}
              <Subtitle>진행 사항</Subtitle>
              {project.explain}
              <Subtitle>기여</Subtitle>
              {project.contribute}
            </ContentArea>
          </>
        ))}
      </MainStyle>
    </div>
  );
};

export default Car;