항해99 - 실전 프로젝트 회고록

Charley1013·2022년 6월 5일
0

항해99

목록 보기
11/12

사이트 구경하기

🐭 그동안 뭐 했어?

CO-UP 실전 프로젝트 완료

드디어 실전 프로젝트가 모두 끝났다 순식간에 5주의 시간이 지났던 거 같다 살면서 일주일 내내 15시간 이상 쉬지 않고 달려본 적이 이번이 처음이지 않을까 싶다 그래도 정신적으로 힘들지 않고 쭉 달렸던 거 보면 그래도 재밌긴 했었나보다 항해 출첵 시간을 확인해보니 3주 연속으로 120시간 달렸다.. 처음에는 100시간도 무리라고 생각했는데 할 게 많으니까 자는게 억울할 정도로 시간이 부족했다 이번 포스팅에서는 나의 프로젝트에서 어떤 것을 시도했고 어떤 부분을 고민했는지 적어볼 예정이다

협업

우리 사이트에서 협업하기

협업을 노션에서도 진행했었지만 우리는 사이트도 협업툴이기때문에 직접 사용하면서 진행했었다 이렇게 사용하면서 사이트에서 과연 필요한 건 무엇이고 어떤 부분이 불편한지 팀원들이 모두 경험했고 그 피드백을 바탕으로 수정한 내용도 많이 있었다

기능

드래그 앤 드롭

사실 프론트 기능 중에 가장 많이 막히고 오래 걸렸던 기능이었다 드래그 하는 거까지는 문제가 없었지만 카드가 이동했을 때 그 값이 백엔드와의 통신으로는 즉각 수정되지 않아 프론트에서 미리 UI를 보여주는 작업이 필요했었는데 이 부분에 대한 자료가 많이 부족했었다 그래도 2기 수료생의 조언을 통해 React-Query에 Optimistic update로 무조건 수정 성공한다고 가정하에 미리 UI에 업데이트를 시켜주는 방법을 알았고 그 이슈는 해결할 수 있었다

빠른 렌더링

채팅, 팀원 목록의 프로필 사진과 프로젝트 기본 사진 차트 라이브러리 등 첫 로드에 가져와야 하는 요소가 많다 보니 기존 방식으로는 속도가 느렸었다 이 부분은 React18 Suspense, lazy loading으로 SSR로 파일 분리를 시켰고 사진은 Resize 라이브러리 크기를 압축시켰고 마지막으로 디자이너분들이 요청했던 웹 폰트가 속도에 가장 큰 영향을 미쳤는데 이 부분은 woff2 확장자를 사용해 크기를 최대한 압축시켰다

queryKey

ReactQuery는 useQuery를 사용해 API GET할 때 key값을 사용해 고유한 값을 가질 수가 있었다 이 정보를 가지고 문서에서 상세한 정보를 보여주고 싶었는데 생각한 대로 동작하지 않았다 분명 URL은 바뀌었는데 내용은 변하지 않거나 Router Link State로 넘기면 다른 페이지에서 들어갈 때는 오류가 나거나 수정하면 깜박거리는 대참사가 일어났다 도저히 방법을 찾지 못하다가 queryKey는 배열로 사용해 첫 번째는 해당 정보의 고유 key값을 넣어주고 두 번째 값에는 key에 해당하는 정보를 분리할 수 있었다 이 방법을 사용하니 상세 내용이 즉각 변했다 이후 상세 내용을 불러야 하는 query는 모두 배열 형태로 리팩토링했다

export const useGetOneDoc = (docId: string) => {
  return useQuery<AxiosResponse, AxiosError, IDocDetail>(["getOneDoc", docId], () => {
    return instance.get(`api/folders/docs/?docId=${docId}`);
  });
};

이슈 등록

깃허브 이슈는 이번 팀 프로젝트를 하면서 처음 사용했다 확실히 좋은 커뮤니티였다 이전에는 내가 해결했어도 시간이 지나면 까먹기 일쑤였는데 이슈에 작성하고 그 당시에 커밋이나 PR을 올린 내용을 이슈에 등록해 나중에도 확인할 수 있어서 이력서를 작성할 때 고민했던 내용을 작성할 때 이슈를 참고하면 좋을듯하다

사용자

다크모드

다크모드는 프로젝트 시작하기 전부터 무조건 적용하고 싶었다 아직도 많은 사이트가 다크모드를 편리하게 컨트롤 가능한 사이트가 부족했고 우리 사이트는 헤더 부분에 적용해 아주 쉽게 모드를 변경할 수 있도록 제작했다 또한 Default를 다크모드로 구현해 초반 눈뽕(?)을 막았다 확실히 사용자 피드백에서 다크모드가 좋았다는 반응이 많아서 정말 좋았다

사용자와 소통

사용자에게 처음으로 사이트를 보여주기 전 우리는 새벽 4시반까지 사용자 경험을 최대한 고려하면서 이 정도면 없겠지라고 생각을 하면서 배포했지만 이후의 유저의 요청으로 변경했던 내용이 15가지가 넘었다 이번 경험을 통해 백엔드 디자이너분들과의 소통도 정말 중요하지만 가장 중요한 건 사용자의 목소리라는 것을 다시 한번 느낄 수 있었고 우리는 피드백을 받자마자 바로 협업툴 주제 특성상 채팅 기능도 있겠다 공개 사이트를 만들어 모두가 입장 가능한 프로젝트를 생성해 사이트 내에서 유저들의 목소리를 실시간으로 바로 들을 수 있었다

마무리

마지막 이력서 주차를 제외하고 모든 프로젝트는 마무리가 되었다 끝내 사용자가 기능을 보여주지 못한 곳도 있고 정말 슬프게도 사라진 팀도 있어서 우리 팀의 끝은 과연 어떨까라는 생각도 잠시 해봤지만 정말 좋은 사람들을 만나서 우리 팀은 아름다운 마무리를 지을 수 있었던 거 같다 특히 디자이너분들은 이번 실전 프로젝트에서 처음 만난 분들이라 어떤 사람인지도 전혀 모르는 상태로 시작했는데도 불구하고 새벽까지 열심히 도와주시고 마지막까지 같이 작업해주셔서 너무 감사했었다 시간과 부족한 능력 때문에 모든부분을 들어주지 못했던 게 많이 아쉬워서 더 많이 공부해야겠다고 생각했다 나중에 또 기회가 생기면 팀원들과 함께하고 싶다

🐭 이제 뭐할거야?

포트폴리오

이제 항해가 일주일 남았다 이 기간 동안 이력서에 내가 1년동안 해왔던 내용을 적고 추가로 나만의 포트폴리오 공간이 필요하다고 생각해 현재 포트폴리오 사이트를 만들고 있다 프로젝트 끝났는데 또 프로젝트라니.. 끝이없다 이전에 약속한 대로 이번 개인 프로젝트는 NextJS로 꼭 만들어보고 싶어서 여러 가지 자료를 찾고 있다

profile
프론트엔드 개발자 김찰리

0개의 댓글