시가총액 32조 팀 프로젝트

깃허브 주소

https://github.com/codestates-seb/seb41_main_032/tree/main

팀원 모집

팀 프로젝트를 진행하기 위해 코드스테이츠 부트캠프 동기들을 모집했다

프론트엔드3명 백엔드3명으로 총 6명으로 팀을 이루었다

 

목표

어떤 서비스를 만들지 논의를 한 결과 주식 초보들을 위한 서비스를 만들기로 했다

보통 주식을 처음하면 경험과 지식이 없어 대부분 손해를 본다

그래서 우리가 만들 서비스는 주식 모의투자기능이 들어간 주식거래소이다

다른 증권사 서비스도 주식 모의투자 기능이 있지만 제한적으로만 사용이 가능하고

무엇보다 통장을 개설해야지 사용이 가능하다

하지만 우리의 서버스는 간단한 회원가입만으로 모의투자 해볼 수 있는 서비스를 개발하려고 한다

시작

먼저 전체 팀장 1명과 부팀장을 정했다

백엔드에서 전체 팀장1분이 계서서 프론트엔드인 내가 부팀장을 하기로 했다

저번 seb41_pre_017팀 팀프로젝트때 느낀점이 있어서 분석과 설계에 시간을 좀더 사용했다

 

먼저 사용자 요구사항 정의서를 작성하였다

https://docs.google.com/spreadsheets/d/1wEq-r0HTsiYitdcO4nTLQwC6j0rauNFphew4SJa3t9c/edit?usp=sharing 

 

그 다음 화면 정의서를 작성하였다

https://www.figma.com/file/1pEXlOf9EBKXdMqc7wVGNx/%ED%99%94%EB%A9%B4-%EC%A0%95%EC%9D%98%EC%84%9C?node-id=0%3A1&t=nh1AdEvB0sn0gxh7-1 

Figma

 

그 다음으로는 테이블 명세서를 작성하였다

https://www.erdcloud.com/d/AWMFoa8kewkpjP7v3

시가총액32조

 

자료수집

주식 정보를 얻을 방법을 찾아봤다

정부에서 제공하는 누리집 api와 한국투자증권 api를 찾았다

나머지 증권사들은 특정 프로그램을 설치해야되서 제외를 했다

 

업무분담

나는 주식관련된 페이지와 기능구현을 담당하기로 했고

나머지 2팀원들은 헤더,사이드바,푸터,게시판과

유저기능(로그인,로그아웃,회원가입,프로필)을 담당하였다

 

프로젝트 (1주차)

증권사 API는 실시간정보를 받아 올 수 있지만 주식의 전체리스트를 불러오는 기능은 없어서

정부에서 제공하는 누리집 API로 주식 전체 리스트 페이지와 top10(시총,상승,하락) 페이지를 만들고

주식을 클릭하면 들어가는 주식 상세페이지는 증권사 API로 구현을 했다

 

문제 발생 1

정부에서 제공하는 누리집 API는 cors가 발생하지 앉았지만

증권사에서 제공하는 API는 cors에러가 발생하였다

여러가지 방법을 찾던 도중 cors는 웹의 기능이라는것을 알았다

그래서 잘은 모르지만 어찌저찌 찾아가며 express라는 프레임워크로 프록시서버를 구현하였다

서버대 서버끼리 통신하는거라 cors에러가 발생하지 않았다

 

문제 발생 2

정부에서 제공하는 api의 데이터의 업데이트가 매우 느렸다

실시간 주식정보가 아니라 전날 정보를 보여줬다

또한 업데이트가 안될떄는 4일까지 안되었다

업데이트가 안된 날짜를 요청하면 상태코드 200에 각 키값에 빈문자열 데이터로 채워서 보내줬다

(이걸 사용하라고 만든건가...)

어쩔수없이 4일전부터 오늘날짜까지 데이터를 요청한다음 가장 최신날짜의 데이터만 걸러내는 로직을 만들었다

 

프로젝트 (2주차)

주식하면 꼭 들어가야되는 차트 기능을 추가하였다

react-apexcharts 라이브러리를 사용하여 bar 차트와 양봉차트를 구현했다

2주차에서는 1주차때 구현을 했던 로직에서 중복되는 부분을 함수나 컴포넌트로 만들어서 중복을 줄이는 작업을 주로 했다

또한 시멘틱 html을 지키려고 노력을 했다

 

문제 발생 1

정부에서 제공하는 누리집의 API가 응답속도가 매우 느렸다

응답받는데 평균 2초정도 걸렸고 최악에는 4초까지 걸렸다

이걸 해결하기 위해 백엔드분들이랑 상의를 했고

백엔드에서 스케쥴러를 구현하여 정부에서 제공하는 API정보를 백엔드 DB에 저장하고

그것을 프론트에서 가져와 쓰는 방법으로 해결하기로 했다

 

문제 발생 2

증권사에서 제공하는 API가 1초당 20회 트레픽제한이 있다는것을 알았다

이것을 해결하기 고민을 했었고 여러가지 방법이 떠올랐다

해결책1 -  백엔드에서 큐를 구현하여 초당 20회씩 순차적으로 처리

해결책2 -  프론트엔드에서 실시간이 아닌 30초마다 데이터 업데이트를 요청

2가지가 떠올랐는데 해결책1을 백엔드에게 물어봤을때 주어진 시간이 많지 않고 구현이 힘들꺼같아

해결책2로 하기로 했다

 

프로젝트 (3주차)

주식 정보는 외부 api를 사용하기 때문에 트래픽제한과 api 응답속도에서 문제가 발생하였다

주식 상세정보를 담당하는 한국투자증권 api는 초당 20회의 트래픽제한이 있다는것이 문제였고

주식 전체리스트정보를 가져오는 정부의 누리집 api는 응답속도가 평균 2~3초가 소요된다는 문제가 있었다

이것을 해결하기 위해 리엑트 쿼리를 도입하였는데 첫 사용후기는 너무 만족스러웠다

리엑트 쿼리를 선택하게 된 이유는 동기화와 캐싱기능 그리고 훅기반이라서 사용하기 쉽기 때문에 리엑트 쿼리를 도입하였다

먼저 api요청을 줄이기 위해 데이터의 상태를

1. 실시간으로 변하는 값
2. 하루단위로 변하는 값
3. 유저 상호작용에 의해 변하는 값 으로 구분하였다

실시간으로 변하는 값은 뉴스정보,주식 현재가가 있고

하루단위로 변하는 값은 주식매매동향, 주식일자별정보, 주식전체리스트정보가 있다

유저 상호작용에 의해 변하는 값들은 유저 북마크, 유저 지갑이 있고

이것을 리엑트쿼리의 캐싱기능을 이용하여 각각의 상황에 따라 api요청을 하게 만들었고 그 외에는 api요청을 하지 않고

캐쉬된 데이터를 사용하도록 구현하였다

이것을 통해 api의 느린 응답속도와 트래픽제한을 어느정보 해결을 하여 성능개선을 이루었다

리엑트 쿼리가 훅 기반이기 떄문에 컴포넌트와 api를 분리하여 코드의 가독성을 향상시키는 효과도 있었다

또한 recoil 라이브러리도 도입하였는데 로그인에 성공시 클라이언트 스테이트로 관리할 정보를 recoil을 이용하여 관리하였다

 

힘들었던 점..

FE 팀원 A는 집안에 안좋은일이 생겨서 3주차부터 작업을 하지 못하였다

나머지 FE팀원 B는 소통이 잘 안된다....

B 팀원은 다른 팀원들이 일할때 게임하고 있었다...

BE쪽에서도 B팀원이 게임하는것을 본거같다. (디스코드 상태)

B 팀원때문에 팀 전체에 사기가 떨어지는 느낌을 받았다

FE 팀장으로 이걸 해결하려고 지속적으로 소통하였지만 이제는 디스코드에 접속도 잘 안한다...

이럴땐 팀장으로 어떻게 해야되는지 잘 모르겠다...

FE 팀원은 나를 포함하여 총 3명인데

3주차부터 1명은 집안사정, 나머지 1명은 잠수를 해서 프론트엔드는 거의 혼자 작업한거 같다...

 

프로젝트 (4주차)

4주차에는 검색기능을 개선하였다

기존 검색기능은 사용자가 키보드를 입력할때마다 유사한 주식을 추천목록으로 보여주는 기능이였다

여기서 문제점은 주식리스트의 길이가 3000길이정도 된다

이걸 map 자료구조를 이용하여 개선 할 수 있을꺼같아서 시도해보았다

주식의 첫글자를 키값으로 설정하고 첫글자가 일치하는 주식들을 모아서 분류하였다

이것을 이용하면 3000길이의 배열을 검사 할 필요없어 성능이 좋아졌다

 

로드밸런서 기능을 구현하였다

프론트에서 서버의 주소 리스트를 가지고 있고

처음 자바스크립트가 실행되면 랜덤한 서버주소를 가리키는 포인터를 할당한다

사용자가 api요청에 문제가 없다면 포인터가 가리키는 서버주소는 바뀌지 않는다

하지만 api요청에서 부정적인 응답을 받는다면 포인터는 다른 서버를 가리키고 바로 바뀐 서버로 재요청을 하도록 구현하였다

무한루프에 빠지는것을 방지하기 위해 부정적인 응답이 연속으로 서버의 갯수만큼 반복되면 멈추도록 만들었다

이것을 통해 개선한점은 증권사 api의 트래픽제한이다

증권사 api는 초당 20회의 트래픽제한이 있다

이것을 서버를 여러개 만들고 사용자는 각각 서버에 분산되어 통신하다가 해당 서버에서 트래픽제한이 걸리면 바로 다른 서버로 재요청을 보내도록 하여 트래픽제한을 해결하였다

 

힘들었던 점...

FE 팀원 모두 아무것도 안하는거 같다...

원래 깃허브에 Pull requests를 하고 merge 하기전에 다른 FE 팀원이 코드를 확인해주기로 약속을 했었지만

나를 제외한 다른 FE 팀원들은 서로의 코드를 1주차 빼고 단 한번도 확인을 하지 않는다...

1주차를 제외한 대부분 작업들은 거의 나 혼자 한거같다..

프로젝트 시작부터 주말 할꺼없이 일을 한거같다

체력적으로 한계가 온거같다

 

 지금 상황이 너무 답답하고 힘들고 화가난다

프로젝트 시작부터 팀원들은 너무 안일했었다

 

일딴 우리의 프로젝트는 주식정보를 얻을 수 있냐에서 프로젝트가 시작이 가능한지 판별이 되는데

다른 팀원들은 별 고민도 안하는거 같았고 나 혼자만 죽어라 자료수집을 했던거 같았다

주식정보를 제공하는 api를 찾기 위해 한국 뿐만아니라 해외 api 제공 사이트를 찾아다녔고

api를 제공하는 사이트나 문서도 나 혼자 찾아서 api문서를 만들어 팀에게 제공하였다...

 

일딴 현재 프로젝트가 실현 가능한지 구분을 해야되는데 다른 팀원은 그런 생각조차 안하고있었던거 같았다

내가 해당 open api를 찾지 못했다면 우리팀은 프로젝트 설계나 기획등등에서 소모한 1주일이라는 시간을 버렸을것이다

 

내 성격이 직설적으로 말하는것을 싫어하고 다른사람에게 피해나 상처를 주는것을 싫어한다

이 상황까지 온것이 내 성격때문에 발생한거 같다

다른 팀원에게 좀더 직설적으로 강하게 말을 했어야 했나 라는 생각이 많이 난다

 

프로젝트 (마지막 주)

마지막주는 버그를 해결하는데 모든 시간을 소요한거 같다

특히 다른 FE팀원들의 코드에서 버그가 대부분 발생하였다

다른 팀원들은 이 프로젝트를 포기한거같은 느낌이 들었다

마지막주인데도 1주차에 작업하던것을 계속 하고있었고

버그테스트도 안해보고 배포하는거 같았다...

버그수정은 나 혼자만 했다

버그들도 대부분 오타 이다..

이러이러한 부분에서 버그가 발생했다고 다른 팀원들에게 알려줘도 수정하지 않는다

요번 프로젝트는  육체적으로도 정신적으로도 너무 힘들다

 

나는 팀장으로써 능력이 부족한거같다..

 

최종배포

결과물은 내 개인적으로 아쉽다...

실시간 채팅, 랭킹시스템, 다른 사용자의 주식 포트폴리오 보기 기능을 구현하고 싶었는데 시간이 부족해서 구현하지 못했고

원래 계획은 구현을 먼저 하고 나중에 css부분에 시간을 투자하여 퀄리티를 높일 계획이였는데 css를 수정할 시간조차 부족했었다

내가 생각했던 목표의 70%정도만 달성한거 같았다

 

그리고 팀장의 역할을 잘 해내지 못한거같아 아쉽다

코드스테이츠 부트캠프에서 리더쉽을 얻고 싶어서 팀 프로젝트마다 팀장을 지원을 했었는데

아직까지도 리더쉽에 대해 잘 모르겠다ㅠㅠ