hanpyo
외래어 한글 표기 용례를 검색하는 웹 애플리케이션입니다.
국립국어원의 외래어 표기 데이터를 기반으로 원어 표기를 검색하고 한글 표기법을 확인할 수 있습니다. 용례를 자주 찾는 경우에 좀 더 빠르게 사용할 수 있도록 구성했습니다.
용례 데이터는 가급적 하루에 한 번 업데이트 예정입니다.
상업적인 용도가 아닌 취미용 프로젝트로, Claude Code를 활용하여 만들었습니다.
사이트 주소
🌐 https://jiyongjung0.github.io/hanpyo/
주요 기능
- 📝 실시간 검색: 원어 표기를 입력하면 즉시 검색 결과 표시
- 🔍 부분 일치 검색: 대소문자 구분 없이 부분 문자열로 검색
- ⌨️ 키보드 단축키: ESC로 입력 지우기, Enter로 전체 선택
- 📱 반응형 디자인: 모바일 및 데스크톱 환경 모두 지원
사용 방법
키보드 단축키
- ESC: 검색어 입력 내용 전체 지우기
- Enter: 검색어 전체 선택 (빠른 덮어쓰기)
- 검색창 오른쪽 ✕ 버튼: 입력 내용 지우기
문의
GitHub issue나 jiyongjung0 @ gmail.com로 연락 부탁드립니다.
개발 정보
시작하기
Volta를 설치하면 프로젝트 디렉터리에서
package.json에 고정된 Node.js 24.10.0과 npm 11.12.0을 자동으로 사용합니다.
Volta 설치 후 터미널을 다시 열어 실행하세요.
# 저장소 클론
git clone https://github.com/jiyongjung0/hanpyo.git
cd hanpyo
# 고정된 Node.js 및 npm 설치
volta fetch [email protected] [email protected]
# 잠금 파일 기준으로 의존성 설치
npm ci
# 개발 서버 시작
npm run dev
개발 서버는 http://localhost:5173 에서 실행됩니다.
사용 가능한 명령어
npm run dev # 개발 서버 시작 (HMR 포함)
npm run build # 프로덕션 빌드
npm run lint # ESLint 실행
npm run preview # 프로덕션 빌드 미리보기
npm run test # 테스트 실행 (watch 모드)
npm run test:ui # 테스트 UI로 실행
npm run test:coverage # 코드 커버리지 확인
기술 스택
프론트엔드
- React 19 - UI 라이브러리
- TypeScript - 타입 안전성
- Vite - 빠른 빌드 도구 및 개발 서버
- PapaParse - CSV 파싱
개발 도구
- Vitest - 단위 테스트 프레임워크
- React Testing Library - 컴포넌트 테스트
- ESLint - 코드 품질 도구
- GitHub Actions - CI/CD 자동화
배포
- GitHub Pages - 정적 사이트 호스팅
- 자동 배포: main 브랜치에 푸시 시 자동으로 빌드 및 배포
프로젝트 구조
자세한 프로젝트 구조 및 아키텍처 설계는 CLAUDE.md를 참고하세요.
배포
이 프로젝트는 GitHub Actions를 통해 자동으로 배포됩니다:
main 브랜치에 푸시- GitHub Actions가 자동으로 실행
- 테스트 실행 → 빌드 → GitHub Pages 배포
기타 정보
- 사전을 자동으로 업데이트하면 좋을텐데, GitHub Actions에서 국립국어원 사이트 접근이 안되는 것 같습니다. 해결방법을 아시는 분은 도움 주시면 감사하겠습니다.
