주소검색
프로젝트 소개
해외 사이트에 영문 주소 입력을 할 때마다 매번 영문 주소 변환 사이트에서 주소 검색 후 복사하는게 불편했습니다. 그 뿐만 아니라 매번 헷갈리는 우편번호, 도로명주소 등을 검색하는 것까지 편하게 할 수 있으면 좋을 것 같다는 생각에 이 프로젝트를 시작하게 됐습니다.
주소 검색은 도로명주소 오픈 API를 이용하여 구현했습니다.
지원 브라우저
자신의 브라우저에 확장 프로그램 스토어에서 바로 다운로드하세요!
기타 브라우저
스토어에서 아래 수동으로 설치하기의 공통 섹션과 브라우저별 확장 프로그램 설치 방법 참조
[!IMPORTANT]
브라우저는 WebExtension API를 지원해야 합니다. 주소검색 프로젝트는 WebExtension spec을 준수하지만 안정적인 동작을 보장하지는 않습니다.
직접 빌드하기
프로젝트 소스 코드를 로컬 환경에 다운로드 받고, 직접 빌드하여 사용할 수 있습니다.
이 프로젝트는 asdf의 .tool-versions 파일로 Node.js 버전을 관리합니다 (package.json의 engines.node 필드와 동일하게 Node.js 24 이상을 요구합니다). asdf를 사용 중이라면 저장소 루트에서 아래 명령으로 알맞은 버전을 설치할 수 있습니다.
asdf install
asdf를 사용하지 않는다면 nvm 등 다른 버전 관리 도구로 .tool-versions에 명시된 버전을 맞춰주세요.
먼저, 이 저장소를 다운로드 하고 의존성 설치를 합니다.
git clone https://github.com/Jaewoook/kor-address-extension
cd kor-address-extension && yarn
.env.example을 복사해 .env 파일을 만들고, 필요한 값(Sentry DSN, 주소 검색 API 키 등)을 채워 넣습니다.
cp .env.example .env
그리고, 패키지 스크립트를 실행합니다.
yarn build && yarn package
Google Chrome 및 NAVER Whale 브라우저
- chrome://extensions 페이지에 접속합니다. (Whale은 whale://extensions 통해서도 접속 가능)
- 개발자 모드가 활성화되어 있지 않다면, 활성화합니다.
Load unpacked 버튼을 클릭해 프로젝트 루트의 dist 폴더를 추가합니다.
Firefox 브라우저
- about:debugging 페이지에 접속합니다.
- This Firefox 메뉴 선택을 합니다.
Load Temporary Add-on... 버튼을 클릭해 프로젝트 루트의 dist.zip 파일을 추가합니다.
테스트
Vitest와 React Testing Library로 작성된 테스트를 실행합니다.
yarn test # 테스트 1회 실행
yarn test:watch # watch 모드
yarn test:coverage # 커버리지 리포트 생성
yarn test:ui # 브라우저 기반 UI로 테스트 실행 및 결과 확인 (@vitest/ui)
현재 커버리지 (yarn test:coverage 기준):
| Statements | Branches | Functions | Lines |
|---|
| 97.2% | 93.44% | 97.05% | 97.62% |
[!NOTE]
위 수치는 마지막으로 yarn test:coverage를 실행한 시점의 스냅샷입니다. CI에서 자동으로 갱신되지 않으므로, 테스트를 추가하거나 대규모로 변경한 뒤에는 다시 실행해 값을 갱신해주세요.
제작자
Jaewook Ahn
저작권
이 프로젝트는 MIT 라이선스를 따릅니다.
