Project Overview
소개
오리샌드박스의 cosgram 1차 MVP 배포 참여
기간
2020.09.14 - 2020.10.16 (4주)
구성
프론트엔드 3명 / 백엔드 1명
사용한 기술
- React JS, JavaScript
- Redux, Redux Thunk
- Docker
- Styled Component
- Trello, Github
Trello
나의 목표
- 다양한 라이브러리의 빠른 활용
- Redux Middleware로 비동기 작업
나의 담당 역할
- Population 페이지, 로그인, 로그아웃 및 회원가입 구현
- Refresh Token으로 Access Token 재발급
- Redux로 Access Token과 Time Slider 데이터 전역 상태 관리
- 원데이터를 조건(지역, 시간)에 따라 Filter하여 라이브러리에 맞춰 데이터 재가공
- 서울시 지역별 나이, 시간에 따른 생활인구 데이터 시각화 - recharts, antd 라이브러리
Project Review
cosgram-proto1 MVP를 통해 배운 점
Docker
- Docker
AWS에서는 Docker를 애플리케이션을 신속하게 구축, 테스트 및 배포를 할수있는 소프트웨어 플랫폼으로 정의한다. - Docker vs VM (Virtual Machine)
Redux Middleware
나는 2차 프로젝트 때 리덕스가 무엇인지 살짝 맛만 본 상태에서 기업협업을 나가 Saga를 만나게 되었다. 덕님 (오리샌드박스 CTO님) 께서는 배우지 않았다면 미들웨어는 굳이 사용할 필요 없다고 하셨지만 나와 상구님, 승하님은 추석을 이용해 미들웨어 공부를 시작했다 🔥
- 미들웨어를 사용하는 이유
- Redux Thunk
- Redux Saga
Access Token & Refresh Token
로그인 및 회원가입을 두 번째로 맡게 되며 좀 더 깊이 있는 구현을 하고 싶어서 기존에 사용했던 Access Token과 새로운 Refresh Token을 활용해 로그인 연장 기능을 완성했다.
- Refresh Token
Access token은 유효 시간이 존재하는데 약 10분 정도로 짧다. Access token의 수명이 다했을 때 새로운 Access token을 발급 받기 위해서 Refresh Token을 이용한다.
Input type="range"
간단한 range slider를 만드려고 시도하다가 매우 놀라운 사실을 알게 되었다. 바로 input 태그의 range 타입!!
위와 같은 기본적인 range slider는 input type="range 태그로 매우 간단하게 완성된다. 물론 스타일도 다양하게 지정할 수 있다.
주절주절 느낀점
라이브러리도 실력이다 (feat. 공식문서)
기업협업을 나가기 전에 했던 프로젝트는 꼭 필요한 경우가 아니라면 라이브러리를 사용하지 않고 레이아웃, 스타일, 애니메이션 및 기능을 모두 구현했다. 내 손으로 한줄 한줄 코드를 작성하며 만든 (아주) 작은 기능들이 모여서 그럴싸한 웹페이지가 되었을 때의 쾌감이란...! 엄청나다...! 직접 구현하지 않고 라이브러리를 활용하는 것은 뭔가... 지는 느낌이 들어서ㅋㅋㅋㅋㅋ괜한 오기로 라이브러리를 멀리했던 것 같다.
적게는 몇 시간 많게는 며칠이 걸리는 기간을 거쳐 애니메이션 및 기능을 내 코드로 직접 완성하는 과정에서 정말 배우는 것이 많고 보람찼지만, 이런 속도로 현업에 나간다면 나에게 주어진 기간 안에 좋은 결과물을 만들 수 있을까 하는 걱정을 하게 되었다.
그렇게 기업협업을 와서 데이터 시각화 및 로그인 / 회원가입을 맡게 되었는데 디자인 기획부터 개발까지 온전히 각자의 몫이었다. 4주라는 기간 동안 새로운 작업 환경에 적응하며 주어진 프로젝트를 빠르게 끝낼 수 있었던 것은 바로 라이브러리의 효율적 활용 덕분이었다. 남이 만든 라이브러리를 사용하는 것도 쉽지 많은 않다. 이때 가장 빠른 지름길은 공식문서를 샅샅이 뒤져 내 입맛에 맞는 속성과 필요한 데이터 구조를 파악해야 한다.
그 전에 라이브러리를 잘 활용하니 레이아웃, 애니메이션 등에 쏟던 시간을 줄여 좀 더 좋은 코드와 기능에 집중할 수 있었고, 좀 더 리액트스럽게(?) 개발하는 느낌이 들었다. 앞으로도 두 손 벌려 라이브러리를 환영하겠지만 도전하고 싶은 기능은 직접 구현해보는 오기를 부릴 것이다 ^_^
