WIL 06 미니프로젝트2 회고록

 

미니프로젝트 보여줘 홈즈 

다방 과 같은 집을 구하거나 입주자를 구하기위한 소셜 커뮤니티 사이트이다.

 

요번주는 그전주에 배운걸 프론트엔드 +백엔드 협업 과정을 배웠다. 안그래도 그전주까지 파이어베이스를 이용하여 서버와 연동하고 데이터상태관리, 컴포넌트 구성등을 따라가느냐고 복습할시간도 없고 정리할시간도 많이 없었는데 그걸 이용해 파이어베이스를 버리고 백엔드로 서버를 구축하고 DB 를 만든걸 써야했는데, 처음 2틀간 그전에 배운걸 조금 다시 복습을 하면서 큰틀은 지난주걸 참고하고 그대로 쓰되 이해하면서 처음부터 다시 틀을 잡았다.

 

우리가 필요한 컴포넌트와 페이지를 와이어프레임에 넣었고, api 를 통해 무엇을 백엔드와 프론트간에 똑같이 써서 request,response를 받을지 정하였다. 처음이라 그런지 감이 잘 없지만 1주차 미니프로젝트를 생각하며 정했다. 로그인,회원가입, 게시글작성, 수정, 삭제 에 대한 api 를 정하고 무엇을 넘겨주고 받을지에 대해서 간단하게 구상하여 적었다.

 

일단 이렇게 와이어프레임+api 를 정한후 각 프론트엔드 와 백엔드로 나누어 이야기를 한후 진행해보기로했다. 프론트인원은 나포함 2명이였기때문에 다른한명과 어떻게 나눌지 어디부터 손을 댈지 이야기를 했고, 먼저 제일필요한 로그인, 회원가입, 메인화면을 구상하기로했다. 서버와 연동하는건 둘째치고 우선 뷰와 컴포넌트를 짜야하는게 우선이고 다만들고 어떻게 서버와 연결할지, 기존에 배운 파이어베이스에서 어떻게 바꿀지를 이야기하였다.

 

그렇게해서 시작한 시간이 5시정도 였던거 같다. 밥먹고 제대로 시작한게 저녁6시 였고, 협업을 위해 깃허브를 미리 구축하기로했다. 처음에 늦어야 2시간정도만 걸릴거라고 예상한거와 달리 새벽2시까지 붙잡아서야 에러없이 branch 나 main을 default로 설정후 push, pull 이 잘되었다. 화요일부터 뷰단을 만들기 시작하였는데 최하위 컴포넌트부터 하나하나 복습을 하면서 가져다 쓰되 다 복사 붙여넣기가 아닌 우리가 당장 필요한거만 쓰고 필요하다고 느낄때 다시 보면서 쓰기로하였다.

 

처음부터 그전에 썼던걸 가져다 쓰면 코드가 복잡해지고 로직이 길어지면 우리 코드가 아니게 될거라고 생각했기때문이였다. 그렇게 수요일까지 컴포넌트 + 로그인,회원가입,메인화면을 구상하는데 시간을 보냈고, 나머지 상세페이지, 게시물작성페이지, 수정, 댓글은 지금 하면 백엔드와 협업하기에 시간이 많이 않을거 같았고, 우리또한 그많은 로직은 먼저 생각하기엔 머리가 아프고 안될거 같아서 로그인,회원가입, 메인페이지 리스트 를 api 를 통해 가져오기로했다. 처음 axios를 써서 연결하는게 무엇인지 감이없었고, mockapi를 통해 해당 url을 api 에 써서 어떻게 작동하거 얻어지는지 확인을 했다.

 

문제는 백엔드와 협업은 이번이 처음이기에 error 가 나는데 프론트 문제인지 백엔드 문제인지 정확히 짚기가 힘들었다. axios 부분에서 계속해서 에러가 났고 내생각에는 백엔드에서 뭔가 못받아지고 있는데 백엔드에선 프론트의 코드가 잘못되지않았나 코드리뷰를 계속했다. 거의 하루를 axios 연결하는데 시간을 보냈고 도저히 답이없어서 임민영 튜터님께 상황을 설명하니 aixos 서버 에러는 프론트에서 할수있는게 없고 백엔드에서 처리해줘야한다고 했다.

 

결국 백엔드에서 수정후 가능하게 되었는데 토요일까지 느낀거지만 이렇게 문제를 고치기전까진 백엔드에선 테스트를 해보니 잘된다 라고 해서 알게 모르게 프론트에서 잘못되어 고쳐야한다? 라고 많이 느꼈다. 다른 파트를 맞고 서로 하기때문에 자기가 담당할때는 잘되던게 남과 마추었을때 다른쪽에서 안되니 서로 그렇게 생각했던거 같다. 많이 양보도 하고 이야기도 했지만 서로 이해하기엔 많이 부족하다고 느꼈다. 여러명을 설명해주기위해 계속 같은 말은 반복할때도 많았고, 다시 원점으로 돌아갈때도 많았다.

프론트에서 생각하는 로직과 백엔드에서 생각하는 로직도 다르고 왜 바꾸어야하는지 중간지점을 찾기가 너무힘들었다. 나는 중간중간 프론트팀원께 그냥 파이어베이스를 쓰고싶다고 투정도 많이부렸다. api 통신 axios를 처음쓰는거지만 이걸 몇시간,몇일을 붙잡는건 말이 안된다고 생각했다.

 

당연히 되서 간단하게 데이터를 받아오고 그걸 쓰는데 많은 시간을 쓰는게 아닌 연결하는데만 많은 시간을 쏟고 백엔드인지 프론트엔드 문제인지 찾는것도 쉽지않았다. 토요일날 백엔드 분들께 좀 솔직하게 이야기 했지만, 모르는걸 물어보는걸 둘째치고 api axios 부분이 안될때 프론트는 화면공유를 하며 계속 바꿔가면서 수정해보고 되는지 안되는 시도해보았다. 하지만 백엔드분들이 어떻게 수정하는지는 못보고 일단 백엔드에서 이야기해보고 수정해보겠다고만 듣고 나중에 토요일날 테스트를 해보니 회원가입,로그인,글쓰기,수정등 crud가 잘된다고 이야기를 하는데 솔직히 기분이 좋지않고 답답했다. 테스트를 끝났으니 뒤에는 문제가 없다? 라고 받아들일수밖에없었다 axios에서 계속해서 안되고 있는중에 토요일날 그렇게 이야기를 들으니 멘탈도 많이 나갔었다.

 

그래서 답답함을 말했다 백엔드분들도 코드를 좀더 설명해주고 어떤 알고리즘으로 처리를 하는지 알고싶다고 우리는 요청을 보내서 돼야하는데 안되어서 설명이 필요한데 프론트에선 안되는부분이나 다른부분 설명하면서 수정도해보고했지만 정작 백엔드에선 그런게 없어서 어떤식으로 처리가 되길래 api 부분에서 안되는지 감이라도 잡고싶다는식으로 이야기를했다. 백엔드 분들도 고생이 많다는걸 알지만 협업에 있어서 각자 어떤식으로 처리했는지 모르면 문제해결에 너가 잘했네 내가잘했네 하며 시간만 흐를거 같았기 때문이다. 

 

회원가입,로그인, 유저정보, 포스트정보를 받는데는 성공했지만 추가와 삭제는 통신부분에서 너무 많은 시간을 뺏고 안되서 수정,댓글 부분과 함께 포기하게 되었다. 진행하면서 목표는 백엔드분들과의 협업 + api 를 통한 통신이 성공하면 많이 얻은거라고 생각했지만 진행하면서 통신은 되었지만 다른 기능이 안되고 막히는 부분이 생기게되면서 아쉬움과 답답함이 많이 남게 되었다. 

 

게시글 추가할때도 이미지 업로드도 해야하는데 그부분이 프론트나, 백엔드에서도 어떻게 처리해야될지 몰랐기때문에 어려움도 많았다.

데이터형식을 formdata 로 보내야한다는데 해보질 않으니 그냥 그렇구나만 참고만 해놓아서 어떤식으로 쓸지는 다음에 써봐야할거같다.

1주차때도 그렇지만 정말 팀프로젝트를 할때는 시간이 많이 부족하고 멘탈잡기가 힘든것같다. 특히 팀원들간의 커뮤니케이션, 문제해결, 해결분담, 도와주기 등 많이 신경써야하기때문에 에너지소모가 정말 많다라는걸 다시금 느낀다. 새벽4-5시까지해도 풀리지 않을때도 많았고 5일반이라는 시간동안 완성해야하기에 언제나 부족함을 느끼고  좀더 있으면 좋았을껄 아쉬움이 남는것같다. 그래도 배포를 하고 얻은게 있기때문에 성급하거나 욕심을 너무 부리지 말자라고 밸런스를 마출려고한다.

 

멘탈이 나갈때 css 부분을 수정하면서 만드는 미니프로젝트 페이지가 이쁘게 꾸며지는거에 힐링을 하면서 실질적으로 현업에 쓰이는 다방 사이트를 보고 참고하기로 했는데 우리가 쓰는 title, content 부분에서 content 를 메인리스트에 보이게 하되 일정 문자이후에는 ...과 함께 생략되는 생략기호 넣기가 있는걸 보고 아 이건 써야한다 라고 생각했고 알아보니 text-overflow를 사용하여 일정 width 이후엔 생략되게하는걸 알게되었다. 이때 display는 block 이어야한다.

const SkipContent=styled.p`
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;

    white-space: nowrap;
    width: 100px;
    height: 100px;
  `

 

 

요번주를 마무리하면서 axios쓰는거에 대한걸 더 공부해보고, formdata, 다음주 클론코딩을 위해 복습을 할려고한다.

 

formdata 형식

<script>
const $el = document.querySelector('#frm');
const formData = new FormData($el);

fetch();
axios.post("/api/fileUpload", formData);
</script>

multer