문제제기

졸업작품을 만들면서 클라이언트의 프로필 사진을 포함한 정보를 저장하고, 이 사진을 다시 클라이언트가 확인 할 수 있도록 하는 기능을 만들고자 합니다. → 회원가입 기능

근데 프로필 사진을 저장하기 위해서는 파일을 받아서 Frontend → Backend 로 넘겨줘야 하고,

Frontend 에서 사진을 보여주기 위해서는 Backend → Frontend 로 파일을 넘겨줘야 하는데, 해당 과정을 진행해본적이 없어서 정리하고 합니다.

시행착오

구성

졸업작품의 기능 구현 내용이 있으므로 이를 예로 들어서 설명하도록 하겠습니다.

<aside> 💡 실제 수행이 이루어질 때, 어떤 방식으로 이루어 질지 먼저 구상해보면

</aside>

회원가입하기 (Frontend → Backend)

1. API 요청 : BackEnd가 이미지 파일을 포함하는 POST 요청을 수신
2. 내부 로직 수행 : Back End는 해당하는 POST 요청을 DTO로 받고
   1. File 타입인 경우 Image File인지 확인하고 맞는 경우 파일 저장 및 경로를 반환해 데이터베이스 저장
   2. Text 타입인 경우 해당 필드의 정보를 데이터베이스 저장
3. 요청이 정상적으로 수신되었다는 Response 반환(302)

해당 회원 정보 보기 (Backend → Frontend)

회원의 프로필 이미지와 다른 정보들을 다 받아오고 싶다면 API 요청을 2개를 해야 한다.

• 회원의 DB정보 가져오기
  1. API 요청 : Back End가 저장한 회원의 정보를 달라고 하는 GET 요청을 수신
  2. 내부 로직 수행 : Back End는 해당하는 GET 요청을 받고
     1. 데이터베이스는 GET요청과 같이 온 파라미터를 통해서 조회 수행
  3. Response 반환 발생
     1. 조회한 내용의 컬럼이 경로가 아닌 경우를 담아 Content-Type을 json으로 Response 반환