jji_veloper

[gksdudConverter] 한영타 변환기 개발기록 4: 확장앱 용 프로젝트 설계를 다시 하다.

Jjiveloper — Mon, 30 Jan 2023 01:00:59 +0900

한영타 변환기 확장자 앱을 만들고자 마음먹었을 때 확장앱을 만들어 본 적이 없어서 확장앱 설명 글을 쓱 보고 js로 만들어야하는 줄 착각했다.

https://developers.whale.naver.com/getting_started/

들어가기 전에

확장앱이 무엇인가요?확장앱(Browser Extension)은 브라우저에 설치하여 브라우저의 기능을 확장하는 작은 애플리케이션입니다. 확장 프로그램이라고도 부릅니다. 웨일 사용자들이 필요로하는 재미

developers.whale.naver.com

js로 만드는 도중 웨일 앱 개발 튜토리얼 동영상의 프로젝트 구성을 본 뒤 프레임 워크 없이 js만 쓰면 힘들겠구나 하고 직감했다. 다른 프레임워크를 안써도 되긴하지만 좀 더 유연하게 만들지 못할듯하다.

그래서 개발 초기 단계에 들어서서야 다른 사람의 개발 후기를 찾아보게 되었다.

whale 확장앱 개발 회고록을 보려고 했는데, 아무래도 웨일을 사용하는 비중이 적다보니 회고록도 적었다ㅠㅠ

그래서 chrome 익스텐션 회고록을 검색해서 참고하기로 했다. 어짜피 둘 다 크로미움 기반이기 때문에 배포하는 구조나 과정이 다를 뿐이지 만들어 놓으면 어느 곳에서나 사용할 수 있기 때문이다.

줌인터넷 회사의 크롬 익스텐션 개발: https://zuminternet.github.io/Zum-Chrome-Extension/

크롬 확장프로그램 개발⛏️ 회고

Vue.js를 이용하여 줌 확장프로그램을 개발하는 과정에 대한 회고입니다.

zuminternet.github.io

여기가 진짜 알차게 적혀있다!! 프로젝트 설계부터 검수 꿀팁 등...

생활코딩: https://opentutorials.org/module/2503/14051

웹페이지에서 공부한 단어의 수를 세기 (크롬 확장 기능 만들기) - 보편적이지 않은 코딩

수업소개 웹페이지를 소비하는 입장에서도 웹페이지를 대상으로 여러가지 프로그래밍을 할 수 있는 방법이 많습니다. 최근의 웹브라우저들은 대부분 개발자 도구를 제공합니다. 이것을 이용하

opentutorials.org

설계부터 차근차근: https://www.peterkimzz.com/vuejs-chrome-extension-1/

Vue.js로 크롬 확장 프로그램 만들기 강의 - 1부 - peterkimzz

제가 최근 우연히 크롬 확장 프로그램을 개발했는데, 이게 생각보다 꽤 괜찮은 시장이라는 걸 알게 되었습니다. 크롬 확장 프로그램은 이미 여러분들에게 익숙한 웹 기술로 쉽게 개발할 수 있고

www.peterkimzz.com

다시 얼마 개발하지 않은 프로젝트이지만, 이번 기회에 사용해보지 않았던 vite를 사용해보기로 하였다.

[gksdudConverter] 한영타 변환기 개발기록 3 : 한글 -> 영어 타자 변환하기, javascript 한글 자소 분리하기

Jjiveloper — Mon, 30 Jan 2023 00:01:32 +0900

우선 issue를 발행하고 todo에 있는 것들을 소 issue로 발행해 순차적으로 해결해야겠다.

1. 한글 자소 분리

[(초성) × 588 + (중성) × 28 + (종성)] + 44032(=0xAC00, "가"에 해당하는 코드 값)

한글에 대한 유니코드 공식은 얻었으나, 각 자리에 대한 값을 얻기위한 공식을 찾는 것이 조금 귀찮았다...^^ 우리에겐 구교수님이 계시니 바로 검색해봄.

역시나 세상엔 천재들이 많다!! -> 공식 참고한 곳

이제 한글을 받아오면 자소를 분리하는 공식을 얻었으니 이를 적용해보자.

// 첫 문자인 "가"에 해당하는 값
const korGAUnicode = 0xAC00;
// 초성, 중성, 종성 시작 값
const [firstInitial, firstMedial, firstFinal] = [0x1100, 0x1161, 0x11A7];
// 초성, 중성, 종성 개수
const [initialCount, medialCount, finalCount] = [18, 21, 28];

우선 자소 분리 시 필요한 값을 선언해놓았다.

// 첫 문자인 "가"에 해당하는 값
const korGAUnicode = 0xAC00;
// 초성, 중성, 종성 시작 값
const [firstInitial, firstMedial, firstFinal] = [0x1100, 0x1161, 0x11A7];
// 초성, 중성, 종성 개수
const [initialCount, medialCount, finalCount] = [18, 21, 28];

/**
 * 글자에 해당하는 unicode 값을 구한다.
 *
 * @since 2023-01-29
 * @param {String} letter unicode로 변환할 글자
 * @returns {number} unicode
 */
const getUnicode = (letter) => {
  if (letter.length !== 1) {
    throw new Error("매개 변수는 한 글자여야 합니다.");
  }

  return letter.codePointAt(0);
}

/**
 * unicode가 가지고 있는 초성이 jomo block에서 몇 번째 글자인지 구한다.
 *
 * @since 2023-01-29
 * @param {Number} unicode 초성 순서 값을 구할 글자 unicode
 * @returns {number} 초성 순서(순서는 Hangul Jamo Unicode block 순서에 의거함)
 * @link https://en.wikipedia.org/wiki/Hangul_Jamo_(Unicode_block)
 */
const getInitialIndex = (unicode) => {
  if (typeof unicode !== "number") {
    throw new Error("unicode는 숫자여야합니다.");
  }

  return Math.floor((unicode - korGAUnicode) / (medialCount * finalCount));
}

/**
 * unicode가 가지고 있는 중성이 jomo block에서 몇 번째 글자인지 구한다.
 *
 * @since 2023-01-29
 * @param {Number} unicode 중성 순서 값을 구할 글자 unicode
 * @returns {number} 중성 순서(순서는 Hangul Jamo Unicode block 순서에 의거함)
 * @link https://en.wikipedia.org/wiki/Hangul_Jamo_(Unicode_block)
 */
const getMedialIndex = (unicode) => {
  if (typeof unicode !== "number") {
    throw new Error("unicode는 숫자여야합니다.");
  }

  return Math.floor((unicode - korGAUnicode) / finalCount % medialCount);
}

/**
 * unicode가 가지고 있는 종성이 jomo block에서 몇 번째 글자인지 구한다.
 *
 * @since 2023-01-29
 * @param {Number} unicode 종성 순서 값을 구할 글자 unicode
 * @returns {number} 종성 순서(순서는 Hangul Jamo Unicode block 순서에 의거함)
 * @link https://en.wikipedia.org/wiki/Hangul_Jamo_(Unicode_block)
 */
const getFinalIndex = (unicode) => {
  if (typeof unicode !== "number") {
    throw new Error("unicode는 숫자여야합니다.");
  }

  return Math.floor((unicode - korGAUnicode) % finalCount);
}

초성, 중성, 종성 값을 구하는 함수이다.

글자 별로 unicode 값을 구한 뒤, 그 값으로 자소 분리를 할 수 있게끔 하였다.

초성,중성,종성 값을 분리하는 함수를 개별로 작성할 지, 함수를 하나로 두고 매개변수로 어떤 값을 구하는 것인지 판별할 지에 대해서 고민을 했다.

// 예시 코드
const getGraphemeIndex = (direction, unicode) => {
  if (typeof unicode !== "number") {
    throw new Error("unicode는 숫자여야합니다.");
  }

  switch (direction) {
    case "initial":
      return Math.floor((unicode - korGAUnicode) / (medialCount * finalCount));
    case "medial":
      return Math.floor((unicode - korGAUnicode) / finalCount % medialCount);
    case "final":
      return Math.floor((unicode - korGAUnicode) % finalCount);
    default:
      throw new Error("잘못된 요청입니다.");
  }
}

매개 변수로 판별 후 로직을 진행하는 함수의 예시이다.

direction 값에 대한 유효성 검사를 추가해야할뿐더러, 어떤 값을 넣어줘야하는지 한번에 알기 어렵다.

뭐 객체 freeze()를 이용해 Enum을 만들면 가능할지도 모르지만 개인적으로 이 함수는 그렇게까지 할 필요는 없을 것 같아서 함수를 각각 분리해줬다.

글을 적으면서 생각했는데, 두개의 방법을 합쳐도 될 것 같다.

getGraphemeIndex 함수를 객체로 선언 후 key 값으로 초성, 중성, 종성을 넣어주고, 그에 해당하는 함수를 value에 넣어주면 추후에 관리하기도 편할 듯?

리팩토링 해봐야겠다.

우선 결과부터 보자!!

  <script>
    window.addEventListener('DOMContentLoaded', function() {
      console.log(getGraphemeList("한글 자소 분리12ab"));
    });
  </script>

한글만 초,중,종성으로 분리되었다.

한글이 아니면 한글 여부를 false로 한 뒤 초성 값에 문자를 그대로 넣어주었다.

전체 코드

"use strict";

/* 구현 순서
  1. 단어를 한 글자씩 쪼갠다.
  2. 쪼갠 글자를 유니코드로 변환한다.
  3. 유니코드에서 초성~종성의 값을 구한다.
 */

// 첫 문자인 "가"에 해당하는 값
const korGAUnicode = 0xAC00;
// 초성, 중성, 종성 시작 값
const [firstInitial, firstMedial, firstFinal] = [0x1100, 0x1161, 0x11A7];
// 초성, 중성, 종성 개수
const [initialCount, medialCount, finalCount] = [18, 21, 28];

/**
 * 한국어 자소 분리를 진행한다.
 *
 * param을 한 글자씩 쪼개어 한국어일 경우에만 자소 분리를 수행한다.
 *
 * @since 2023-01-29
 * @param {String} word 자소 분리를 진행할 한국어
 * @returns {Object[]} {isKorean: Boolean, initial: String, medial: String||null, final: String||null}
 */
const getGraphemeList = (word) => {
  if (word.length < 1) {
    throw new Error("매개 변수는 한 글자이상이어야 합니다.");
  }

  return splitWord(word).reduce((arr, letter) => {
    if (letter.match(/[ㄱ-ㅎ|가-힣]/g)) { // 한글일 때만 자소 분리
      let {initial, medial, final} = splitGrapheme(getUnicode(letter));

      arr.push({
        isKorean: true,
        initial: getInitialLetter(initial),
        medial: getMedialLetter(medial),
        final: getFinalLetter(final)
      });
    } else {
      arr.push({
        isKorean: false,
        initial: letter
      });
    }

    return arr;
  }, []);
}

/**
 * unicode에 해당하는 한글을 반환한다.
 *
 * @since 2023-01-29
 * @param {Number} unicode 한글로 변환할 unicode
 * @returns {string} 한글
 */
const getLetterFromUnicode = (unicode) => {
  return String.fromCharCode(unicode);
}

/**
 * unicode에 해당하는 초성 값을 반환한다.
 *
 * @since 2023-01-29
 * @param {Number} unicode 한글로 변환할 초성 unicode
 * @returns {string} 한글(초성)
 */
const getInitialLetter = (unicode) => {
  return getLetterFromUnicode(unicode + firstInitial);
}

/**
 * unicode에 해당하는 중성 값을 반환한다.
 *
 * @since 2023-01-29
 * @param {Number} unicode 한글로 변환할 중성 unicode
 * @returns {string} 한글(중성)
 */
const getMedialLetter = (unicode) => {
  return getLetterFromUnicode(unicode + firstMedial);
}

/**
 * unicode에 해당하는 종성 값을 반환한다.
 *
 * @since 2023-01-29
 * @param {Number} unicode 한글로 변환할 종성 unicode
 * @returns {string} 한글(종성)
 */

const getFinalLetter = (unicode) => {
  return getLetterFromUnicode(unicode + firstFinal);
}

/**
 * 단어를 한 글자씩 쪼개어 배열로 반환한다.
 *
 * @since 2023-01-29
 * @param {String} word 쪼갤 단어
 * @returns {String[]} 한 글자씩 쪼개진 결과
 */
const splitWord = (word) => {
  return [...word];
}

/**
 * unicode에 해당하는 글자를 자소 분리한다.
 *
 * @since 2023-01-29
 * @param {Number} unicode 자소 분리할 글자
 * @returns {Object} {initial, medial, final} 자소 분리 결과
 */
const splitGrapheme = (unicode) => {
  let initial = getInitialIndex(unicode);
  let medial = getMedialIndex(unicode);
  let final = getFinalIndex(unicode);

  return {initial, medial, final};
}

/**
 * 글자에 해당하는 unicode 값을 구한다.
 *
 * @since 2023-01-29
 * @param {String} letter unicode로 변환할 글자
 * @returns {number} unicode
 */
const getUnicode = (letter) => {
  if (letter.length !== 1) {
    throw new Error("매개 변수는 한 글자여야 합니다.");
  }

  return letter.codePointAt(0);
}

/**
 * unicode가 가지고 있는 초성이 jomo block에서 몇 번째 글자인지 구한다.
 *
 * @since 2023-01-29
 * @param {Number} unicode 초성 순서 값을 구할 글자 unicode
 * @returns {number} 초성 순서(순서는 Hangul Jamo Unicode block 순서에 의거함)
 * @link https://en.wikipedia.org/wiki/Hangul_Jamo_(Unicode_block)
 */
const getInitialIndex = (unicode) => {
  if (typeof unicode !== "number") {
    throw new Error("unicode는 숫자여야합니다.");
  }

  return Math.floor((unicode - korGAUnicode) / (medialCount * finalCount));
}

/**
 * unicode가 가지고 있는 중성이 jomo block에서 몇 번째 글자인지 구한다.
 *
 * @since 2023-01-29
 * @param {Number} unicode 중성 순서 값을 구할 글자 unicode
 * @returns {number} 중성 순서(순서는 Hangul Jamo Unicode block 순서에 의거함)
 * @link https://en.wikipedia.org/wiki/Hangul_Jamo_(Unicode_block)
 */
const getMedialIndex = (unicode) => {
  if (typeof unicode !== "number") {
    throw new Error("unicode는 숫자여야합니다.");
  }

  return Math.floor((unicode - korGAUnicode) / finalCount % medialCount);
}

/**
 * unicode가 가지고 있는 종성이 jomo block에서 몇 번째 글자인지 구한다.
 *
 * @since 2023-01-29
 * @param {Number} unicode 종성 순서 값을 구할 글자 unicode
 * @returns {number} 종성 순서(순서는 Hangul Jamo Unicode block 순서에 의거함)
 * @link https://en.wikipedia.org/wiki/Hangul_Jamo_(Unicode_block)
 */
const getFinalIndex = (unicode) => {
  if (typeof unicode !== "number") {
    throw new Error("unicode는 숫자여야합니다.");
  }

  return Math.floor((unicode - korGAUnicode) % finalCount);
}

[gksdudConverter] 한영타 변환기 개발기록 2 : 구현 방법 모색하기

Jjiveloper — Sun, 29 Jan 2023 04:10:54 +0900

목차
1 : 개발 이유와 구현 방법 떠올리기
2 : 구현 방법 모색하기 (현재)

다음 생각한 방법

한글을 자소 분리 한 다음 해당 글자와 매칭되는 영어를 붙여줘야겠다!!

"한"이면 정규화를 통한 분리가 아닌 분리할 수 있는 규칙을 찾은 후 ㅎ ㅏ ㄴ 각각 글자에 해당하는 영어 타자인

g k s 를 붙여준다는 말이다...

이제 한글에서 영어로 변환하는 것은

1. 자소 분리하기

2. 각각의 글자에 해당하는 영어 매칭하기

3. 영어 반환하기

이 순서로 개발하면 될 것 같았다.

제일 난항은 영어를 어떻게 한국어로 변환할 지에 대한 것이였다.

영어를 한국어로 변환한다고 해도 이 글자가 받침이 있는 글자인지 아닌지, 초성만 있는지 중성만 있는지 종성까지 있는지를 구분해야하는 것이 어려웠다...

영타의 어느 부분에서 한 글자로의 병합을 끝내야하는지 고민해보았다.

1. 자음에서 자음인 경우
    1-1. 종성에 포함된 자음인지 확인한다.
   1-2. 종성 중에서도 합쳐진? 종성인지 확인한다. (ㄳ ㄺ ㅀ 등)
2. 자음에서 모음인 경우
    2-1. 해당 자음은 초성으로 인식한다.
3. 모음에서 자음인 경우
   3-1. 앞 글자가 자음이라면 중성으로 나두기
3-2. 앞 글자가 종성까지 있거나 모음인 경우 그냥 한 글자로 나두기
4. 공백이거나 영어가 아닌 경우 건너뛴다.

방법 생각하면서 대충 정리한거라 말이 이상할 수는 있는데 이런 방법으로 합치기로 했다 ㅎㅎㅎ

한 글자를 초성 중성 종성의 구성인 객체로 만들면 어떨지 고민했음. 이건 개발하면서 방향을 정해봐야할 것 같다.

현재는 객체 배열을 만들까도 고민 중이다.

그리고 이 초성중성종성을 합치는 방법에 대한 고민은 다음과 같다.

https://en.wikipedia.org/wiki/Korean_language_and_computers#Hangul_in_Unicode

Korean language and computers - Wikipedia

From Wikipedia, the free encyclopedia Input and use of Korean on computers South Korean standard Dubeolsik ('two-set type') layout North Korean Dubeolsik layout The writing system of the Korean language is a syllabic alphabet of character parts (jamo) orga

en.wikipedia.org

한글 유니코드는 위와 같은 공식이 있단걸 찾게되었다.

[(초성) × 588 + (중성) × 28 + (종성)] + 44032 ("가"에 해당하는 코드 값)

https://en.wikipedia.org/wiki/Hangul_Jamo_(Unicode_block)

Hangul Jamo (Unicode block) - Wikipedia

From Wikipedia, the free encyclopedia Unicode character block Hangul JamoRangeU+1100..U+11FF(256 code points)PlaneBMPScriptsHangulMajor alphabetsHangulAssigned256 code pointsUnused0 reserved code points1.1 (1993)240 (+240)5.2 (2009)256 (+16) Code chartNote

en.wikipedia.org

위의 주소에 들어가면 나오지만 초성 중성 종성은 다음과 같은 순서로 이루어져있다.

현대 표준어에 사용되는 글자만 추렸음. 초성 중성 종성간의 간격은 옛 한글에 사용되었던 코드들이 있기에 생긴 것이다.

초성 (U+1100 ~ U+1112)

0	1	2	3	4	5	6	7	8
ㄱ	ㄲ	ㄴ	ㄷ	ㄸ	ㄹ	ㅁ	ㅃ	ㅃ
9	10	11	12	13	14	15	16	17
ㅅ	ㅆ	ㅇ	ㅈ	ㅊ	ㅋ	ㅌ	ㅍ	ㅎ

중성 (U+1161 ~ U+1176)

0	1	2	3	4	5	6	7	8
ㅏ	ㅐ	ㅑ	ㅒ	ㅓ	ㅔ	ㅕ	ㅖ	ㅗ
9	10	11	12	13	14	15	16	17
ㅘ	ㅙ	ㅚ	ㅛ	ㅜ	ㅝ	ㅞ	ㅟ	ㅠ
18	19	20
ㅡ	ㅢ	ㅣ

종성 (U+11A8 ~ U+11C2)

0	1	2	3	4	5	6	7	8
-	ㄱ	ㄲ	ㄳ	ㄴ	ㄵ	ㄶ	ㄷ	ㄹ
9	10	11	12	13	14	15	16	17
ㄺ	ㄻ	ㄼ	ㄽ	ㄾ	ㄿ	ㅀ	ㅁ	ㅂ
18	19	20	21	22	23	24	25	26
ㅄ	ㅅ	ㅆ	ㅇ	ㅈ	ㅊ	ㅋ	ㅌ	ㅍ
27
ㅎ

각 자리에 해당하는 코드를 js의 String.fromCharCode(코드 값) 함수를 이용하면 코드 값에 해당하는 글자가 나오기 때문에 글자만 만들면 한글로의 변환은 쉬울 것 같았다!!

이제 실제로 구현해보고자 한다.

[gksdudConverter] 한영타 변환기 개발기록 1 : 개발 이유와 구현 방법 떠올리기

Jjiveloper — Sun, 29 Jan 2023 03:56:06 +0900

목차
1 : 개발 이유와 구현 방법 떠올리기 (현재)
2 : 구현 방법 모색하기

개발 이유

가끔 한글로 써야하는데 영타로 쓰는 경우가 허다했다. e.g) 글 쓸 때 or 검색 창에 뭐 검색할 때

아무 생각없이 적었는데 한/영을 바꾸지 않아서 지우고 다시 적는 것이 너무 불편해서 웹 확장자로 제공해보고자 마음먹었다.

지금은 웨일 스토어나 크롬에 등록하는 것이 목표이고, 웨않되 맞춤법 검사기 처럼 실시간으로 검사 및 변환이 이루어지게 하는 것이 최종 목표이다.

안된다면 api형태라도 제공하고자 한다...

구현 방법 떠올리기

처음 생각한 방식은 유니코드를 이용해 변환하는 것이였다.

예를들어 "한"이라는 글자가 있다면 한에 대한 유니코드가 있을 것이다.

"0xd55c" 라는 값에 매칭되는 영타자는 정해져있기 때문에 이를 매칭하면 된다고 생각했었다.

또 한국어는 영어와 다르게 초성 중성 종성 3가지가 존재하기 때문에 이를 어떻게 분해해서 영어로 바꾸는지가 관건이였다.

어려웠던 요인은 다음과 같다. 나의 짧막한 지식으로 해결하지 못한 문제들도 있을거임..ㅠㅡㅠ

1. 동일한 자리에 있는 한글 타자와 영어 타자 간의 규칙을 찾지 못했다.

console.log("ㅎ".charCodeAt(0).toString(16));
// output: 314e
console.log("g".charCodeAt(0).toString(16));
// output: 67

console.log("ㅏ".charCodeAt(0).toString(16));
// output: 314f
console.log("k".charCodeAt(0).toString(16));
// output: 6b

console.log("ㄴ".charCodeAt(0).toString(16));
// output: 3134
console.log("s".charCodeAt(0).toString(16));
// output: 73

ㅎ과 g를 매칭해서 나두고, ㅏ와 k를 매칭해서 키보드에 나둔 이유가 있을 줄 알았는데

수학을 못해서 그런지 규칙 찾기가 넘 힘들었따... 노가다 매칭을 해야하나 싶음

2. 인공적으로 만든 유니코드는 NFD 분해가 되지 않는다.

왼쪽처럼 유니코드를 만들었으나 NFD 변환 함수를 먹여도 변환되지 않았다.

왼쪽이 "한" 글자를 유니코드로 변경한 것이고, / 오른쪽이 NFD함수를 적용한 결과이다.

const normalizeNFD = (unicode) => {
      return unicode.normalize("NFD");
}

1에서 규칙을 찾지 못해 다시 생각한 것이

"한"이라는 글자가 있으면 NFD 방식을 이용해 "ㅎ" "ㅏ" "ㄴ" 이렇게 분리한 후 각각의 유니코드에 해당하는 영어로 변경해주면 되겠다 생각했었음

근데 정상적으로 글자를 NFD방식으로 분해하더라도 결과값이 unicode 값이 아닌 text로 바로 나와서 그것 또한 문제였음

// 출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/normalize
// 결합된 한글 문자열

// U+D55C: 한(HANGUL SYLLABLE HAN)
// U+AE00: 글(HANGUL SYLLABLE GEUL)
var first = '\uD55C\uAE00';


// 정규형 정준 분해 (NFD)
// 정준 분해 결과 초성, 중성, 종성의 자소분리가 일어납니다.
// 일부 브라우저에서는 결과값 '한글'이 자소분리된 상태로 보여질 수 있습니다.

// U+1112: ᄒ(HANGUL CHOSEONG HIEUH)
// U+1161: ᅡ(HANGUL JUNGSEONG A)
// U+11AB: ᆫ(HANGUL JONGSEONG NIEUN)
// U+1100: ᄀ(HANGUL CHOSEONG KIYEOK)
// U+1173: ᅳ(HANGUL JUNGSEONG EU)
// U+11AF: ᆯ(HANGUL JONGSEONG RIEUL)
var second = first.normalize('NFD'); // '\u1112\u1161\u11AB\u1100\u1173\u11AF'


// 정규형 정준 결합 (NFC)
// 정준 결합 결과 자소분리 되었던 한글이 결합됩니다.

// U+D55C: 한(HANGUL SYLLABLE HAN)
// U+AE00: 글(HANGUL SYLLABLE GEUL)
var third = second.normalize('NFC'); // '\uD55C\uAE00'


console.log(second === third); // 같은 글자처럼 보이지만 false를 출력합니다.

mdn에 올라와있는 normalize 예제이다.

나는 한글이라는 값의 자소 분리가 된

\u1112\u1161\u11AB\u1100\u1173\u11AF

이런 유니코드 값을 얻고싶었는데 글자 그대로 출력되었다...

지금 생각하면 당연하다. 유니코드 자체가 글을 브라우저에서 읽기 위해 나온 것인데, 글 대신 저 코드 값이 나오면 안되지ㅠㅠ

"\u"를 기준으로 split 함수를 사용해 결과를 쪼개봐도 별다른 효과가 없었다ㅠㅠ

걍 ["한글"] 이렇게 나옴 또륵..

아무튼 검색 실력 부족으로 저 유니코드 값을 내가 얻을 수 없었다.

위에 말한 내용의 전체적인 흐름은 아래와 같이 만들어봤었다.

	btn.addEventListener("click", () => {
    // 임시로 만든 input 박스 - 한/영 변경할 글을 적음
      let translation_txt = document.querySelector("#translation_txt").value;

	// 유니코드로 변경한 후
      let wordUnicode = convertToUnicode(translation_txt);

	// 결과를 result라는 p태그에 넣어줌
      result.innerText = wordUnicode;
    });

// 단어를 받은 다음 한 글자씩 유니코드로 만든 뒤 합친 결과를 반환함
    const convertToUnicode = (word) => {
      let result = "";

      for(let i = 0; i < word.length; i++){
        result += letterToUnicode(word.charAt(i));
      }

      return result;
    };

// 한 글자를 0x로 시작하는 유니코드로 만듦
    const letterToUnicode = (letter) => {
      return `0x${letter.codePointAt(0).toString(16)}`;
    };

// NFD로 유니코드 정규화
    const normalizeNFD = (unicode) => {
      return unicode.normalize("NFD");
    }

아무튼 생각과 실제 구현의 미일치로 인한 실패 기록은 여기까지!

실제로 어떻게 구현하기로 마음먹었는지에 대한 글은 다음 포스팅으로 넘기기로 했다.

여기 적고 있었는데 넘 길어져서 나눠버림

다음글: 2 : 구현 방법 모색하기

java로 여러가지 모양의 별 찍어보기

Jjiveloper — Fri, 17 Jun 2022 15:12:27 +0900

오른 직각 삼각형

    BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
    int n = Integer.parseInt(br.readLine());

    StringBuilder sb = new StringBuilder();
    for (int i = 0; i < n; i++) {
      sb.append(" ".repeat(n - i - 1));
      for (int j = 0; j < i + 1; j++) {
        sb.append("*");
      }
      sb.append("\n");
    }
    System.out.println(sb);

왼쪽 직각 삼각형

    StringBuilder sb1 = new StringBuilder();
    for (int i = n; i > 0; i--) {
      for (int j = 0; j < i; j++) {
        sb1.append("*");
      }
      sb1.append("\n");
    }
    System.out.println(sb1);

    System.out.println("____________________");

마름모꼴

import java.io.*;

public class Main {
  public static void main(String[] args) throws IOException {
    StringBuilder sb2 = new StringBuilder();
    for (int i = 0; i < n; i++) { // 0 >> 3
      sb2.append(" ".repeat(n - i - 1));
      for (int j = 0; j < i + 1; j++) {
        sb2.append("*");
      }
      sb2.append("\n");
    }
    for (int j = n - 1; j > 0; j--) { // 3 >> 0
      sb2.append(" ".repeat(n - j));
      for (int z = 0; z < j; z++) {
        sb2.append("*");
      }
      sb2.append("\n");
    }
    System.out.print(sb2);
  }
}

예쁜 마름모

StringBuilder sb3 = new StringBuilder();
    for (int i = 0; i < n; i++) { // 0 >> 3
      sb3.append(" ".repeat(n - i - 1));
      for (int j = 0; j < i * 2 + 1; j++) {
        sb3.append("*");
      }
      sb3.append("\n");
    }

    for (int j = n - 1; j > 0; j--) { // 3 >> 0
      sb3.append(" ".repeat(n - j));
      for (int z = 0; z < j * 2 - 1; z++) {
        sb3.append("*");
      }
      sb3.append("\n");
    }
    System.out.print(sb3);

    System.out.println("____________________");

0: o
1: oo
2: ooo
3: oooo
4: ooo 4 >3 1
5: oo 5 >2 3
6: o 6 >1 5
7:        7

---

   o 1 > 3 n-1
  oo 2 > 2 n-2
ooo 3 > 1 n-3
oooo 4 > 0
ooo 3 > 1
  oo
   o

    o
   oo
  ooo
oooo
ooooo
oooo
  ooo
   oo
    o

[백준] 재귀 - (java) 17478번 재귀함수가 뭔가요?

Jjiveloper — Thu, 16 Jun 2022 14:23:22 +0900

제출1

머리가 안돌아가서 for 반복문을 이용하여 풀어봤다.

import java.io.*;

public class Main {
  public static void main(String[] args) throws IOException {
    BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
    System.out.print(recursiveQuestion(Integer.parseInt(br.readLine())));
  }

  static String recursiveQuestion(int depth) {
    StringBuilder sb = new StringBuilder();
    sb.append("어느 한 컴퓨터공학과 학생이 유명한 교수님을 찾아가 물었다.\n");
    for (int i = 0; i < depth; i++) {
      sb.append(repeat(i));
      if (i == depth - 1)
        sb.append("____".repeat(i + 1)).append("\"재귀함수가 뭔가요?\"\n").append("____".repeat(i + 1)).append("\"재귀함수는 자기 자신을 호출하는 함수라네\"\n");
    }
    for (int j = depth; 0 <= j; j--) {
      sb.append(answer(j));
    }

    return sb.toString();
  }

  static String repeat(int depth) {
    return "____".repeat(depth) + "\"재귀함수가 뭔가요?\"\n" +
        "____".repeat(depth) + "\"잘 들어보게. 옛날옛날 한 산 꼭대기에 이세상 모든 지식을 통달한 선인이 있었어.\n" +
        "____".repeat(depth) + "마을 사람들은 모두 그 선인에게 수많은 질문을 했고, 모두 지혜롭게 대답해 주었지.\n" +
        "____".repeat(depth) + "그의 답은 대부분 옳았다고 하네. 그런데 어느 날, 그 선인에게 한 선비가 찾아와서 물었어.\"\n";
  }

  static String answer(int depth) {
    return "____".repeat(depth) + "라고 답변하였지.\n";
  }
}

풀이

for문으로 찾기 위해 규칙을 찾아보았다.

1. "재귀함수가 뭔가요 ~ 선비가 찾아와서 물었어"는 n번(입력 된 수, 이하 depth)만큼 반복된다.

언더바가 점점 증가하므로 i는 0부터 depth - 1 까지 실행한다.

depth -1 까지 실행하는 이유는, i가 depth와 동일할 때는 반복이 아닌, 답변을 해주어야하므로 depth번만 돌리게끔 설정했다.

2. 반복된 횟수가 n과 동일할 때 답변을 출력해야한다. ex) 초록 네모

3. 1~2를 마치고 나면 "라고 답변하였지."를 depth+1번 출력한다.

답변은 언더바의 개수가 점점 줄어들기 때문에 depth에서 0까지 반복한다.

4. 문장 앞의 "____" 언더바는 해당 depth만큼 반복되어서 출력되어야 한다.

ex) depth가 0일 때 언더바 미출력, 1일 때 "____" 4번, 2일 때 "________" 8번

그러므로 Java String.repeat(반복횟수) 메서드를 통해 언더바를 depth만큼 반복해 출력한다.

제출2

재귀 카테고리에 걸맞게 재귀함수로 풀어봤다.

import java.io.*;

public class Main {
  public static void main(String[] args) throws IOException {
    BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
    int depth = Integer.parseInt(br.readLine());
    System.out.print(questionRecursive(depth, 0));
  }

  static String questionRecursive(int depth, int index) {
    String depthUnderBar = "____".repeat(index);
    String answer = depthUnderBar + "\"재귀함수는 자기 자신을 호출하는 함수라네\"\n";
    String repeat =
        depthUnderBar + "\"잘 들어보게. 옛날옛날 한 산 꼭대기에 이세상 모든 지식을 통달한 선인이 있었어.\n" +
            depthUnderBar + "마을 사람들은 모두 그 선인에게 수많은 질문을 했고, 모두 지혜롭게 대답해 주었지.\n" +
            depthUnderBar + "그의 답은 대부분 옳았다고 하네. 그런데 어느 날, 그 선인에게 한 선비가 찾아와서 물었어.\"\n";

    return (index == 0 ? "어느 한 컴퓨터공학과 학생이 유명한 교수님을 찾아가 물었다.\n" : "") +
        depthUnderBar + "\"재귀함수가 뭔가요?\"\n" +
        ((index == depth) ? answer : repeat + questionRecursive(depth, index + 1)) +
        depthUnderBar + "라고 답변하였지.\n";
  }
}

띠용 재귀를 잘못 짠건지 for보다 느리네. 재귀가 for보다 모든 경우에서 더 좋다고 할 수 없으니...

풀이

재귀스럽게(?) 규칙을 찾아보면

1. 처음에는 "어느 한 컴공 ~ 교수님 찾아가 물었다."가 출력된다.

2. "재귀함수가 뭔가요 ~ 선비가 찾아와서 물었어" 와 "라고 답변하였지" 사이 해당 문장이 반복되어 들어간다.

3. 반복된 횟수가 n보다 1 많을 때 (n = 2일때, 3번 반복되어야함_ 위 사진의 네모 번호 참고)

재귀를 담당하는 메서드의 매개변수는 2가지를 넣어줬다.

depth는 입력받은 n이다. 얼만큼의 깊이만큼 반복되어줘야하는 지 비교를 위해 넣었다.

제출1에서 푼 for문과 다르게 재귀메서드에 index 변수를 넣어줬다.

이유는, 재귀함수에서 지금 몇번 반복되었는지 알 수가 없기 때문에 비교를 위해 index를 넣어주고,

(첫 실행인지, n만큼 실행을 했는지 등... for에서 담당하던 i 인덱스가 없기 때문)

변경시키며 depth와 비교하여 재귀를 진행했다.

questionRecursive() 메서드의 return 쪽을 보자.

제일 처음 실행했다면 index가 0이기 때문에 1번 조건을 출력한다.

그리고 "재귀함수가 뭔가요"의 질문 다음에

실행한 횟수에 따라서 답변이 나올지 or 또 다시 재귀함수를 실행해야하는지 결정해야 되므로 if() 문을 넣어서 조건을 비교했다.

만약 index가 0이라면 아직 한번만 반복되었으므로, 다시 질문을 하고, 다음 재귀함수를 호출해야한다.

index를 1 증가시켜주는 이유는, 반복된 횟수만큼 ____ 언더바를 반복시켜줘야하므로 (반복된 횟수에 따라 언더바가 늘어남) 증가시키는 것이다.

index가 1일이 되고, 또 depth보다 1크지 않으므로, 기존 index 1에 다시 1을 더해서 재귀를 호출한다.

드디어 index가 2가 되었을 때(3번 반복 되었을 때) depth 2와 동일하므로

드디어 선인이 답변을 해주고 재귀를 부르지 않는다.

기존에 불렀던 칭구들에게 return되면 예제에 맞게 출력된다....

출처: https://www.acmicpc.net/problem/17478

17478번: 재귀함수가 뭔가요?

평소에 질문을 잘 받아주기로 유명한 중앙대학교의 JH 교수님은 학생들로부터 재귀함수가 무엇인지에 대하여 많은 질문을 받아왔다. 매번 질문을 잘 받아주셨던 JH 교수님이지만 그는 중앙대

www.acmicpc.net

[baekjoon] java bufferedReader while 쓸 때 주의할 점

Jjiveloper — Wed, 15 Jun 2022 15:13:56 +0900

별건 아니고, 백준을 풀다가 이유 모를 런타임 에러가 발생했다.

로컬에서 테스트시엔 괜찮았는데 백준에 제출하니까 에러가 발생하길래 원인을 한참 찾았다...

[에러]

 BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
    String tmp = "";
    ArrayList<String> input = new ArrayList<>();

    while ((tmp = br.readLine().trim()) != null) {
      input.add(tmp);
    }

입력이 개수를 정하지 않고 들어올 때 나는 while문을 통해

BuffrededReader로 입력을 한줄 씩 읽고, 해당 값이 null이면 입력을 그만 받아오게 작성하였다.

문제는 while 안의 tmp = br.readLine().trim() 문장이였다.

[수정]

 BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
    String tmp = "";
    ArrayList<String> input = new ArrayList<>();

    while ((tmp = br.readLine()) != null) {
      input.add(tmp);
    }

trim()을 빼고 진행하면 아무런 문제 없이 잘 작동한다.

[백준] 기본 수학 1 - (Java) 1712번 손익분기점

Jjiveloper — Fri, 10 Jun 2022 11:38:33 +0900

제출

import java.io.*;
import java.util.StringTokenizer;

public class Main {
  public static void main(String[] args) throws IOException {
    BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
    StringTokenizer st = new StringTokenizer(br.readLine());

    int a = Integer.parseInt(st.nextToken());
    int b = Integer.parseInt(st.nextToken());
    int c = Integer.parseInt(st.nextToken());

    int sales1 = (c - (a + b));
    if (0 < sales1) {
      System.out.print(1);
      return;
    }

    int sales2 = (c * 2 - (a + (b * 2)));

    System.out.print(sales1 < sales2 ? (sales1 / (sales1 - sales2)) + 2 : -1);
  }
}

규칙 찾기

BOJ 1712번.xlsx

0.02MB

더 간단한 규칙

 (A / (C - B) + 1)

출처: https://www.acmicpc.net/problem/1712

1712번: 손익분기점

월드전자는 노트북을 제조하고 판매하는 회사이다. 노트북 판매 대수에 상관없이 매년 임대료, 재산세, 보험료, 급여 등 A만원의 고정 비용이 들며, 한 대의 노트북을 생산하는 데에는 재료비와

www.acmicpc.net

[백준] 입출력 - (Java) 1000번 A+B && 1001번 A-B && 10998번 AxB && 1008번 A/B

Jjiveloper — Tue, 7 Jun 2022 00:01:18 +0900

1000번

제출

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;

public class Main {
    public static void main(String[] args) throws IOException {
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
        String[] input = br.readLine().trim().split("\\s");

        System.out.println(Integer.parseInt(input[0]) + Integer.parseInt(input[1]));
    }
}

입력 받은 글자를 공백 기준으로 문자열로 자른 뒤

각 문자열을 int형으로 변환해서 더해줬다.

출처: https://www.acmicpc.net/problem/1000

1000번: A+B

두 정수 A와 B를 입력받은 다음, A+B를 출력하는 프로그램을 작성하시오.

www.acmicpc.net

1001번

제출

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;

public class Main {
    public static void main(String[] args) throws IOException {
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
        String[] input = br.readLine().trim().split("\\s");
        System.out.println(Integer.parseInt(input[0]) - Integer.parseInt(input[1]));
    }
}

입력 받은 글자를 공백 기준으로 문자열로 자른 뒤

각 문자열을 int형으로 변환해서 빼줬다.

출처: https://www.acmicpc.net/problem/1001

1001번: A-B

두 정수 A와 B를 입력받은 다음, A-B를 출력하는 프로그램을 작성하시오.

www.acmicpc.net

10998번

제출

import java.io.*;

public class Main{
    public static void main(String[] args) throws IOException{
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
        String[] input = br.readLine().trim().split("\\s");
        
        System.out.println(Integer.parseInt(input[0]) * Integer.parseInt(input[1]));
    }
}

입력 받은 글자를 공백 기준으로 문자열로 자른 뒤

각 문자열을 int형으로 변환해서 곱해줬다.

출처: https://www.acmicpc.net/problem/10998

10998번: A×B

두 정수 A와 B를 입력받은 다음, A×B를 출력하는 프로그램을 작성하시오.

www.acmicpc.net

1008번

제출

import java.io.*;

public class Main{
    public static void main(String[] args) throws IOException{
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
        String[] input = br.readLine().trim().split("\\s");

        System.out.print(Double.parseDouble(input[0]) / Double.parseDouble(input[1]));
    }
}

입력 받은 글자를 공백 기준으로 문자열로 자른 뒤

각 문자열을 double형으로 변환해서 나눴다.

위의 문제들과 다르게 double형으로 변환한 이유는

1. 출력에 소수점이 포함된다.

2. 자리수가 최대 9자리이다.

- float형은 정밀도 7자리

- double형은 정밀도 15자리

이기 때문이다.

(오류) 제출 2

import java.io.*;

public class Main{
    public static void main(String[] args) throws IOException{
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
        String[] input = br.readLine().trim().split("\\s");

        System.out.print(Float.parseFloat(input[0]) / Float.parseFloat(input[1]));
    }
}

float으로 계산 시 틀림

출처: https://www.acmicpc.net/problem/1008

1008번: A/B

두 정수 A와 B를 입력받은 다음, A/B를 출력하는 프로그램을 작성하시오.

www.acmicpc.net

[백준] 입출력 - (Java) 10171번 고양이 && 10172번 개

Jjiveloper — Mon, 6 Jun 2022 00:05:10 +0900

10171번

제출 1

public class Main{
    public static void main(String[] args){
        int maxLength = " )  ( ')".length();

        String[] cat = {
                "\\    /\\",
                " )  ( ')",
                "(  /  )",
                " \\(__)|"
        };

        for (int i = 0; i < cat.length; i++) {
            System.out.println(String.format("%-" + maxLength + "s", cat[i]));
        }
    }
}

출처: https://www.acmicpc.net/problem/10171

10171번: 고양이

아래 예제와 같이 고양이를 출력하시오.

www.acmicpc.net

10172번

제출 1

public class Main {
  public static void main(String[] args){
    StringBuilder sb = new StringBuilder();
    sb.append("|\\_/|").append("\n")
        .append("|q p|   /}").append("\n")
        .append("( 0 )\"\"\"\\").append("\n")
        .append("|\"^\"`    |").append("\n")
        .append("||_/=\\\\__|");

    System.out.println(sb);
  }
}

제출 2

public class Main {
  public static void main(String[] args){
    StringBuilder sb = new StringBuilder();
        sb.append("|\\_/|\n" +
              "|q p|   /}\n" +
              "( 0 )\"\"\"\\\n" +
              "|\"^\"`    |\n" +
              "||_/=\\\\__|");

    System.out.println(sb);
  }
}

성능: 한번에 다 append < 여러번 append

제출 3

public class Main {
  public static void main(String[] args){
    System.out.print(
        "|\\_/|\n" +
        "|q p|   /}\n" +
        "( 0 )\"\"\"\\\n" +
        "|\"^\"`    |\n" +
        "||_/=\\\\__|"
    );
  }
}

제출 4

public class Main {
  public static void main(String[] args){
    System.out.println("|\\_/|");
    System.out.println("|q p|   /}");
    System.out.println("( 0 )\"\"\"\\");
    System.out.println("|\"^\"`    |");
    System.out.print("||_/=\\\\__|");
  }
}

성능: 여러번 println < 한번에 print

반복문이 아닌 단일문에서는 StringBuilder보다 일반 print문이 성능이 더 좋은듯...? 넘 미묘한 차이긴 하지만

왜 그런지 찾아봤는데 아직 정확한 이유를 찾지 못했다...

궁금하니 나중에 더 찾아봐야겠다.

출처: https://www.acmicpc.net/problem/10172

10172번: 개

문제 아래 예제와 같이 개를 출력하시오. 입력 출력 예제 입력 1 복사 예제 출력 1 복사 |\_/| |q p| /} ( 0 )"""\ |"^"` | ||_/=\\__|...

0	1	2	3	4	5	6	7	8
ㄱ	ㄲ	ㄴ	ㄷ	ㄸ	ㄹ	ㅁ	ㅃ	ㅃ
9	10	11	12	13	14	15	16	17
ㅅ	ㅆ	ㅇ	ㅈ	ㅊ	ㅋ	ㅌ	ㅍ	ㅎ

0	1	2	3	4	5	6	7	8
ㅏ	ㅐ	ㅑ	ㅒ	ㅓ	ㅔ	ㅕ	ㅖ	ㅗ
9	10	11	12	13	14	15	16	17
ㅘ	ㅙ	ㅚ	ㅛ	ㅜ	ㅝ	ㅞ	ㅟ	ㅠ
18	19	20
ㅡ	ㅢ	ㅣ

0	1	2	3	4	5	6	7	8
-	ㄱ	ㄲ	ㄳ	ㄴ	ㄵ	ㄶ	ㄷ	ㄹ
9	10	11	12	13	14	15	16	17
ㄺ	ㄻ	ㄼ	ㄽ	ㄾ	ㄿ	ㅀ	ㅁ	ㅂ
18	19	20	21	22	23	24	25	26
ㅄ	ㅅ	ㅆ	ㅇ	ㅈ	ㅊ	ㅋ	ㅌ	ㅍ
27
ㅎ

0	1	2	3	4	5	6	7	8
ㄱ	ㄲ	ㄴ	ㄷ	ㄸ	ㄹ	ㅁ	ㅃ	ㅃ
9	10	11	12	13	14	15	16	17
ㅅ	ㅆ	ㅇ	ㅈ	ㅊ	ㅋ	ㅌ	ㅍ	ㅎ

0	1	2	3	4	5	6	7	8
ㅏ	ㅐ	ㅑ	ㅒ	ㅓ	ㅔ	ㅕ	ㅖ	ㅗ
9	10	11	12	13	14	15	16	17
ㅘ	ㅙ	ㅚ	ㅛ	ㅜ	ㅝ	ㅞ	ㅟ	ㅠ
18	19	20
ㅡ	ㅢ	ㅣ

0	1	2	3	4	5	6	7	8
-	ㄱ	ㄲ	ㄳ	ㄴ	ㄵ	ㄶ	ㄷ	ㄹ
9	10	11	12	13	14	15	16	17
ㄺ	ㄻ	ㄼ	ㄽ	ㄾ	ㄿ	ㅀ	ㅁ	ㅂ
18	19	20	21	22	23	24	25	26
ㅄ	ㅅ	ㅆ	ㅇ	ㅈ	ㅊ	ㅋ	ㅌ	ㅍ
27
ㅎ

0	1	2	3	4	5	6	7	8
ㄱ	ㄲ	ㄴ	ㄷ	ㄸ	ㄹ	ㅁ	ㅃ	ㅃ
9	10	11	12	13	14	15	16	17
ㅅ	ㅆ	ㅇ	ㅈ	ㅊ	ㅋ	ㅌ	ㅍ	ㅎ

0	1	2	3	4	5	6	7	8
ㅏ	ㅐ	ㅑ	ㅒ	ㅓ	ㅔ	ㅕ	ㅖ	ㅗ
9	10	11	12	13	14	15	16	17
ㅘ	ㅙ	ㅚ	ㅛ	ㅜ	ㅝ	ㅞ	ㅟ	ㅠ
18	19	20
ㅡ	ㅢ	ㅣ

0	1	2	3	4	5	6	7	8
-	ㄱ	ㄲ	ㄳ	ㄴ	ㄵ	ㄶ	ㄷ	ㄹ
9	10	11	12	13	14	15	16	17
ㄺ	ㄻ	ㄼ	ㄽ	ㄾ	ㄿ	ㅀ	ㅁ	ㅂ
18	19	20	21	22	23	24	25	26
ㅄ	ㅅ	ㅆ	ㅇ	ㅈ	ㅊ	ㅋ	ㅌ	ㅍ
27
ㅎ