미리보기

● 2023.08 - 2024.02

팬덤 앱

RTK Query 활용:

기존 Redux의 복잡성과 boilerplate 코드를 줄이기 위해 RTK Query를 적극적으로 도입.

RTK Query의 자동 생성된 hooks를 활용하여 각 페이지의 데이터 페칭과 캐싱을 효율적으로

처리. 이를 통해 데이터 요청이 중복되지 않도록 하고, 컴포넌트에서의 코드 유지보수가 용이하

도록 개선.

CRUD 작업 간소화:

RTK Query의 내장 기능을 활용하여, 사용자가 앱 내에서 콘텐츠를 생성하고 읽을 수 있는CRUD 기능을 구현. 이를 통해 API 요청을 관리하는 로직을 대폭 간소화, 앱의 반응 속도가

15% 향상. 예를 들어, 사용자가 생성한 데이터를 캐싱하여 재요청 시 빠르게 로드할 수 있도록

함.

사진 촬영 및 선택 기능 커스텀:

react-native-image-picker와 bottomSheetModal을 활용하여 사용자 커스텀 갤러리를

구현. 사용자가 사진을 촬영하거나 갤러리에서 이미지를 선택할 수 있는 기능을 추가하여, 앱 내

에서의 미디어 파일 관리를 개선.

댓글 및 리액션 기능 구현:

각 콘텐츠에 대해 댓글 CRUD 및 리액션 CRD기능을 추가하여 사용자 간의 상호작용을 촉진. 예

를 들어, 리액션 데이터를 스토어에 저장하고, 실시간으로 업데이트할 수 있도록 함으로써 앱의

소셜 기능을 강화.

비디오 재생 시간 저장:

react-native-video를 사용하여 커스텀 비디오 플레이어를 개발. 사용자들이 뮤직 비디오 재

생 위치를 저장하고, 이후 시청 시 저장된 지점에서 재생할 수 있도록 기능을 구현.

● 2022.12 - 2023.02

키월렛터치

실시간 호가 정보 제공 및 WebSocket 연결 안정성 개선:

업비트와 바이낸스의 WebSocket API를 활용하여 실시간으로 암호화폐 호가 정보를 제공하는

기능을 구현. 초기에는 여러 채널에서 데이터를 받아오는 과정에서 연결이 불안정한 문제가 발

생. 이를 해결하기 위해 연결 상태를 주기적으로 확인하고, 연결이 끊어질 경우 자동으로 재연결

하는 로직을 추가. 그 결과, 실시간 데이터 제공의 안정성을 개선, 사용자들이 시장 동향을 신속

하게 파악할 수 있게 되어 사용자가 약 10% 증가.

다양한 암호화폐 정보 표시 및 API 요청 최적화:

CoinGecko API를 사용하여 다양한 암호화폐에 대한 최신 정보(시세, 변동률 등)를 사용자에게

제공. 그러나 API 요청 빈도가 많아지면서 데이터 로딩 속도가 저하되는 문제가 발생. 이를 해결

하기 위해 axios의 요청 스로틀링(throttling) 및 캐싱을 도입하여 필요한 경우에만 API 요청을

수행하도록 최적화. 이로써 애플리케이션의 응답 속도가 15% 향상되었으며, 사용자는 보다 빠

르게 암호화폐 정보를 조회할 수 있게됨.

● 2022.10 - 2022.11

MetaStone

개인화된 NFC 카드 인식 및 데이터 파싱 오류 해결:

고객사마다 고유한 NFC 카드 정보를 인식하기 위해, NFC 코드를 수정하여 조건문을 통해 각 고

객사의 카드 정보를 구분하여 처리. 이 과정에서 카드 데이터를 파싱하는 도중 특정 카드 정보가

잘못 인식되는 오류가 발생, 이를 해결하기 위해 데이터 파싱 로직을 개선하고, 카드 번호의 형식

을 확인하는 검증 로직을 추가. 이러한 개선을 통해 고객사별로 맞춤화된 서비스를 제공할 수 있

게 되었고, 시스템의 안정성을 높임.

블록체인 API 데이터 통합 및 비동기 요청 문제 해결:

여러 블록체인 API에서 데이터를 가져와 시스템에 통합하는 과정에서 비동기 요청이 순차적으로처리되지 않아 데이터가 누락되는 문제가 발생. 이를 해결하기 위해 axios를 사용하여 API 요청

을 병렬로 처리하고, 모든 요청이 완료된 후에 데이터를 종합하여 사용자에게 제공하는 방식으로

개선. 이를 통해 데이터 수집 속도가 크게 향상되었으며, 시스템 내에서 블록체인 정보를 보다 빠

르고 정확하게 활용.

블록체인 데이터 시각화 및 성능 최적화:

API를 통해 수집한 블록체인 데이터를 React Native의 FlatList 컴포넌트를 활용하여 목록 형

태로 구성. 사용자는 이 목록을 통해 보유하고 있는 블록체인 데이터의 세부사항을 쉽게 조회할

수 있게 되었음.

- React 18 + typescript

- Next 14 app router

- Next - auth

- React-query

- Zustand

- Tailwind CSS

RTK Query 활용:

기존 Redux의 복잡성과 boilerplate 코드를 줄이기 위해 RTK Query를 적극적으로 도입.

RTK Query의 자동 생성된 hooks를 활용하여 각 페이지의 데이터 페칭과 캐싱을 효율적으로

처리. 이를 통해 데이터 요청이 중복되지 않도록 하고, 컴포넌트에서의 코드 유지보수가 용이하

도록 개선.

CRUD 작업 간소화:

RTK Query의 내장 기능을 활용하여, 사용자가 앱 내에서 콘텐츠를 생성하고 읽을 수 있는CRUD 기능을 구현. 이를 통해 API 요청을 관리하는 로직을 대폭 간소화, 앱의 반응 속도가

15% 향상. 예를 들어, 사용자가 생성한 데이터를 캐싱하여 재요청 시 빠르게 로드할 수 있도록

함.

사진 촬영 및 선택 기능 커스텀:

react-native-image-picker와 bottomSheetModal을 활용하여 사용자 커스텀 갤러리를

구현. 사용자가 사진을 촬영하거나 갤러리에서 이미지를 선택할 수 있는 기능을 추가하여, 앱 내

에서의 미디어 파일 관리를 개선.

댓글 및 리액션 기능 구현:

각 콘텐츠에 대해 댓글 CRUD 및 리액션 CRD기능을 추가하여 사용자 간의 상호작용을 촉진. 예

를 들어, 리액션 데이터를 스토어에 저장하고, 실시간으로 업데이트할 수 있도록 함으로써 앱의

소셜 기능을 강화.

비디오 재생 시간 저장:

react-native-video를 사용하여 커스텀 비디오 플레이어를 개발. 사용자들이 뮤직 비디오 재

생 위치를 저장하고, 이후 시청 시 저장된 지점에서 재생할 수 있도록 기능을 구현.

개인화된 NFC 카드 인식 및 데이터 파싱 오류 해결:

고객사마다 고유한 NFC 카드 정보를 인식하기 위해, NFC 코드를 수정하여 조건문을 통해 각 고

객사의 카드 정보를 구분하여 처리. 이 과정에서 카드 데이터를 파싱하는 도중 특정 카드 정보가

잘못 인식되는 오류가 발생, 이를 해결하기 위해 데이터 파싱 로직을 개선하고, 카드 번호의 형식

을 확인하는 검증 로직을 추가. 이러한 개선을 통해 고객사별로 맞춤화된 서비스를 제공할 수 있

게 되었고, 시스템의 안정성을 높임.

블록체인 API 데이터 통합 및 비동기 요청 문제 해결:

여러 블록체인 API에서 데이터를 가져와 시스템에 통합하는 과정에서 비동기 요청이 순차적으로처리되지 않아 데이터가 누락되는 문제가 발생. 이를 해결하기 위해 axios를 사용하여 API 요청

을 병렬로 처리하고, 모든 요청이 완료된 후에 데이터를 종합하여 사용자에게 제공하는 방식으로

개선. 이를 통해 데이터 수집 속도가 크게 향상되었으며, 시스템 내에서 블록체인 정보를 보다 빠

르고 정확하게 활용.

블록체인 데이터 시각화 및 성능 최적화:

API를 통해 수집한 블록체인 데이터를 React Native의 FlatList 컴포넌트를 활용하여 목록 형

태로 구성. 사용자는 이 목록을 통해 보유하고 있는 블록체인 데이터의 세부사항을 쉽게 조회할

수 있게 되었음.

실시간 호가 정보 제공 및 WebSocket 연결 안정성 개선:

업비트와 바이낸스의 WebSocket API를 활용하여 실시간으로 암호화폐 호가 정보를 제공하는

기능을 구현. 초기에는 여러 채널에서 데이터를 받아오는 과정에서 연결이 불안정한 문제가 발

생. 이를 해결하기 위해 연결 상태를 주기적으로 확인하고, 연결이 끊어질 경우 자동으로 재연결

하는 로직을 추가. 그 결과, 실시간 데이터 제공의 안정성을 개선, 사용자들이 시장 동향을 신속

하게 파악할 수 있게 되어 사용자가 약 10% 증가.

다양한 암호화폐 정보 표시 및 API 요청 최적화:

CoinGecko API를 사용하여 다양한 암호화폐에 대한 최신 정보(시세, 변동률 등)를 사용자에게

제공. 그러나 API 요청 빈도가 많아지면서 데이터 로딩 속도가 저하되는 문제가 발생. 이를 해결

하기 위해 axios의 요청 스로틀링(throttling) 및 캐싱을 도입하여 필요한 경우에만 API 요청을

수행하도록 최적화. 이로써 애플리케이션의 응답 속도가 15% 향상되었으며, 사용자는 보다 빠

르게 암호화폐 정보를 조회할 수 있게됨.