Kuromoji를 사용하여 브라우저에서 형태소 분석 수행 (React 있음/없음)

목적: 브라우저에 입력된 문장을 형태소 해석한다.

React 공부를 하면 자연언어 처리의 프로토타입 화면을 만들고 있는 곳에 형태소 해석이 필요하게 되었다. 형태소 해석 API 를 가지는 서버를 따로 세워야 할까( 내 사이트의 형태소 분석 데모 에서는 API 화하고 있었고).
의외로 클라이언트 측 JavaScript 만 갈 수있었습니다.

형태소 분석기는 Kuromoji 0.1.1을 사용합니다.
이 기사에서는 React에서 사용하는 경우와 React를 사용하지 않고 kuromoji.js를 직접 사용하는 경우를 소개합니다.

React에서 사용하는 방법

npm install kuromoji 로 검은 문자 를 인스톨 했을 때에 번들 되고 있는 사전 node_modules/kuromoji/dict/ (아마 IPADIC 인가?) 를 브라우저로부터 액세스 할 수 있는 공개 디렉토리에 카피합니다.

$ npm install kuromoji --save
$ cp -a node_modules/kuromoji/dict public/

공개한 사전의 URI 를 지정해 kuromoji 로 형태소 해석합니다.

import kuromoji from "kuromoji"
// ...

const text = "親譲りの無鉄砲で小供の時から損ばかりしている"
kuromoji.builder({ dicPath: "/dict" }).build((err, tokenizer) => {
  if(err){
    console.log(err)
  } else {
    const tokens = tokenizer.tokenize(text)
    console.log(tokens)
  }
})

build() 의 콜백은 비동기로 행해지는 점에 주의. 1,067자의 문장에 대한 성능은 다음과 같습니다.

build() 콜백까지 1,197ms.

tokenize() 처리가 26ms.

형태소 분석만이라면 의외로 빠르다.
build() 때마다 사전을 읽는 것 같아 체감 속도의 병목이 되고 있다. Tokenizer.js 의 소스를 읽는 한.

2번째 이후의 사전의 액세스는 304 Not Modified 응답이므로 사전의 다운로드가 아니라 읽어들여와 해석에 시간이 걸리고 있다. 이 때문에 ServiceWorker로 사전을 로컬에 캐쉬시켜도 그다지 효과는 없다고 추측한다.

tokenize() 가 성공했을 경우, 이하와 같은 형태소 정보의 배열을 돌려준다.

[
  {
    "word_id": 564230,
    "word_type": "KNOWN",
    "word_position": 1,
    "surface_form": "親譲り",
    "pos": "名詞",
    "pos_detail_1": "一般",
    "pos_detail_2": "*",
    "pos_detail_3": "*",
    "conjugated_type": "*",
    "conjugated_form": "*",
    "basic_form": "親譲り",
    "reading": "オヤユズリ",
    "pronunciation": "オヤユズリ"
  },
  ...
]

React를 사용하지 않는 방법

React를 사용하지 않고도 일반 JavaScript와 마찬가지로 Kuromoji를 사용할 수 있습니다. 필요한 것은 React 의 케이스로 카피한 사전에 가세해 tokenizer . 이들을 브라우저에서 액세스할 수 있는 공개 디렉토리에 복사합니다.

Kuromoji를 이용하는 HTML 측에서 node_modules/kuromoji/build/kuromoji.js 요소를 기술합니다. 이제 글로벌 범위에서 <script> 객체를 사용할 수 있게 되므로 React 의 경우와 같이 작성할 수 있습니다.

<script src="/js/kuromoji.js"></script>

<script>
var text = "親譲りの無鉄砲で小供の時から損ばかりしている"
kuromoji.builder({ dicPath: "/dict" }).build(function(err, tokenizer){
  if(err){
    console.log(err);
  } else {
    var tokens = tokenizer.tokenize(text);
    console.log(tokens);
  }
});
</script>