Catbow 이미지 변환 사이트 구현

 

 

 

 

 

---

🌈🤗 Check these sites and try them out

 

Video Converter Site
Catbow Doc
CatBow ScrollView Tutorial
NPM Library Site
YARN Library Site

---

 

 

 

 

Catbow-photo-converter

👉 배포 링크 Video Converter Site

 

 

🌈😺Catbow

 

 

총 4명으로 구성된 🌈😺Catbow ( FE : 3, BE : 1 ) Project

 

 

CatBow Library는 프레임 단위로 추출한 이미지 파일들을 이용해 화면 스크롤시 동영상 재생 효과를 주는 인터랙티브 UI 라이브러리입니다.

 

이에 필요한 동영상을 프레임 단위로 잘라주는 사이트를 구현하는 영상팀( FE : 1,  BE : 1)에서

프론트 엔드 개발을 맡아서 작업했고 이를 기록합니다.

 

 

---

 

 

 

구현한 기능

 

 

✅ 이미지 업로드 시 미리보기, 미리보기 삭제 기능

✅ 변환하기 전, 미리보기 삭제 전 다시 되묻는 모달 구현

✅  S3로 업로드

✅  파일 자동저장

✅ 에러 페이지 구현

 

 

 

---

 

 

 

🗂 폴더 구조

 

└─ src
   ├─ Api
   │  └─ axiosApi.js
   ├─ App.js
   ├─ components
   │  ├─ common
   │  │  ├─ Header.jsx
   │  │  ├─ adContainer
   │  │  │  ├─ SiderLeft.jsx
   │  │  │  └─ SiderRight.jsx
   │  │  ├─ modal
   │  │  │  ├─ Modal.jsx
   │  │  │  └─ useModal.js
   │  │  └─ page
   │  │     ├─ Error.jsx
   │  │     └─ Loading.jsx
   │  ├─ contexts
   │  │  └─ ContextWrapper.js
   │  └─ main
   │     ├─ MainContainer.jsx
   │     ├─ fileContainer
   │     │  ├─ FileContainer.jsx
   │     │  └─ button
   │     │     ├─ DeleteButton.jsx
   │     │     └─ UploadButton.jsx
   │     └─ hooks
   │        ├─ useLoadFile.js
   │        └─ useS3Download.jsx
   ├─ index.js
   ├─ pages
   │  └─ Home.jsx
   └─ styles
      ├─ GlobalStyle.js
      ├─ theme.js
      └─ variable.js

 

 

 

 

 

Pages 폴더엔 해당 작업물에 페이지가 어떤 게 있는지 보여주고 싶어서 컴포넌트만 넣어진 Home.jsx 를 넣어놓았다. 현재는 한 페이지뿐이지만 이후의 확장성을 생각했다.

 

나머지 컴포넌트는 src/components 폴더에 정리했는데 공용으로 쓰이는 컴포넌트들은 common 폴더에, 메인 페이지 컴포넌트는 main, contextAPI 로직은 contexts에 넣었다. main 폴더 안에는 전체 구조를 보여주는 MainContainer.jsx 와 본격적으로 로직이 연결되어있는 fileContanier, hook 으로 나누었고 그 안에 각각 성격에 맞는 컴포넌트들을 넣었다.

 

버튼을 따로 컴포넌트로 뺀 건 삭제 기능 버튼은 미리보기 사진이 올라가 있을 때만 나타나야 하기 때문에 해당 로직 때문에 뺐고 업로드 버튼은 사진을 올리는 기능 / 업로드 기능을 함께 해야했기 때문에 필수로 컴포넌트를 나누었다. 해당 컴포넌트 안에는 버튼을 나누는 로직만 넣어 이 버튼이 어떤 기능을 하는지만 보여주려고 했고 세부 로직은 hook으로 분리했다.

 

가장 신경 많이 쓴 컴포넌트는 useS3DownLoad.jsx 인데 S3 관련 설정도 필요했고 S3 버킷의 폴더 안의 동영상 이름이 겹치지 않아야했기 때문에 uuid 라이브러리를 사용했다. S3로 영상을 올리는 기능은 'aws-sdk' 라이브러리를 사용했고 S3 계정은 노출되지 않아야하기에 env 파일을 만들어 깃에 올라가지 않게 구현했다.

 

 

자동저장 기능은 'file-saver' 라이브러리를 사용했는데

 

  .then(blob => {
    saveAs(blob, 'catbow.zip');

 

서버에서 받은 파일을 blob 형태로 바꾸어 saveAs 메서드를 사용해 이름을 지정해준 후 로컬에 바로 저장할 수 있게끔 구현했다.

 

 

 

 

 

 

 

---

 

 

 

느낀점

 

 

 

이번 작업은 앞으로의 확장성을 고려해서 폴더구조를 짜고 코드를 작성했다. UI 와 기능의 로직을 최대한 분리하고 한 컴포넌트에 코드 150줄 이상 넘지 않게끔, 남이 봤을 때 단번에 알아볼 수 있는 코드를 작성하려고 노력했는데 기대치에 완벽하지 않지만 전 프로젝트에 비해 많이 발전하고 성장했다 느낀다.

 

react-components의 장점을 살리고자 스타일을 재사용하고 theme이나 global 파일을 최대한 활용하고자 했고 이는 신경 쓴 만큼 잘 구현된 거 같아 기쁘다. contextAPI 도 최대한 남이 잘 알아볼 수 있도록 나누고자 신경썼는데 가독성면으론 예쁘게 구현했다 생각한다.

 

기능면에선 동영상을 S3로 연결하는 로직에서 가장 많은 시간을 소요했는데 생각보다 돌아가지 않는 예제들이 많아 적잖이 당황했었다. 기능 관련 라이브러리들은 많았는데 이상하게 돌아가지 않았다. 결국 돌고 돌아 다시 공식문서의 putObject 메서드를 사용해 성공을 했고, 공식문서의 중요성을 다시끔 느꼈던 경험이었다.

 

아쉬운 점은 버튼, 모달 관련 재사용과 동영상 유효성 로직이다. 컴포넌트를 늘리지 않겠단 생각으로 하나의 버튼에 toogle 기능을 넣어 분리했는데 이를 두 개의 역할을 하는 하나의 모달과 연결하려하니 로직이 너무 복잡해져 차라리 두 개의 모달을 만들어 사용하는게 더 낫지 않았나하는 후회가 들었다. 후에 모달은 재사용성 더 가능한 컴포넌트로 다시 코드를 작성해보려한다.

 

 

 

 

👇 관련 포스팅

 

CatBow Project 회고록

 

 

👇 전체 로직 볼 수 있는 깃

 

https://github.com/catbow/catbow-photo-converter

GitHub - catbow/catbow-photo-converter