moonheekim0118 / kr-to-jp

일본어 발음 번역기 🇰🇷 -> 🇯🇵

일본어 발음 번역기

• 한글로 쓰여진 일본어 발음 -> 히라가나 -> 한국어 번역
• 번역에 어색한 점이 있을 수 있습니다.
• 번역에는 네이버 파파고 API 를 사용합니다.
• 일본어에 없는 발음을 입력하면 무시됩니다.
• 가타카나는 지원되지 않습니다. 따라서 외래어 입력시 번역이 매끄럽지 않습니다.
• 파파고 API 요청 시, 헤로쿠 무료 서버를 거치기 때문에 초기 로딩 지연이 있습니다.

kr-to-jp's Issues

[feat] 번역 서버-클라이언트 연동

[fix] 마침표 인식하도록 수정

[chore] 절대 경로 설정

지금 Ts-config랑 webpack alias 설정이 좀 잘못되어있는 것 같당.

[feat] 히라가나 결과 UI 구현

[chore] 프로젝트 초기 셋팅 하기

사용할 기술

• React
• React-Router
• TypeScript
• Cypress (E2E test)

[feat] 로딩 컴포넌트 작업

• 파파고 API 요청 상태 Loading 시 결과 창에 로딩 컴포넌트 띄워주기

[feat] 클릭 시 자동 복사 & 토스트 알림

• 번역 결과 / 히라가나를 클릭 시 자동으로 복사 한다.
• 복사 시, 토스트로 알림을 띄워준다.

[feat] 이전 번역 History 저장

• 최대 5개 저장
• LocalStorage에 저장한다.
• 인풋은 저장하지 않고, 히라가나와 번역 결과만 저장해준다.
• Tab 으로 열 수 있도록 한다.
• 컴포넌트 클릭 시 자동으로 복사한다.

[fix] 첫 번역이 안되는 버그

• 처음 한글입력시 바로 번역이 안되는 버그가 있음

[feat] SEO 설정

[feat] 다크모드 구현

ㅈㄱㄴ

[reference] 한글-히라가나 대치표

あ단	い단	う단	え단	お단	ゃ	ゅ	ょ
あ 아	い 이	う 우	え 에	お 오
か 카	き 키	く 쿠	け 케	こ 코	きゃ 캬	きゅ 큐	きょ 쿄
さ 사	し시	す 스	せ 세	そ 소	しゃ 샤	しゅ 슈	しょ 쇼
た 타	ち 치	つ 츠	て 테	と 토	ちゃ 차	ちゅ 추	ちょ 초
な 나	に 니	ぬ 누	ね 네	の 노	にゃ 냐	にゅ 뉴	にょ 뇨
は 하	ひ 히	ふ 후	へ 헤	ほ 호	ひゃ 햐	ひゅ 휴	ひょ 효
ま 마	み미	む 무	め 메	も 모	みゃ 먀	みゅ 뮤	みょ 묘
や 야		ゆ 유		よ 요
ら 라	り 리	る 루	れ 레	ろ 로	りゃ 랴	りゅr 류	りょ 료
わ 와	を 오
				ん -ㄴ	っ - ㅅ

あ단	い단	う단	え단	お단	ゃ	ゅ	ょ
が 가	ぎ 기	ぐ 구	げ 게	ご 고	ぎゃ 갸	ぎゅ 규	ぎょ 교
ざza 자	じji 지	ずzu 즈	ぜze 제	ぞzo 조	じゃja 자	じゅ 주	じょ 조, 죠
だ 다	ぢ 지	づ 즈	で 데	ど 도	ぢゃ 자,쟈	ぢゅ주,쥬	ぢょ 쬬,죠
ば 바	び 비	ぶ 부	べ 베	ぼ 보	びゃ 뱌	びゅ 뷰	びょ 뵤

あ단	い단	う단	え단	お단	ゃ	ゅ	ょ
ぱ 파	ぴ 피	ぷ 푸	ぺ 페	ぽ 포	ぴゃ 퍄	ぴゅ 퓨	ぴょ 표

[feat] SCSS variables, mixins 정의하기

[feat] 새로고침 시 인풋 및 결과 유지

• SessionStorage를 사용해서 새로고침 해도 Input과 결과를 유지하도록 한다.

[feat] textarea, div 자동으로 height 조정 구현

• 글자수가 정해진 height을 넘어갈 경우, 자동으로 늘려지도록 구현하기

[test] cypress 테스트코드 작성하기

[feat] 한본어->히라가나로 바꿔주기

파파고를 쓸 수 없다. 파파고에 한본어를 입력하면 싹다 가타카나로 바꿔버려서 제대로 번역이 안된다.
그렇다고 일일이 일본어 사전 API 에 검색도 할 수 없다. 사전 검색은 단어별로 해야하는데 한본어에서 단어 분리는 내 능력으로는 불가능하기 때문이다. 따라서 아래와 같은 로직을 가져야한다.

1. 사용자가 한본어를 입력한다. '센세아리가또고자이마스'
2. 위 한본어를 히라가나로 바꿔준다. 'せんせいありがとうございます'
3. 파파고 API 를 통해 변환된 히라가나를 한국어로 번역한다. '선생님 감사합니다'

기능 사항

• 한국어 입력 시, 히라가나로 바꾸어준다.

예시

• 오하요 -> おはよ
• う와 같은 장음은 안넣어줘도 된다.
• 일본어에 ㅂ 발음은 자동으로 ㅎ 발음으로 변환해준다. 부 -> 후

고려해야할 점

• 가타카나의 경우, 히라가나로 표기할 경우 제대로 번역 안된다.

[refactor] 누락된 타입 설정

[refactor] textarea value change 렌더링 최적화 하기

문제점

• 사용자가 textarea에 글자를 입력 할 때 마다 전체 컴포넌트 (히라가나 / 번역결과)가 리렌더링 됨

해결방법 ( forwarding ref 사용 )

• textarea 컴포넌트에서 input error 처리, value change를 책임
• forward ref로 감싸주고, ref 를 매개변수로 받아와서 부모 컴포넌트와 연결
• 부모 컴포넌트에서 input을 input.current로 접근
• convert 함수는 디바운싱을 적용하여 textarea 컴포넌트에 props로 전달해주고, textarea컴포넌트는 useEffect로 value 값이 바뀔 때 마다 props로 전달받은 convert 함수 실행

[feat] 미디어쿼리 설정

320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more —  Extra large screens, TV

[feat] TextArea 컴포넌트 구현하기

• 한글 입력을 받을 수 있는 Textarea 컴포넌트를 구현한다.