WIL 6주차

WIL 6주차

📖 WIL 6주차

🌞 6주차 스케쥴

이번주는 백엔드와 팀을 이뤄 미니 프로젝트를 진행한다.자유롭게 주제를 정하고 넣어야 할 기능도 특정하지 않고 자유롭게 결정한다. 클론코딩,실전 프로젝트를 앞두고 지난주까지 주특기 주차에 배운것들을 복습하는 시간을 가지며 재정비 한다.


🌞 회고

프로젝 깃허브 주소 프로젝트 시연영상

  • 용량이 커서 이번주는 영상으로 대체했다.

사실 쉬어가기 주차라고 해서 이번 주차는 그래도 조금 여유롭게 개발하며 확실하게 학습할 수 있겠다 안심했지만 현실은 저번주보다 힘들었던 한 주 였다. 우선 프론트엔드 2명 백엔드 4명이라는 팀구성에서 프론트엔드는 해야할 일들이 끊임 없이 많았고 백엔드 분들은 2~3일 만에 모든 일을 끝내고 우리만 바라보는 상황이였다. 백엔드 분들에게 결과물을 보여드리기 위해 쉴틈없이 개발하였고 백엔드 분들도 고생하는 프론트엔드를 도와주고싶은 마음에 해주시는 많은 배려덕분에 무사히 한 주를 마무리 할수 있었다.

사실 프로젝트 초반엔 의견을 맞추는것 조차 쉽지않았다. 서로 너무나 다른 시선으로 프로젝트를 바라봤고 백엔드였던 팀장님은 그냥 본인이 준 데이터를 복사 붙여넣기하면 UI에 보이는 것처럼 쉽게 말하기도 했다.😅 그 데이터를 UI에 보이게 하는게 우리의 일이고 그게 어려운건데ㅎㅎ 팀장님은 과제 내내 무리한 기능 추가 요구와 api설계 변경 등 소통이 쉽지않은 분이셨다. 하지만 이해하시기 쉽게 직접 코드를 보여드리며 데이터의 흐름에 대해 설명해드리고 다른 백엔드 분들도 중간에서 우리의 이야기를 듣고 중재를 잘 해주셨기에 끝낼 수 있었던 것 같다. 🫶

당연하게도 프로젝트는 서버와 통신할 때 버그도 많았고 혼자 JsonServer를 만들어 테스트할때는 잘되던 기능들도 서버와 맞춰보다 끝내 구현하지 못한 기능들도 있었다. 하지만 이렇게 팀으로 백엔드와 소통하는 경험을 해보는 것이 실질적인 이번주 주차의 목표가 아니였을까?

🌧 트러블슈팅

서버와 통신하기위해 우리는 axios 와 토큰을 이용한다. 서버에서 보내주는 토큰을 저장하기 위해서는 세션과 쿠키 , 로컬스토리지 등 여러 방법들이 있다. 이 방법들은 여러 차이가 있지만 우리는 많이 사용되는 쿠키에 도전하였지만 실패했다. 쿠키 사용법을 찾기위해 구글링도 많이하고 정보도 많이 찼고 2일 정도를 쏟았지만 결국 실패했고 로컬스토리지를 사용했다. 이 부분이 너무 아쉽다. 다음주엔 꼭 쿠키를 이용해봐야겠다.

카테고리를 선택할때 마다 서버에 get 요청을 하면 서버에서 해당 카테고리의 시트를 가져오는 것이 아닌 모든 게시물 리스트를 가져온 후 filter를 이용해 카테고리를 골라냈다. 미니 프로젝트이기 때문에 가능한 방법이였지만 실제라면 모든 게시물을 받을때 데이터양에 따라 첫 로딩이 길어질 수 있다는 단점이 있다. 이런경우 무한스크롤이나 서버에 요청할때 일정 갯수의 데이터만 받아오는 방식을 생각하여 개선해야겠다.

협업을 위해 깃허브에 프로젝트를 공유하며 redux 안의 api를 노출시켰다. 보안을 위해 gitignore를 이용해 이를 제외시켜야겠다.


🌳 Pull Request 이번주 나의 토양

https://velog.io/@leejpsd/Pull-Request

이번주는 협업을 위해 깃허브 organization이 아닌 fork를 사용하였다. fork 와 Pull Request(PR)의 정확한 사용법에 대해 공부하여 따로 포스팅하였다.


🌳 Styled-components 이번주 나의 토양 2

https://velog.io/@leejpsd/styled-components

JP
이중표Frontend Engineer

3년차 프론트엔드 개발자. Next.js, React, TypeScript 기반 웹 애플리케이션 개발 전문. 대규모 트래픽 환경에서 SSR·ISR 렌더링 전략 설계 경험.

이력서 보기