프로젝트 개요

탄소배출권을 거래 및 상쇄할 수 있으며, DevOps플랫폼 기업인 O사와 협업하여 b2b 서비스를 적용하였습니다.
프로젝트 링크

사용된 기술

JavaScript, react, SCSS

작업 내역

페이지 전체 개발
AWS amplify를 통한 CI/CD 업무 수행

Intersection observer api를 활용하여 뷰포트와 요소의 가시성을 관찰하여 sidebar의 메뉴 텍스트의 현재 위치와 색상이 자동으로 변경됩니다.
또한 AOS 라이브러리를 도입하여 스크롤 시 부드러운 인터렉션 효과를 적용했습니다.

PAYCO, KCP, STRIPE(해외카드 전용) 결제 플랫폼을 적용했습니다.

마이페이지에서는 내정보를 확인 및 수정 할 수 있고, 나의 탄소배출권을 확인,선물,상쇄 할 수 있으며, 상쇄 후 jpg형식으로 인증서를 다운로드 받을 수 있습니다.

탄소배출권 선물이 가능하며, 해당 메일로 발송이 됩니다.
이 때 메일페이지용 HTML을 처음 만들어봤는데, position속성이나 컬러와 같은 CSS의 적용 여부가 각 메일 플랫폼마다 모두 다르다는 것을 알게 되었습니다.

탄소배출권을 상쇄인증서 페이지입니다.
dom의 요소를 image로 바꿔주는 라이브러리 ‘dom-to-image’와, 현재 디바이스에 파일을 저장하는 메서드인 'saveAs'을 제공하는 라이브러리 ‘file-saver’을 사용하였습니다.

const onDownloadBtn = () => {
  const certification = certificationRef.current;
  return new Promise(function (resolve) {
    setLoading(true);
    resolve();
  }).then(
    domtoimage.toBlob(certification).then((certification) => {
      saveAs(certification, "certification.png");
      setLoading(false);
    })
  );
};

Promise를 사용한 이유는 setLoading을 먼저 처리한 후 인증서를 이미지화하여 다운로드되게 하고 싶었습니다.

loading은 useState로 생성된 상태값이고, 버튼의 이벤트가 동작중일 때 ‘진행중’을 표현하는 애니메이션효과를 제어하는 값입니다.

하지만 useState의 상태는 비동기식으로 작동하여 이미지변환이 먼저 실행되고 loading상태는 작동되지 않았습니다. 마치 아무런 동작도 하지않는 것처럼 보였기 때문에 promise를 사용하여 순서를 보장하게 하였습니다.

총평

이외에 소개하지못한 기능과 페이지들은 실제 프로젝트 링크에서 확인 가능하시며, 이외에 랭킹시스템 및 스토어 상세페이지 등 여러 페이지를 직접 구현하였습니다.
또한 상품의 등록 및 관리, 공지사항 및 QnA등록, 고객 요청에 따른 환불기능 등을 구현한 ADMIN페이지의 제작도 하였으며, DevOps플랫폼 기업인 O사의 플랫폼안에 iframe으로 들어갈 맞춤형 b2b페이지를 제작하였습니다.

이번 프로젝트에서 혼자서 작업하며 react와 javascript에 대해 많은 공부를 하였고 구현하는 속도가 많이 향상되었습니다.

하지만 여태까지는 시간을 맞추기위해 동작만 되는 코드를 목표로 작업했는데 좋지않은 가독성과 재사용성으로 인해 이게 무슨 함수인지, 왜 이 컴포넌트가 여기있는지에 대해 찾아야만 했습니다.

좋은 코드란 무엇일까라는 생각으로 여러 글을 찾아봤고 코드는 90%의 생각과 10%의 작업으로 이루어진다.라는 글을 보았습니다.
더 이상 구현만으로 만족하지말고, 더 넓게, 더 깊게 보는 시야를 가져야 겠다고 생각하였습니다.