(항해60일차) 220504 리액트 실전프로젝트 13일차

유저의 추가정보 받는 기능을 구현하고 있다. 예약 기능과 맞물려 계속 서버에 보낼 데이터 내용이 변경되면서 데이터를 받을 페이지도 몇 번 수정했다. 처음부터 구조를 제대로 잡는 것이 아주 중요한 부분임을 느끼고 있다.

평소대로라면 div안에 input이나 button등의 요소를 넣어 페이지를 구성했겠지만, 보내야 할 데이터 중 이미지파일이 포함되어 있어 폼데이터를 사용하기로 결정했다.

 

<form>요소의 중요한 속성 중 하나인 enctype 때문인데, enctype='multipart/form-data'로 지정해 데이터를 전송할 경우 데이터는 여러 파트로 나뉘어 서버에 전송된다. 즉, 두 형태의 데이터 (이미지파일 / 유저가 작성한 내용) 를 한 번에 서버로 보낼 때 사용할 수 있는 방법이다.

폼데이터로 서버에 데이터를 보내기 위해서는 폼데이터 객체를 선언하고 .append()로 보내고 싶은 데이터를 추가해 서버와 통신한다. 주의할 점은 폼데이터 전송 시에는 get, post로만 서버와 통신할 수 있다.

 

이런 식으로 폼데이터는 만들었지만, 아직 추가정보 페이지에서 할 일이 많이 남아 있다. 유저에게 다양한 방식으로 정보를 받아야 하기 때문에 내일은 인풋, 셀렉트 등의 요소를 사용해보려 한다. 또 해시태그와 비슷한 방식의 태그를 구현해보려 한다. 또 아직 토큰을 어디에 저장할지 정확하게 정하지 못해 이 부분도 생각을 해야 할 것 같다. 

 

알고리즘 문제를 풀다보면 시간이 너무 많이 지나가있다. 어제도 알고리즘 문제를 풀다 잠을 늦게 자 오늘 컨디션이 좋지 않았다. 컨디션 조절에 신경을 써야겠다.