TIL

풀스택 공부 - 5회차 풀스택 공부 - 4회차 풀스택 공부 - 3회차 풀스택 공부 - 2회차 풀스택 공부 - 1회차 풀스텍에 도전 하는 이유 개발일지 - body parser

Explore

풀스택 공부 - 5회차

지금까지 공부한 내용은 어디까지나 스스로 제 아이디어를 구현할 수 있을 정도로 도달하기 위해 백엔드를 얇고 넓게 공부하고 있다는 점. 가벼운 느낌으로 제 목표에 도달하는 과정을 일기장 형식으로 쭉 메모하고 있습니다. 그냥 제 의식의 흐름대로 편하게 작성하다가 오류가 발견되면 나중에 정정하고 다시 복습하는 형태로 진행하려고 합니다. 그런 의미에서 오류가 있다면 지적을 부탁드립니다. (따끔한 지적도 잘 받아들일 수 있습니다. 😁)

이번 풀스택 공부는 기본기 다지기! 이미지 업로드 기능 구현과정이 매끄럽지 않아서 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 컴포넌트를 만들다 말고 중간에 세가지 인터페이스를 공부하기로 하였다. 뭐 하나를 만들려고 하면 공부할 거리가 계속 발견되어서 목표 이루기가 점점 뒤로 밀려나는데... 😥

공부할 때 참고한 사이트

이미지 업로드 기능를 구현하기 위해 사용해야 할 기술이 무엇인지 파악을 했고 이 기술들이 어떤 단계에 있는 명세인지 알아야 하고 어느 브라우저들을 지원하고 있는지 체크하기 위해 다음과 같은 사이트를 참고 했다.

⁠

MDN - Web API

⁠

Can I Use

⁠

간단히 요약하자면 FIle, FileReader 인터페이스들은 표준화 제정 단계에서 초안(WD) 단계에 있고 FormData 는 Living Standard 단계로 지금 마음 껏 사용해도 되는 인터페이스다. 캔아이유즈에서 알려주는 버그 내용을 미리 숙지했다.

Blob 객체란?

⁠

참고1

⁠

참고2

⁠

Blob은 자바스크립트에서 Binary Large Object 의 줄임말이다.

비디오, 이미지 등 멀티미디어 데이터를 다룰 때 사용함.

파일류의 불변한 미가공 데이터인 텍스트와 이진 데이터의 형태를 갖고 있음.

File 인터페이스가 Blob을 상속 받으므로, FIle 인터페이스는 Blob 객체라고도 함.

Blob 데이터는 FileReader 인터페이스를 사용하여 얻을 수 있다.

File

⁠

참고1

⁠

파일에 대한 간단한 정보를 제공한다.

JavaScript 가 내용에 접근할 수 있는 방법을 제공한다.

반대로 데이터는 숨어 있다. 이걸 읽으려면 FileReader 객체를 이용해야 한다.

File 객체는 FileList 객체 안에 포함 된다.

FileReader

⁠

참고1

⁠

파일을 읽는 방법이 네가지다.

readAsText

외계어로 나옴

텍스트 파일을 읽을 때 사용

readAsDataURL

base64 로 인코딩된 문자열

readAsArrayBuffer

ArrayBuffer 라는 객체 하나로 반환함.

데이터를 일정한 크기로 조금씩 서버로 보낼 때 사용.

readAsBinaryString

바이너리는 0과 1로 이루어진 이진법을 의미

이진 형태로 구성 되어 있음. 이걸 문자열로 볼 수 있다는 거임. (외계어로 🤑)

이벤트 핸들러에 콜백 함수를 붙여서 읽어야 함.

FormData

⁠

참고1

⁠

참고2

⁠

AJAX로 폼을 서버에 전송을 할 수 있는 인터페이스. JSON 구조로 키-값 데이터 구조를 갖고 있고, FileReader 인터페이스를 이용하여 base64, buffer, binary 등등 다양한 형식으로 전송이 가능하나 form, input[type="file"] 폼을 통해 직접 업로드하는 것도 가능함.

간단 회고

이번 주말은 이미지 업로드 기능을 구현하려다가 복합적인 문제들을 만났고 이를 해결하는 과정이 올바르지 못했음을 스스로 인정을 했다. 그리고 다시 이미지 업로드와 관련하여 개발자의 블로그, MDN, 캔아이유즈를 참고하여 위에서 나열한 Web API 들을 공부하고 결과적으로 삽질 끝에 서버에 이미지를 업로드하는 것을 성공하였다.

⁠