Skip to content

주춤할 때 곁에서 속삭여주는 똑똑한 투자 도우미, 주춤주춤

Notifications You must be signed in to change notification settings

swkim12345/web17-juchumjuchum

 
 

Repository files navigation

주춤주춤

juchumjuchum

📊 초보 투자자를 위한 실시간 주식 정보 커뮤니티 서비스

주춤주춤은 주식 초보자들이 투자를 하기 위한 정보를 번거로운 과정없이 알 수 있도록 해주는 서비스입니다.

✨ 서비스 바로가기

노션   |   피그마   |   API 명세   |   위키

목차

📢 서비스 특징
🚀 페이지 소개
⚙ 시스템 아키텍쳐
🎯 기술 스택
💻 실행 방법
👨‍🎓 팀원


📢 서비스 특징

시간 단위로 확인하는 주식 차트

주식마다 시간단위(일, 주, 월, 년)의 가격, 거래량을 확인할 수 있습니다.
주식 그래프를 좌우로 움직였을 때 빠르게 이전 데이터를 불러올 수 있습니다.

기술적 도전

1️⃣ 그래프의 스크롤 범위에 따라 일정량의 데이터를 받아오기 위해서 무한스크롤을 적용했습니다.

📎 수많은 그래프 데이터 요청을 어떻게 줄일까

2️⃣ 제한된 요청 수를 조절하고 오류에 대응할 수 있도록, 생산자 소비자 패턴을 적용하였습니다.

🧊 우선순위 큐로 요청 제어하기

3️⃣ 웹소켓을 관리할 때 오류를 대응하기 위해 큐를 통해 외부서비스에 대한 구독을 관리했습니다.

🔌 websocket이 늦게 할당되어 발생되는 문제


실시간 채팅

주식 종목마다 존재하는 채팅방에 접속하여 실시간 소통을 할 수 있습니다.
공감이 가는 글에는 좋아요도 가능합니다.

기술적 도전

  • 웹소켓으로 받아오는 실시간 채팅 데이터와, REST API로 받아오는 누적 데이터를 다루기 위한 상태 관리 전략을 고민했습니다.

👊 웹소켓의 채팅 데이터와 REST API의 채팅 데이터를 함께 관리하기


맞춤형 알림

관심 있는 종목의 주요 변동 사항을 푸쉬 알림으로 즉시 확인할 수 있습니다.

기술적 도전

  • typeorm 이벤트 구조를 통한 FCM 알림 서비스를 구현하였습니다.

🥳 typeorm을 이용한 FCM 알림 서비스


초보자를 위한 주식 용어 설명

tooltip

초보자에게는 어려운 주식 용어를 쉽게 설명하기 위한 툴팁을 제공합니다.


🚀 페이지 소개

주식 메인

  • 한국투자증권 API를 통해 데이터를 수집 했습니다.
  • 지수 지표(코스피, 코스닥, 원 달러 환율)를 제공합니다.
  • 조회수 순으로 종목을 추천합니다.
  • 등락률 순으로 차트를 제공합니다.

주식 상세

  • Trading View를 사용한 시간별 그래프로 쉽게 주식 정보를 확인할 수 있습니다.
  • 해당 종목의 실시간 지표를 제공합니다.
  • 즐겨찾기 개념의 주식을 모의로 보유할 수 있습니다.
  • 주식 소유자들과 실시간 종목별 채팅을 할 수 있습니다.
  • 자신이 원하는 주가, 거래량에 맞춰 개별주식마다 알림 설정을 할 수 있습니다.

주식 종목 검색

  • 사이드바의 검색 버튼을 통한 간편한 검색을 지원합니다.
  • 검색 결과 요청 시 로딩 인디케이터를 통한 UX적으로 미려한 로딩바를 보여줍니다.

다크모드 지원

  • 모든 화면에 대해 다크모드 지원합니다.
  • 로그인 된 사용자를 위한 라이트 / 다크모드를 저장할 수 있습니다.

로그인 및 마이페이지

  • 구글 로그인과 게스트 로그인을 제공합니다.
  • 마이페이지에서는 닉네임 수정, 알림 내역 확인, 소유 주식 확인 및 삭제가 가능합니다.

⚙ 시스템 아키텍쳐


🎯 기술 스택

분야 기술
FE
BE WebSocket Badge
Infra GitHub Actions Badge NGINX Badge Naver Cloud Badge
DB
Common TypeScript Badge ESLint Badge Prettier Badge GitHub Badge GitHub Badge

🚩 FE 기술 선택 이유

📡 BE 기술 선택 이유

🛠️ 인프라 기술 선택 이유


💻 실행 방법

실행

git clone https://github.com/boostcampwm-2024/web17-juchumjuchum.git

yarn install

yarn client run

docker compose

# deploy/template.env 수정
# 이후 deploy/.env로 수정
# deploy 폴더 내에서 실행

docker compose up -d

👨‍🎓 팀원

Backend Backend Backend Frontend
img img img img
김민수 김성환 문설민 조배경

About

주춤할 때 곁에서 속삭여주는 똑똑한 투자 도우미, 주춤주춤

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 97.9%
  • JavaScript 1.3%
  • Other 0.8%