비전공자 주니어 FE 개발자의 2024 - 3분기 회고

무더운 여름이 지나 선선해진 가을이 오고 있다. 짧게 지나갈 이 가을의 선선함을 오랫동안 만끽하고 싶다.

2024년이 100일도 남지 않은 지금 시점에서 3분기 회고를 통해 그 동안의 했던 일을 정리하고

남은 한 해를 어떻게 보내고 싶은지 계획하는 시간을 가져보려고 한다.

 

디자인 시스템 업데이트 🎉

디자인 시스템은 대부분 이전 버전에서 크게 수정되는 부분은 없었지만, 우리 서비스에 좀 더 잘 어울리고 UI와 UX 까지 고려하여 기존 보다 더 나은 방향으로 업데이트를 했다.

Jira에 등록된 디자인 시스템 일감목록

 

디자이너와 상의 후 업데이트 해야할 디자인 시스템 리스트를 Jira에 일감으로 등록하여 branch를 등록 후 하위 branch로 작업하여 하나의 branch에서 한번에 업데이트 하도록 작업을 진행했다.

 

ToggleDropdown 컴포넌트

 

작업하면서 기억에 남았던 부분은 ToggleDropdown 컴포넌트였다.

이 컴포넌트는 유저가 checkbox가 포함된 dropdown item 중 다수의 아이템을 선택할 수 있는 기능을 제공하는 컴포넌트이다.

 

기억에 남는 이유는 dropdown item 중 Select all items가 있는데, 이를 구현하기 위해 uncontrolled input 컴포넌트에서 어떻게 구현해야할 지 잘 생각이 떠오르지 않았기 때문에 구현에 시간을 오래 소요했기 때문이다.

 

React-hook-form 라이브러리를 사용하여 각 input 별로 상태값을 가지는 것이 아닌 uncontrolled input으로 관리하면서 dropdown items 중 "모두 선택"을 선택 시 다른 아이템들도 선택이 되어야하며 예를 들어 4개의 아이템이 존재 시 4개의 아이템을 직접 선택했을 때 자동적으로 "모두 선택"도 선택 되도록 하는 로직을 작업했다.

 

위 작업을 하면서 React-hook-form을 다루는 법에 대해 더 자세히 알게되어서 기억에 남는다.

Input 상태값과 상태값 변경함수 때문에 코드가 복잡해지고 길어지는 것을 간단하게 해결할 수 있어서 좋았다.

 

 

플랫폼 통합 모니터링 패널

그동안 POC용 패널을 고객사에 맞게 커스터마이징 하여 제공해온 모니터링 패널 화면을 통합하였다.

이제는 (주) WATAAI의 플랫폼에서 기본으로 제공하는 형식을 갖게된 것이다.

 

플랫폼에서 기본으로 제공하는 형식을 갖게된 계기는 고객사에서 우리 플랫폼에서 어디 부분까지 제공해주는지 요청했을 때,

기본으로 제공하는 형식 없이 고객사 요청에 맞게 만들어 드린다고 답변하는 것 보다 기본으로 제공되는 항목들이 있고 여기에 고객사 니즈에 맞게 추가해드릴 수 있다라고 답변하는 것이 훨씬 설득력 있기 때문이다.

 

그 결과, 물류 타입 별 총 4가지의 패널 디자인과 기획이 추가되었다.

 

예시로 하나의 화면을 보여주자면, 물류 타입을 선택하는 패널과 각 물류 타입별로 분기된 패널이 등장한다.

물류 타입별로 패널을 분기하니 비즈니스 로직을 코드에도 잘 녹여낼 수 가 있어서 유지보수가 편리해졌다.

 

통계 페이지

통계 페이지는 기존에 막연한 데이터들이 필요할 것 같아 미리 만들어 둔 페이지였다. 올 10월에 해외 시연 때 작업 지시서에 따른 실제 지게차 작업 시간 및 작업량, 지게차 이동 거리 등의 데이터를 기반으로 생산성과 효율성, 이용률을 시각화 하는 작업이 주어졌다.

 

생산성 지표

효율성 지표

이용률 지표

 

생산성 지표: 지게차 작업별(Picking, Putaway, Shipment, Receipt)로 CBM, CPH를 그래프로 나타낸다.

 

물류 용어 알아가기

- CBM: 화물 비용 계산 시 부피를 측정하는 단위이다. (1m x 1m x 1m)

- CPH: "시간당 사례"로, CPH가 높을수록 상품 이동이 빨라져 배송 일정을 준수하고 고객 만족도를 높일 수 있음을 의미한다.

- PPH: 시간당 조각(소포)으로, 한 시간에 몇개의 소포를 이동시켰는지에 대한 지표이다.

- MHE: 제품, 화물 등을 이동, 저장, 관리하는데 사용되는 장비를 의미한다. 여기선 "지게차"

 

누적 바 그래프와 누적 바 + 라인 그래프는 rechart에서 비슷한 예제가 있어 비교적 간단하게 구현이 가능했다.

하지만, 이용률 지표에서 각 지게차별 하루동안 이용시간별 CPH를 보여주기 위한 차트는 예제가 없어서 어떻게 구현해야할지 생각해야했다.

그래서 생각해낸 방법이 0~24시간의 길이가 있고 이용하지 않은 시간은 투명색으로 보여주고 이용한 시간은 CPH에 따라 투명도로 분기하여 보여주기로 했다.

 

 

👍 Liked

• Rechart 라이브러리를 활용하여 커스터마이징한 그래프를 만들어 낸 성취감이 좋았다.
• 디자인 시스템 업데이트 할 때, 컴포넌트 사용성까지 생각해 결과를 완성하여 효율적인 사용성을 얻어낼 수 있어 좋았다.
• 제품이 사용자에게 어떻게 보여지고 어떤 목적으로 사용되기 위함인지 파악한 상태로 개발을 시작하니 이해가 잘되서 좋았다.
• Input 상태값을 사용하는 대신, React-hook-form을 사용하여 복잡한 코드를 간단하게 바꿔서 가독성을 높인 점이 뿌듯하여 좋았다.
• 플랫폼의 비즈니스 로직대로 코드를 매칭할 수 있어 유지보수성이 높아져서 좋았다.

📘 Learned

• 고객사를 설득할 때 아무 것도 없는 상태에서 고객의 니즈를 맞춰주기 보단 우리 제품이 가진 장점을 활용하여 설득할 때 더 설득력이 있다는 것을 배웠다.
• 단순히 개발만 하는 것에서 벗어나 Product(제품) 위주로 일을 하면서 제품 의도, 디자인까지 고려하게 되니, 제품에 대해 더 깊이 배울 수 있었다.

😅 Lacked

• Recharts 라이브러리를 사용하면서 커스터마이징의 불편함과 한계점을 느꼈고, 디자이너가 요구한 사항 100%를 만족하지 못한 점이 아쉬웠다.
• 매주 금요일마다 진행했던 Frontend 코드리뷰 시간을 열심히 못해서 아쉬웠다.

느낀점

이번 3분기를 보내면서 많은 생각이 들었던 것 같다. 프론트엔드 개발자로 내가 앞으로도 계속 먹고 살아갈 수 있을까? 내가 이 직업을 몇 살까지 할 수 있을까? 앞으로 10년 후에는 내가 무슨 일을 하고 있을까? 등 미래에 대한 생각이 더 자주 들었던 것 같다.

미래에 대한 걱정과 불안 때문에 1분기, 2분기 때 만큼 열심히 자기계발과 업무에 집중하지 못했던 것 같다.

그렇지만 추석 연휴를 보내면서 마음을 다잡고 내가 미래에 갖고 싶은 직업, 되고 싶은 사람, 나의 목표를 위해 더 정진 해야한다고 다짐했다.

그래서 코딩 테스트 공부도 틈틈히 하고 이력서 업데이트를 위해 내가 진행했던 작업들도 정리하면서 미래에 이직에 대한 준비를 했다.

 

퇴근 후에는 런닝과 맨몸운동도 시작하여 하루동안 쌓인 스트레스도 풀고 머리를 맑게 하였다. 앞으로 남은 한 해 동안은 어렵게 잡은 마음을 꾸준히 오랫동안 유지하는 것이 목표다.

 

코딩 테스트 공부, 해외 취업을 대비한 영어 공부, 회사 업무, 이력서 업데이트, 결혼 준비, 운동, 인간관계, 가족 등.. 해야할 일이 산더미처럼 많아 보이지만 나보다 더 열심히 사는 사람들이 있다는 것을 안다. 그 사람들과 비교하지 말고 나의 속도대로 꾸준히 나아가면서 어제보다 더 나은 내가 되기 위해 노력해야겠다.