[프로젝트 회고] Wanted-preonboarding (프론트엔드)

[soyoung931014]

wanted-preonboarding 회고(프론트엔드)

드디어 프리온보딩 프론트 엔드 코스가 끝이 났다. 내가 이번 프로젝트에서 중점적으로 배우고 싶었던건 ‘각기 다른 환경에서 공부한 개발자들과 잘 협업하기'였다.

이전에 나는 같은 부트 캠프를 수료한 동료들이랑만 프로젝트들 진행했었다. 같이 협업했던 동료들은 약 반 년동안 동고동락하며 공부했던 동료들이라 친구같은 느낌이 강했다. 협업 방식의 경우 부트캠프에서 알려준 가이드대로 진행 했었다.

그래서 새로운 사람들과 만나 협업해보고 싶었다. 각기 다른 환경에서 공부한 사람들이 모여 새롭게 의사소통하는 방법을 배우고 싶었다. 우리 팀원은 현업, 다른 부트캠프 수료생, 국비 수료생, 독학 등 다양한 백그라운드를 가진 사람들이 모였다. 결론적으로 이분들과 5주동안 팀을 이루며 내 사고가 한 층 더 확장된 느낌을 받았다.

프로젝트를 통해 배운점을 이야기해보자면..

배운점

---

✅ 존중하는 커뮤니케이션을 배울 수 있었다.

프리온보딩에서 만난 우리 팀원 6명은 모두 각기 다른 환경에서 공부한 팀원들이었고 코드 스타일도 다르고 깃을 사용하는 방식도 생각도 달랐다. 그래서 다른 부분에 있어 맞춰나가야 하는 이슈가 계속해서 발생했다. 이 부분에서 우리는 적극적인 의견을 주고 받으며 해결해 나갔다. 의견을 제시하는 사람은 충분히 뒷받침하는 이유를 제시하며 의견을 어필했고 듣는 사람들은 열린 자세로 임했다. 새로운 의견을 제시할때는 상대의 기분이 상하지 않도록 조심스러운 워딩을 사용하며 존중하는 방식으로 의견을 나누었다. 이런 분위기 속에서 프로젝트가 진행되다보니 팀 분위기도 좋고 프로젝트의 결과물도 대부분 좋았다. 후에 회사에 가게 되면 동료와 이런 방식으로 커뮤니케이션을 해야겠다는 감을 얻게 되었다.

✅ 코드리뷰의 중요성을 깨달았다.

깃허브에 작성한 코드를 develop에 풀리퀘스트를 할 때, 팀원 3명이상 승인을 받아야지만 머지가되는 시스템을 도입했다. 이전에는 아무래도 바쁜 프로젝트 기간에 내가 맡은 파트외의 코드는 그냥 지나가기 일수였는데 이 방식을 도입하고 난 후, 다른 팀원의 코드를 상세히 이해할 수 있었고, 피드백을 주고받을 수 있었다. 정-말 너무나도 좋은 방식이었다. 더불어 프로젝트 전반적인 구조도 잘 이해할 수 있었다.

✅ 깔끔한 머지, squash merge

팀원 중 한 명이 “다들 깃 사용 안어려우신가요?”라는 물음에 ‘안어려워요’라는 대답을 가장 먼저 한 나. 깔끔한 깃 그래프를 만들기 위해 squash merge라는걸 도입하기로 한 후, 팀원들 중 깃에 대해 가장 많이 헤맨 팀원이 되었다. 브랜치 꼬인거 풀고, 다시 분기파고, rebase하는 등등의 여러 시행착오가 있었지만, 팀원들의 도움으로 결국엔 깔끔한 깃그래프를 그릴 수 있게되었다.

✅ react-query

snpLap 프로젝트에서 서버 상태를 관리하는 라이브러리로 서버 데이터 캐시를 관리하는 기능이 있는 react-query를 직접 사용해 보았다.

• 사용 후기

  📓 사용 이유

  이전 프로젝트에 서버 데이터를 캐싱해 데이터를 관리하는 리액트쿼리의 장점 중에 하나,

  • get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행한다.

    

  는 점에서 큰 편리함을 느껴 쿼리에 대해 긍적적인 인상을 받았고, 이번 프로젝트에서도 기획 단계에서 Admin페이지에서 당첨여부는 optimistic update(서버 요청이 무조건 성공한다는 가정 하에 ui를 먼저 업데이트 시켜주고 후에 서버데이터를 요청하는 방법)방법을 이용하고, 페이지네이션 탭 부분은 prefetch를 이용해서 후에 받을 데이터를 미리 받아오는 방식을 통해 리액트 쿼리의 기능을 좀 더 많이 사용해 보고픈 마음에 사용해 봤다.

  📓 리액트 쿼리 사용 후 느낀 장점

  • get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행한다.
  • 서버 데이터 캐싱 (서버 데이터를 가져와서 쿼리에 유니크한 키값에 담아 데이터를 관리를 할 수있어 편리했다. )
  • 데이터 페칭 시 로딩, 에러 처리를 한 곳에서 처리 가능
  • 비동기 과정을 선언적으로 관리할 수 있다.(각각의 컴포넌트에 useEffect를 이용해 데이터를 가져왔어야 하는 과정을 선언적으로 관리함으로서 사용하지 않아도 된다.)

  📓 아쉬운 점

  • 키 관리의 중요성을 느꼈다. 사실 Admin페이지에 optimistic update를 도입하고 싶었는데 키를 잘못 관리해서 처음 유저를 생성했을때 유저에 고유한 키 값을 부여하지 못했다. 그래서 당첨여부에 대한 유저를 키를 통해 불러오지 못하는 문제를 겪었다. 다음 프로젝트에 쿼리를 사용할 시, 기획 단계에서 고유 키 값을 부여하는것 또한 제대로 생각봐야겠다고 깨달았다

이 밖에도 무한스크롤, custom hook사용, ref를 이용한 최적화, 클린한 코드 작성, 반응형 연습, vercel 배포, heroku배포 등등 5개의 프로젝트에 걸쳐 많은것을 배웠다.

다음은 개선해야할 부분이다.

개선점

---

✅ 자신감 부족

프로그램을 모두 마친 후, 동료들로부터 피드백을 받았다. 내가 좀 더 좋은 개발자로 성장하기 위해 개선해야할 부분을 솔직히 적어주었는데 두 명의 동료가 내게 ‘자신감이 없다'라는 피드백을 줬다.

누군가 의견을 내면 내 의견을 한번 더 어필하기보다는 접었던 적이 몇번 있었다. 자기 확신이 부족했어서 그런 행동이 나왔다. 나도 인지하는 부분이었는데 팀원들한테도 보였던것 같다. 피드백을 받은 말처럼 실력은 앞으로 쌓아 나가면 된다. 좀 더 자신감있게 행동하자.

✅ CSS 공부

반응형을 구현하는데에 있어 시간이 꽤나 오래 걸렸다. flex-box나 grid에 대한 개념을 좀 더 잘 이해했다면 구현하는데 있어 많은 시간을 단축시킬 수 있었을것이다.

---

코스 5주동안 협업에 관련된것들을 이번 기회에 많이 습득하게 된것 같아 이번 코스는 성공적이었다고 말할 수 있다. 물론 아직도 개선해야할 부분이 많지만, 이제 정말 취업에 힘을 실어야 겠다. 동료들의 응원/칭찬을 보며 자신감을 가져 본다.