🎮 게임관리 툴 프로젝트

(게임 전문 퍼블리셔의 백 오피스 개발)

📆 2021년 4월 - 2021년 5월 | 1개월

🤼‍♀️ FE: 4명 구성

• 프로젝트 트리구조를 기반으로 한 컴포넌트 설계
• Scrrum 방식의 프로젝트 프로세스 운영 (Tello, Slack툴 사용)
• 코드 버전 관리( Git, github 활용, 기본 기능 및 rebase 적용)
• Styled Components를 사용한 UI 구현 및 컴포넌트 재사용

(1). 라우터를 효율적으로 활용해보자.

단순히,UI 확인을 위해 라우터를 사용했다면
앞으로는 좀 더 효율적이고, 가벼운 라우터 관리가 필요하다고 느낀다.
사용자가 클릭했을때 어떠한 퍼포먼스를 보여주거나
페이지가 이동되는것을 확인할 수 있는데,

🏃웹은 동적과 정적으로 만들어졌다.

동적인 부분은 랜더가 되면서 최적화가 되는게 맞겠다.
우리는 네비게이션 부분을 최대한 효율적으로 설계를 해야할 필요가 있다.

기존에 방식과 비교하여 확인해보자.

before

기존에는 프로젝트를 각 페이지마다 분담해서 맡았으며,
UI를 보면서 작업을 하는 과정이다 보니 Routes에 신경을 쓰지 않았다.

after

App.js에서 즉,Routes부분에서
Home component 에서 모든것이 실행되기 위해 따로 분리해두었다.
리액트를 사용하는 목적도 컴포넌트를 분리하여 좀 더 가벼운 성질을 만들기 위해서 인데,
라우터에서 기존 방식으로 설계를 하면 결코, 리액트를 사용할 이유가 없어진다.

분리하지 않게되면?? 🤔

☞ 광범위 해진다면 속도도 굉장히 효율적이게 나오지 않을 것이다.

결코, 그 웹은 서비스 하기에 여려움이 있다.

반면,

🧑🏻‍💻 이런식으로 랜더 되는 범위만 분리한다면?

동적인 부분만 Route 를 따로 빼두게 되면
Navbar 를 클릭했을때 각각의 페이지가 보여지면서 효율적으로 사용 할 수 있게 되는것이다.

---

(2). datapicker 라이브러리 활용

📆 캘린더 기능

기업협업 프로젝트 진행중에 달력기능을 구현하던 중
datePicker 라이브러리를 사용해 다음과 같이 만들어 봤다.

정리를 간단히 해보자 !
reactdatepicker 참조

아이콘을 클릭할 시 이벤트가 발생하는 부분이 추가되었다.

useRef 를 사용하여 만들었다.

코드를 보자

• 먼저 기본 라이브러리에서는 영어로 제공되며, 한글을 바꿔줬다.
• setOpen에 state가 열리는 부분을 가져오기 위해서
  useRef로current 에 datepicker 에 제공해주는 setState 를 true 값으로 설정해서
  onClick 이벤트를 발생시켜 기능을 만들어 보았다.

---

(3). 📈 게임유저 데이터(그래프 기능)

• chart.js 라이브러리 활용한 데이터 시각화 기능 구현

해당 프로젝트 게임 유저들의 통계를 그래프로 설계해야한다.

디자인시안으로 만들기로 했고, 원래는 cube.js로 데이터를 받아서 직접 구현하기로 했으나,
아쉽게도 진행하지 못했다...

그래서 라이브러리를 활용한 chart.js를 이용해 구현했다!

이제 디자인시안으로 실제 데이터값을 알 수 없기에 목데이터를 이용했다.

자식컴포넌트 Table에 대한 값을 props로 전달 받아
labels값은 가로축에 월단위를 직접 데이터를 넣어 표시했고,
datasets에 index값을 뽑아서 데이터를 불러왔다.

잘 이해할 수 있도록 피드백을 주신 현업 개발자분과 대표님께 감사드립니다.👍

🙏 회사에서 진행한 프로젝트는 회사 특정상, 전체적인 UI는 공개 할 수 없는 점 양해부탁 드립니다.