본문 바로가기
Project/Blog Thumbnail Maker

[Blog Thumbnail Maker] 썸네일 메이커 기능 개선 프로젝트

by Haren 2022. 3. 28.

 

[Blog Thumbnail Makr] 썸네일 메이커를 만들어보자

근 3개월 간 블로그에 포스팅을 작성하지 않았었다. JLPT N2 시험 준비로 프로젝트와 블로그에 신경을 쓸 여력이 없었기 때문인데, 2021년 12월 5일, 2021년 2회차 JLPT 시험을 무사히 치르고 나서 시간

heibondk.tistory.com

▲ 이 프로젝트에 대한 마지막 글 (...)

 

작년에 호기롭게 시작한 썸네일 메이커 프로젝트에 다시 한 번 불을 지펴볼까 하는 마음으로 잡았다. 단순히 '썸네일을 만든다' 의 기능은 구현은 했지만서도, 썸네일 배경 선택 폭이 한정적인 점, 별도의 저장 버튼이 없다는 점, 텍스트가 길어지면 썸네일을 벗어난다는 점에서 기능 개선의 필요성이 뼈저리게 느껴졌다. 왜냐면 매번 포스팅 할 때마다 내가 쓰니까...

 

React.js를 공부해보겠다고 시작한 프로젝트인데, 한 6개월 정도의 시간동안 React.js는 뒷전이고 C++을 공부해서 알고리즘 공부에 매진해왔다. 따라서 지금 React.js로 다시 프로젝트를 시작하자니 답답하고 막막한 감정이 앞서기도 한다. 하지만, 언제까지나 알고리즘 문제 풀이만 할 수도 없는 노릇이라 감을 살릴 겸 이 프로젝트를 무덤에서 꺼내왔다.

 

✍️ 프로젝트를 시작하며

❓ 추가하고 싶은 기능들

  • 썸네일의 배경의 선택 폭을 이미지까지 넓힌다.
  • 완성된 썸네일을 저장할 수 있는 버튼을 추가한다.
  • 썸네일 Canvas의 크기를 사용자 임의로 조절할 수 있게 한다.
  • 텍스트 위치 및 폰트와 사이즈를 조절할 수 있게 한다.
  • 서버에 올려 나 뿐만 아니라 다른 사용자들도 마음껏 사용할 수 있게 한다.

🤔 기능들을 추가하기 위해서 필요해 보이는 것

  • HTML Canvas Element에 대한 이해
  • Save-Filter와 React 컴포넌트를 이미지로 뽑아주는 dom-to-image
  • Node.js의 Express.js 
  • useState, useRef와 같은 React Hooks에 대한 확실한 이해
  • etc.

👀  마음가짐

  • 시간이 걸리더라도 확실한 이해를 기반으로 하는 프로젝트를 진행하자.
  • 개발 과정에서의 이슈와 고민, 해결 방법을 블로그에 착실히 정리하자.
  • branch, fetch 등등... 다양한 git의 기능을 익혀 십분 활용하자.
  • 포기하지 말자, 내가 할 수 있는 것은 오직 멈추지 않는 것 뿐이다.

⏰ Dead - line

시간이 걸리더라도 확실한 이해를 기반으로... 어쩌구의 마음 가짐에 위배되는 것 같지만 어쨌든 프로젝트에는 기한이 있어야 한다.

그렇지 않으면 이 프로젝트는 10년 뒤에나 끝낼 수 있을 것 같다.

2022년 7월이 오기 전까지

 


그럼 프로젝트를 진행하면서 생기는 고민과 이슈, 그리고 새로이 배운 것들로 다시 돌아오겠습니다.