PROJECT INFO

증권을 접하기 어려운 청소년을 위한 모의투자 서비스.

심부름 거래를 통해 가상의 화폐를 모으고, 이를 가상 증권 상품에 투자해 자산을 확장하며 증권에 대한 지식을 얻을 수 있음.

소켓 통신을 이용한 실시간 주식 그래프 확인 가능.

개인 간 심부름 거래 기능을 통해 주식이 아닌 수단으로도 자산을 확장하거나 소비할 수 있음.

socket.io를 이용한 실시간 통신을 채팅, 그래프 기능에 적극 활용.

CONTRIBUTIONS

가상 주식의 현재가를 실시간으로 받을 수 있는 기능을 구현하였습니다.

socket.io를 이용하여 소켓 통신을 구현하였습니다. react-native-gifted-chart를 이용하였고, 차트 데이터의 범위를 조절하여 1일, 1주일, 1개월, 1년 단위로 그래프를 조정할 수 있게 구현하였습니다.

차트 컴포넌트의 기본 스타일을 커스텀하여 UI 디자인과 최대한 비슷하게 조정했습니다.

이를 통해 핵심 기능의 UI/UX에서 뛰어난 디자인 통일성을 제공할 수 있었습니다.

복잡하고 어려운 기능은 빼고 주식 매수/매도에 집중한 UI를 구현하였습니다.

‘청소년 증권 교육의 첫걸음’ 이라는 취지에 맞게 기존 증권사 앱의 복잡하고 어려운 단어가 많은 UI에서 주식의 호가와 잔량을 보는 것과 구매 수량 및 매도 금액을 설정하는 것에 집중하도록 UI를 단순화하였습니다.

socket.io를 이용하여 사용자 간 1:1 채팅을 구현하였습니다.

서비스 내에서 투자 자금을 모으기 위해서는 심부름을 통해 가상 화폐 ‘모’를 벌어야 합니다.

심부름 제안을 수락하는 API 요청과 함께 1:1 채팅방을 생성하는 요청을 전송합니다. 그 후, 응답으로 온 채팅방 소켓ID를 이용하여 채팅방 페이지로 이동합니다.

페이지 이동 완료시 useEffect()와 소켓ID 이용하여 socket을 연결합니다.

라이트/다크 모드를 위한 Themed 컴포넌트를 구축해, 테마 변경 시 전역적으로 스타일이 자동 적용되도록 구현했습니다. useColorScheme()로 팔레트를 선택하고 Context로 전역 전달합니다.

또한 <ThemedView>, <ThemedText> 컴포넌트를 제작하여 테마 변경 시 자동으로 백그라운드 및 포그라운드 색이 변경되도록 구현하였습니다.

TROUBLE SHOOTINGS

JSON.parse()를 이용하여 소켓 통신으로 받은 데이터가 렌더링 되지 않는 문제를 해결했습니다.

서버에게서 받은 데이터 자체는 객체 형태지만, 소켓 통신을 거치며 string 자료형으로 변환된다는 점을 놓쳐 문제가 발생하게 되었습니다.

이를 통해 TypeScript를 사용하더라도 타입 검증은 꼭 필요하다는 것을 알게 되었습니다.

매수 직전 현재 잔량을 한번 더 조회하여 잔량이 음수가 되지 않도록 하였습니다.

매수하려는 종목이 인기가 많을 경우 매수 페이지에 있는 동안 잔량이 0이 되어 버려 사용자가 매수한 후 잔량이 음수가 되는 현상이 발생하였습니다.

이를 해결하기 위해 매수 API 요청을 보내기 전 잔량을 가져오는 API 요청을 한번 더 보내 잔량이 남아있는지 확인하는 절차를 거치도록 하여 문제를 해결하였습니다.

SDK 버전이 올라감에 따라 변경된 react-navigation 인터페이스를 공식 문서를 읽은 후 수정하였습니다.

페이지 이동 시 사용하는 함수가 navigate()에서 dispatch()로 변경된 점을 발견하였습니다.

애플리케이션이 작동하지 않는 문제를 해결하기 위해 navigate() 함수가 사용되는 모든 곳을 빠르게 dispatch()로 변경하여 개발 일정에 차질이 없도록 하였고, 무사히 일정 내에 담당하고 있던 기능을 완성할 수 있었습니다.