Weekly Downloads 가 1000을 돌파했다.
2024.08.14 기준
왜쓰는지 모르겠고, 그냥 누군가가 매크로 돌리다가 얻어걸렸을수도 있지만, 그래도 기부니는 죻다
oss 퍼블리싱
오픈소스소프트웨어를 개발해봤다. typingchanger_easy라는 라이브러리로
npm 주소 여기 들어가면 있으니 많관부.. 내 블로그 어차피 아무도 안보지만 ㅜ,ㅜ
아무튼 그렇다. 간단한 사용법은 맨 아래에 reame.md 를 가지고 와봤고.
vite로 돌아가는 간단한 예제 프로젝트를 넣어놨다. 앞으로 개발한것들 있으면 이렇게 퍼블리싱 해봐야겠다.
아 참고로 퍼블리싱 방법은 간단하다. npm에 가입하고 -> 터미널에서 로그인 -> package.json에 설정한 files나 npmignore파일 gitignore 파일을 따라 퍼블리싱 할 파일들을 정리해서 올려준다.
내 package.json은 이렇다.
{
"name": "typingchanger_easy",
"version": "1.0.12",
"description": "한영키로 언어를 안 바꾸고 타이핑했을 때 한글=>영어, 영어=>한글 변환 모듈",
"main": "./dist/cjs/index.js",
"module": "./dist/esm/index.js",
"types": "./dist/esm/index.d.ts",
"exports": {
".": {
"require": {
"types": "./dist/cjs/index.d.ts",
"default": "./dist/cjs/index.js"
},
"import": {
"types": "./dist/esm/index.d.ts",
"default": "./dist/esm/index.js"
}
}
},
"scripts": {
"build:cjs": "tsc --project tsconfig.cjs.json",
"build:esm": "tsc --project tsconfig.esm.json",
"build": "npm run build:cjs && npm run build:esm",
"test": "jest"
},
"devDependencies": {
"@types/jest": "^27.5.2",
"@zerollup/ts-transform-paths": "^1.7.18",
"jest": "^27.2.0",
"ts-jest": "^27.0.0",
"typescript": "^4.0.0",
"typescript-transform-paths": "^3.4.10"
},
"files": [
"dist",
"README.md",
"LICENSE"
],
"exclude": [
"node_modules",
"dist"
]
}
typingchanger_easy
typingchanger_easy는 한영 키를 잊고 타이핑했을 때 한글을 영어로, 영어를 한글로 자동 변환해주는 모듈입니다. 2벌식 키보드 배열을 기준으로 작동합니다.
주요 기능
- 한글 ⇄ 영어 변환: 잘못된 키보드 입력을 감지하여 한글을 영어로, 영어를 한글로 자동 변환합니다.
- 실시간으로 한글 ⇄ 영어 변환하고 그에대한 옵션을 제공합니다.
esm에서만 제공합니다
(옵션 선택은 click 또는 tab 을 이용하여 선택 가능합니다.)
설치 방법
# with npm
npm i typingchanger_easy
# with yarn
yarn add typingchanger_easy
사용 방법
commonJS
const { convertKoreanToEnglish, convertEnglishToKorean, convertWithValidation } = require('typingchanger_easy');
// 한글을 영어로 변환
const koreanToEnglish = convertKoreanToEnglish('안녕하세요');
console.log(koreanToEnglish); // 'dkssudgktpdy'
// 영어를 한글로 변환
const englishToKorean = convertEnglishToKorean('dkssudgktpdy');
console.log(englishToKorean); // '안녕하세요'
module
import { convertKoreanToEnglish, convertEnglishToKorean, optionProvider } from 'typingchanger_easy';
// 한글을 영어로 변환
const koreanToEnglish = convertKoreanToEnglish('안녕하세요');
console.log(koreanToEnglish); // 'dkssudgktpdy'
// 영어를 한글로 변환
const englishToKorean = convertEnglishToKorean('dkssudgktpdy');
console.log(englishToKorean); // '안녕하세요';
// 추천 제공 기능 예시
document.getElementById('search').addEventListener('input', (event) => {
optionProvider(event, 'search', {
fontFamily: 'Arial, sans-serif',
fontSize: '16px',
backgroundColor: '#f0f8ff'
});
});
document.getElementById('search').addEventListener('input', (event) => {
optionProvider(event, 'searchArea', {
backgroundColor: '#f0f0f0',
border: '1px solid #ccc',
activeItemBackgroundColor: '#ffcc00', // 활성화된 항목의 배경색을 노란색으로 설정
});
});
Methods
모든 메서드는 독립적으로 사용할 수 있으며, 텍스트 변환 및 추천 기능을 제공합니다.
| Name | Params | Description |
|---|---|---|
| convertKoreanToEnglish | text: string | 영문 키보드 설정으로 입력된 한글 텍스트를 올바른 영어로 변환합니다. |
| convertEnglishToKorean | text: string | 한글 키보드 설정으로 입력된 영문 텍스트를 올바른 한글로 변환합니다. |
| optionProvider | event: Event, inputId: string, customStyles?: DropdownStyles | 입력된 텍스트에 따라 추천 목록을 제공하고, 사용자가 선택할 수 있도록 도와줍니다. |
Options
| Name | Type | Default value | Description |
|---|---|---|---|
| customStyles | DropdownStyles | 기본 스타일 | optionProvider 함수에서 추천 목록의 스타일을 사용자 정의할 수 있습니다. 예를 들어 글꼴, 크기, 색상 등을 설정할 수 있습니다. |
- 커스텀 style은 일반 css 선택자와 동일하나 탭으로 선택한 옵션의 백그라운드 컬러는 activeItemBackgroundColor로 조작 가능합니다.
라이선스
MIT 라이선스
