코드스테이츠 기업 협업 4주 프로젝트 후기

프최's log·2020년 12월 21일

TIL

목록 보기

110/137

본 포스팅에서는 기능 구현을 자세하게 설명하고 보여드리기보다
프로젝트 진행을 하면서 느꼈던 부분 등을 중심으로 작성 되었습니다.
~~프로젝트 내용에 대해 좀더 집중해서 보실 분들은 📌 프로젝트 노션 문서 를 통해 확인하실 수 있습니다.~~ ( 노션문서는 1~2주 후 공개될 예정입니다.)

Project Overview

　수강생들과 함께하는 프로젝트 외에 코드스테이츠에는 기업협업 프로젝트가 존재한다. 기업협업 프로젝트에 대해 내용을 듣고 어떤 프로젝트로 4주를 진행할지 결정하면 되는데 나는 기업에서 제시한 협업 프로젝트를 내용을 듣고 해보고 싶다! 라는 마음이 커서 지원서를 작성하게 되었었다. 기대반불안반으로 기다렸는데, 정말 운좋게 좋은 기회를 얻게 되어 위솝측에서 제안한 프로젝트에 참여할 수 있었다.
　이 기업협업 프로젝트의 주 목적은 기존 HTML 로만 구성된 체험모드를 React를 기반으로 새롭게 컨버전 하는 것인데, 4주동안 다양한 시도를 진행하며 공부할 수 있었다. 프로젝트 기간동안 든든하게 의지가 되는 팀원들 덕분에 기업측에서 제시한 최소 요구사항과 더불어 추가 요구된 기능까지 구현을 완료할 수 있었다.

Project : #Sol

🗓 작업기간

2020.11.09~2020.11.20

🔧 기술 스택

프론트엔드	백엔드	협업도구
JS	JS	Slack
React	nodejs	git-hub
React-Hooks	express
tailwindCSS	MySQL
HighCharts	AWS-EC2 & RDS

📋 주요구현사항

내가 담당한 부분 ✔

JWT 토큰 인증을 통한 로그인 구현 ✔
사업장리스트 페이지 ✔
- 리스트 출력 및 Daum Postcode를 이용한 사업장 추가 기능 구현 ✔
사이드네비게이션 바
- 클라이언트 사이드 라우팅을 이용한 사이드네비게이션 바 구현(폴드 기능 포함)
- 사이드네비게이션 바 내 서브네비게이션바 구현(폴드 기능 포함) ✔
관리사업장 페이지
- 일/월별 및 근무현황 파악을 위한 파이 차트 및 대시보드 구현
체크리스트 페이지
- 일별 집계현황 대시보드 및 조회 구현
- 모달창을 통한 담당 직원 설정(슬라이더/토글) 및 사진 첨부기능 구현
초대 페이지 ✔
- 개별/단체 팝업 기능 및 단체 팝업 내 개별/전체 체크 분류 및 검색 구현 ✔
- 초대 리스트 추가 및 삭제 구현 ✔
- 회원가입 완료된 직원 상세 정보 입력 및 조건에 따른 추가 옵션 필드 구현 ✔
업무일지 페이지 ✔
- 지시/특이사항 내 댓글 기능 구현 ✔
- 지시사항 등록 및 수정과 사진 첨부기능 구현 ✔
근무현황 페이지(공동작업) ✔
- UI 및 전체적인 모달 구현 ✔
- 직급 / 근무형태 / 기타에 따른 직원 필터링 조회 기능 구현
- 현재상황 그래프 디자인 구현 및 애니메이션 적용 ✔
- 직원 주간 근무일정 바 그래프 구현 및 애니메이션 적용
- 직원 상세정보 보기 및 수정 구현 ✔

📃 Before

기존 HTML 페이지는 사업장리스트와 관리사업장이 합쳐져있으며 그 안에서 좀더 세분화시켜야할 기능들을 페이지별로 만들고 UI 디자인을 개선하는 작업을 진행했다.

우리팀이 진행해야할 일은 크게 다음과 같았다.

사업장/관리사업장 페이지 별도 분류
초대 페이지 팝업 세분화
추가 세분화 페이지 제작 : 체크리스트 / 업무일지 / 근무현황

🎉 After - 구현한 기능

로그인 ~ 사업장리스트 페이지
관리사업장 페이지
초대페이지 페이지
체크리스트 페이지
업무일지 페이지
근무현황 페이지

좀더 구체적인 기능시현에 대한 내용은 [~~github wiki~~]에서 자세하게 확인하실 수 있습니다.
※ 노션 문서가 공개된 후, 링크를 수정하겠습니다.

🏷 프로젝트 리뷰

좋았던 점

개발에 있어서 자유도를 높게 주신 덕분에 다양한 라이브러리를 활용해보고, 도전해보고 싶었던 부분을 진행할 수 있어서 좋았다. 주간 단위로 주어지는 구현목표들을 보면서, 어떤 상황에서 직접 알고리즘을 짜서 기능을 구현해야하는지, 혹은 라이브러리를 어떤 때 써야하는지 등에 대한 타이밍 및 활용을 공부하게 된 기회였다.
현업에서 일하시는 디자이너 및 개발자분들과의 소통을 통해 실제 업무를 진행하는 부분을 간접적으로 체험할 수 있어서 좋았다. 특히 UI 디자인에 있어 XD 파일을 주고받으면서 작업을 진행했는데, 이점이 참 좋았다. SR 단계에서의 디테일 여부에 따라 작업 속도, 커뮤니케이션 그리고 구현 확장면에서 편해질 수 있는지 경험해볼 수 있어서 좋았다.
코드리뷰를 요청해서 어떤 점을 활용하면 좋을지 조언해주셔서 좋았다. 더불어 현업에서 CSS라던가 코드 스타일 등 궁금했던 부분들도 많았는데, 해당 기업스타일 기준으로 친절하게 답변을 주셔서 감사했다.
컨버전하는 부분에서 기존에 만들어진 구조 파악과 함께 백엔드와 소통하면서 어떤 식으로 맞춰나가야하는지 고민하고 코드 구현해나가는 방법이 무척 즐겁고 좋았다.

아쉬웠던 점

프로젝트를 완성 무렵, 기존에 문제가 없던 부분에서 연달아 버그가 생기는 부분을 발견했었다. 발표자료를 준비하면서 수정을 진행해나갔다. 하나가 완성되면 끝이 아니라, 연결되어진 페이지들도 잘 생각하고, 단계별로 테스트와 검사를 수시로 해야겠다고 다짐했다.
CSS 기본에 충실하게 임하고자 많은 라이브러리를 사용하지 못 했다. CSS 기본에 대해 어디를 더 공부해야할지 파악할 수 있어서 좋았지만, 추후 다양한 CSS 라이브러리를 활용해나가는 방향을 찾아야겠다고 생각했다.
프로젝트 기간에 구현해야할 부분이 많았기 때문에 내 실력으로 빠르게 할 수 있는 부분 위주로 선택하다보니 구현해보고 싶었던 기능은 프로젝트 기간 안에 해보지 못한 아쉬움이 있다. 그래도 다른 팀원이 진행한 코드를 보면서 이해하고, 추후 커스텀 코드로 만들어볼 수 있는 여지가 있었으므로 공부할 범위가 더 풍부해진 기회였다. 프로젝트가 종료된 후 개별적으로 도전해보고자 목록을 기재해두었다.

4주 프로젝트 기간동안 친절하게 진행을 도와주셨던 위솝과 함께 했던 인연은 즐거웠고, 정말 귀하고 값진 경험을 할 수 있는 감사한 시간이었다.