만도의 개발 블로그
Shlee 대시보드 페이지를 리액트로 마이그레이션하기

Table of contents

리액트로 앱을 만들기로 결정했다. 본격적으로 만들어보는 리액트 앱인 만큼 잊어버린 개념이 없는지 확인할 겸 공식 문서를 따라 열심히 tic-tac-toe를 만들었다(추가 기능까지✌️). 이제 앱을 만들 차례. 만들어 보고 싶은 것은 많았지만 새로운 앱을 만드는 대신 이전에 만든 페이지를 React로 마이그레이션 하기로 결정! 그 이유는

  1. 리액트의 장점을 더 잘 알 수 있을 것 같아서

    리액트의 장점을 소개하는 글은 아주 아주 많지만, 아직 그 장점이 피부에 와 닿지 않았다. 바닐라 자바스크립트로 만들어진 페이지를 리액트로 마이그레이션 하면서 똑같은 기능을 두 가지 방식으로 만들어 보면 두 개의 차이점을 더 잘 알 수 있지 않을까?

  2. 기존에 만든 페이지가 점점 커지고 있다

    기능이 점점 추가되면서 복잡해지고 있는 상황이었다. 언젠가 리팩토링을 해야된다면 이 기회에 리액트로 바꿔보는 것도 좋지 않을까?

다행히도 리액트는 점진적으로 적용 가능하다. 페이지를 싹 갈아 엎지 않고 작은 부분부터 점차 적용시켜 나가기로 하였다.

기존 프로젝트에 대해 알려줘

리액트로 다시 만들어 볼 페이지는 영상 제작자 & 모션 디자이너인 Shlee의 포트폴리오 사이트의 대시보드 페이지. 이 페이지는 포트폴리오를 업로드 하거나 수정, 삭제하기 위한 목적으로 만들어졌다. 지금은 간단한 기능들만 제공하지만 조만간 진짜 대시보드 페이지처럼 방문자 통계와 같은 기능들을 추가할 예정. 지금 모습은 이렇다.

dashboard1 dashboard1

사용한 기술 스택은 다음과 같다.

이번 프로젝트의 목표 및 일정은?

리액트로 앱을 마이그레이션 하는 것은 표면적인 목표고, 주 목표는 리액트 학습이다. 앱을 완성시키는 단편적인 목표가 아닌 만큼 학습하고 배우는 시간을 고려하여 총 일정을 한 달(6.2 ~ 6.30)로 잡았다. 성장을 바탕으로 다음과 같은 목표들을 세웠다.

앱을 완성했을 때에는 목표를 전부 이뤘기를 희망해 본다👍

요구 사항 작성

실제 개발에 들어가기 앞서 프로젝트 요구 사항을 먼저 작성한다.

  1. 현재 대시보드의 기능을 전부 제공해야 한다.
  2. 기능을 추가하지 않는다.
  3. 디자인은 다소 변경될 수 있다.
  4. UI 컴포넌트 단위로 리액트를 부분적으로 적용해 나간다.
  5. UI 컴포넌트 리스트는 다음과 같다
    • Button(Plain, Icon)
    • Link
    • Letter Avatar
    • Draggable ⭐️: 드래그로 리스트의 순서 정렬을 가능하게 하는 UI
    • Dropzone ⭐️: 파일 업로드 기능을 담고 있는 UI
    • Input(Text, Multi Line, Number)
    • Radio
  6. UI 컴포넌트들은 오픈 소스 라이브러리를 참고하여 작성하도록 한다.
    • Material-UI
    • Semantic ui react
    • Dropzone
    • Draggable

업무 단위 리스트업

작성된 요구 사항을 바탕으로 업무를 나눈다. 업무 계획이 잘 되어 있어야 일정 관리와 업무 컨트롤이 용이해진다. 나뉘어진 업무는 우선순위를 매겨 다음과 같이 정리했다.

  1. 개발 환경 세팅
    • 부분적인 react 적용을 위한 환경 구성하기
    • Material-UI 준비하기
  2. Button UI 개발
    • 기본 버튼 개발
    • 아이콘 버튼 개발
  3. Input UI 개발
    • 기본 input 개발
    • multi line 기능 추가
    • 숫자 입력만 가능한 기능 추가
  4. Radio UI 개발
  5. Dropzone UI 개발
  6. Form 구성하기
    • 지금까지 개발된 컴포넌트를 바탕으로 Form 재구성하기
    • 필요에 따라 상태 저장 방식을 리팩토링
  7. Draggable UI 개발
  8. Letter Avatar UI 개발
  9. React App으로 변경하기
    • 최종적으로 Html에는 root 엘리먼트 하나만 존재하도록 변경

완료되는 업무 순으로 내 github 저장소에 PR을 날릴 것이다. 자, 이제 시작해 보자!🔥

© 2017 Kiko. All rights reserved.