2022.10 — 2022.12회사 프로젝트
Cosmostation 크롬 익스텐션
멀티체인 지갑 — 토큰 검색 페이지 · 체인 추가
- 맡은 일
- 프론트엔드 개발 인턴 (토큰 검색 · 체인 추가)
- 기간
- 2022.10 — 2022.12
- 소속
- 스탬퍼 (Cosmostation)
Cosmos·Ethereum 등 여러 체인을 지원하는 오픈소스 크롬 익스텐션 지갑입니다. 인턴으로 참여해 프론트엔드 시니어분의 리뷰를 받으며 티켓 단위로 기능을 맡았고, 신규 체인(Kujira) 추가와 토큰 검색 페이지 제작을 담당했습니다.
여기서 처음으로 '동작하는 코드'와 '리뷰를 통과하는 코드'가 다르다는 걸 체감했습니다 — 같은 기능을 리뷰 코멘트에 따라 여러 번 다시 올렸고, 그 과정에서 디바운스 처리와 상태 흐름을 손보며 검색 입력의 반응을 개선했습니다.
핵심
- 01
Kujira 체인 추가
체인 상수·심볼 에셋·체인 목록 등록까지 신규 체인 온보딩 전 과정
- 02
이더리움 ERC20 토큰 리스트·검색 페이지 제작
entry/layout/styled 구조와 TokenItem 컴포넌트 구성
- 03
Cosmos CW20 토큰 검색 페이지
특정 체인 전용에서 전 체인 지원으로 확장
- 04
검색 입력에 디바운스 도입
입력마다 발생하던 조회를 줄이고, 직접 만든 로직을 공통 useDebounce 훅으로 정리
나머지 3개 더 보기접기
- 05
코드 리뷰 반영을 전제로 한 개발
같은 기능을 리뷰 코멘트에 따라 반복해 다시 올림
- 06
한국어·영어 번역 리소스 추가
신규 화면의 i18n 대응
- 07
인턴끼리 코드를 공부하고 매주 발표하는 스터디 진행
간결한 코드와 메모리 누수 없는 리팩토링을 주제로
화면
Pl. 2of6
크롬 익스텐션 실제 화면입니다.
자세히
궁금한 항목을 펼치면 그때 무엇이 문제였고 어떻게 판단했는지 나옵니다.
Kujira 체인을 익스텐션에 추가
체인 정의 상수, 체인 목록 등록, 심볼 이미지까지 함께 반영
이더리움 ERC20 토큰 리스트 페이지 제작
검색 화면 구조(entry·layout·styled)와 개별 토큰 아이템 컴포넌트를 나눠 구성
Cosmos CW20 토큰 검색 화면을 만들고, 처음 특정 체인 대상이던 것을 전 체인 지원으로 확장
라우트 상수와 라우터에 새 화면을 연결하고, 지갑 화면의 토큰·코인 목록과 이어지게 함
검색 입력에 디바운스를 적용하고 useCallback으로 감싸 불필요한 조회와 재생성을 줄임
직접 만든 디바운스 로직을 이후 공통 useDebounce 훅으로 정리
리뷰 코멘트를 반영한 커밋이 여러 차례
조건 판단 로직 단순화, 불필요한 로그·주석 제거, 스타일 정리
신규 화면에 맞춰 한국어·영어 번역 리소스를 함께 추가
배운 것
프론트엔드 시니어분 밑에서 크롬 익스텐션을 만들며, 기능이 돌아가는 것 너머의 기술을 처음 배웠습니다. 렌더링을 어떻게 최적화하는지, content script가 웹 페이지 안에서 어떻게 동작하는지, 지갑이 페이지에 provider를 주입해 dApp과 어떻게 연결되는지처럼 혼자서는 들여다볼 생각도 못 했을 부분들이었습니다.
코드 리뷰를 주고받으며 다른 주니어 개발자분들과 함께 성장했습니다. 같은 기능을 리뷰에 맞춰 여러 번 다시 올리면서, 동작하는 코드와 리뷰를 통과하는 코드가 다르다는 걸 알게 됐습니다.
인턴들과 함께 코드를 공부하고 매주 발표하는 스터디를 진행했습니다. 기능을 구현하는 데서 그치지 않고 코드를 깔끔하고 간결하게 짜는 법, 메모리 누수 없이 리팩토링하는 법을 익히면서 실력이 많이 늘었습니다.