[위코드] 7주차 회고록

2차 프로젝트의 첫주차가 끝났다. midterm 기간에 모든 수업은 종료 했고 그 이후로는 개인 학습과 프로젝트를 진행 했다. 프론트 수가 적다보니 백엔드 속도를 못 따라가고 있는 상황이 많지만 사회에 나가면 이보다 더한일도 있겠지 하면서 좋게 생각하면서 프로젝트에 임했다. 

 

‘모바일 웹으로 레이아웃 구성하기’

이번 프로젝트의 내 스스로 다짐했던 점은 1차때처럼 레이아웃에 시간을 쏟지 말자였는데, 그걸 실천하기 위해 우리는 모바일 웹을 구현하기로 했다. ui의 모티브가 된 사이트는 강남언니였다. 앱처럼 구현을 하면서 옆에 빈 부분은 광고를 넣는 것으로 기획 했다. 그러면서 이런저런 기능들을 많이 넣을 수 있었고 이번에 내가 맡은 부분은 크게 폼데이터를 이용해 이미지 post 하기, 카카오페이 api 연결해 결제 시스템 구축하기였다.

 

‘폼데이터를 이용해 이미지를 전송해보자’

제일 처음엔 이미지 전송 뭐 어렵나 하고 생각을 했었는데 일단 기본적으로 보내는 형식부터가 달랐고 dom 접근을 해야하는 점도 달랐다. 또 content-type 에서도 form type으로 보냈지만 이것 마저도 에러가 있어서 한참을 헤맸다. 이 부분은 기술 블로그를 작성하면서 자세히 써보려고 한다. 전전기수에서도 같은 에러가 났었다고 했는데 블로그에는 없어서 정말 말그대로 삽질을 했기 때문에 다른 사람들은 그러지 않았으면 하기때문이다.

 내가 구현한 기능이 안된다면 우리는 console을 찍어 확인해본다. 하지만 폼데이터는 단순히 console.log(formdata)하면 어떠한 값도 안나오는 것이다ㅜㅜ 알아보니 폼데이터는 console을 좀 특이하게 찍어야했는데 이부분도 기술 블로그로 다뤄보고 싶다. 이렇게 찍으면 된다 라는 말은 있지만 왜 그렇게 찍어야하는지에 대해선 언급이 없었기때문이다. 이렇게 삽질을 하며 보낸 폼데이터였음에도 불구하고 백엔드와 붙여볼 땐 또 다른 에러가 났었다..

 

‘카카오페이 api를 연결해보자’

카카오페이 api를 이용해 결제 시스템을 만들어보자는 기획이 있었다. 1차 프로젝트에는 시간이 부족해 결제 페이지를 넘어가지 못했었는데, 이번에는 수월하게 결제까지 진행할 수 있었다. 아쉬웠던 점이라면 point로 결제하는 방법도 진행해보고 싶었는데 시간상의 문제로 진행을 하지 못했던 것이다. 

 만들어져있는 api를 사용하는 거니 역시나 이번에도 쉬울 것이라고 생각을 하고 진행을 했다가 하루종일 붙잡고 있었다. 대부분 토스 api를 사용하기도 했고 axios를 주로 사용하고 대부분의 예시자료가 카카오페이의 예시를 그대로 긁어와서 fetch를 사용하는 우리와는 조금 달랐다. 그리고 어드민키를 못찾아서 한참을 헤맸다.. 심지어 어드민 키가 중요한 건지도 몰라서 그대로 코드로 올릴 뻔 했다. 

 카카오페이에서는 api를 2개를 제공하고 있는데 처음 사용해보는 우리팀은 프론트쪽에서는 우리가 2개를 다 한다고 알고 있고 백엔드 쪽에서는 백엔드가 2개를 다 한다고 알고 있어서 초반에 서로 말 못할 고충을 겪었다. 이 부분을 진행하면서 프론트와 백엔드의 경계는 서로 합의 후 정하는 것이라고 느꼈다. 소통의 중요성 또한 다시 한번 느끼면서 아는게 많아야 서로 덜 고생하는 것도 느꼈다. 그리고 삽질을 오래했기때문에 이제는 안 헤멜것 같다.

 

이제 위코드의 생활은 1주일 남았고 그 이후로는 4주동안 기업협업을 나간다. 그래서 다음주는 위코드 생활과 프로젝트를 정리 하면서 기업협업을 시작하는 주로 알차게 보낼 수 있도록 노력해야겠다.