Merchsquare_기업협업 회고록 (11.16~12.10)

이지·2020년 12월 7일

👩🏻‍💻 기업협업 프로젝트 소개

모두의 셀러 Partners는 인스타그램 인플루언서 공동 구매 이벤트 생성 및 관리를 위한 Partners 웹페이지입니다. 80% 정도 React로 개발이 완료된 상태에서 프로젝트를 시작하였으며 Frontend 추가 기능 구현 및 Debugging 작업을 마무리하고 AWS-EC2 배포까지 진행하였습니다.

📑 프로젝트 기간

2020-11-16 ~ 2020-12-10

📑 기술스택

React-Hooks, React-Redux, React-router, Styled Component
DataPicker, urlRegex, @material-ui/core, react-loader-spinner
JavaScript(ES6), HTML

📑 협업도구

Git,GitHub / Postman / Figma / Trello / Google-chat

📸 with MerchSquare!

(좌) Kyle(RN 개발자) / Hagos(풀스택 개발자) / Kevin(디자이너)
(우) 프론트엔드 개발자 : 이지영(jay) / 김보경(chloe) / 김수연(soo)

머치스퀘어와 함께한 4주..

프랑스인 디자이너 케빈과, 풀스택 개발자 하고스, 그리고 RN개발자인 카일과 함께한 시간들은 너무 빠르게 지나갔다. 모든 업무를 영어로 소통하면서, 이곳이 신사동인지 프랑스인지 모르겠는 재밌는 분위기를 경험했다. 밥을 천천히 먹는 찐 프랑스인 케빈 덕분(?)에 1시간 30분의 여유로운 점심시간동안 가로수길 탐방도 즐길 수 있었다. 코딩도 열심히! 노는것도 열심히 한 우리 팀원들과, 나 자신을 칭찬하며.. 기억이 마르기 전에 기록을 남겨본다.

디버깅 관련 업무는 Trello를 통해서, 퍼블리싱 관련 업무는 Figma 를 통해 협업했다. 각각 comment 기능을 활용하여 진행상황을 체크했고, 세부 사항은 google Chat으로 소통했다.

디자이너와의 협업은 처음이었는데, 케빈은 친절하게도 자신이 구축한 디자인 생태계를 보여주면서, "Design system" 을 소개 해주기도 했다. atoms < molecules < organism 으로 확장 되면서 다른 페이지에서도 재 사용 되는 개념은 개발과도 많이 닮아있었다. (component와 같은 개념으로 이해되었다.)

우리가 주로 맡아서 한 일은 모두의 셀러 파트너스 웹페이지 배포를 위한 디버깅 업무 였다.

📑 구현한 기능

1. LOGIN

-login validation

2. CREDITS_PAGE

3. CREATE_EVENT

- 이벤트 삭제 시 user에게 credit 반환
- 이벤트 실행일 D-1 일 기준 삭제 권한 회수 (삭제 버튼 없애기)
- 이벤트 생성 시 실행날짜 기준으로 카테고리 분류 (진행예정, 진행 중, 진행 완료)
- Url validation

4. ORDER

5. PROFILE

6. HOME_PAGE

📑 기업협업 후기

1. 디자이너&백엔드와의 소통을 경험한 것이 좋았다.

: 작은 회사였던 만큼 google chat 이나 trello 뿐만 아니라 직접 영어로 소통해야할 일이 많았다. (대표님과의 직접 소통도 잦았다.) 사실 디자이너나, 대표님의 입장에서는 간단해 보일 수 있는 추가 기능도 컴포넌트가 복잡하게 얽혀있어 몇 시간이 걸리는 경우도 허다했는데, 이 때 다른 부서의 입장을 배려해서, 어떤것이 가능하고 불가능한지, 얼마나 걸릴 것 같은지에 대해 적확하게 커뮤니케이션 하는 것의 어려움과(😂) 중요성을 느꼈다. 또 정신 없을때면 업무상황을 figma 나 trello 에 재깍 업데이트 하지 못하기도 했는데, 다른 유관부서와의 협업도 고려한다면 반드시 신경써야 할 부분이라고 생각했다.

개발 면에서는 백엔드 개발자 하고스와 API 통신 관련하여 google chat 으로 소통해 본것이 좋은 경험이었다. 애를 먹었던 버그 중에, 이벤트 생성을 위한 POST 통신 이후에 Order 페이지에 이벤트 기간에 따라 예정된 이벤트/ 진행중 이벤트/ 완료된 이벤트로 분리된 API 를 fetch(GET) 받아 그리는 과정에서, 진행 중 이벤트와 완료된 이벤트가 동시에 생기는 이슈가 있었다. 어떤 과정 단에서 발생한 문제인지 몰라서 console 을 일일이 찍어가며 확인하고, 하고스와 이야기를 나눈 결과, data picker라는 라이브러리에서 일자를 선택하고, 해당 일자를 서버로 전송하는 과정에서 형변환의 오류가 발생했다는 것을 알고 고칠 수 있었다. 또 이벤트 삭제시 credit 을 user 에게 돌려주는 대신, credit 이 차감이 되는 이슈도 있었는데, 프론트 단에서 아무리 디버깅을 시도했지만 문제가 해결되지 않아 back과 이야기 해 본 결과, 간단한 로직 수정으로 디버깅이 끝나기도 했다.

F/B 서버간의 통신 뿐만 아니라, 개발자와 개발자 사이의 통신(Communication)의 중요성을 깨달았다.

2. 다른 사람들의 코드를 공부하는 것이 좋았다.

: 코드는 쓸 때 보다 읽힐 때가 더 많다는 말을 여실히 체감할 수 있었던 1개월 이었다. A to Z로 페이지를 찍어냈던 2번의 프로젝트와는 달리, 이미 완성된 코드와 환경을 최대한 훼손하지 않으면서, 버그를 잡아내는것은 처음엔 조금 답답하기도 하고, 이해하기도 어려웠다. dux-pattern 으로 상태가 관리되는 것도, 함수들이 module로 분리되어있는 것도, 처음에는 무척 생소했고, 폴더구조를 파악하고 컴포넌트를 이해하는데만 해도 한참 걸렸다. (특히 모달안의 모달안의 모달..의 경우) 그러나 4주동안 매일 같은 코드를 보면서 이제는 머릿속에 폴더트리를 그리는 경지에 도달하고..컴포넌트로 분리하고 싶은 욕구가 드는 페이지도 있었지만, 프로젝트 스케일이 커질 수록 뭔가 하나 바꾸는 게 예상외로 엄청난 대공사가 될 수 있다는 것을 느끼고 일단은 욕심을 접었다.😔 (관리 되고 있는 state와 기능들이 마치 뿌리처럼 얽혀있기 때문이다. (a.k.a 분갈이))

한편, 처음에는 너무나 어려웠던 redux가 구세주 처럼 느껴지는 순간도 있었다. 지긋지긋한 props 에서 벗어나 언제 어떤 컴포넌트에서든, store에 저장 된 state를 가져다 쓸 수 있다는 것이 혁명적이었다. 나중에는 state로 관리하기 귀찮거나, render될 때 reset 되는 값들은 해당 reducer를 뚝따닥뚝딱 찍어내서 저장해버렸다.

마지막의 마지막까지 우리를 애먹였던 Cart 에 아이템 담기의 경우, add 클릭 시 처음엔 0개로 그려지다가 두번째 클릭을 해야 2개로 update가 되어 그려졌는데.. 하나를 고치면 다른 문제가 터지고, 그걸 해결하면 예전의 버그가 생겨서 퇴사날까지도 우리를 괴롭혔다. (문제는 해당이슈가 30분에 한 번, 처음 클릭할 때에만, 개기 일식마냥 생겼다가 바로 사라진다는 것이다. 😤 [디버깅 난이도 : ★★★★★]) 화가 난 우리는 집에 와서까지 디버깅을 했고..redux-debugger-tool을 하나하나 뜯어가면서 state에 집착한 결과.. 마침내 잡아냈다 요놈! (후훟...🕷) 이는 자바스크립트의 꽃, 비동기 처리 로 인한 것이었고, jsx 내에서 함수가 순차적으로 호출되어 동기적으로 실행될 것으로 예상하였으나.. fetch 함수가 비동기적으로 발생하여 아이템을 담기도 전에 카트정보를 불러왔던 것이다. . . 혼선을 막기 위해, 함수는 최상위에서 따로 관리하는것이 좋겠다는 교훈을 얻었다.

3. 좋은 사람들과 함께여서 좋았다.

담당 사수가 따로 없어 서로가 서로의 사수였던 4주였지만, 디버깅 뿐만 아니라 태도 면에서도 다른 두 분께 정말 많이 배울 수 있었다. (코드 Dr. 수연킴, 차분한 카리쓰마 김purple 선생님 감사합니다. 🙇‍♀️) 혼자였다면 이토록 즐거운 회사생활은 하지 못했을 것이다. 좋은 동료의 중요성을 깨달을 수 있었다. 한편, 하고스와 케빈, 카일도 프로젝트 이후에라도 RN 프로젝트를 해볼 수 있도록 돕겠다고 연락처도 알려주면서 이런저런 이야기 해줘서 너무 고마웠다. (나..진짜 연락한다..?) 하고스 한국말 잘 하면서 꼭 영어로 대답하는거 마지막까지 웃겼다ㅋㅋㅋ (하지만 개발 이야기할때만큼은 so serious..) 풀스택 척척학사지만, 자신도 매일 새로운 버그를 만난다며, 그러나 어렵게 해결한 것은 절대 까먹지 않게 될거 라며 개발자로서 진심어린 조언을 해준 것이 기억에 남는다. 마지막으로 인수인계할 때, 카일이 코드 리뷰를 몰아서 해주면서 현업에서 쓰이는 err catch 노하우와, 개발 꿀팁들을 전수해줘서 참말 고마웠다!