글자 제한 문제 해결.md

병렬 요청 처리를 통한 글자 제한 문제 해결

문제 식별 및 원인 분석
- 사용중인 맞춤법 검사 API는 요청 당 500자의 글자 제한이 존재
- 요청 본문의 문자열 길이가 500자 이상일 경우 413 HTTP 상태 코드 반환

해결 방법

요청 본문이 글자 제한 초과 시 요청 유형에 따라 문서의 첫 문자(전체 검사) 또는 선택 영역의 첫 문자(선택 검사)를 시작으로 순회하며 500자 이내의 문자열(chunk)로 분할한 후 병렬 요청 처리 (커밋)

병렬 요청에 대한 각 응답을 병합한 후 반환

async function attemptCorrection(editor: vscode.TextEditor, text: string) {
  // 500자 미만의 문자열들로 분할
  const chunks: string[] = splitTextToChunks(editor, text);

  try {
    const promises = chunks.map(value =>
      axios.get(BASE_URL, {
        params: {
          color_blindness: 0,
          q: value,
          passportKey,
        },
      })
    );
    // 병렬 요청
    const res = await Promise.all(promises);
    // 응답 문자열 병합
    const combinedCorrection = res.reduce(
      (acc, val) => {
        return {
          ...acc,
          notag: acc.notag + val.data.message.result.notag_html,
          html: acc.html + val.data.message.result.html,
        };
      },
      { notag: '', html: '' }
    );

    return combinedCorrection;
  } catch (e) {
    // ..
  }
}

1차 해결 방법:

500자 단위의 문자열로 분할
다만 문자열의 길이 단위로 분할할 경우 단어 또는 문장이 잘려서 나뉘는 경우가 발생

ⓘ 500자 단위로 분할할 경우:

검사 본문:

<!-- DOM에-대해.md -->
DOM 이란 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다.

...

DOM 과 JavaScript와 같은 스크립팅 언어를 통해 접근하고 조작할 수 있는 것이다.

실제 결과:

const chunks = splitTextToChunks(text);
console.log(chunks);
// (2) ['DOM이란 ... 저장되고 Ja', 'vaScript를 통해 접근하거나 조작할수 있다.']

분할 과정에서 'JavaScript를'과 같은 단어 단위의 구조가 유지되어야 하는데 'Ja'와 'vaScript를'로 의도치 않게 잘림

2차 해결 방법:
- 500자 미만의 문자열로 분할하되 분할된 문자열에서 마지막 줄바꿈 처리 문자("\n" 또는 "\r\n") 기준으로 분할
마침표나 쉼표를 기준으로 분할하지 않은 이유: 마침표나 쉼표는 프로그래밍 언어(HTML 등)가 포함된 문서의 경우 의도치 않게 문자열들을 분할할 수 있고 완전한 문장 단위로 나뉜다는 보장이 없음. 다만 줄 바뀜을 기준으로 나누면 조사나 어미를 기준으로 단어와 문장을 나누기 때문에 문장의 구조적 요소들이 중간에서 잘리지 않고 분할이 가능.

ⓘ 마침표 기준으로 분할할 경우:

검사 본문:
```

이번 글에서는 목차 컴포넌트를 만드는 과정에 대해 알아보겠습니다.

<a href="www.mysite.com/post4">지난 글 보기</a>
```
실제 결과:
```
const chunks = splitTextToChunks(text);
console.log(chunks);
// (3) ['이번 글에서는 목차 컴포넌트를 만드는 과정에 대해 알아보겠습니다.\n\n<a href="www.', 'mysite.', 'com/post4">지난 글 보기</a>']
```
ⓘ 마지막 줄바꿈 처리 문자("\n" 또는 "\r\n") 기준으로 분할할 경우:

검사 본문:
```

이번 글에서는 목차 컴포넌트를 만드는 과정에 대해 알아보겠습니다.

<a href="www.mysite.com/post4">지난 글 보기</a>
```
실제 결과:
```
const chunks = splitTextToChunks(text);
console.log(chunks);
// (2) ['이번 글에서는 목차 컴포넌트를 만드는 과정에 대해 알아보겠습니다.\n\n', '<a href="www.mysite.com/post4">지난 글 보기</a>']
```

moonkorea00/글자 제한 문제 해결.md

병렬 요청 처리를 통한 글자 제한 문제 해결