20220208_TIL : 파일 업로드를 하려면...

권지현·2022년 2월 8일
0

오늘은 텍스트 데이터가 아닌 이미지 등의 파일을 올리기 위한 과정을 배웠다.

파일을 저장하는 과정에서 기존 DB에 데이터를 저장하는 방식과는 다르게, 브라우저를 통해 이미지를 올리고 저장을 요청하면 벡엔드에서 STORAGE 라는 파일 용량을 수용하기 위한 대용량 컴퓨터에 따로 저장되고, 프론트엔드로는 그 저장소에 담긴 위치를 URL로 보내주게 된다.
받아온 URL을 게시물 등록이나 수정 등의 과정에 쓰인다면, 이 주소를 변수에 담고 기타 다른 텍스트들과 함께 데이터 저장 요청을 하면 DB에 객체 형태로 저장되는 것이다.
👉🏻 파일 원본 - storage, 파일이 저장된 storage의 주소 - DB에 저장

데이터를 업로드하기 위해 사용하는 언어 중 Graph-QL은 기본적으로 파일을 업로드할 수 있는 기능을 제공하지 않기 때문에 Apollo-upload-client 를 이용해서 파일을 업로드 할 수 있다.

  • createUploadLink{uri : "주소"} : 파일을 저장할 주소 설정
  • UploadFile{ { variable : ... } } : 업로드할 파일 연결, 파일이 정해져있지 않기 때문에 variable 로 파일을 변수로 담아서 보내준다.

💡 TIP !
이러한 저장소(storage)를 제공하는 업체들이 있고, 이를 CSP(Cloud Service Provider)라고 부른다.
대표적인 저장 플랫폼으로 GCP, AWS, AZURE 등이 있다.


👩🏻‍💻 오늘의 TIL ...

파일을 업로드하고 벡엔드로 저장 요청을 보내기 위한 코드들이 그동안 많이 연습해 온 과정에서 새로운 도구로 데이터를 처리하는 과정이 추가되었다. 그 동안 관련해서 코드를 연습해봤기 때문에 코드를 가독성있게, 중복해서 구현되지 않도록 간략히 짤 수 있도록 노력하자.

✔️ 어제 못했던 API 구상
✔️ 이미지 업로드 연습
✔️ .env 환경변수
✔️ 오늘 배운 부분으로 구현하고 싶었던 리스트 주말까지 도전 💪🏼

profile
FE 개발자 성장 기록 👩🏻‍💻

0개의 댓글