기업협업 프로젝트 회고록

1. About this project

• 개발기간: 2023.07.31 ~ 2023.08.24
• 회사 보안상 의사코드로 대체

1. 컴포넌트 생성 위해 새로운 tsx 파일 및 css 파일 생성

//컴포넌트 불러올 파일
1. 스크린샷으로 만들 컴포넌트에 ref 전달
2. 스크린샷을 만드는 함수에 만들어진 썸네일을 useState에 저장
3. 썸네일 보여 줄 컴포넌트에 썸네일 전달 

//스크린샷으로 만들 컴포넌트 파일
1. 라이브러리 사용하려고 만든 custom hook import
2. 부모에게 props 받아오기
3. 스크린샷용 ref 선언 후 이미지화해야할 부분에 적용
4. import 해온 custom hook를 통해 라이브러리 사용
5. forwardRef 사용해 컴포넌트 export

 

1-1. 기업의 PET 분석

a. Products

• 템플릿을 사용해 누구나 쉽게 원하는 콘텐츠를 제작/공유할 수 있음
• 만들어져있는 콘텐츠들을 쉽게 저장하고 공유하며 소소한 재미를 소비할 수 있음
• 콘텐츠는 있지만 코딩을 못하는 사람과 코딩은 할 수 있지만 콘텐츠가 없는 사람을 중개

b. End_User

• 컨텐츠 소비자 : 자신을 표현하고자 하는 욕구가 있는 사람
• 컨텐츠 창작자 : 인터랙티브 웹 컨텐츠를 제작 및 게시하는 이용자.
• 메타 유저 : ‘MZ 세대’를 타겟하는 광고주.

c. Tech : front end 가 사용할 기술스택

• Next.js, Typescript, HTML, CSS, CSS module 등
• 협업 툴 : git & github, slack, trello, notion, VScode, figma

 

1-2. 그럼 내가 구현해야할 기능은?

a. 기획

• 콘텐츠의 썸네일을 모든 유저가 동일한 기본 이미지로 적용되어있었던 것을 사용자가 자신만의 창의적인 내용을 작성한 화면으로 변경
• 라이브러리를 통해 사용자가 콘텐츠에 참여한 내용을 이미지화 하여 그것을 썸네일로 설정할 수 있도록 추가

b. 기대효과

• 사용자 참여를 촉진하여 콘텐츠에 대한 시각적인 표현을 더욱 풍부하게 보여줌
• 콘텐츠를 더욱 다양하고 맞춤화된 방식으로 나타낼 수 있는 기회를 제공

 

2. 구현한 내용

3. 해당 작업을 하면서 생겼던 이슈사항

a. dom-to-image 라이브러리를 사용하는 과정에서 이미지 CORS 에러가 발생

• 여러 이미지들의 경로가 local과 s3로 관리되는, 두 가지 종류로 나뉘어 있고 경로마다 필요한 옵션이 달라서 발생
• 팀장님과 논의 후 이미지 중에서 유일하게 local에 있던 이미지를 s3에 올려 다른 경로와 일치하도록 수정하여 CORS 에러를 해결하기로 결정
• 유저가 업로드한 이미지를 formdata로 만들어 백엔드에게 새로운 API를 받아와 이미지 이름에 들어갈 날짜와 이미지를 해당 API로 post 요청
• 이미지가 Amazon S3에 올라가고, 생성된 CDN 주소를 받아와 이미지 URL 경로를 일치시켜 CORS 에러 해결

 

4. 해당 작업을 통해 알게 된 내용

(매주의 회고록을 작성하면서 느낀점을 수도 없이 적었기 때문에 프로젝트 회고록에서는 간단하게 작성)

next.js의 routing 방법

redux의 saga와 function* 제너레이터 함수

ref와 fowardRef

HTMlelement

css 모듈과 부트스트랩

dom-to-image 라이브러리

github에서 pr을 올릴 때 비교대상브랜치를 변경해서 올릴 수 있다는 것

vscode 확장자 중 git graph

Text-stroke

CORS error

cdn