😳 느낀 점
코딩으로 그림판을 만들 수 있을 줄이야! 보기에는 간단해 보여도 코딩하는 건 정말 복잡했다. 세상에 나와있는 작은 애플리케이션 하나에 얼마나 많은 개발자들의 노고가 들어갔을지… 깊이 이해하게 됐다. 😂
🧐 기여도 100% 작업?
노마드 코더 강의를 듣고 나서 내가 직접한 것은 다음과 같다.
- 지우개( 하얀색 → 바탕색이랑 연동 ) 만들기
- 동그라미, 네모 도형 만들기
- 텍스트 폰트 사이즈, 굵기 변경할 수 있는 기능 넣기
- 투명도 설정할 수 있는 기능 넣기(Range)
- CSS로 Input range 스타일 바꾸기
- 모달창 만들어서 넣기
- 기본 커서 변경하기 + 툴 버튼 클릭하면 그에 맞는 커서로 변경하기
- 반응형으로 만들기
- 터치 기능 넣기
- 그림판 디자인 (CSS)
- 중복 코드 깔끔하게 만들기 (ex. const abc = canvas.value = widthValue 이런 식의 간단한 작업)
구현하고 싶었던 기능은 거의 다 구현한 것 같다. 추가하고 싶은 기능이 생기면 또 업데이트 해봐야지.
🤓 글을 마치며
허리 부상(아직도 안 나음😭) + 생각보다 어려움의 콜라보로 생각보다 오래 걸렸다. 작업에 집중하느라 그동안 블로그 글도 못 적었다.
처음 써보는 기능들이 많아서 구글에 검색하고 이해하고 적용하는 게 쉽지 않았지만, 힘들었던 만큼 완성하고 나니 뿌듯하다.
이걸 응용해서 움직이는 배경, 모션 같은 것도 만들던데 다음에 기회가 된다면 직접 만들어보고 싶다.
포토샵 작업까지 일일이 해야 해서 오래 걸리겠지만… 아니면 오픈 소스로 만들어진 걸 응용해 봐도 재밌을 것 같다.
👇 아래 사이트 참고해서 나중에 꼭 해볼 것!
Canvas_API
이제 바닐라 자바스크립트로 간단한 게임 하나 만들고 리액트로 SPA 만들어야지!! 💪