팀 프로젝트 BuildUp 회고
BuildUp 바로가기
깃헙 레포지토리 - 클라이언트 바로가기
깃헙 레포지토리 - 서버 바로가기
첫 프로젝트에 들어서면서 드디어 내가 배웠던 것들로 유용한 서비스를 만들어 낼 수 있다는 것이 실감되기 시작했다. 또한, 다른 사람들과 함께 페어프로그래밍에서 무의식적으로 해왔던 깃 설정과 브랜치 관리 등을 왜 해야하는지 체감할 수 있었다. 계획, 설계, 구현, 배포 단계에서 무엇을 준비 해야할지 윤곽을 잡을 수 있었던 뜻 깊은 경험이었다.
1. BuildUp 개요
최근 코로나19의 여파로 언택트가 일상화되면서 더 밀접해졌다. 우리에게 인터넷은 떼어놓을 수 없는 공간이다. 업무를 보고 여가시간을 보낼 때 더 이상 인터넷은 선택이 아닌 필수다. 매일 브라우저를 당연하게 실행하면서 가끔씩 드는 생각은 흰색 바탕의 첫 화면은 단순하고 명료하지만 어쩐지 삭막하다는 것이다. 우리는 일상적으로 사용하는 브라우저의 홈 화면에서라도 편안함을 느낄 수 있도록 하면 어떨까라는 생각에서 이 프로젝트의 방향을 잡았다.
또한, 이전 근무현장에서 별도로 바탕화면에 일정관리 어플리케이션을 설치하여 사용한 기억이 있었다. 바탕화면과 달력 어플리케이션이 일체화되어 있다보니 사용하면서 조작에 불편함이 있었다. 이를 브라우저 홈 화면이라는 격리된 공간에 분리하면 불편함을 줄이면서도, 홈 화면의 활용도를 높일 수 있을 것이라는 생각이 들었다.
오늘의 날씨에 맞추어 아름다운 배경을 제공하고, 미려한 디자인의 일정관리 서비스를 제공하면 유용하지 않을까라는 생각을 다듬어가면서 프로젝트를 진행하였다.
2. 프론트엔드에서 적용한 기술스택
이번 프로젝트에서는 프론트 엔드를 맡아 진행하였다. 프론트 엔드에서 사용한 스택과 이유는 다음과 같다.
- 각 페이지와 구성요소를 컴포넌트 단위로 구성하여 설계할 수 있으며, 재사용이 가능하다. 모달창에 적용하였다.
- React Router를 사용하여 페이지 간 관계와 흐름을 명료하게 할 수 있다.
- Hooks의 useEffect를 사용하면 라이프 사이클에 따라 원하는 액션을 특정 상태의 변화에 따라 실행시킬 수 있다.
- 상태를 전역으로 관리할 수 있다. 모달과 날짜 선택에 적용하였다.
- 상태를 드릴링으로 필요한 컴포넌트까지 전달하지 않더라도 접근할 수 있다.
3. 프로젝트의 주요기능
3. 1. 메인페이지 캐로셀
메인 페이지는 달성도, 일, 주, 월 일정으로 구성되어 있다. 4개의 페이지를 캐로셀 형식으로 구성하여, 각 페이지를 넓게 사용하면서도 자연스럽게 이동할 수 있도록 하였다. 단, 이러한 방식은 첫 페이지와 마지막 페이지를 오갈 때 지루해질 수 있어, 인피니트 캐로셀로 제작하여 이동시간을 줄이고자 하였다.
캐로셀은 React Hooks와 CSS 효과를 사용하여 제작하였다. 해당 버튼을 눌렀을 때, 전환하는 CSS효과를 각 컴포넌트의 클래스네임으로 부여하고 버튼을 비활성한다. CSS 전환효과가 끝나면 새로운 배열로 컴포넌트를 다시 랜더링하고, 버튼을 활성화하였다.
3. 2. 달성현황
우리는 종종 할 일을 적어놓지만, 작심삼일로 끝나곤 한다. 그 이유 중 하나가 성과가 눈에 잘 보이지 않기 때문이라고 생각했다. 지금까지 얼마나 해왔는지와 앞으로 얼마나 남았는지를 자주 노출시키고 보기 쉽게 표현한다면 긍적적인 피드백을 줄 것이라고 생각했다. 또한, 단기/중기/장기적인 관점에서도 확인할 수 있도록 방향을 잡았다.
TODO 리스트를 Redux 전역 상태로 관리하여, 일/주/월 일정 페이지에서 변경하면 바로 반영하도록 했다. 또한, 성취현황에 따라 각기 다른 메시지를 출력하여 소소한 재미를 주고자 했다.
3. 3. TODO 리스트 Drag & Drop, CRUD
각 목록의 리스트들을 Drag & Drop으로 언제 어디서든 수정할 수 있도록 편이성을 제공하고자 했다. 이 기능은 HTML의 드래그 이벤트, React Hooks, CSS로 구현하였다. Drag Enter, Over, Leave 이벤트에 리스트가 아닌 다른 오브젝트가 대상이 되었을 때 리스트를 정렬하는 반복문에서 에러가 발생하였는데, 클래스명으로 이벤트 대상을 특정하여 해결하였다. 그리고, 각 리스트들은 순서, 고유키값을 가지고 있어야 했다. 이를 HTML 요소의 읽기전용 속성인 Dataset으로 각 리스트마다 속성과 값을 설정하여 해결할 수 있었다.
TODO 목록은 메인페이지와 모달창으로 작성, 편집, 삭제할 수 있다. 특히, 수정할 때 필요한 textarea는 편집 버튼을 눌렀을 때에만 글자가 적혀 있는 위치에 나타나며, 기존 텍스트가 적혀있도록 하였다. 이는 React Hooks의 로컬 상태를 이용하였는데, 상태값이 특정 리스트의 Dataset 값 중 Primary Key의 값과 동일할 때 textarea를 렌더링하도록 하여 구현했다.
3. 4. 모달창: TODO 관리자
주, 월 TODO를 작성하는 페이지는 모달창을 실행하여 수정하도록 구성하였다. 이는 하나의 페이지가 담고있어야 할 정보가 너무 많고, 화면에서 일정 이상 크기를 유지해야 하기 때문이었다. 따라서, 특정 요일을 클릭하면 해당 일에 대한 TODO를 CRUD할 수 있는 모달창이 생성되어 내려오도록 하였다.
선택한 날짜는 Redux의 전역 상태로 관리하였다. 이는 사용자가 날짜를 바꾸었을 때 주, 월 페이지에서도 해당 요일에 맞는 주, 월이 표시되어 착오가 없도록 하기 위함이었다.
4. 마무리
4. 1. 잘했던 점
-
잘 모르는 것이더라도 시도해보는 자세. 처음 캐로셀과 Drag and Drop을 직접 구현할 때에는 어떻게 해야할 지 고심이 되었지만, 필요한 자료와 예시들을 찾아보고 나만의 방법으로 만들어보면서 계속해서 파고든다면 해낼 수 있다는 확신이 생겼다.
-
매일 아침 10시, 저녁 6시 각자 일정과 이슈를 공유하는 시간을 갖는 것. 프로젝트 전체일정을 관리하는 것은 각자가 수행할 수 있는 업무의 양, 난이도를 파악하는 것이기도 하다.
-
문제가 생기면 다른 사람도 알 수 있도록 즉시 공유하는 것. 프로젝트는 팀 단위로 진행하는 것이고, 역량과 수준은 각자 다르다. 나한테 문제가 되지 않는다고 생각하는 것도 다른 사람에게는 문제가 될 수 있다. 반대의 경우도 분명 존재한다. 배우는 방법에는 여러가지가 있지만, 정해진 기한 내에 많은 것을 해내야 하는 프로젝트에서는 꼭 필요했다.
4. 2. 부족했던 점
-
계획 단계에서 컨셉을 명확히 통일하지 않은 것. 돌이켜보면 첫 프로젝트에서는 크게 비중을 두지 않았나 싶다. 그러다보니 서로 생각하는 핵심요소가 상이하여 중간에 전반적으로 수정하는 과정이 있었다.
-
테스크 카드를 점차 관리하지 않고, 에러 핸들링을 미리 공유하지 않았던 것. ENV 설정이나 단순오류 등 쉽게 해결할 수 있는 문제로 애를 먹는 경우가 종종 있었다.
-
더 나은 경험을 제공하는 UX, UI 디자인을 계획단계에서 함께 고민해보는 것. 캐로셀 페이지에서 우측 버튼은 모달에 가려지는 치명적인 단점이 있었다. 또한, 메인 페이지의 비로그인 기능이 없다는 점도 사용자 입장에서 더 생각했어야 하는 부분이었다.
-
항상 롱런을 하는 것이 중요하다. 스케줄 및 체력관리를 하여 번아웃이 오지 않도록 하는 것. 마지막주는 허리 통증이 심해져서 하루종일 파스를 붙이고 있던 기억이 난다. 틈틈이 주 최소 2회 3km 런닝과 규칙적인 생체리듬을 지키도록 하자.
-
필요한 스택과 라이브러리에 대한 사전조사. 캐로셀 Week, Month 페이지를 구현할 때 처음에는 자바스크립트의 Date객체를 사용하였다. 마지막 날에 하루가 더해지면 다음 달로 넘어가지만, 첫 날에 하루를 빼면 해당 달의 마지막 날로 넘어가는 치명적인 문제가 있었다. 이러한 부분은 date-fns와 같은 라이브러리를 사용했으면 쉽게 해결할 수 있는 문제였다. 또한, 이번 프로젝트는 역량향상을 목표로 캐로셀과 Drag and Drop을 직접 구현했지만, 다음 프로젝트부터는 최소 요구조건을 충족할 수 있도록 적절한 라이브러리를 적용할 예정이다.
Leave a comment