트러블 슈팅 코인 상세 차트 - donggeonoh/bithumb-techcamp-ios-1st GitHub Wiki

1. Candlestick API data를 응답받은 후 decoding 할 때 같은 배열에 서로 다른 타입(Int64, String)이 존재하는 문제 - DonggeonOh

파란색: Int, 초록색: String

처음엔 JSONDecoder를 이용하면 충분히 가능 할 것이라고 생각하여 Codingkey나 init(decoder:) 생성자를 수정 및 변경 해보았습니다.

하지만, 원하는대로 두 데이터 타입은 분리되지 않아 JSONSerialization을 사용하였습니다. JSONSerialization을 사용하게 되면 딕셔너리로 key와 value를 쌍으로 하여 데이터를 처리할 수 있었습니다.

따라서, 해당 배열의 타입을 [Any]로 디코딩 하고 배열의 인덱스를 돌면서 타입 캐스팅을 해준 후 새로운 타입(Candlestick)을 생성하여 해결하였습니다.

2. Candlestick API의 가장 최신 데이터의 경우 시간에 따라 기준과 다른 경우에 대한 문제 - DonggeonOh

위 (1647010800000): 2022년 3월 12일 토요일 오전 12:00:00

아래 (1647151200000): 2022년 3월 13일 일요일 오후 3:00:00

예를들어, 24시간을 기준으로 하면 제일 마지막(최신) 데이터는 12시(자정)을 기준으로 한 데이터가 아닌 현재 시간의 1시간을 기준(현재 8시 반이라면 8시)으로 한 데이터가 넘어왔습니다.

그리고 실시간으로 업데이트 하기 위해 WebSocket Ticker API를 사용하여 데이터를 가져올 땐, 현재 시간에 대한 데이터를 넘겨받기 때문에 최신 캔들스틱에 대한 업데이트를 어떻게 해야할 지에 대한 고민을 하였습니다.

이 방법을 해결해주기 위해서 최근 데이터와 실시간으로 받은 데이터의 time을 Epoch timestamp로 변환한 후 둘의 타임스탬프 간 차이를 이용하였습니다.

그리고 각 단위(1분 = 60, 10분 = 600...)마다의 타임스탬프를 계산 후 데이터 간 차이 값과 단위 값의 차이를 비교하여 단위보다 적은 경우엔 업데이트, 큰 경우엔 데이터를 추가해주는 방식으로 해결하였습니다.

3. Charts 라이브러리를 사용하면서 X축을 날짜로 커스터마이징 시 문제 - DonggeonOh

X축을 날짜로 커스터마이징을 해줄 때 DefaultAxisValueFormatter 클래스를 이용하여 커스텀을 해줄 수 있습니다.

하지만, 해당 클래스로 커스터마이징을 하게 되면 캔들스틱의 캔들바가 보이지 않는 문제가 생겼습니다.

이유를 찾아보니, X축을 Epoch time으로 잡았는데 Charts 라이브러리 상 X축의 값이 너무크면 데이터를 표현할 뷰의 넓이가 조그맣게 된다는 것을 알게 되었습니다.

따라서, X축을 배열의 인덱스로 변경하고, 데이터 포맷은 해당 배열 내부의 Epoch timestamp 값을 저장하여 date로 변환 후 IndexAxisValueFormatter를 통해 커스터마이징 하였습니다.

4. 처음 데이터를 갱신하고 나서 그래프에 분포한 모든 데이터를 한 화면에 보여주는데, 최근 시점으로 확대하여 보여주고 싶은 고민 및 그래프 Scale(확대) 값을 고정으로 정하게 되면 각각의 코인마다 데이터의 갯수가 달라 너무 확대 되거나 너무 축소되는 문제에 대한 고민 - DonggeonOh

모든 데이터가 한 화면에서 보여 최근 시점으로 확대하여 보여주고 싶은 문제는 최근 시점 방향으로 Position과 Scale 값을 조정하여 해결하면 큰 문제가 되진 않았습니다.

하지만, 여기서 문제점은 각 코인마다의 데이터 양이 달라 확대해줘야 하는 Scale 값이 달라야 하였습니다. 왜냐하면, 데이터가 적은 경우 고정적으로 확대하게 되면 너무 크게 확대되거나, 데이터가 많은 경우엔 데이터가 너무 조그맣게 보였습니다.

그래서 Scale X, Y 값의 보정 값을 정하여 (데이터 갯수 X 보정 값)을 스케일 X, Y로 잡았습니다. 각 코인마다 너무 확대되거나 너무 축소되는 문제를 해결하였습니다.