240502 회고 (토이프로젝트1 - 직원 인트라넷 서비스)
🔥 실 프로젝트 기간
2024년 4월 8일 ~ 2024 4월 21일
이번에 패스트캠퍼스 토이프로젝트로 팀프로젝트를 진행했다.
개발 공부를 하며 처음으로 진행한 팀프로젝트라 기대 반 두려움 반으로 프로젝트를 시작했다.
기대는 드디어 다른 사람들과 협업을 경험할 수 있다는 점이 가장 기대되었고, 두려움은 협업 중에 일어날 수 있는 실수들(ex. git main branch로 merge, conflict 등)에 대한 두려움이 있었다.
나 뿐만 아니라 다른 팀원들도 그런 실수들, 특히 conflict에 대한 두려움이 있었기 때문에 본격적으로 프로젝트를 시작하기 전에 conflict 해결하는 연습을 먼저 했다.
일부러 conflict가 나도록 파일을 수정하고, main으로 PR을 보내 conflict를 해결하는 연습을 했다.
그랬더니 git graph가.. 아래처럼 굉장히 정신없게 생기게 되었다 😂
위의 git graph를 유지할지, 아님 새로 repo를 만들어 리셋할지 논의 하고, ‘우리가 이런 conflict 테스트 등을 진행했다’ 라는 것을 남기자는 의견이 많아서 git graph 히스토리를 남겨두고 프로젝트를 시작하게 되었다.
이번 토이프로젝트1의 주제는 [직원들을 위한 인트라넷 페이지] 서비스를 만드는 것이였다.
첫 회의 때 페이지 컨셉? 디자인 등을 어떻게 잡을지 의논하다가 패스트캠퍼스가 생각났다.
내가 추구하는 개발자의 모습이 일상의 불편함을 해결할 수 있는 개발자이기 때문에 지금 내가 직접 느끼고 있는 불편함을 해결할 수 있는 서비스를 만들어보고 싶었고, 패스트캠퍼스가 딱 적합하다고 느꼈다.
그 이유는, 현재 출석할 때 오전, 오후에 한 번씩 핸드폰 어플로 QR체크를 하고 있는데 이 부분이 굉장히 불편하다.
굳이 핸드폰을 들고 QR을 찍어야 하고, 가끔 알 수 없는 오류가 발생해 QR체크가 원활히 진행되지 않아서 많은 수강생들이 수강정정을 하거나 스트레스를 받고 있다.
그래서 직원들이 출퇴근 하듯이 우리도 버튼 하나만 딱 누르면 입/퇴실을 기록할 수 있는 페이지를 만들어보고싶었다.
그리고 감사하게도 이 의견이 채택되어 우리는 패스트캠퍼스 수강생들을 위한 인트라넷 페이지를 제작하게 되었다!
[ 프로젝트 주요 요구사항 ]
프로젝트를 진행하기 앞서 어떤 페이지, 기능을 구현할지, 그리고 선택 요구사항은 얼마나 추가로 구현해볼지 팀원들과 의논했다.
일단 필수 요구사항은 물론 다 구현하는 것으로 정하고, 선택 요구사항에서는
- 로그인 기능
- 부재 신청시, 사유 기재 기능
- 페이지네이션
- eslint 설정, 커밋컨벤션, 문서화 등 팀프로젝트 시 필요한 추가 작업들
정도를 다뤄보기로 했다.
[ User Flow ]
일단 간단하게 유저플로우를 살펴보자면 처음 페이지를 접속했을 때 바로 로그인 화면이 나오고, 회원 정보가 없다면 회원가입 후 메인페이지에 접속할 수 있게된다.
각 페이지에서 다른 페이지로 서로 이동할 수 있고, 나는 시간과 관련된 메인페이지를 맡아 기능을 개발하기로 했다.
메인페이지에는 아래와 같은 기능들이 구현되어있다.
- 시간 관리 기능 개발
- 현 시각을 표시하는 시계 (타이머) 구현
- 토글 형태의 근무 시작 / 종료 스위치 구현
- 모달을 활용한 근무 시작 / 종료 확인 창 구현
- 간단한 공지사항 목록
- CRUD가 가능한 투두리스트
그리고 전체 결과물은 아래와 같다
[ 전체 결과물 ]
로그인 / 회원가입
- 로그인/회원가입 기능
- Firebase Authentication을 이용하여 하입한 유저 정보 관리
- Realtime Database로 유저의 이메일(아이디), 이름 등의 정보 저장
- 회원가입 시 유효성 검사(Form validation) 처리메인페이지
- 현재 시간을 나타내는 시계
- 입실/퇴실이 가능한 토글버튼
- Firestore Database로 각 유저의 입실/퇴실 시간, 투두리스트 정보를 날짜별로 불러온다마이페이지
- 현재 내 정보 불러오기
- 프로필사진 업로드 및 프로필 변경
- 메인 페이지에서 입실/퇴실 시간 불러오기
- 잔여휴가와 출결상황 확인휴가 관리
- 근태 리스트를 통해 알 수 있는 신청현황
- 필터기능을 통해 필요한 것만 볼 수 있다! (휴가, 조퇴, 외출)
- 휴가리스트에 신청하기 버튼
- 휴가 신청페이지를 통해 휴가/조퇴/외출 신청 가능
- Realtimne Database를 이용하여 휴가 제출 폼 실시간 관리, 휴가 폼 리스트로 출력
- 휴가 종료일, 휴가 신청란 예외처리
- 유저의 편의성을 위해 휴가 신청 후 휴가리스트로 자동 이동공지사항
- 공지사항의 자세한 내용 확인 가능자료실
- 패스트캠퍼스에서 제공하는 강의들을 한눈에 볼 수 있는 갤러리
- 필요한 강의를 선택하여 해당 페이지로 빠른 이동좋았던 점
아무래도 처음하는 ‘팀’프로젝트라 뭔가 협업을 한다는 느낌을 느꼈던 점이 좋았다.
특히 브랜치를 생성하고 merge하며 일어나는 conflict를 해결하고, 뭔가 코드를 공유 한다는 점..?
내가 작성한 코드가 다른 팀원에게서 재사용되고, 다른 팀원이 작성한 코드를 내가 재사용 함으로써 정말 ‘팀’ 단위로 작업한다는 느낌이 크게 와닿았다.
앞으로 더 있을 팀 프로젝트와 실무에서 큰 도움이 될 수 있는 첫 팀프로젝트가 되었던 것 같다.
아쉬운 점
처음으로 Firebase를 사용하여 데이터 관리를 해보았는데, 데이터를 저장하고 읽어오는 부분에서 새로고침을 하지 않아도 실시간으로 렌더링을 하고 싶었다.
이러한 이유로 onSnapshot을 이용했는데, 이 부분이 나를 정말.. 정말정말정말 애먹게 했다..
이 부분에 대해서는 따로 더 다뤄볼 예정이지만 조금 간단하게나마 풀어보자면,
onSnapshot은 현재 렌더링되고 있는 데이터가 가장 최신 데이터인지 주기적으로 확인하기 때문에 브라우저를 열어두면 주기적으로 네트워크 요청을 보내게 된다. 이게 무슨 말이냐면, FireStore의 읽기 데이터가 증가하게 된다.
이 부분을 설명하려면 정말 길어지기 때문에.. 다음 글에서 이어서 적도록 하겠다!
아무튼 나는 이 사실을 제출 30분 전에 알게 되었고, 이걸 고치기엔 이미 시간이 너무나도 부족했기 때문에 리팩토링을 하지 못 하고 프로젝트를 제출하게 되었다.
그래서 이 부분이 가장 아쉬운 점으로 남았다.. 물론 이후에 리팩토링을 하겠지만.
배운 점
‘공식 문서를 잘 읽자’ 이번에 진짜 너무 잘 배운 점이다..
공식 문서를 조금만 더 잘 읽었다면 아쉬운 점에서 언급했던 부분을 겪지 않았을까 싶은 생각이 든다.
하지만 또 한편으로는 아쉬운 점을 겪었기에 이런 부분을 또 배울 수 있지 않았을까 싶다.
그리고 이번 프로젝트를 하면서 scss에 대해서 도움 없이 작성할 수 있을 만큼은 더욱 배울 수 있었던 계기가 되었고, scss mixin이라는 걸 처음 사용해보며(팀원이 만들어줬다….ㅎ) 이 편리한 걸 이제 알았다고!? 했다 🤣
앞으로 노력할 점
특히 scss mixin 등은 나도 더 학습해서 다음 프로젝트 때 다른 팀원들에게 내가 도움을 줄 수 있는 부분이 되면 좋겠다는 생각이 들어서 이 부분을 앞으로 노력해보려고 한다.
일단은 JavaScript도 React도 아직은 많이 부족한 것 같아서 더 학습이 필요해서 관련 문서나 책들도 더 많이 읽어야될 것 같다.. 사둔 책이라도 얼른 다 읽어야지.
화이팅!