지금까지 공부한 내용은 어디까지나 스스로 제 아이디어를 구현할 수 있을 정도로 도달하기 위해 백엔드를 얇고 넓게 공부하고 있다는 점. 가벼운 느낌으로 제 목표에 도달하는 과정을 일기장 형식으로 쭉 메모하고 있습니다. 그냥 제 의식의 흐름대로 편하게 작성하다가 오류가 발견되면 나중에 정정하고 다시 복습하는 형태로 진행하려고 합니다. 그런 의미에서 오류가 있다면 지적을 부탁드립니다. (따끔한 지적도 잘 받아들일 수 있습니다. 😁)
이번 풀스택 공부는 기본기 다지기! 이미지 업로드 기능 구현과정이 매끄럽지 않아서 Web API 중에서 File, FileReader, FormData 세가지의 인터페이스를 다루는 과정에서 내가 모르는 부분들이 있었기 때문에 문제해결이 굉장히 느렸고 진행 속도가 더디면서 많이 우왕좌왕 했기 때문이다. 이번 개발 일지는 작업에 대한 결과보다는 공부한 내용에 대한 기록 및 요약으로 마무리 될 것 같다.
서버에서 이미지 업로드 API 개발하기
서버에서 이미지 업로드를 테스트 하는 API가 있어야 하니 각종 예제와 샘플들을 참고해서 간단히 구현하였다.
cloudinary SDK를 이용하여 이미지를 업로드하는 유틸리티를 작성하고,
이미지를 업로드하는 Mutation 스키마를 작성했다.
Mutation 타입의 uploadImage 필드에 정의해둔 ImageInput 양식대로 인자를 넘기도록 정의한다.
리졸버에서 이미지의 Path를 인자로 전달받아 Cloudinary SDK를 이용해 업로드 후
Prisma API 를 이용하여 DB에 데이터가 담기도록 간단하게 작성했다.
이제 클라이언트에서 이미지 업로드 컴포넌트를 만들려고 했으나...
Web API 중에서 File, FileReader, FormData 를 다뤄야 할 것 같아서 React.js 컴포넌트를 만들다 말고 중간에 세가지 인터페이스를 공부하기로 하였다. 뭐 하나를 만들려고 하면 공부할 거리가 계속 발견되어서 목표 이루기가 점점 뒤로 밀려나는데... 😥
공부할 때 참고한 사이트
이미지 업로드 기능를 구현하기 위해 사용해야 할 기술이 무엇인지 파악을 했고 이 기술들이 어떤 단계에 있는 명세인지 알아야 하고 어느 브라우저들을 지원하고 있는지 체크하기 위해 다음과 같은 사이트를 참고 했다.
AJAX로 폼을 서버에 전송을 할 수 있는 인터페이스. JSON 구조로 키-값 데이터 구조를 갖고 있고, FileReader 인터페이스를 이용하여 base64, buffer, binary 등등 다양한 형식으로 전송이 가능하나 form, input[type="file"] 폼을 통해 직접 업로드하는 것도 가능함.
간단 회고
이번 주말은 이미지 업로드 기능을 구현하려다가 복합적인 문제들을 만났고 이를 해결하는 과정이 올바르지 못했음을 스스로 인정을 했다. 그리고 다시 이미지 업로드와 관련하여 개발자의 블로그, MDN, 캔아이유즈를 참고하여 위에서 나열한 Web API 들을 공부하고 결과적으로 삽질 끝에 서버에 이미지를 업로드하는 것을 성공하였다.
완전히 숙지하고 이해할 때까지 버퍼가 무엇이고 이진법이 무엇인지 조금 더 파봐야겠다는 생각이 들었다. 과정이 다소 엉성하더라도 목표하고 계획했던 것들을 백마디의 말을 하는 것보다 직접 실현해보려고 노력하는 것이 중요하다고 생각한 요즘이었다.
Want to print your doc? This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
