4월부터 기획하고 6월 중순에 개발을 했던 WegoUp프로젝트가 끝이 났다.
프로젝트 소개
- 한국, 미국 주가와 그에 관한 실시간 뉴스들, 그리고 비트코인을 차트별로 직접 볼 수 있는 사이트 기획 및 개발
개발을 하게 된 계기
4월이면 한창 비트코인과 주식의 바람이 불때였다.
평소에도 그냥 관심만 있었고 10만원내의 소액투자만 하고 있었는데 주변을 둘러봤을 때는 그 열풍을 매우 실감했다.(사실 그래픽카드 가격 때문에 체감은 하고 있었다.)
(원래는 올해 1월에 데스크톱을 맞출려고 돈을 모아놨었는데 채굴때문에 그래픽카드가...;;;;)
아직도...아놔...
주변에서의 체감
삼성전자주식에 관한 이야기들, 도X코인에 관한 이야기들, 하루종일 차트만 보고있던 사람들 등등...
내가 생각했던 것보다 투자에 관한 이슈는 훨씬 더 컸다.
그 와중 친구와 술을 마시고 있는데 친구놈도 코인에 관해서 얘기를 하더라. 지겨워질려고 하는 찰라에 친구가 정보정보 외치던 말에 생각이 났다.
"어쩌면 다른 것 다 필요없이 그 주식 및 비트코인 관련 정보들을 한 곳에 모아두면 어떨까.."
마침 본격적으로 웹 개발(리액트 개발)을 공부하고 있던 나였어서 조금만 더 공부하고 개발에 들어가자라고 결심했다.
개발 돌입 but Typescript?
어느정도 꽤 리액트에 익숙해졌다고 생각을 해 토이프로젝트로 이제 진행을 해보자 생각했다.
Why Toy?
사실 서비스까지 내보자라고 생각은 해보았다. 하지만 아직 능력치가 적은 나한테는 앞으로의 부딫힐 벽이 많을거라 생각을 해 팀원을 구하지 않고 혼자서 해볼려고 결심했다.(그 벽이 CORS일줄은...)
UI/UX에 대한 고찰
각각의 페이지는 어떻게 구성을 할까 생각하던 중 내가 어떤 페이지를 좋아하냐 생각을 해보았다.
사실 한 뷰안에 모든 것을 다 때려박는 것을 좋아한다.
그래서 고민하던 중 우연찮게 토스 채용 메인페이지에서 밑에 화살표처럼 움직이는 것이 너무 좋았다.
'저렇게 한뷰에 메인페이지를 넣고 스크롤을 내려서 다른 콘텐츠(국내 해외 주식 정보, 비트코인 차트 정보 등)를 넣자!'
화살표를 따라한 웹뷰
Typescript의 침투
그러고 메인페이지를 완성한 후 일정이 틀어져서 일주일정도 손을 못댔었다. 그러다 아는 분이 이렇게 말씀하셨다.
"요즘 프론트엔드는 타입스크립트가 기본소양인데 왜 공부 안하냐~"
혼자 공부하면서 필요성을 못느꼈고 사실 채용공고들만 봐도 대부분 타입스크립트는 쓰면 우대해준다~ 라고 적혀있었다. (이렇게 안일하게 생각하면 안됐는데...)
그러다가 설명해주는 걸 듣고 당연히 해야되는 것을 왜 안했지 싶었다.(Typescript에 관한 글은 추후에 또 적어야지)
타입스크립트의 정적타이핑으로 개발 방법을 바꾸는 것은 그렇게 크게 어렵지 않았다. 확실히 왜 쓰는지를 알고나니까 필요성이 마구마구 생겼다.
그러고 타입스크립트로 연습을 하던 중 직접 맡아서 하던 OPENLAB홈페이지 개발에 대한 프로젝트 기간이 되었다. 잠시 멈추고 OPENLAB작업을 하다보니 저 화살표를 이 홈페이지에 넣어야 더 잘맞겠다라는 생각이 들어 여기에 넣었다.(OPENLAB은 Typescript로 작업하지 않았음)
엎어!!
타입스크립트로 개발방식을 변경하다 보니 이 프로젝트도 React + TypeScript로 개발하고 싶었다.(사실 뭔가 중간에 엎어질것도 같아서 토이로 했던 것! Po당당wer)
그래서 아예 새로 프로젝트를 만들어 하나하나 만들기 시작했다.
개발하다보니 기존의 기획했던 것보다 더 나은 생각들이 많이 들기 시작하였다. 그래서 수정수정하다보니 어느새 처음 그렸던 그림과는 달라졌으나 나는 현재가 더 낫다고 생각한다.
사람은 다양한 것들을 더 많이 볼수록 시야가 넓어져서 현재보다 더 좋은 시각을 가진다고 믿는다.
git flow적용
이때까지 git으로 master branch에만 commit을 해봤지 다른 branch를 이용한 형상관리는 해본적이 없어서 이왕 할꺼 다 해보자라는 생각이 들었다.
그래도 나 혼자하는 프로젝트이니 master, develop 두 가지를 사용하고자 했다. develop브랜치에는 개발하는 브랜치, master는 바로 출시될 수 있는 브랜치로.
git flow 에 관한 글
-git flow에 대해서 적었던 글: https://velog.io/@whddus0789/Git-Flow
-우아한 형제들 기술 블로그: https://woowabros.github.io/experience/2017/10/30/baemin-mobile-git-branch-strategy.html
전역상태관리? Redux-saga적용!
TypeScript를 적용하기 전에는 '뭐 프로젝트 규모도 안큰데 Redux를 쓸 필요가 있나~ useState로 상태관리나 하자!' 이 생각을 가지고 있었다.
허나 이것도 나의 오산이었다. 혼자하는 토이프로젝트에서 쉽게쉽게 가는게 의미가 있나 싶기도 했고 Redux에 대해서 얕게만 아는 것 같아서 며칠 다시 바싹 공부하고 적용하기로 마음 먹었다.
(그리고 API를 6개나 쓰고 크기가 큰 데이터들도 좀 있는데 안쓸 이유는 없는 것 같다.)
결론과 다음 장에서는...
결과적으로 현재 모두 완성하였고 아래의 깃헙 저장소에서 나의 커밋 내역과 리드미를 볼 수 있다.
오늘은 왜 이 프로젝트를 개발했고 어떤 생각을 가지고 있었는지에 적어보았고 다음 글에서는 실제 내가 겪었던 테크니컬 이슈나 이걸 해결했던 방법들(조금 더 기술이 들어간 것)에 대해서 얘기를 해보고자 한다.
