팀 프로젝트 회고 | 감지 센서 관리 프로그램 | 프론트

🎲벌써 1주일이 지난 원티드 프리온보딩 코스...!

원티드 프리온보딩 코스 - 1주차

WANTED가 주최하고 JustCode, Wecode 의 수강생(?)들이 참여하는 프리온보딩 코스.
난 JUSTCODE 수강생으로 참여했고 기업협업과제라니 걱정반 기대반이었다.
총 3주간의 기업협업과제 기간이 예정되어있는데 벌써 1주가 지났네... 1차 과제를 만들고 바로 2차과제를 시작해서 1차 후기도 아직 남기지 못한 상태이지만 ㅠㅠ
일단은 2차 과제 후기 START

기업협업 2차과제는 바딧에서 제공해주셨습니다.
과제 주제 : 감지 센서 관리 프로그램 개발하기..!!!

---

🎲과제 소개

• HTML / CSS / JavaScript / React를 사용
• 라이브러리 사용 제한 없음
• 페이지 구성
  • 센서 목록 페이지 : 데이터를 감지하는 센서 목록 나열
  • 그래프 페이지 : 센서 데이터를 그래프로 나타내는 대시보드 구현
• 두 페이지 사이의 이동은 자유롭게 구현
• 반응형 구현

---

🎲프로젝트 소개

프론트엔드 5명이 개발한 프로젝트입니다.
개발기간 : 3일

팀 노션 / 깃허브 Repository

배포 링크⬅️에서 직접 실행해보실 수 있습니다 :)

---

🎲주요 기능 소개

🌐 공통 페이지

1. 페이지 이동버튼 : 매 페이지 상단의 버튼으로 페이지 이동

🌐 센서목록 페이지

1. 필터/ 필터 초기화 : 배터리, 카드 넘버를 기준으로 필터링

2. 정렬 : 배터리, 카드 넘버, raw scent 기준으로 정렬

3. 배터리 부족 표시 : 배터리가 20%이하면 붉은색으로 표시

🌐 그래프 대시보드 페이지

1. 날짜 선택 : 날짜를 선택해 해당하는 날짜의 기온, 습도, 기압 그래프 확인

2. 그래프 확대 축소 : 그래프 확대/축소 버튼을 클릭해 일정 범위 내에서 확대, 축소

3. 그래프 재배치 : 드래그를 통해 기온, 습도, 기압 그래프의 위치를 재배치

4. 데이터 export : export 버튼을 클릭하면 데이터가 csv파일로 변환된 후 저장

---

🎲내가 담당한 기능

1. 페이지간 이동 버튼

각 버튼을 클릭하면 그에 맞는 주소로 이동한다. useNavigate를 사용했다.

---

2. 필터링 기능

공을 많이 들였던 부분
제 3자가 코드를 처음 봤을 때 어떻게 하면 바로 읽히게 할 수 있을까에 대해
고민을 많이했던 기능이다. 사실 완전히 만족스럽게 가독성이 좋진 않다고 생각하지만
그래도 기능작동이 잘 되고, 나름 깔끔하게 작성한 것 같다. 자세한 건 TIL에서...!
select에서는 onChange이벤트를 써야한다는 것을 확실히 배우게 된 계기 ㅋㅋㅋ
과제 제출 직전까지 해결이 안되다가 마지막에 해결해서 절대 잊지 않을 것 같다.

---

3. 배터리 20%이하인 경우 빨갛게 표시

위 gif에서 보다시피 배터리가 20%이하인 경우에만 빨갛게 표시되는 기능이다.

<td className={sensor.shadow.batLvl <= 20 ? 'low-battery' : ''}>
 {sensor.shadow.batLvl}
</td>

처음에는 className={sensor.shadow.batLvl <= 20 && 'low-battery}'라고 작성했다.
그렇게 하니 화면에 구현은 되지만 콘솔에 className은 false의 boolean값을 가질 수 없다는 워닝이 떴다.
처음에는 클래스네임에 조건부렌더링을 줄 수 없는 건가? 싶어서 useState를 통해 클래스네임을 관리하려고 했다.
그러나 그게 아니라 삼항연산자를 통해 sensor.shadow.batLvl <= 20이 false일 때의 경우도 부여해줘야 하는 것이었다.
이렇게 또 한층 코드에 대한 이해를 높여가는 중...

---

🎐느낀 점

구현해보지 않은 기능을 구현해보니까 확실히 좋다.

그간의 프로젝트에서 한번도 해보지 않았던 필터링기능을 처음 구현해봤다.
기완님도 이 부분을 하고싶어하셨는데 이번에는 양보를 해주셔서 감사히 맡음!
필터링이 구현되는 것 자체가 너무 재밌고 신기하다 ㅎㅎ
더 좋은 필터링 코드를 연구해봐야지

3일만에 만든 프로젝트라니

과제 규모가 크지 않은만큼 기간도 짧다. 3일이라는 시간이 주어졌는데...
난이도는 저번 클론 프로젝트보다 낮지만 시간이 짧으니 사실 상 비슷한 난이도로 느껴진다.
그래도 일주일동안 팀원분들과 잘 해나간 것 같아서 다행이다.
이제 또 팀이 바뀔텐데 컨벤션 맞출생각에 아찔하면서도 기대된다.

배포...쉽지 않은 녀석...

1차 과제 때 깃허브를 이용해서 배포를 하려다 실패해서 결국 netlify로 배포를 했었다.
그 때 사용한 방법은 깃허브 메인브랜치가 업데이트 될 때
자동으로 배포사이트도 업데이트가 되지 않아서 불편했지만
과제 제출을 해야했기에 어쩔 수 없이 배포를 했었다.

이번에는 gh-pages라는 라이브러리를 이용해서 깃허브 배포를 해보았다.
깃허브에서 서버를 빌려주는 개념이다. 이번에도 배포에 실패할까봐 걱정했는데
팀원들과 메타버스 zep에서 실시간으로 회의를 하며 진행하니 다행히 배포를 할 수 있었다.
깃허브 배포에 굉장히 도움된 블로그 -> 넘치는(하지만 나에겐 맞지 않는) 정보 속 한 줄기 빛이었던 블로그
gh-pages를 이용해 배포하니 메인브랜치를 업데이트하고 난 후 npm run build, npm run deploy만 해주면 자동으로 배포사이트도 업데이트되니 굉장히 편리했다.
이 부분은 다시 블로그로 정리해봐야겠다. 이제 AWS를 다시 시도해볼 차례...!🥲

후기를 마치며

짧은 시간내에 잘 마무리해서 다행이다 :)
클론 프로젝트도 재밌었지만 여러가지 기능을 구현해볼 수 있어서 기업과제도 참 재밌는 것 같다.