axios post test(aka. 모임 게시글 추가하기!)

오늘은 하루종일 정말 하루종일 axios post통신 코드를 짰다.
CRUD라면 이젠 그래도 조금은 수월하게 하겠지했는데 이미지를 추가하게되면서 꽉 막혀버렸다😭

오늘 아침까지만해도 오늘 안에 추가 수정 삭제까지 다 테스트해봐야지!!했는데😂
밤이되어서야 이미지 Post하나 성공시키고 넘 기뻐서 폴짝폴짝뛰며 산책나왔다. 하지만 조금 걷다보니 바로 현실자각이됐고.. 이제 다시 들어가서 코드짜기 전 잠시 앉아서 블로그 쓰는 중이다🥴

서버팀과 소통하며 기능 붙이기를 오늘부터 시작하였는데, 많이 걱정했지만 역시 소통은 정말 중요한것인걸 다시 느꼈다.
나는 계속 내 코드가 문제라고 생각하며 혼자 씨름하고, 다른 프론트 분들에게 물어보고도 다녔지만, 결국 답은 서버와의 소통에있었다.

(물론 다른 프론트 분들의 도움과 깃헙의 코드들을 도둑질 해오지않았다면 나는 아직도 씨름중이었을것이다ㅎㅎ)

 

리덕스 모듈에서 액션, 액션크리에이터를 생성했다면 axios통신을 시켜준다.

location, meettime은 우선은 임의의 value를 넣어주었고

오늘 하루종일 post늪에서 헤매게 해준 주인공 boardImg는 addpost(게시글 작성)페이지에서 title, contents와 함께 액션을 dispatch해주었다.

어제 다른 프론트 분의 깃헙에서 이미지 preview구현 코드를 훔쳐왔고 그 preview로 불러온 이미지 파일을 boardImg에 넣어 서버로 보내주려고하였다.

계속 400에러가 뜨길래 나의 코드 문제라고 생각했지만 서버분과 얘기해보니 base64로 전달되는 이미지가 문제였던것..!

preview를위해 fileReader를 사용하여 이미지를 base64로 인코딩 해줬었다. base64형식으로 서버분에게 전달하니 문제였던것😭

 

유저가 이미지를 업로드하며 input값에 넣어준 파일을 file변수에 넣어주었다.

console에 찍힌 54번째줄의 0번째 인덱스가 boardImg에 들어갈 파일이름

아래의 15번째가 preview에서 가져가는 base64파일

 

이제

useState를 사용해 

boardImg에 file을 넣어주었다.

(들어갈 위치가 저기가 맞는건지는 잘 모르겠다🙄 우선 저기 넣어보고 테스트해보니 잘 되길래 룰루😙)

그리고 버튼에서 액션을 실행시켜준다!

메인화면에도 잘 들어와있다!

 

이제 내일은 location, datetime 넣어주는것과, 수정, 삭제를 구현해봐야한다. 

남들에겐 별거 아닌 코드일 수 있지만 나에겐 이만큼도 큰 발전이였다ㅎㅎ 

CRUD시작부터 막혔는데 앞으로 세세한 기능들 어떻게 넣어줄지 사실 걱정이 된다.

하지만 오늘처럼 해나간다면 이번 프로젝트를 마친 후엔 큰 성장이 있을거라 생각해 정말 기대중이다:)

이 설렘 잊지말고 내일도 더 개발스러운 하루를 보내야지💪🏻

오늘 하루도 멘탈 잘 잡고 코드 잘 짠 나에게 칭찬👏🏻👏🏻