Werecord project 🔥

25 Jul 2021 in Devlog on Project, Werecord, React, 근태

A-Z까지 모두 경험했던 We-record 프로젝트!!

• 목차
  • A-Z까지
    • 위대한(?) 첫걸음
    • we-record의 탄생
    • Blocker…(벌써…?)
    • 중간 점검
  • 본격적인 개발
    • 내가 맡은 Task
    • 각 페이지 소개
    • 예상치 못한 감사
  • Error & Fix
  • 끝 그리고 시작

📌 A-Z까지…

🚌 기간 : 6월 8일 ~ 7월 16일
👥 Front-end : 3명, Back-end : 2명 💻 사용된 기술 스택 : React Hooks, React Router, Styled-Component, KAKAO social login, RESTful API

---

🌱 위대한(?) 첫걸음 👣

2차 프로젝트 이후 기업협업과 개인 프로젝트.. 둘중 하나를 택하는 기로에 놓였고, 당연히 기업협업으로 가게 될 것이라는 생각과는 다르게 한번 더 팀으로 프로젝트를 진행하게 되었다..😳

처음에는 갑작스럽게 팀 프로젝트로 바뀌어서 당황했지만, 이내 곧 마음을 다잡고 1달이라는 시간동안 어떻게 해야 알차게 보낼지 팀원들과 머리를 싸매고..(지끈..🤮) for(let i = 0; i < MAX.SAFE.INTEGER; i++) {return 고민}을 거듭했다. (탈모 생길거 가틈)

🌱 we-record의 탄생 👶🏻

그동안 배운 코딩을 사용해서 무엇을 만들어야할지… 처음으로 ‘무언가를 스스로 만든다’라는 고민을 해보았던 것 같다. 사이트를 모티브로 한 2번의 프로젝트 때와 달리 신선한 고민으로 다가왔지만, 첫 시작은 막막하기도 해서 내심 걱정이 들었다… 하지만 이런 걱정은 기우였을까?? 우려했던 것과는 달리 우리 팀은 제대로 해보겠다는 의지가 불타오르고 있었다🔥

프로젝트 포인트는 ‘우리 주변에 무언가가 필요했던 상황이 있었나??’를 중점으로 고민했던 것 같다. 그러던 중 마침 기업협업을 나갔던 동기분 한분이 회사 근태 사이트를 구현한다는 소식을 접하게 되면서.. “어라?? 나도 위코드에 있었을 때 출석부 필요했는데…” 생각으로 이어지고 팀원분들의 다양한 의견을 종합해본 결과!! Werecord가 탄생하게 되었다!! (두둔!🥁)

- 기획기획..끄적끄적… - 팀원들 머리 속 깊숙히 박혀있는 아이디어 한톨까지 뽑아낸 결과물..! (feat.동기분들 응원 🙈)

🌱 Blocker…(벌써..?)

기획까지 너무 좋았다. 사실은 걱정도 잠시, 이것저것 아이디어를 가지고 페이지를 기획하는 과정은 생각보다 재미있었다. 그렇게 분명한 사이트의 목적에 어울리는 여러 아이디어를 뽑았다.

개발사전에 한번 내뱉은 말은 책임을 져야 한다..라는 말이 있었나..? 아무튼 재미있게, 그리고 진지하게 기획을 마치고 난 이후 우리는 ‘우리가 기획한 프로젝트’를 만들어야했다. ‘아 너무 재미있겠다~~’라고 외쳤던 나에게 다가온 하나의 큰 산… Design…

나름 전체적인 페이지의 구도를 본다고 생각했지만 이건 좀.. 다른 문제였다. 우리의 아이디어를 페이지에 어떻게 녹여내야할까???의 고민… 주변에 디자인을 전공한 친구들도 없고… 나에게는 다꾸(다꾸 = 다이어리 꾸미기ㅋ) 경력 2년차 여자친구에게 물어보는게 전부였다.

심호흡을 하고, 마음을 가다듬고 figma를 열었다.

사전에 노트로 끄적였던 UI를 하나하나 정성스래 잡으면서 작업했다. (세부적인 디자인에 신경써주신 다꾸인(?) 팀원 다*님 고생많으셨습니다👍🏼)

당연히~ 여러 우여곡절 끝에 만들어진 디자인이지만 그 과정을 여기에 다 거론할 수 없을 것 같아 이쯤에서 넘어가는게 좋을 것 같다.

(이렇게 기획과 디자인으로만 꼬박 2주라는 시간을 소요했다..)

🌱 중간 점검

“처음하는 기획, 처음하는 디자인” 등 그동안 배웠던 개발 스택과는 거리가 조금 먼 친구들이지만, 이러한 과정을 직접 경험함으로 느끼는 바가 컸다.

• 생각했던 것과는 달리 기획이 수시로 바뀌어서 정말정말정말 “프로젝트의 중심”을 잘 잡아야한다는..
• 그렇다고 기획의 기능적인 부분만 신경쓰는 것이 아니라 항상 “사용자 편의를 고려”해서 개발해야 한다는..
• 앞으로 현업에서 웹 디자이너와 어떻게 소통해야할지 생각해보는..
• 필수적으로 팀원들과 정기 + 수시로 “소통”해서 프로젝트 방향성을 명확하게 잡아야하는..

등등등 최대한 실제 현업에서 고민해볼 수 있는 사항들을 접하고 싶었는데.. 아마 현업에서도 이러한 고민들을 할 수 있을 것이라 생각해서 괜히 기분이 좋았다.

📌 본격적인 개발!

---

🌱 내가 맡은 Task

• 기수 페이지
• 메인페이지
• 공용 모달 컴포넌트 만들기

팀원들과 페이지 단위로 task를 분담했다. 물론 각 페이지마다 공통으로 들어갈 컴포넌트가 있다면 재사용할 계획이었지만 각 페이지별로 구현되는 UI가 다 달라서 공용으로 사용되는 컴포넌트가 많지 않았다.

각 페이지마다 Comment가 추가로 랜더되야하는 것들은 모달을 사용하여 랜더링시키는 것으로 이야기를 나누었다.

🌱 각 페이지 소개

- 기수페이지

• 어려운 코드는 아니지만 이것저것 다양한 데이터를 받고 랜더링 시키는 것이 포인트이다.
• slider 라이브러리 slick를 사용하여 같은 기수 동기들의 간단한 프로필을 볼 수 있다.
• 오늘 하루 start버튼을 누른 동기는 해당 프로필카드 이름 우측에 빨간 점이 파란 점으로 바뀌게 구현하였다.
• 지박령 순위 단상은 div로 만들고 annimation을 주어 심심하지 않게 구현하였다.
• 모달은 createPotal을 사용하여 전역으로 관리할 수 있게 설계하였다.

• CREAM 프로젝트 모달과는 달리 closet을 활용하여 모달창 바깥에 onClick은 blur처리가 되도록 구현하였다.
• 또한 모달이 필요한 컴포넌트마다 on/off를 동작하게 하는 함수를 선언하는게 아니라 모달 내부에서 해당 모달에 대한 on/off를 컨트롤할 수 있게끔 구현하여 코드를 최소화하였다.

---

- 메인페이지

• 현재 시간은 setInterval로 구현하여 실시간으로 변경된 시간이 랜더링 되도록 구현하였다.
• 여기서 Blocker를 만나게 되는데.. setInterval로 Main 컴포넌트를 지속적으로 랜더링시키는 것이 다른 함수들 또한 컴포넌트 내에 생성하여 호출하는 것이 서로 엮여 에러를 일으켰다.
• 따라서 다른 함수들은 랜더가 지속적으로 일어나도 초기 함수값을 가진 상태를 유지하여 랜더링 최적화를 진행하는 것이 효율적이라 판단하였다.

• useMemo, useCallback을 사용하여 함수로 호출된 값을 기억하여 추가적인 랜더링 시에도 새로운 함수로 만들어지지 않도록 구현하였다.

• useMemo는 이미 함수로 호출된 값을, useCallback은 Callback함수로 전달할 함수들을 대상으로 React 최적화 hook을 사용했는데 추가적으로 두가지의 사용법에 대해 공부해야할 것 같다!

• 조금 더 코드를 간소화하여 구현하는 방법이 있을 것 같은데 React랜더링 최적화에 대해 더 공부하여 리팩토링해야할 것 같다.

🌱 예상치 못한 감사

---

프로젝트를 진행하던 도중 Wecode의 멘티들을 대상으로 하는 프로젝트를 진행한다는 소문이 돌았던 것 같다. 그렇게 된 것일까.. 멘토님들께서 잘하면 실제로 Wecode 프로그램으로 사용해도 될 것 같다는 엄!청!난! 말씀을 해주셨다!!🤩

팀원들끼리만 기획하고 남을 것 같던 프로젝트가 실제 서비스될 수도 있다는 생각에 정말 신기했다! 이후로 디자인부분과 기획적인 부분을 멘토님들과 회의를 통해 수정하고 추가하고 보완하게 되었다 :)

그렇게해서 프로젝트에 새롭게 멘토페이지가 추가되었다!! 멘토페이지는 멘티뿐만 아니라 멘토님들도 가입하여 멘티들을 확인할 수 있는 페이지였다.

그렇게 werecord 프로젝트는 시즌 2를 맞이하게 되었다!!!🔥

📌 Error & Fix

---

앞서 보여진 디자인이나 코드들은 사실 저 당시에 완성되었던 것들이 아니었다. 디자인도 조금 더 투박했고 코드 또한 버그들이 난무했다.

멘토님께서 werecord 프로젝트를 실제로 사용하는 것을 긍정적으로 검토하시고 난 이후 새로운 숙제를 주셨다..!😂 바로 멘토님들께서 찾으신 에러들, 찌그러지는 UI들을 고치는 일이었다.

팀원들끼리 모의로 테스트해 보았을 때 꽤나 자신만만했던 것 같다. ‘여기에 버그가 도대체 어디있지?’ 나름 버그를 수정하면서 작업했기에 버그따위.. 없을거라 생각했다. 게다가 규모도 작은 프로젝트이니 더 그렇게 생각했던 것 같다.. 하지만…

- 엥..?

버그만 있지는 않고 새로운 페이지들과 기능도 추가되었지만 예상보다 전체적으로 보완되고 수정될 부분들이 있었다는 것이 놀라웠다. (그리고 물론 저게 다가 아니다…ㅎ)

새롭게 기획에 추가된 Restart버튼과 pause버튼를 구현하게 됨으로 전체적인 데이터 구조를 다시 잡아야했다. 물론 프론트쪽에서는 받는 데이터에 따라서 랜더링만 시켜주면 되겠지만.. 백엔드에서 좀 고생하셨던 것 같다.ㅠㅠ

📌 끝 그리고 시작

---

7월 2일부로 공식적인 wecode 커리큘럼이 마무리 되었다. 하지만 여기서 끝날 줄 알았던가… 멘토님께서 2주정도 추가로 디자이너를 붙여주시면 프로젝트를 이어할 마음이 있는지 여쭤보셨다..! 당연히 werecord 프로젝트에 애착이 있던 나와 팀원들… Yes!!를 외쳤던 기억이 난다.😏

---

현재(7월 25일) 여러가지 상황들이 맞물려 프로젝트 기간이 계속 딜레이 되다가 드디어 새로운 디자인 시안이 나오게 되었다. 그런데 생각과는 달리 팀원들과 같이 만들었던 모습은 온데간데 없고 새로운(?) 웹 페이지가 있었다..ㅠㅠ (고생해서 만든건데ㅠㅠ)

그런데 역시 디자이너는 디자이너인가.. 휠씬 모던하고 보기 좋아서 조금 씁쓸..ㅎ 기능적인 부분도 원래 기획과는 다르게 추가된 것들도 있었고 삭제된 것들도 있었다. (역시 개발은 클라이언트가 왕이지.. 라는 벌써부터 현업 마인드로 생각하는 것 같아 웃펐다 😂)

최종으로 수정된 기안들을 우리가 마음대로 쓸 수 있을까 조심스럽게 염려하기도 하고.. 이렇게 우리가 기획하고 디자인하고 개발까지 이어졌던 프로젝트를 남기고 싶었다.

기회가된다면 최종 기획에 따라 만들어진 웹페이지와 현재 페이지를 비교하고 싶기도 하다!! 리팩토링은 당연히 해야되고!! Werecord 2편에서 다시 만나길…