230101 - 신년 카드 만들기

놀 때는 최선을 다하자😇

 

 

1월 1일은 놀기로 했다

 

NestJS로 DB 구현하다가 머리가 아파서 잠시 멈추고

 

저번달 24일에 컴포넌트를 만들어놨던 2회 코육대 신년 카드 만들기의 기능을 완성해봤다

 

 

배포: https://2024-new-year.vercel.app/card

🐉 2024 신년 카드 만들기

깃허브: https://github.com/dusunax/2024-new-year

 

 

 

놀면서 작업했기 때문에 완성도는 좀 부끄럽지만 코육대에 깃허브 & 배포 링크를 제출했다

 

그리고 카카오톡에서 다른 분들 작업을 봤는데

 

짧은 시간 내에 여러 요소들을 고려해서 프로젝트를 완성하고

 

회고까지 완벽하게 하는 모습을 보고 자극이 되었다🔥

 

 

 

하민님과 김아현님이 회고를 꼼꼼히 하셨는데

 

생각하지 못했던 이미지 압축이나 성능 최적화 내용을 보고 많이 배웠다

 

그리고 3D 너무 멋있다 (Spline Design 미쳤다)

 

회사에서 three.js랑 R3F 썼는데 아직 개인 프로젝트가 없다

 

블렌더로 모델 만들어서 프로젝트 만들고 싶다🥹

프론트엔드 최고

 

 

 

 

간단 회고

 

Mobile First

- 시간이 한정적이어서 기본구현에 집중해서 빠르게 작업해야 했다.

- mobile first로 카드를 쭉 늘어놓고 작업하고, 유사 기능끼리 묶어서 section을 만들었다.

- 훅을 분리하고, 요청에 대한 사항은 최대한 핸들러만 전달받도록 하고, 각 카드에서 불필요한 버튼들과 타이틀은 제외했다.

   ain't gonna need it!

 

 

이미지 저장하기

- divRef의 요소를 png로 저장하려 했을 때 외부 도메인 이미지의 CORS 에러가 발생했고, <img> 태그에 crossorigin 속성을 추가했으나 해결되지 않았다.

<img 
  crossorigin="anonymous" 
  src="..." 
  alt="2024년 신년 카드"
/>

 

- canvas에 이미지를 그려서 저장하려 했으나, 캔버스가 오염되어 이미지를 저장할 수 없었다

   - 오염된 캔버스에서 toBlob, toDataURL, captureStream을 호출 시 SecurityError 발생
      https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

Allowing cross-origin use of images and canvas - HTML: HyperText Markup Language | MDN

 

- 여기서 nextJS의 api를 사용해서 crossOrigin이 anonymous인 새 Image 객체를 만들어서 넘길 수 있었다

   - 프론트엔드 작업을 하다보면 내가 작업할 수 있는 코드가 클라이언트에 한정되어 있다는 느낌을 받을 때가 많은데, nextJS를 사용하면 더 자유롭게 구현할 수 있다. 좀 더 잘 다룬다면 할 수 있는 작업이 훨씬 많아질 것!

- 이미지 생성과 로딩에 시간이 걸리기 때문에, 이미지 생성부터 onLoad까지 isLoading 상태를 추가했다.
   (애니메이션, 토스트 메시지)

 

느낀 점

 

- 같은 프롬프트를 입력했을 때, dall e 2랑 3의 차이가 어마어마했다. AI 발전이 무서울 만 하다

   - 3D 모델도 만들면 다용도로 활용할 수 있겠다 (지금도 3D 랜더링 이미지는 너무 좋음)

dall e 2로 생성했을 때

dall e 3로 생성했을 때

 

 

- dall e 3는 1024x1024, 1024x1792, 1792x1024 이미지를 만드므로 용량 최적화가 필요! => sharp

 

- 다음에 사용자가 업로드한 파일로 이미지 생성하는 프로젝트 만들어보자

- 저장할 때 외부 이미지 CORS 문제가 있었는데, nextJS로 proxy를 간단하게 구현할 수 있었다. 
   (todo: next에 익숙해지기 + 좋은 점 찾기 => 좀 더 자유롭게 FE+BE를 개발하는 점)

 

- 카카오톡으로 링크 열었을 때 저장 기능 왜 실패하는 지 찾아보자

 

- 아직 시야가 좁다 (넓게 생각하기)