GDSC에서 프론트앤드 스터디에서 리액트를 처음 학습할 때 진행했던 팀 프로젝트인 치스톡.
지금이라고 많이 성장한 건 아니지만 (기말고사에 치어서 학부 공부하기도 바쁘고)
첫 프로젝트이기도 하고 로고도 직접 만들었고 리드미도 못 적힌 채 남겨두기가 아쉬워서
개인적으로 공부도 할 겸 퍼블리싱을 다시 하고 기능을 추가하며 업그레이드를 진행해보려한다.
시작은 좀 전에 했지만.....진행 도중에 글을 작성하는 이유는, 혼자서 꼬물꼬물 해봐야 아무도 안 알아주기 때문에.........
프로젝트를 발전시켜가며 공부하는 과정을 기록하고자 뒤늦게 글을 적는다.
스터디에서 팀으로 진행했던 버전을 1.0으로, 개인적으로 진행하는 버전을 2.0으로 명명한다.
치스톡 2.0
현재 퍼블리싱이 진행 중인 치스톡 2.0의 현황은 다음과 같다.
현재까지 요약
컨셉은 간단히 볼 수 있는 주식 대시 보드로 잡았다. 이를 위해 사용되는 api를 바꾸었다.
기존에는 FMP API를 사용했다면, 지금은 yahoo finance api로 변경하였다.
이를 통해 다양한 데이터를 가져올 수 있게 되어 다양한 정보를 제공할 수 있게 되었다.
물론 api 호출 횟수 제한이 있으므로 더미 데이터로 제작하고, api를 붙인 버전은 공개할지 말지 고민해볼 예정이다.
최대한 1.0을 계승하고 싶어서 디자인의 경우 틀이나 색상에 큰 변화는 주지 않으려 노력했다.
메인 색상인 로고-파란색의 경우 살짝 어두워지긴 했다.
차트 라이브러리 역시 apexchart 라이브러리를 그대로 사용하기로 했다.
search-list의 경우 주식 종목의 검색 결과 화면을 따로 보여줄 필요가 있나 싶어서 없애고,
추천 검색어 기능을 넣어 대체할 생각이다.
현재까지 사용된 학습 내용은 다음과 같다.
- CSS로 무한으로 흐르는 배너 만들기
- React Props에 defaultProps 설정하기
- 미디어 쿼리를 이용한 반응형 웹 만들기
- netlify로 프론트 프로젝트 배포해보기
일단 퍼블리싱이 얼마 남지 않았기 때문에 퍼블리싱을 마저 진행할 예정이다.
현시점 이후로 달성 목표는 다음과 같다.
- Intersection Observer를 이용한 스크롤뷰 그라데이션 구현
- 모바일 화면에서 내려서 로딩 구현
- 더미 데이터를 이용하여 api 호출 함수 구현
- fetch, Promise, async ~ await에 대한 이해
- api 호출 에러 시 처리 방법 고민
- loading 시 Skeleton loading 적용
- 주/야간 모드 구현
- 마우스 hover 시 상태 변경 -> 홈화면에서 hover된 주식 차트 보여주기
ㄴ 주식 리스트에 흐르는 애니메이션 적용. hover 시 애니메이션 정지.
- 티커 더미 데이터를 통해 추천 검색어 기능 구현
이하는 필수 달성 목표는 아니다.
- 웹소켓을 이용해 실시간 주가 데이터 받아오기
- Sementic tag로 변경
- API를 모두 소모시 팝업 띄운 후 dummy Data로 구현되도록 변경
- 구글 맵 API 사용해보기
- 모달 생성
달성 목표는 도중에 추가될 수도 있고, 프로젝트에 어울리지 않는다고 생각되면 없앨 수도 있다.
'토이프로젝트 > chistock' 카테고리의 다른 글
| 컬러 체계 개편기 (0) | 2023.07.29 |
|---|---|
| 아토믹 디자인 도입기 (0) | 2023.07.17 |
| 디자인 작업 완료 (0) | 2023.07.17 |
| 디자인 작업과 API에 관해 (0) | 2023.07.13 |
| 치스톡 프로젝트 재개 (0) | 2023.07.12 |
