주특기 미니프로젝트

백엔드와 프론트엔드로 구분하여 진행하는 첫번쨰 프로젝트다. 오늘까지 3일차인데 다른사람들과 역할을 나누고 레파지토리를 공동으로 사용하는 부분이 많이 서툴다보니 TIL을 작성할 시간이 없었다.. 뭐 중간중간 밥먹는시간해서 시간이 아예 없진았았지만.. 그떄만큼은 쉬고싶었다. 약간의 틀이잡힌 지금시점에서 지난날에대해서 작성해 보려한다.

1일차.

우선 디자인툴(피그마)을 처음으로 사용해봤다. 현업에서도 이러한 디자인툴을 사용한다고하니 느리더라도 적응할겸 전인원이 화면을공유하면서 디자인을 그려나갔다. 디테일하게 잡지는못했지만 이정도잡는것만해도 시간이 꾀걸렸다. 이후 프론트단에서 역할을 분담해야하는데 갈피가잡히지않아 이전기수분의 조언을 듣고 페이지별로크게나누고,최소단위컴포넌트를 각자 역할을 분담해서 작업을 진행하라고 조언해주셨다. 근데 막상 깃허브를 혼자서만 올려봤지 협업툴로 사용해본경험이없어 첫날엔 거의 깃허브조작법만 배웠는데, 다행히 팀원분중 깃허브에 능숙하신분이계셔서 쉽게 적응할 수있었다. 최종적으로 도달한 개념으로는 우선 원격에서의 main브랜치는 배포용이란것. 그래서 작업을 할떈 기본적으로 원격에서 develop브랜치를 개설하고, 여기서 각자 브랜치를 추가로 개설하여 작업후 develop브랜치를 업데이트해나간다.

2일차.

깃허브관리도 어느정도이해한상태에서 역할을 분담했다. 나는 페이지단위로는 메인페이지와 마이페이지를 맡았고, 최소단위 컴포넌트 제작으로는 Grid컴포넌트를 맡았다. 어느속성을 추가해야할지 갈피가잡히지않아 이전 수업에서 사용했던 Grid를 참고하여 작성하였고, 필요한것들은 그떄가서 추가로 생각해보자는 식으로 만들었다. 우선 최소단위 컴포넌트를 만들고나서 팀원들과 각자 작업한 파일을 한곳에 합쳤을떈 뭔가 뿌듯했다. 분업이란걸 처음한 느낌을 받아서 그런것같다. 이후엔 최소단위 컴포넌트를 기준으로 페이지를 만들어 나가는데, 활욜을 잘못해서인지 뭔가 틀에박혀서 오히려 불편한 느낌을받았다. 그냥 페이지별로 스타일파일을 만들어서 적용시키면 안되나? 라는생각이 들정도로 최소단위컴포넌트에대한 효율성을 느끼지못했다. 그렇게 우선 페이지를 구성하고 팀원분중 한분이 완성을 못하는 상태였는데, 그분이 담당하셨던 부분은 디테일페이지와 게시물 작성페이지였다. 생각보다 레이아웃이 복잡해서 화면을 구성하는데 어려움을 격었다. 그중 가장큰 문제가 마진과 패딩에의한 전체 크기가 변하면서 열이 안맞는 현상이 시간을 잡아먹었다. 결과는 box-sizing : border-box속성을 적용시키지않았기 떄문이였는데, 리액트를 하기전 스타일을 하나의 파일을 만들고 작업을 진행했을떈 항상 맨위에 적어두고 작성했었던 부분이였는데 리액트에선 알고있는 파일외엔 접근하는게 뭔가 잘못될까봐 껄끄러워 index.css파일을 수정하는게 두려워서인지 전체파일에 적용하는것을 까먹고진행했다.

3일차.

어느정도 뷰는 완성이되었다. 이제 리덕스를 구성하고 서버통신을 준비하려는 단계에 왔다. 최초에1일차떄 api명세서를통해 백엔드와 어떻게 데이터를 주고받을지에대해 결정을하긴했지만 뷰를구성할떄 어디에 어떤 props을 사용할지 신경을 안쓰면서 만들었다보니 만들면서 일방적으로 백엔드분꼐 데이터조정을 요청하고있다. 그래서 아예 와이어프레임을 완성하고 api설계단계에서 각 api요청을할때 어떤 값들이 request 와 response로 전달이되야하는지를 명확히하고 진행을해야 각자 작업을하면서 불편함을 안겪을것같다.