(항해61일차) 220505 리액트 실전프로젝트 14일차

폼데이터로 데이터를 서버와 주고 받는 방식이 어려울 것 같다. 

우리는 필수정보를 받아 회원가입을 시킨 후 유저정보가 있는 상태에서 폼데이터에 추가정보를 작성하는 구조를 생각했는데, 폼데이터에서 post와 get방식의 요청만 가능하다는 문제가 있었다. 그래서 관련 내용을 찾아본 후 두가지 방법을 생각했다.

 

첫 번째 방법으로 post로 요청을 보내지만 method_field라는 것을 추가해 실제로는 put의 기능이 가능하도록 하는 방법을 찾았다. 하지만 이 방법은 restful api에 적합하지 않은 api를 사용해야 한다. 또한 json형식의 데이터와 파일을 한꺼번에 처리하는 방식은 서로 다른 리소르를 한번에 처리하기 때문에 적절한 설계가 아니라는 지적을 확인할 수 있었다. 

필수정보를 받은 후 로그인이 아닌 바로 추가정보를 받아 함께 유저정보에 저장을 시도하는 방법도 생각했다. 하지만 정보를 수정하기 위해서는 똑같이 폼데이터를 서버에 보내야하기 때문에 put메써드를 사용할 수 없다는 근본적인 문제는 해결되지 않는다. 

 

그래서 찾은 두 번째 방법은 아예 이미지파일을 전송하는 api를 따로 만드는 방법이었다. 다소 번거롭기는 하지만 처음부터 따로 저장해 관리한다면 위와 같은 문제가 발생하지 않을 것 이라는 생각이 들었다. 문제는 파일을 등록할 때 마다 서버에 업로드 한다면 사용자의 변심에 따라 쓸모없는 파일이 계속 업로드될 경우가 발생한다. 그래서 사진파일 등록시 데이터URL로 사진을 미리 보여준 후, 실제 업로드는 버튼 클릭 시 함께 이루어지는 방법을 사용하려 한다. 

 

https://codeutility.org/php-patch-and-put-request-does-not-working-with-form-data-stack-overflow/

php - PATCH and PUT Request Does not Working with form-data - Code Utility

https://mangkyu.tistory.com/218

[HTTP] 폼(Multipart/form-data) 요청이 GET, POST만 가능하고 PATCH, PUT, DELETE은 불가능한 이유

 

폼데이터 문제가 아직 발목을 잡고 있긴 하지만, 오늘 추가정보 페이지를 거의 구현할 수 있었다. 여러 방식으로 사용자가 정보를 입력할 수 있도록 하기 위해 코드를 다양하게 구성했다. 코드가 길어져 헷갈리기도 하고 처음 써보는 코드의 정보를 얻기 위해 이곳저곳 찾아다녀야 했지만, 다 만들어지고 나니 마음은 뿌듯하다.

이 맛에 코딩을 하는구나 싶은 밤이다.

 

내일 해야 할 일은 

1. 추가정보 페이지 정리하기 (태그 부분)

2. 로그인한 유저의 메인페이지 버튼 바꿔주기 

3. 상세페이지에서 유저 정보 받을 수 있도록 하기

이다. 그 후 마이페이지에서 유저 정보를 수정하며 이미지파일 업로드를 생각해야 할 것 같다. 이제 코드가 꽤 길어져 컴포넌트를 잘 나눈 후 작업을 진행해도 될 것 같아 고민이 된다.