[동아리 소개 페이지 만들기] 5. 지원서 데이터 전송 기능 구현하기

1. 지원서 데이터 전송하기

1) 문제

이 부분에서 많이 고민하고 논의했다. 가장 많이 했던 질문은 이 질문이었다.

"지원 데이터를 어떻게 받아야 할까?"

여기서 서버가 절실히 필요해서 서버 공부도 병행하려고 했지만 3주가 조금 안되는 시간안에 리액트를 처음 입문하면서 서버까지 공부하기엔 시간이 도저히 안났다. 회의결과 다음 세 가지로 의견이 좁혀졌다.

1. 그래도 어떻게든 서버에 DB를 구축해서 JSON파일과 마크다운문서로 데이터를 받고 싶다.
2. 시간이 없으니 구글폼으로 받자.
3. 서버까지는 아니어도 지원서 페이지를 만들었으니 활용할 방안을 찾자.

이미 지원서를 열심히 만들었으니 최대한 활용하고 싶어서 3번 의견에 동의하여 대안을 찾아보았다.

구글 스프레드시트 API를 이용하면 지원은 Apply 페이지에서 구현한 Form양식으로 받을 수 있고 form태그의 submit 기능으로 formData를 구글스프레드시트로 전송할 수 있었다.

2) formData 전송하기

formData는 이미 useState의 onChange 이벤트 핸들러로 렌더링되어있어 데이터 전송 기능만 구현하면 된다.

데이터 전송은 axios 라이브러리를 이용하여 post 방식으로 전송했다. 이 과정에서 HTTP 통신의 개념과 비동기 서버 통신의 개념에 대해 알아보았다.

 

 

2. 문제 해결 과정에서 배운 것들

• axios 라이브러리
• HTTP 서버 통신의 GET, POST방식
• 비동기 서버 통신

https://soojae.tistory.com/67

[React] 구글 스프레드 시트 API 이용하기(with google-spreadsheet)

https://veneas.tistory.com/entry/axiosjs-GET-POST-%EB%B0%A9%EC%8B%9D%EC%9C%BC%EB%A1%9C-%EC%84%9C%EB%B2%84%EC%99%80-%ED%86%B5%EC%8B%A0%ED%95%98%EA%B8%B0

[axios.js] GET, POST 방식으로 서버와 통신하기

https://ghost4551.tistory.com/139

[JavaScript] 비동기 HTTP 통신 종류 (ajax, fetch,axios)

 

3. 느낀 점

백엔드 서버가 아니라 프론트 서버인데도 엄청 할게 많고 어려웠다. 마지막에 밤을 초반보다 더 많은 시간을 투자하여 공부했다. 하지만 데이터 전송이 성공했을 때 너무 뿌듯했다. 너무 빠른 시간에 리액트랑 서버 통신을 한꺼번에 공부하다 보니 머릿속이 뒤엉킨 기분이다. 이 프로젝트가 끝나면 구현했던 기능들을 하나하나 제대로 공부해보고 싶다.