목차
0. 프로그램 소개
1. 배포 링크
2. 위키 링크
3. 피그마 링크
4. 기술발표
5. Q&A
ETC. 프론트 담당
|
|
|
|
| 최영훈(팀장) | 박철훈 | 유하얀 | 김영수 |
| Front | User Domain | Chat, News Domain | Gateway,Kafka,Slack,Data Lake,Paper Domain |
우리가 만든 프로그램은 !!!!
코인에 대한 실시간 가격 / 차트 정보를 확인하고 차트에 드로잉툴을 이용해 이미지를 만들 수 있고
차트데이터를 저장하는 기능을 제공하고 채팅방에 공유하며 커뮤니케이션 할 수 있는 프로그램입니다.
| 메인 | 거래소 |
 메인
|
 거래소
|
| 채팅 | 뉴스 |
 채팅
|
 뉴스
|
| 위키 |
 메인
|
| 피그마 |
 메인
|
프론트
유저 도메인
채팅 도메인
Webflux
rsocket
뉴스 도메인
Rest API
Crawling
DB
게이트웨이 도메인
도화지 도메인
슬렉 봇 도메인
데이터레이크 도메인
- 메인 페이지 - 코인 거래량 Top5의 간단 정보를 보여준다.
- 메인 페이지 - 전체 채팅 목록을 보여준다.
- 거래소 - 실시간 체결 내역을 보여준다.
- 거래소 - 실시간 호가창을 보여준다.
- 거래소 - 코인의 초성, 영문, 심볼, 이름검색을 지원한다.
- 거래소 - 코인을 브라우저에 즐겨찾기 한다.
- 거래소 - 코인을 원하는 기준으로 정렬 한다.
- 거래소 - 차트 1분, 10분, 30분, 1시간봉 기능
- 채팅 - 로그인한 회원은 채팅을 입력할 수 있고 코인별로 구성된 채팅방에 입장할 수 있다.
- 채팅 - 채팅방에 이미지를 전송하고 표시한다.
- 채팅(Option) - 욕설을 필터링한다. 해당 기능은 서버가 아닌 클라이언트에서 구현한다.
- 채팅(Option) - 댓글에 좋아요를 누른다.
- 회원 - 로그인 기능
- 회원 - 회원가입 기능
- 회원 - 회원가입시 실제 이메일을 인증한다.
- 회원 - 회원의 정보를 수정한다.
- 회원 - 회원의 프로필을 업로드하여 사용한다.
- 회원 - 리프레쉬,액세스 토큰을 활용하여 사용자 인증을 진행한다.
- 회원 - 회원 탈퇴 기능을 구현한다.
- 회원(Option) - OAuth 로그인한다.
- 회원(Option) - Recaptcha 자동 가입방지를 구현한다.
- 회원(Option) - 회원의 인기도를 구분지어 채팅방에 효과를 제공한다.
- 도화지 - 차트위에 그림을 그려 서버에 이미지와,시간,코인의 종류들을 저장한다
- 도화지 - 저장된 도화지 데이터를 기반으로 이미지와, 해당 시간 때의 차트 데이터를 불러온다.
- 뉴스 - 코인의 뉴스들을 크롤링하여 뉴스 페이지에 보여준다.
- 뉴스 - 채팅방에 최신 뉴스가 보여진다.
-
무엇을 배웠는가 ? 1.1 자바스크립트의 async와 settimeout의 마이크로 태스크큐, 매크로 태스크큐등, 자바스크립트의 콜스택과 멀티스레딩의 관계등을 알게되었습니다. 1.2 리액트 리코일이 추구하는 개발 방식을 조금은 알게 된 것 같습니다.
-
어떤점이 어려웠는가 ? 2.1 성능 문제) 싱글스레드 기반인 자바스크립트 콜스택에서 고비용 연산을 어떻게 처리하게될지 많은 고민을 하게 된 것 같습니다. 2.2 동시성 문제) 웹워커를 사용하였지만 동시성문제등을 겪으면서 어떻게 해결해야하나 고민을하였고, 플래그패턴등을 고려해봤습니다. 2.3 반응형 웹페이지 구현) 키오스크의 고정된 화면만을 만들었던 저에게 반응형을 구현하는것은 꽤나 시간이 많이 드는 작업이였습니다.
-
궁금한점 3.1 빗썸 거래소페이지에서 티커,오더북,트랜잭션 처리가 굉장히 빠른것을 개발툴로 알게되었는데 어떠한 방식으로 연산을 하는지 궁금합니다.