결과물
https://youtu.be/E-haJWvqLO4

깃허브
https://github.com/guswls1419/Hanghae99-MiniProject-FE

프론트엔드와 백엔드의 첫 협업프로젝트가 시작되는 주였는데, 시작하기전에 아직 내 실력이 많이 부족하기때문에 팀원에게 피해가 되지않을지 많은 걱정을 하였던 것 같다.
걱정이 되기도 하였지만 또 한편으로는 기대,설레는마음도 공존했던 것 같다.

• 팀 별로 만들어볼 미니 프로젝트를 구상하고, 1주 동안 만들어 나갑니다.
  • 자유롭게 주제를 선정해주세요. 개발 Scope은 팀이 논의하여 정하면 됩니다.
  • 꼭 넣어야 할 기능을 특정해두지 않았습니다. 팀이 자유롭게 결정해주시면 됩니다.

이번협업은 자유주제로 진행되었고, 우리조는 버킷리스트를 기록할수있는 페이지를 만들기로 하였다.

👉 미니프로젝트 SA

미니프로젝트 발제가 끝난 후 백엔드 분들과 모여 프로젝트 회의를 진행하였고, 주제를 정하고 세부적으로 어떤기능을 추가할지에대해 의논하였다.
기대반 설렘반으로 시작한 프로젝트였는데 그래서였던것인지 자꾸 욕심이 났고 기능을 계속해서 추가해나갔다. 처음엔 아무생각없이 욕심만으로 이것저것 추가하였는데 회의가 마무리 될쯤 문뜩 이걸 다 해낼 수 있을까? 하는생각이 들었다.
그래도 시작느낌이 좋았다. 왠지 해낼수 있을것만 같은 느낌이었다.
아마.. 주특기 언어 훈련 후 처음으로 진행되는 프로젝트라 나스스로도 어느정도까지 작업을 해낼수있을지도 모르는 상태였기때문에 이런 패기가 있었던것 같다.

첫째날과 둘째날까진 View 작업(ui)을 완료하였고 셋째날부터 기능구현에 들어갔다.
View 작업까진 막힘없이 술술 진행되었으나 역시 기능구현에 들어가자마자 막히기 시작했다.
분명 redux를 이해했다고 생각했는데 실제로 프로젝트를 진행하니 알던것 마저 머리속에서 없어져 머리가 백지가 되어버렸다. 정말.. 멘붕이었다. 지금까지의 시간동안 나는 뭘 공부했던걸까 하는 생각에 자괴감이 들기도 하였다.
하지만 우리에게 주어진 시간은 일주일이란 시간뿐이었고 이상태로 멈춰 있을수 없기에 다시 처음부터 redux를 한번 쭉 훑어보았고, CRUD 작업중, C부터 차근차근 진행해 나가기로 하였다.
우여곡절끝에 CRUD작업을 나름대로 완료하여, 백엔드 분들과 서버연결을 해볼수있었다.

백엔드와 프론트엔드 협업 어려움의 시작

axios로 데이터를 전송해야한다는데....axios로 어떻게 데이터를 주고 받지..?
ajax만 배운상태였어서 axios 코드를 어떻게 짜야할지 정말 막막했다.
나중에 기술매니저님께서 axios사용법에 대해 알려주시긴하였지만, 기술매니저님이 알려주시기전에 백엔드 분들과 테스트를 해야했어서, 팀원분과 함께 구글링을 엄청나게 했었던것 같다.
구글링을 해서 겨우 서버와 통신에 성공하였고 이후 로그인부터, 버킷리스트까지 get,post,put,delete 하나하나 문제를 풀어나갔던 것 같다.

백엔드와 프론트엔드 협업을 하며 어려웠던점은 서로에대해 아직 전혀 알지못하는것 이었다.
어디서 어디까지가 백엔드와 프론트엔드의 역할인지 잘몰라서 회의를하는동안 약간 지체가 되었고,
또, api설계를 할때 필요한 api를 의논하여 추가하거나, 불필요한 api를 삭제를 하거나 해야하는데 잘몰라서 백엔드분들이 말씀하시는것을듣고 그냥 모두 네네 했던것같다.
그결과 결국 나중에 api를 추가해서 작업하는 일이 발생하기도 하였다.

그리고 무엇보다 가장 어려웠던점은 서버와의 연결이었다.
에러가 뜨면, 서버쪽에서의 오류인지 프로트단에서의 오류인지 확인하는것이 어려워 더더 시간이 오래걸렸던것같다.

하지만 이런 시행착오를 격으며 서버와 통신하는것에있어 좀더 이해를 하며 공부를 할수 있었던것같고, 이런식으로 코드를자면 안되겠구나 하는것을 느끼게 되었다.

6주차 회고

욕심과 의욕만 가득했던 한주였던것 같다.
현재의 나의 실력으로 일주일이란 시간동안 만들어내기 힘들었던 프로젝트였던것 같다.
처음 기능구현 계획한것에서, 프로그래스바와 댓글 수정기능을 제외하고 게시물 등록, 이미지프리뷰,이미지등록, 게시글 수정, 댓글 등록, 삭제 기능을 모두 완료하였으나 댓글을 입력후 db에서 불러와 ui에 붙이는 과정에서 비동기작업으로 인해 페이지가 렌더링 되지않는 문제에 봉착했다.

정말 살면서 밤새서 공부를 해본적은 단한번도 없었는데 이 오류를 해결하기위해 밤새서 공부하고, 찾아보려하였지만.. 결국 해당오류를 해결하지 못하고, 그냥 댓글기능이 없는체로 제출해버렸다.

버킷리스트를 생성할때 타이틀,이미지, 그안에 버킷리스트를 하나하나 추가한 후 타이틀,이미지,버킷리스트들을 한꺼번에 서버로 보내 생성하는 방식으로 진행하게되어, 배열안에 배열이생겼었는데
배열안의 배열만 추가되게한후 전체배열을 생성해야하는 이문제를 초반에 해결한다고 시간을 너무 많이 잡아먹어서 후반부에 시간이 많이 부족했던 것 같다.

물론 이번에 이렇게 많은 삽질과, 많은 오류를 접해보며 많은것을 배우고, 얻은것 또한 많다.
하지만 그것과는 별개로 많은 아쉬움이 남는 한주 였던것 같다.
잘하고 싶다. 잘해서 원하는 기능을 막힘없이 구현해나가고 싶다.
그러기 위해선 지금보다 더많은 공부가 필요할것 같다. 남은시간동안 더 열심히 react공부에 매진해보려한다. 할수있다!!!!!!!!!!!!!