DDuck-SSang

프로젝트 소개

 DDuck-SSang(떡상)은 미국 주식, 가상화폐 등의 금융 자산의 실시간 시세 데이터, 경제 뉴스 등을 제공합니다.

     

멤버

김창민 @chmini	서대원 @Serzhul	이본행 @BonhaengLee	이희승 @2heeesss

기술 스택

데모

• Default demo - Deployed from the release branch

관심 목록

추가/삭제	토글	실시간 시세 정보

검색

종목	뉴스

회원가입/로그인

회원가입	로그인

뉴스

탭	인피니티 스크롤

댓글

작성	좋아요

외부 api 목록

• 주식, 암호화폐 가격: finnhub
• 주식 시세: node-yahoo-finance
• 뉴스목록: bing-news-search

기술적 도전

• React.js, Next.js를 통한 SSG, SSR, SPA 사용
• Redux와 thunk를 통한 상태 관리 로직 구현
• Canvas API를 사용한 차트 구현
• WebSockets API를 사용해 실시간 시세 정보 렌더링
• TypeScript, SCSS 사용, 비동기 로직 최적화
• jest, react-testing-library를 사용한 TDD(Test Driven Development)
• playwright를 사용한 E2E testing

회고

김창민

서대원

이본행

개발자로서 기술적 도전과 비즈니스적 가치 사이의 고민

기술 스택 선정 과정에서 Canvas API를 선택해 직접 차트를 구현하고자 목표를 잡았는데 우리와 유사한 다른 서비스들은 SVG를 사용하거나 상호작용을 잘 지원하는 Canvas 기반 Financial Chart Library를 사용해 서비스를 운영하고 있었습니다. 그런데도 많은 양의 데이터를 실시간으로 보여주는 데 장점이 있다는 이유로 캔버스를 선택하게 되었습니다. 성능 면에서의 이점을 잘 활용하지 못할 테지만 잘되지 않아도 기술을 적용해보고 배워보는 데 초점을 두었습니다. 시간을 두고 학습하면 마우스 좌표를 수동으로 프로그래밍하는 방식으로 상호 작용 기능이 단계별 지원 가능하리라 생각했습니다. 결과적으로는 일정 문제로 스코프를 조절하게 되었지만, 짧은 기간 내에 새로운 기술을 익혀서 응용하기 위해 고민해보는 경험과 (만약 실제로 서비스를 제공해야 한다면)서비스 제공자로서는 클라이언트에게 당장 가치를 제공할 수 있는 더 간단한 솔루션(e.g. SVG, Library)을 찾을 수 있도록 오버 엔지니어링에 빠지지 않는 게 중요하다는 교훈을 얻었습니다. 기술과 경험을 쌓아서 실무에서는 비즈니스를 고려한 최적의 결정을 내릴 수 있는 개발자가 되어야겠다고 생각했습니다.

테스트 코드 작성 경험

이번 프로젝트는 Jest, testing-library, playwright을 공부해 사용해보면서 스스로 본인의 코드에 대해 피드백하고 테스트 코드를 통해 팀원이 다른 팀원이 맡은 모듈의 핵심 기능이 뭔지 빠르게 파악하거나 리팩터링하는 데 도움이 되는 환경을 조성했습니다. 테스트를 작성하면서 걸리는 시간이 짧지 않고 프론트엔드는 상대적으로 더 테스트가 어렵다는 인식에 조금 동의할 수 있었습니다만, 확실한 장점이 있었는데 TDD를 하거나 테스트를 염두에 두게 되면 ARIA를 추가하는 등 의미 있는 요소를 마크업(getByRole() 사용 시)하게 되어 웹 접근성을 지원하고 핵심 기능 구현에 대한 설계를 더 촘촘하게 고려하는 효과가 있었습니다.

이희승