- League of Legend의 Item을 판매하는 Lonely Vending Machine.
- Codesquad 프로젝트. 원래는 2인 1조의 Team project 였지만 Math.random()의 운명과 같은 장난으로 Personal project로 진행하게 되었다. 혼자만 혼자라서(?) 외로운 시간이었지만 페어의 소중함과 개인 프로젝트와 페어 프로젝트의 차이를 가늠해 볼 수 있는 기회이기도 했다.
- Observer pattern을 통해 Model과 View를 분리하려는 시도를 하게 됐고, subscribe와 fire를 통해 React 라이브러리 작동원리의 근간을 생각해 볼 수 있는 프로젝트였다.
- 리액트를 적용하지는 않았지만 템플레이팅을 이용해서 리액트스럽게(?) 프로젝트를 진행했다.
- https://raccoon-vending-machine.herokuapp.com/
- 헤로쿠에 배포했다. 서버가 실행될 때까지 1분여의 시간이 필요할 수 있어요! 끈기있게 기다려 주... 클ㄹ클클릭! 😅
- 첫 실행화면 왼쪽 Lonely Wallet에는 랜덤한 금액이 들어있다.
- 지갑의 숫자 버튼을 누르면 금액 디스플레이에 투입금액이 입력되고, 화폐단위의 갯수가 모자라면 버튼은 disabled된다.
- 투입된 금액에 따라 구매 할 수 있는 아이템이 녹색으로 바뀌며 활성화 된다.
- 활성화 된 아이템을 누르면 하단 디스플레이에 아이템이 출력되고, 금액 디스플레이에서 금액이 차감된다.
- 재고는 0~10개까지 랜덤이며, 무료인 아이템은 재고가 소진될 때까지 계속해서 구매 할 수 있다.
- Return 버튼을 누르면 금액이 반환된다.
- 데이터를 비동기로 받아오는 과정에서 async 지옥에 빠졌다. 리액트처럼 개발하느라 컴포넌트가 컴포넌트를 계속해서 호출하는 방식이었기 때문에 엔트리 포인트가 App.js가 되고, 비동기 로직이 있는 곳에서부터 엔트리 포인트까지 거쳐가는 모든 함수를 async 함수로 만들어줘야했다.
- 그 동안 data와 view를 분리 할 필요성을 느껴왔지만 그 개념을 잡기가 힘들었다. Observer pattern을 적용시키며 이 둘을 나누는 부분이 개념상 가장 힘들었다. Model class와 View class의 상속관계를 고려하며 data method를 몇 번이나 수정해야 했다.
- 외부 api를 불러와서 데이터로 사용하는게 npm 라이브러리를 배포하고, 적용하는 것만큼 신기하고 재미있다. 이번 자판기 프로젝트에서는 일반 품목을 판매하면 밋밋할 것 같아서 롤 아이템 api가 있는지 찾아봤다. 데이터가 있는 것도 신기했고, 이미지까지 가져와서 사용하니 실제 자판기처럼 보여서 만드는 재미가 더해졌다.
- 어플리케이션을 만들면 웹 어디에서든지 볼 수 있도록 배포를 하고 싶어지는데, 처음으로 헤로쿠를 통해서 배포를 진행해봤다. 긴 삽질의 시간이 있었지만 env.process.PORT 와 같은 설정을 통해서 배포 디버깅도 경험해보게 됐다.
- 하고 싶은 일이 남아있으니 주말을 이용해서 프로젝트를 마무리 짓는 일조차도 즐거웠다. 그럼에도 불구하고 미흡한 부분들이 있지만 처음 목표했던 거의 모든 기능들을 구현하고, 배포까지 했다. 무엇보다 model과 view의 역할 분리에 대한 고민을 많이 했고, observer pattern이 리액트에서 어떤식으로 작동하는지에 대한 고민도 시작하게된 계기가 됐다.
