📊 초보 투자자를 위한 실시간 주식 정보 커뮤니티 서비스
주춤주춤은 주식 초보자들이 투자를 하기 위한 정보를 번거로운 과정없이 알 수 있도록 해주는 서비스입니다.
📢 서비스 특징
🚀 페이지 소개
⚙ 시스템 아키텍쳐
🎯 기술 스택
💻 실행 방법
👨🎓 팀원
![](https://private-user-images.githubusercontent.com/102566546/391942118-2948a58f-c373-4d7e-b606-4f1077bbb21f.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkyOTcyNDIsIm5iZiI6MTczOTI5Njk0MiwicGF0aCI6Ii8xMDI1NjY1NDYvMzkxOTQyMTE4LTI5NDhhNThmLWMzNzMtNGQ3ZS1iNjA2LTRmMTA3N2JiYjIxZi5naWY_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjExJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxMVQxODAyMjJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02NjRhNmJmZjVlNzViNjFjMjM2YWUyNmMwNmE0MWJkMzAzODM0NTY5MTE5MmI2ZTcxZjM1ZTQwNDdhNWVhZjYyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.Lx80E6oJ6PE_FLl1yRXjY3NAi08SjqAM7A8qpuF9vq8)
주식마다 시간단위(일, 주, 월, 년)의 가격, 거래량을 확인할 수 있습니다.
주식 그래프를 좌우로 움직였을 때 빠르게 이전 데이터를 불러올 수 있습니다.
1️⃣ 그래프의 스크롤 범위에 따라 일정량의 데이터를 받아오기 위해서 무한스크롤을 적용했습니다.
2️⃣ 제한된 요청 수를 조절하고 오류에 대응할 수 있도록, 생산자 소비자 패턴을 적용하였습니다.
3️⃣ 웹소켓을 관리할 때 오류를 대응하기 위해 큐를 통해 외부서비스에 대한 구독을 관리했습니다.
![](https://private-user-images.githubusercontent.com/102566546/391953485-46397d2e-0202-45d9-bf20-9b00282737db.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkyOTcyNDIsIm5iZiI6MTczOTI5Njk0MiwicGF0aCI6Ii8xMDI1NjY1NDYvMzkxOTUzNDg1LTQ2Mzk3ZDJlLTAyMDItNDVkOS1iZjIwLTliMDAyODI3MzdkYi5naWY_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjExJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxMVQxODAyMjJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iYmM4YWQwMmQyMDU2ZjY5YjAwY2M5ZGJjM2E1NzI2MjViYmQwYTZhMGJjMmE4MzdhYWM0OTk1NmVkNTZiNTQ1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.TCTS5DjZvt-P3vAYfbTbY5YTjAQrfB6UqI3OFAsmWo8)
주식 종목마다 존재하는 채팅방에 접속하여 실시간 소통을 할 수 있습니다.
공감이 가는 글에는 좋아요도 가능합니다.
- 웹소켓으로 받아오는 실시간 채팅 데이터와, REST API로 받아오는 누적 데이터를 다루기 위한 상태 관리 전략을 고민했습니다.
👊 웹소켓의 채팅 데이터와 REST API의 채팅 데이터를 함께 관리하기
![]() |
![]() |
---|
관심 있는 종목의 주요 변동 사항을 푸쉬 알림으로 즉시 확인할 수 있습니다.
- typeorm 이벤트 구조를 통한 FCM 알림 서비스를 구현하였습니다.
초보자에게는 어려운 주식 용어를 쉽게 설명하기 위한 툴팁을 제공합니다.
- 한국투자증권 API를 통해 데이터를 수집 했습니다.
- 지수 지표(코스피, 코스닥, 원 달러 환율)를 제공합니다.
- 조회수 순으로 종목을 추천합니다.
- 등락률 순으로 차트를 제공합니다.
- Trading View를 사용한 시간별 그래프로 쉽게 주식 정보를 확인할 수 있습니다.
- 해당 종목의 실시간 지표를 제공합니다.
- 즐겨찾기 개념의 주식을 모의로 보유할 수 있습니다.
- 주식 소유자들과 실시간 종목별 채팅을 할 수 있습니다.
- 자신이 원하는 주가, 거래량에 맞춰 개별주식마다 알림 설정을 할 수 있습니다.
![](https://private-user-images.githubusercontent.com/102566546/391968043-6d44d8d0-fac5-4d39-9355-d13fbdc2701d.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkyOTcyNDIsIm5iZiI6MTczOTI5Njk0MiwicGF0aCI6Ii8xMDI1NjY1NDYvMzkxOTY4MDQzLTZkNDRkOGQwLWZhYzUtNGQzOS05MzU1LWQxM2ZiZGMyNzAxZC5naWY_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjExJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxMVQxODAyMjJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02OTk3M2Y1NTc0YWU4MTllMWYzNTUzMzY2YTcxNTcxZjg4OTllMGJiMDMzMjk1YjQ1NWFhNWZkN2M1YWJiOGFjJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.wrhbxaPeQlC0lqAFAV5xboRovQI_gVMJyVQ0YmtGUW8)
- 사이드바의 검색 버튼을 통한 간편한 검색을 지원합니다.
- 검색 결과 요청 시 로딩 인디케이터를 통한 UX적으로 미려한 로딩바를 보여줍니다.
- 모든 화면에 대해 다크모드 지원합니다.
- 로그인 된 사용자를 위한 라이트 / 다크모드를 저장할 수 있습니다.
![]() |
![]() |
---|
- 구글 로그인과 게스트 로그인을 제공합니다.
- 마이페이지에서는 닉네임 수정, 알림 내역 확인, 소유 주식 확인 및 삭제가 가능합니다.
![](https://private-user-images.githubusercontent.com/83896846/391008323-f670f644-753c-4e49-ae6f-e3d1afa8fbe6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkyOTcyNDIsIm5iZiI6MTczOTI5Njk0MiwicGF0aCI6Ii84Mzg5Njg0Ni8zOTEwMDgzMjMtZjY3MGY2NDQtNzUzYy00ZTQ5LWFlNmYtZTNkMWFmYThmYmU2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjExVDE4MDIyMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWE0MzVjNTQwNGI5ZjRkZmMyNTE4MzFhMjIxM2E3YTVmZGJiM2QxNjc1MDgyOGFlY2MzZjAwYjBiODU5YzJhZmImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.xijtJeRaPC7snXQ42cj48g6sXH-uXDS0UFW4wtOff10)
분야 | 기술 |
---|---|
FE | |
BE | |
Infra | |
DB | |
Common |
git clone https://github.com/boostcampwm-2024/web17-juchumjuchum.git
yarn install
yarn client run
# deploy/template.env 수정
# 이후 deploy/.env로 수정
# deploy 폴더 내에서 실행
docker compose up -d
Backend | Backend | Backend | Frontend |
---|---|---|---|
![]() |
![]() |
![]() |
|
김민수 | 김성환 | 문설민 | 조배경 |