[JS] ๋ฌธ์ฅ, ๋จ์ด, ์์๋ณ๋ก ๋ฌธ์์ด ๋ถ๋ฆฌํ๊ธฐ
split() ๋ฉ์๋์ ๋ฌธ์ ์
์๋ฐ์คํฌ๋ฆฝํธ์์ ๋ฌธ์์ด์ ๋ถ๋ฆฌํ ๋ ์ผ๋ฐ์ ์ผ๋ก split()
๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ค. ํ์ง๋ง ์๋์ฒ๋ผ ๊ตฌ๋ถ์๋ ๊ฒฐ๊ณผ ๋ฐฐ์ด์์ ์ ์ธ๋๊ณ ๋ถํ์ํ ๊ณต๋ฐฑ์ด ์ถ๊ฐ๋๋ค. ์ฆ, language-sensitive ํ์ง ์๋ ๋จ์ ์ด ์๋ค. language-sensitive๋ ๋ฌธ๋งฅ์ ๋ง๋ ํํ๊ณผ ์ฉ์ด ์ฌ์ฉ์ ์๋ฏธํ๋ค. ํ๊ตญ์ด๋ก๋ ์ธ์ด ๊ฐ์์ฑ์ด๋ผ๊ณ ๋ถ๋ฅธ๋ค.
'Hello! How are you?'.split(/[.!?]/); // ['Hello', ' How are you', '']
๐ก ์ ๊ท์ ๊ด๋ จ ์ฐธ๊ณ
- ํํ์์ ํ๋์ ๋จ์๋ก ์ทจ๊ธํ๋ ํฌํ ๊ดํธ๋ฅผ ์ฌ์ฉํ๋ฉด ๊ตฌ๋ถ์๋ ๊ฒฐ๊ณผ ๋ฐฐ์ด์ ํฌํจํ ์ ์๋ค
[]
๋ฌธ์ ๊ทธ๋ฃน์ ๋๊ดํธ ๋ด๋ถ ๋ฌธ์์ด ์ค ํ๋๋ผ๋ ์ผ์นํ๋ ๊ฒฝ์ฐ๋ฅผ ์๋ฏธํ๋ค
Intl
์๋ฐ์คํฌ๋ฆฝํธ API๋ฅผ ํ์ฉํ๋ฉด ์ ๊ฐ์ ๋ฌธ์ ๋ฅผ ๋ง๋ํ๊ฒ ํด๊ฒฐํ ์ ์๋ค.
Intl.Segmenter
Intl.Segmenter
๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ฉด ๋ฌธ์์ด์ ์๋ฏธ์๋ ๋จ์๋ก ๋ถ๋ฆฌํ ์ ์๋ค. locale
, granularity
๋ฅผ ์ ์ํ ํ segment
๋ฉ์๋ ํ๋ผ๋ฏธํฐ์ ๋ถ๋ฆฌํ๊ณ ์ถ์ ๋ฌธ์์ด์ ์ถ๊ฐํ๋ ๋ฐฉ์์ผ๋ก ์ฌ์ฉํ๋ค.
๐ก granularity ์ต์ (้ข็ฒ้้กน) ์ข ๋ฅ
- sentence: ๋ฌธ์ฅ ๋จ์๋ก ๋ถ๋ฆฌ
- word: ๋จ์ด ๋จ์๋ก ๋ถ๋ฆฌ
- grapheme: ๋ฌธ์์(์๋ฏธ๋ฅผ ๋ํ๋ด๋ ์ต์ ๋จ์) ๋จ์๋ก ๋ถ๋ฆฌ
segment
๋ฉ์๋๋ ์ ์ํ locale
, granularity
์ต์
์ ๋ฐ๋ผ ๋ฌธ์์ด์ ์ธ๊ทธ๋จผํธ๋ฅผ ๋ํ๋ด๋ Segments ์ธ์คํด์ค๋ฅผ ๋ฐํํ๋ค. Segments ์ธ์คํด์ค๋ ์ดํฐ๋ฌ๋ธ์ด๋ค. ๋ฐ๋ผ์ ์ ๊ฐ์ฐ์ฐ์
, Array.from
, for of
๋ฌธ ๋ฑ์์ ์ฌ์ฉํ ์ ์๋ค.
granularity: 'word'
์ผ ๋ โผ
const segmenterKo = new Intl.Segmenter('ko', { granularity: 'word' }); const segmentsKo = segmenterKo.segment('์๋
ํ์ธ์, ๋ฐ๊ฐ์ต๋๋ค'); console.log([...segmentsKo]); /* { segment: '์๋
ํ์ธ์', index: 0, input: '์๋
ํ์ธ์, ๋ฐ๊ฐ์ต๋๋ค', isWordLike: true } { segment: ',', index: 5, input: '์๋
ํ์ธ์, ๋ฐ๊ฐ์ต๋๋ค', isWordLike: false } { segment: ' ', index: 6, input: '์๋
ํ์ธ์, ๋ฐ๊ฐ์ต๋๋ค', isWordLike: false } { segment: '๋ฐ๊ฐ์ต๋๋ค', index: 7, input: '์๋
ํ์ธ์, ๋ฐ๊ฐ์ต๋๋ค', isWordLike: true } */
granularity: 'sentence'
์ผ ๋ โผ
const segmenterKo = new Intl.Segmenter('ko', { granularity: 'sentence' }); const segmentsKo = segmenterKo.segment('์๋
ํ์ธ์, ๋ฐ๊ฐ์ต๋๋ค'); console.log([...segmentsKo]); /* { "segment": "์๋
ํ์ธ์, ๋ฐ๊ฐ์ต๋๋ค", "index": 0, "input": "์๋
ํ์ธ์, ๋ฐ๊ฐ์ต๋๋ค" } */
granularity: 'grapheme'
์ผ ๋ โผ
const segmenterKo = new Intl.Segmenter('ko', { granularity: 'grapheme' }); const segmentsKo = segmenterKo.segment('์๋
ํ์ธ์, ๋ฐ๊ฐ์ต๋๋ค'); console.log([...segmentsKo]); /* { "segment": "์", "index": 0, "input": "์๋
ํ์ธ์, ๋ฐ๊ฐ์ต๋๋ค" } { "segment": "๋
", "index": 1, "input": "์๋
ํ์ธ์, ๋ฐ๊ฐ์ต๋๋ค" } { "segment": "ํ", "index": 2, "input": "์๋
ํ์ธ์, ๋ฐ๊ฐ์ต๋๋ค" } ... */
isWordLike ํ๋กํผํฐ
๐ก isWordLike
ํ๋กํผํฐ๋ word
๊ธฐ์ค์ผ๋ก ๋ฌธ์์ด์ ๋ถ๋ฆฌํ์ ๋๋ง ํฌํจ๋๋ค
๋ง์ฝ word
๋ฅผ ๊ธฐ์ค์ผ๋ก ๋ฌธ์์ด์ ๋ถ๋ฆฌํ๋ค๋ฉด, ๋ชจ๋ ์ธ๊ทธ๋จผํธ๋ ๋จ์ด๋ฟ๋ง ์๋๋ผ ๊ณต๋ฐฑ(whitespace), ๊ตฌ๋์ (punctuation), ์ค๋ฐ๊ฟ(line breaks)์ ํฌํจํ ์ ์๋ค. ์ฌ๊ธฐ์ ๋จ์ด๋ง ์ถ์ถํ๊ณ ์ถ์ผ๋ฉด isWordLike
ํ๋กํผํฐ๋ฅผ ์ด์ฉํด ํํฐ๋ง ํ๋ฉด ๋๋ค. isWordLike
๋ ์ธ๊ทธ๋จผํธ๊ฐ ๋จ์ด์ ์ ์ฌํ์ง ์ฌ๋ถ๋ฅผ ๋ํ๋ด๋ ๋ถ๋ฆฌ์ธ ๊ฐ์ด๋ค.
const segmenterKo = new Intl.Segmenter('ko', { granularity: 'word' }); const segmentsKo = segmenterKo.segment('์๋
ํ์ธ์, ๋ฐ๊ฐ์ต๋๋ค'); console.log([...segmentsKo].filter((s) => s.isWordLike)); /* { "segment": "์๋
ํ์ธ์", "index": 0, "input": "์๋
ํ์ธ์, ๋ฐ๊ฐ์ต๋๋ค", "isWordLike": true } { "segment": "๋ฐ๊ฐ์ต๋๋ค", "index": 7, "input": "์๋
ํ์ธ์, ๋ฐ๊ฐ์ต๋๋ค", "isWordLike": true } */
์ด๋ชจ์ง ๋ถ๋ฆฌํ๊ธฐ
์ด๋ชจ์ง๋ก ๊ตฌ์ฑ๋ ๋ฌธ์์ด์ split()
๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ฉด ์ ๋์ฝ๋ ๋ฌธ์์ด์ ๋ฐํํ๋ค. ์ด๋ชจ์ง ๋ฌธ์์ด์ ์ ๊ฐ ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ๋ฉด ์กฐํฉํ ์ด๋ชจ์ง์ ๊ฒฝ์ฐ(๐จโ๐จโ๐ฆโ๐ฆ) ๊ฐ ์ด๋ชจ์ง๊ฐ ๋ชจ๋ ๋ถ๋ฆฌ๋ผ์ ๋์ค๋ ๋ฌธ์ ๊ฐ ์๋ค.
const emojis = '๐ซฃ๐ซต๐จโ๐จโ๐ฆโ๐ฆ'; console.log(emojis.split('')); // Split by code units // ['\uD83E', '\uDEE3', '\uD83E', '\uDEF5', '\uD83D', '\uDC68', 'โ', ...] console.log([...emojis]); // Split by code points // ['๐ซฃ', '๐ซต', '๐จ', 'โ', '๐จ', 'โ', '๐ฆ', 'โ', '๐ฆ']
์ ๋์ฝ๋ ๋ฌธ์์ด์ด ์๋ ์๊ฐ์ ์ด๋ชจ์ง๋ฅผ ๊ทธ๋๋ก ํ์ํ๊ณ ์ถ๋ค๋ฉด Intl.Segmenter
๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค.
const emojis = '๐ซฃ๐ซต๐จโ๐จโ๐ฆโ๐ฆ'; const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' }); const segments = segmenter.segment(emojis); console.log(Array.from(segments, (s) => s.segment)); // ['๐ซฃ', '๐ซต', '๐จโ๐จโ๐ฆโ๐ฆ']
๐ก Intl Explorer ์ฌ์ดํธ์์ API๋ฅผ ์ง์ ํ ์คํธํ๋ฉด์ ๊ฒฐ๊ณผ๋ฅผ ํ์ธํ ์ ์๋ค(Playground)
๋ ํผ๋ฐ์ค
๊ธ ์์ ์ฌํญ์ ๋ ธ์ ํ์ด์ง์ ๊ฐ์ฅ ๋น ๋ฅด๊ฒ ๋ฐ์๋ฉ๋๋ค. ๋งํฌ๋ฅผ ์ฐธ๊ณ ํด ์ฃผ์ธ์
'๐ช Programming' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[Git] 1Password์ ์ ์ฅํ SSH ํค๋ก Git ์ปค๋ฐ ์๋ช ํ๊ธฐ (0) | 2024.05.18 |
---|---|
[CS] ์ค๋ฒํค๋ / ํ๋ก์ธ์ค / ์ค๋ ๋ (1) | 2024.05.18 |
[TS] ํ์ ์คํฌ๋ฆฝํธ์ ๊ณต๋ณ์ฑ / ๋ฐ๊ณต๋ณ์ฑ / ์ด๋ณ์ฑ (0) | 2024.05.17 |
[React] ๋ฆฌ์กํธ์์ Rendering ๋ ๋๋ง์ด๋? (0) | 2024.05.16 |
[TS] TypeScript ํ์ ์คํฌ๋ฆฝํธ satisfies ์ฐ์ฐ์ (0) | 2024.05.16 |
๋๊ธ
์ด ๊ธ ๊ณต์ ํ๊ธฐ
-
๊ตฌ๋
ํ๊ธฐ
๊ตฌ๋ ํ๊ธฐ
-
์นด์นด์คํก
์นด์นด์คํก
-
๋ผ์ธ
๋ผ์ธ
-
ํธ์ํฐ
ํธ์ํฐ
-
Facebook
Facebook
-
์นด์นด์ค์คํ ๋ฆฌ
์นด์นด์ค์คํ ๋ฆฌ
-
๋ฐด๋
๋ฐด๋
-
๋ค์ด๋ฒ ๋ธ๋ก๊ทธ
๋ค์ด๋ฒ ๋ธ๋ก๊ทธ
-
Pocket
Pocket
-
Evernote
Evernote
๋ค๋ฅธ ๊ธ
-
[Git] 1Password์ ์ ์ฅํ SSH ํค๋ก Git ์ปค๋ฐ ์๋ช ํ๊ธฐ
[Git] 1Password์ ์ ์ฅํ SSH ํค๋ก Git ์ปค๋ฐ ์๋ช ํ๊ธฐ
2024.05.18Git 2.34 ์ดํ ๋ฒ์ ๋ถํฐ SSH ํค๋ฅผ ์ด์ฉํ ์ปค๋ฐ / ํ๊ทธ ์๋ช ์ ์ง์ํ๋ค. 1Password SSH ํตํฉ ๊ธฐ๋ฅ์ ์ฌ์ฉํ๊ณ ์๋ค๋ฉด GPG ํค ์์ด 1Password ์ฑ์์ Git ์ปค๋ฐ ์๋ช ์ ์๋์ผ๋ก ๊ตฌ์ฑํ ์๋ ์๋ค. ์ปค๋ฐ์ ์๋ช ํ๋ฉด GitHub ๊ณ์ ์ ์ฐ๊ฒฐ๋ SSH ๊ณต๊ฐํค๋ก ์ค์ ์ฌ์ฉ์๊ฐ ๋ณ๊ฒฝํ ๋ด์ฉ์ธ์ง ๊ฒ์ฆ ํ ์ ์๋ค. ๊ทธ๋ผ ๋ค๋ฅธ ์ฌ๋์ ์๋ช ํ์ง ์์ ์ปค๋ฐ์ ๋ฐฉ์งํ ์ ์๋ค.GPG(Gnu Privacy Guard)๋ GNU ํ๋ก์ ํธ์์ ๊ฐ๋ฐํ ์คํ์์ค ์ํธํ ์ํํธ์จ์ด๋ค. ๊ณต๊ฐํค ์ํธํ ๋ฐฉ์์ ์ฌ์ฉํ๋ฉฐ, ์ํธํ, ์๋ช , ์ธ์ฆ ๋ฑ์ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ค. ์๊ตฌ ์ฌํญ1Password ๋ฒ์ 8์ด์์ ๋ฐ์คํฌํฑ ์ฑGit 2.34 ํน์ ์ดํ ๋ฒ์ 1Password SSH Agent ํ์ฑ (์ฐธ๊ณ ํฌ์คํ )1Pasโฆ -
[CS] ์ค๋ฒํค๋ / ํ๋ก์ธ์ค / ์ค๋ ๋
[CS] ์ค๋ฒํค๋ / ํ๋ก์ธ์ค / ์ค๋ ๋
2024.05.18์ค๋ฒํค๋์ค๋ฒํค๋๋ ํน์ ์์ ์ ์ํํ๊ธฐ ์ํด ๊ฐ์ ํน์ ์ถ๊ฐ์ ์ผ๋ก ํ์ํ ์์ ์ด๋ ๋น์ฉ์ ์๋ฏธํ๋ค. ์ฌ๊ธฐ์ ๋น์ฉ์ ์ปดํจํฐ์ ์ฒ๋ฆฌ ์๊ฐ, ๋ฉ๋ชจ๋ฆฌ ๋ฑ์ ๋งํ๋ค. ์๋ฅผ ๋ค์ด ์ฒ๋ฆฌ์๊ฐ 10์ด๊ฐ ํ์ํ A ๊ธฐ๋ฅ์ ์์ ์ฑ์ ์ํ ๋ถ๊ฐ๊ธฐ๋ฅ B๋ฅผ ์ถ๊ฐํ ๊ฒฐ๊ณผ ์ด 15์ด๊ฐ ์์๋๋ค๋ฉด, ์ค๋ฒํค๋๋ 5์ด๊ฐ ๋๋ค. ์ค๋ฒํค๋๋ ํ์ค ์ธ๊ณ์์ ๋งํธ์ ์ฅ๋ณด๋ฌ ๊ฐ๋ ๊ฒ์ ๋น์ ํ๋ฉด ๋ ์ฝ๊ฒ ์ดํดํ ์ ์๋ค. 10๋ง ์์ด์น ๋ฌผ๊ฑด์ ๊ตฌ๋งคํ๊ธฐ(๋ฉ์ธ ์์ A) ์ํด ๋งํธ๊น์ง ๊ฐ๋ ์ผ(๋ถ๊ฐ ์์ B)์ ์ฅ๋ณด๊ธฐ์์ ํฐ ๋ถ๋ถ์ ์ฐจ์งํ์ง ์๋๋ค. ํ์ง๋ง ๊ป ํ๋๋ง ์ฌ๊ธฐ ์ํด(์์ A) ๋งํธ๊น์ง ๊ฐ๋ค๋ฉด, ๋งํธ๊น์ง ์ด๋ํ๋ ์ผ(๋ถ๊ฐ ์์ B)์ ์ฅ๋ณด๊ธฐ์์ ์๋์ ์ผ๋ก ํฐ ๋ถ๋ถ์ ์ฐจ์งํ๋ค. ์ด๋ ๊ป์ ์ฌ๊ธฐ ์ํด ๋งํธ๊น์ง ๊ฐ๋ ๊ฑด ์ค๋ฒํค๋๊ฐ ๋๋ฌด ํฌ๋ค๊ณ ๋งโฆ -
[TS] ํ์ ์คํฌ๋ฆฝํธ์ ๊ณต๋ณ์ฑ / ๋ฐ๊ณต๋ณ์ฑ / ์ด๋ณ์ฑ
[TS] ํ์ ์คํฌ๋ฆฝํธ์ ๊ณต๋ณ์ฑ / ๋ฐ๊ณต๋ณ์ฑ / ์ด๋ณ์ฑ
2024.05.17TL;DR ์๊ฒฉ ๋ชจ๋๋น์๊ฒฉ ๋ชจ๋ํจ์ ๋ฆฌํด ํ์ ๊ณต๋ณ์ ๊ณต๋ณ์ ํจ์ ํ๋ผ๋ฏธํฐ ํ์ ๋ฐ๊ณต๋ณ์ ์ด๋ณ์ ๊ทธ ์ธ๊ณต๋ณ์ ๊ณต๋ณ์ ๊ณต๋ณ์ฑ : ์ํผ ํ์ (๋์ ํ์ )์ด ์๋ธ ํ์ (์ข์ ํ์ )์ ์ปค๋ฒํ๋ ๊ด๊ณ์๋ธ ํ์ ์ ์ํผ ํ์ ์ ๋์ ํ ์ ์์ e.g. superType = subTypeํ์ ์คํฌ๋ฆฝํธ ๊ธฐ๋ณธ ๋์๋ฐ๊ณต๋ณ์ฑ : ์๋ธ ํ์ (์ข์ ํ์ )์ด ์ํผ ํ์ (๋์ ํ์ )์ ์ปค๋ฒํ๋ ๊ด๊ณ์ํผ ํ์ ์ ์๋ธ ํ์ ์ ๋์ ํ ์ ์์ e.g. subType = superTypeํจ์ ํ๋ผ๋ฏธํฐ ๋์์ด๋ณ์ฑ : ๊ณต๋ณ์ฑ๊ณผ ๋ฐ๊ณต๋ณ์ฑ์ ๋ชจ๋ ํฌํจํ๋ ๊ด๊ณ์ํผ ํ์ ๊ณผ ์๋ธ ํ์ ์ ๋ชจ๋ ๋์ ํ ์ ์์strictFunctionTypes ์ต์ ์ ๊ป์ ๋ ํจ์ ํ๋ผ๋ฏธํฐ ๋์ ๊ณต๋ณ์ฑ | Covariance๊ณต๋ณ์ฑ : A๊ฐ B์ ์๋ธ ํ์ ์ด๋ฉด, T๋ T์ ์๋ธ ํ์ ์โฆ -
[React] ๋ฆฌ์กํธ์์ Rendering ๋ ๋๋ง์ด๋?
[React] ๋ฆฌ์กํธ์์ Rendering ๋ ๋๋ง์ด๋?
2024.05.16TL;DR๋ง์ดํธ : ์ปดํฌ๋ํธ๊ฐ ์ต์ด๋ก DOM์ ์ฝ์ ๋๋ ๊ณผ์ . ์ปดํฌ๋ํธ ์๋ช ์ฃผ๊ธฐ์์ ํ ๋ฒ๋ง ๋ฐ์๋ ๋ : ์ปดํฌ๋ํธ๋ฅผ ์คํํด์ ๋ณ๊ฒฝ์ฌํญ์ ๊ณ์ฐ(์ปดํฌ๋ํธ ์ถ๋ ฅ ๊ฒฐ์ )ํ๋ ๊ณผ์ . ์๋ก์ด ๊ฐ์ DOM์ ์์ฑํ๊ณ ์ด ์๋ก์ด ๊ฐ์ DOM๊ณผ ์ด์ ๊ฐ์ DOM์ ๋น๊ตํ์ฌ ์ค์ DOM์ ๋ฐ์ํ ๋ณ๊ฒฝ์ฌํญ ํ์ ์ปค๋ฐ : ๋ ๋ ๋จ๊ณ๋ฅผ ํตํด ํ์ ๋ ๋ณ๊ฒฝ์ฌํญ๋ค์ด ์ค์ ๋ธ๋ผ์ฐ์ DOM์ ์ ์ฉ๋๋ ๊ณผ์ ๋ ๋๋ง์ด๋์ผ๋ฐ์ ์ผ๋ก ๋ ๋๋ง(Rendering)์ ์๋ 2๊ฐ์ง ๊ณผ์ ์ ์ง์นญํ๋ค. HTML / CSS / JS๋ก ์์ฑ๋ ๋ฌธ์๋ฅผ ํด์(ํ์ฑ)ํด์ ๋ธ๋ผ์ฐ์ ์ ์๊ฐ์ ์ผ๋ก ์ถ๋ ฅํ๋ ๊ณผ์ ์๋ฒ์์ ๋ฐ์ดํฐ๋ฅผ HTML๋ก ๋ณํํด์ ๋ธ๋ผ์ฐ์ ์๊ฒ ์ ๋ฌํ๋ ๊ณผ์ (SSR) ๋ฐ๋ฉด ๋ฆฌ์กํธ์์ ๋งํ๋ ๋ ๋๋ง์ ๋ธ๋ผ์ฐ์ DOM ์์ ๋น์ฉ์ ์ค์ด๊ธฐ ์ํด ์ํํ๋ ์์ ์โฆ
๋๊ธ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.