개발자의 품격 2기 후기 (개발 과정)

 

개발 시작

6주간의 기획과 설계과정을 거쳐서 드디어 개발을 시작하게 되었다. 팀원들 모두 빨리 개발을 하고 싶어 했고, 나 또한 얼른 기획이 끝나서 개발을 하는 날만 기다려왔었다. 이번 포스팅에는 우리 팀의 역할분담, 개발 스택 정하는 단계에서부터 최종 개발 완료까지의 과정을 작성해보려고 한다.

 

 

역할 분담 & 기술 스택

역할 분담은 프론트엔드 3명 백앤드 2명으로 나눴다. 그 이유는 우리 프로젝트 기획상 백앤드 기능에 비해 페이지들이 엄청 많았고, 그 페이지들 마다 프론트에서 처리해야 할 부분들이 많았기 때문에 프론트를 3명이서 하기로 하였다.

 

다음은 기술 스택이다. 우리 팀은 첫 팀 편성 당시에 React/Node 팀이었기 때문에 React와 Node를 기반으로 기술 스택을 정하였다. 나의 포지션은 프론트 엔드이기 때문에 프론트 위주로 자세히 작성하겠다.  

 

프론트 엔드는 전역 상태 관리를 위해서 Redux와 Redux-toolkit을 사용하였다. Redux를 사용한 이유는 페이지 상의 상태가 엄청 많고 복잡할 거 같기 때문에 Context API로는 부족할 거 같았다. 그래서 Redux와 MobX 중에 고민을 했었는데, 나와 팀원들이 Redux만 경험이 있었고 MobX는 경험해보지 않은 데다가 개발 기간이 6주밖에 없었기 때문에 팀원 모두 잘 사용할 수 있는 Redux를 사용하기로 하였다. Redux-toolkit은 우리 모두 사용해보지 않았지만, 기존 Redux의 복잡한 설정들을(데브 툴스 설정, immer, redux-thunk 등..) 쉽게 사용할 수 있다는 장점 때문에 같이 사용하기로 하였다. 

 

다음은 스타일 도구인데, 우리는 Sass를 사용했다. 당시의 우리는 실력이 많이 좋지도 않았고, 공부를 목적으로 프로젝트를 진행했기 때문에 부트스트랩이나 meterial UI 대신 직접 스타일을 위해서 css나 sass를 사용하기로 했다. 그렇다면 styled-components나 emotion 같은 css in js 기술들도 있었는데 왜 사용하지 않았냐면? 몰랐었다.. React를 배운지도 얼마 안 됐었고.. 이쪽 생태계에 대해서 잘 몰랐었다.. 그래서 css보다는 개발 생산성이 높은 sass를 선택하게 되었다. 

 

백앤드는 Node, Express, MongoDB, Mongoose를 사용하였다.

 

협업 도구, 코드 관리

우리는 협업 도구로 Zoom, Discord를 이용했다. Zoom이 유료여서 사용을 많이 고려했었는데 우리 팀원분 중에 한 분이 Zoom을 결제해주셔서, 그분 덕분에 편안하게 화면 공유하면서 팀원들과 소통할 수 있었다. (너무 감사합니다 태희님 ㅠㅠ) Discord는 팀원분들과 실시간 채팅을 목적으로 사용하게 되었는데 팀원분들이 접속해있는지도 실시간으로 보이고 채팅으로 서로 태그 하면서 작업할 수 있어서 사용하게 되었다. (이때 당시에는 slack을 몰랐던 시기 ,,,)

 

코드 관리로는 Github을 사용하였는데, 그룹 레포지를 만들어서 Client레포, Server레포 이렇게 만들어서 관리를 하였다. 이때 당시에 깃 플로우, 깃헙 플로우 이런 전략들을 몰랐어서 그냥 fork -> pull request로만 진행했는데 이 부분도 매우 아쉽다. (지금 생각해보면 정말 모든 게 아쉬운 거 같다. 그래도 이때의 아쉬운 경험들이 있기 때문에 이렇게 성장할 수 있지 않았나 생각 중이다)

 

 

담당 기능

내가 담당했던 기능들은 다음과 같다.

• Auth
  • 관리자 회원가입
  • 직원 회원가입
  • 로그인
  • 비밀번호 찾기
  • 비밀번호 재설정
• Shop
  • 매장 (생성, 수정, 입장)
• Common
  • Header
  • Aside
• Notice
  • 공지 (생성, 수정, 삭제, 리스트, 상세보기)
  • 공지 검색
• WorkManual
  • 카테고리 (생성, 수정 , 삭제, 리스트)
  • 업무 매뉴얼 (생성, 수정, 삭제 , 리스트)
• Transition
  • 인수인계 (생성, 수정, 삭제, 리스트)
  • 인수인계 체크박스, 마지막으로 수정한 사람 기능, 완료한 사람 기능, 취소 한 사람 기능

 

 

개발 이슈

지금 회고록을 작성하는 시점에서 이슈들을 보면 매우 단순한 이슈들인데 그 당시에는 팀원분들이랑 같이 구글링 하면서 고민했었던 기억이 난다. 이슈들을 안 적고 넘기기에는 아쉬우니 내가 경험한 이슈들 중에 오래 고민해본 이슈들을 작성해보려고 한다. 

 

출퇴근 시간 이슈

분명히 똑같은 시간에 팀원과 출근 버튼을 눌렀지만 데이터베이스에는 시간이 다르게 들어가는 경우가 있었다. 어떤 문제 때문에 그런 줄 모르고 각 함수마다 console.log로 값이 잘 전달되는지 확인했었는데, 각자 컴퓨터에서 아무리 확인을 해도 문제가 없는 것이었다. 그러다 캐나다에 살고 계시는 팀원과 같이 화면 공유하면서 테스트를 해보다 알게 된 것인데, 우리가 버튼을 누르면 프론트 시간 기준으로 서버에 보내기 때문에 문제가 발생했던 것이였다. 그래서 시간 관리 부분은 서버 컴퓨터 시간 기준으로 데이터베이스에 저장하도록 수정하였다.

 

모달 창에 마우스 클릭 후 외부 영역으로 이동시 꺼짐 이슈

넷플릭스나, 페이스북의 모달 창을 보면 모달창 외부 영역을 클릭하면 모달 창이 꺼지고, 모달창 내부에서 마우스를 클릭한 상태로 외부 영역에서 마우스를 놓게 되면 모달창이 닫히지 않고 그대로 유지가 된다. 하지만 우리 웹의 모달은 외부 영역을 클릭하면 꺼지긴 하지만 모달창 내부에서 마우스를 클릭한 상태로 외부 영역에서 마우스를 놓게되면 모달창이 그대로 닫히게 된다.  이 부분을 해결하기 위해서 같은 프론트 팀원과 하루 종일 고민했지만 해결을 못하였는데, 그러다가 다음날 갑자기 딱! 해결하게 되었다. 문제가 되었던 이유는 외부 영역을 onClick 이벤트로 닫히게 했었는데, onClick은 마우스를 땟을때 작동하는 이벤트여서 마우스를 땐 시점이 외부 영역이기 때문에 모달창이 닫히게 되었다. 그래서 onClick 이벤트 대신에 onMouseDown 이벤트로 변경해서 해결이 되었다. onMouseDown은 마우스를 클릭하자마자 바로 실행되는 이벤트여서 외부 영역에서 마우스를 때게 되도 이벤트는 클릭 당시에 작동되기 때문에 외부영역에서 닫히지 않는다. 나와 팀원 모두 javascript 적으로 해결하려고 했어서 해결을 하지 못했었는데, 기본적인 HTML 문법만 잘 알았어도 하루빨리 해결할 수 있었을 거 같다. (HTML 기초 문법의 중요성을 느꼈다 ㅠ)

 

axios 중복 요청 막기

게시물 작성 시에 작성 버튼을 연속에서 3번 누르면 api 요청이 3번 가기 때문에 게시물이 3개가 생성이 되었다. 내 컴퓨터는 최근에 산 M1 맥미니였기 때문에 속도가 빨라서 한번 누르면 바로 페이지 전환이 되어서 몰랐는데, 팀원분이 컴퓨터가 살짝 느려서 계속 클릭했더니 누른 만큼 게시물이 생성되었다고 제보를 해주셨다. 그래서 이 부분을 어떻게 하면 좋을지 고민하다가 총 3가지의 방법을 생각했다. redux-saga를 이용해서 최초 요청만 api 요청이 가도록 하는 경우, 게시물 작성 버튼을 한번 클릭하면 버튼을 비활성화시키기, 더블클릭을 막는 유틸 함수를 만들어서 버튼은 한 번만 클릭되도록 설정하기, 나는 이 3가지 방법을 다 시도해보고 두 번째 방법(버튼 비활성화 방법)으로 하기로 결정하였다. 우선 redux-saga를 사용하게 되면 각 api당 코드를 작성해야 하는 양이 꽤 많아서 생산성이 떨어진다고 생각을 하였고, 유틸 함수와 버튼 비활성화는 로직이 비슷한데 버튼 비활성화 로직 쪽이 좀 더 깔끔하다고 생각해서 버튼 비활성화를 선택하게 되었다. 로직을 간단하게 설명하자면 api 요청 -> 버튼 비활성화 -> 요청 완료 -> 버튼 활성화 이렇게 되도록 하였다.

 

 

이외에도 다양한 이슈들이 있었는데, 금방 해결되는 쉬운 이슈들이라서 작성하지 않았다. 

 

 

프로젝트를 통해 배운 점

- 기존에는 redux만 이용해서 상태 관리를 했지만, redux-toolkit을 이용해 쉬운 redux 세팅과, 간단한 상태관리를 경험하게 되었다.

- redux를 이용하여 전역 상태를 깔끔하게 관리하는 법을 배웠다. 기존에는 간단한 프로젝트만 해봤기 때문에 리덕스를 왜 사용해야 하는지 크게 와닿지 않았지만 이번 프로젝트로 인해서 각 컴포넌트 간의 복잡한 상태를 관리하다 보니 리덕스의 필요성을 확실히 느꼈다.

- 기존 개인 프로젝트에선 cookie를 이용하여 access-token을 관리했지만, http Headers를 이용하여 access-token을 관리하는 방법을 배웠다.

- 업무 매뉴얼, 인수인계 기능 쪽에선 모달 창도 있고 여러 상태도 관리해야 하고, 기능도 많은 부분이라서, 코드량이 굉장히 길어졌다. 그래서 이 부분을 custom hooks를 이용해서 logic을 분리하였더니, 코드 재활용도 쉬워지고 유지보수도 편해지게 되었다.

- 첫 팀 프로젝트였기 때문에 협업에 대해서 많이 배우게 되었고, 소통의 중요성을 배우게 되었다.

- 내가 생각하는 부분을 팀원에게 말로 잘 설명할 줄 알아야 한다는 것을 배우게 되었다.

 

마무리

이렇게 2021.04.17 ~ 2021.07.17 기간 동안 진행되었던 개발자의 품격 2기 후기를 마치게 되었다. 지금 후기를 작성하는 시점에서는 부족한 점도 많이 보이고 코드를 보면 너무 엉망으로 짠 거 같아서 부끄러움이 많이 느껴진다. 하지만 이 프로젝트로 인해서 내가 엄청나게 성장하게 된 계기가 되었고, 다음 프로젝트를 할 수 있는 발판이 되어줬기 때문에 나한테는 매우 소중한 추억이자 경험이다. 아직도 팀원분들과 소통을 하면서 지내고 있고, 개발 서적 스터디도 계속하고 있다. 팀원분들과 자주 얘기했던 내용이 있는데 "저희가 과연 10년 뒤엔 어떤 일을 하고 있을까요?", "그땐 저희가 다 네카라쿠배에서 일하고 있지 않을까요?ㅋㅋ" 이런 얘기를 자주 하면서 웃었었다. 당장 몇 개월이 지난 지금만 봐도 팀원들은 거의다 취업에 성공했고, 나도 공익 소집해제 날이 다가오고 있다. (나도 얼른 취업하고 싶다...) 프로젝트가 마무리가 된 시점에 개발자의 품격 2기를 진행해주신 고승원 님 지인 회사에 프로젝트 발표를 할 수 있는 기회가 있어서, 프로젝트를 발표하고 조언을 들었었는데, 개발 적인 측면에서 현직 개발자 분들에게 조언을 많이 받아서 정말 좋았었다. 한 가지 아쉬운 건 그 당시 팀원 분들과 대면으로 처음 만났었는데 사진을 못 찍은 게 매우 아쉽다...  언젠가 팀원분들과 새롭게 프로젝트를 하고 싶은 게 얼른 그날이 왔으면 좋겠다..   

 

최종 발표 영상 보러 가기