profile
Front ๐Ÿ’” End

TIL: ์—ด๊ฑฐํ˜•

enum์„ ์™œ์‚ฌ์šฉํ•˜๋Š”๊ฐ€? ํŠน์ •ํ•œ ๋„˜๋ฒ„ ํ˜น์€ ์ŠคํŠธ๋ง์„ ํƒ€์ž…์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค. ์•„๋ž˜์™€ ๊ฐ™์€ ์˜ˆ์‹œ๊ฐ€ ๊ทธ์— ํ•ด๋‹นํ•œ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์œ„์ฒ˜๋Ÿผ or ์—ฐ์‚ฐ์ž๋กœ ํƒ€์ž…์„ ์ •์˜ํ•ด ๋ฒ„๋ฆฌ๋ฉด ์ถ•์•ฝํ˜•์œผ๋กœ ์“ด ja, ko, en์ด ๋ฌด์—‡์„ ์˜๋ฏธํ•˜๋Š”์ง€ ๊นŒ๋จน๊ฑฐ๋‚˜ ๋ชจ๋ฅผ ๋•Œ๊ฐ€ ์žˆ๋‹ค. ug๊ฐ€ ์–ด๋–ค ๊ตญ๊ฐ€๋ฅผ ์˜๋ฏธํ•˜๋Š”์ง€ ์•„๋Š” ์‚ฌ๋žŒ์ด ์žˆ์„๊นŒ? ๋ณ„๋กœ ์—†์„ ๊ฒƒ์ด๋ผ ์ง์ž‘ํ•œ๋‹ค. ug๋Š” Uganda ์šฐ๊ฐ„๋‹ค ์ฝ”๋“œ๋‹ค. ์ด๋Ÿฐ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์–ด๋–ค ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์„๊นŒ? ์•ฝ์–ด๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒƒ ํ’€๋„ค์ž„ ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ enum ๋งˆ์น˜ ๊ฐ์ฒด์˜ key๊ฐ€ ko ๊ฐ’์ด korean์•ˆ ๋Š๋‚Œ์ด ๋“ ๋‹ค. ์‹ค์ œ๋กœ ์ด๋Ÿฌํ•œ ์›๋ฆฌ์ด๋ฉฐ, ๊ฐ’์„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์—†๋„๋ก freezon ๋œ ๊ฐ์ฒด๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. ์†Œ๊ฒฐ๋ก  ์›๋ž˜ ๋œป์„ ์œ ์ง€ํ•˜๋ฉฐ, ์งง์€ ์ฝ”๋“œ๋กœ ๊ฐ€๋…์„ฑ์„ ๋†’์ด๊ณ  ์‹ถ์€ ๊ฒฝ์šฐ enum์„ ์‚ฌ์šฉํ•ด๋ณด์ž.

2022๋…„ 1์›” 20์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

TIL: typescript(class, tsconfig ์˜ต์…˜)

๋ฐฐ์šด ๋‚ด์šฉ ์ •๋ฆฌํ•˜๊ธฐ typescript 1. class์—์„œ ์„ ์–ธํ•œ private(ํด๋ž˜์Šค ์™ธ๋ถ€์—์„œ ์ ˆ๋Œ€ ์ ‘๊ทผ ๋ถˆ๊ฐ€), protected(private์™€ ๋™์ผํ•˜๋ฉฐ + ํ™•์žฅ๋œ ํด๋ž˜์Šค๊นŒ์ง€ ์ ‘๊ทผ ๊ฐ€๋Šฅ) ๋ฉค๋ฒ„๊ฐ€ ์žˆ๋‹ค๋ฉด, ๊ตฌ์กฐ๊ฐ€ ๋™์ผํ•˜๋”๋ผ๋„ ๋ฐ˜๋“œ์‹œ ๋™์ผํ•œ ํด๋ž˜์Šค๋ฅผ ํ†ตํ•ด ์ •์˜๋œ ๋ฉค๋ฒ„์—ฌ์•ผ ๊ฐ™์€ ํƒ€์ž…์œผ๋กœ ์ธ์ •๋œ๋‹ค. (์ผ๋ฐ˜์ ์œผ๋กœ ts๋Š” ๊ตฌ์กฐ์ ์œผ๋กœ ๋™์ผํ•œ ๊ฒฝ์šฐ ๊ฐ™์€ ํƒ€์ž…์œผ๋กœ ์ธ์ •) ์˜ˆ์ œ 1 2. strictNullChecks ์˜ต์…˜ ์„ค์ •์€ ํŠน์ • ํƒ€์ž…์œผ๋กœ ์ง€์ •๋œ ๋ณ€์ˆ˜์— null๊ณผ undefined๊ฐ€ ํ• ๋‹น๋˜์ง€ ๋ชปํ•˜๋„๋ก ๋ง‰๋Š”๋‹ค. ์˜ˆ์ œ 1 ์œ„ ์ฝ”๋“œ์—๋Š” ์˜ค๋ฅ˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. loggedInUsername ์‹๋ณ„์ž๋Š” constํ‚ค์›Œ๋“œ์™€ ํ•จ๊ป˜ string ํƒ€์ž…์œผ๋กœ annotation ๋์Šต๋‹ˆ๋‹ค. const๋ฅผ ์ •์˜ํ•  ๋•Œ๋Š” ๋ฐ˜๋“œ์‹œ ์ดˆ๊ธฐํ™”๊ฐ€ ํ•„์š”ํ•˜๋‹ค๋Š” ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ declare ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ด๋ฏธ ํ•ด๋‹น ๋ณ€์ˆ˜๊ฐ€ ์กด์žฌํ•œ๋‹ค๊ณ  ์ธ์‹๋˜์–ด ์—

2022๋…„ 1์›” 20์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

๋• ํƒ€์ดํ•‘

๋ฆฌํŒฉํ„ฐ๋ฆฌ 2ํŒ ์ค‘ ๋•ํƒ€์ดํ•‘์ด๋ผ๋Š” ์šฉ์–ด๊ฐ€ ๋“ฑ์žฅํ–ˆ๋‹ค. ํ•ด๋‹น ์šฉ์–ด๋ฅผ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ •์˜ํ•˜๊ณ  ์žˆ๋Š”๋ฐ, ๋ช…ํ™•ํ•˜๊ฒŒ ์™€๋‹ฟ์ง€ ์•Š๋Š”๋‹ค. duck typing: ์ž๋ฐ”์˜ ํƒ€์ž… ์‹œ์Šคํ…œ์€ '์ด๋ฆ„'์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํƒ€์ž…์„ ๊ตฌ๋ถ„ํ•œ๋‹ค. ํด๋ž˜์Šค A์™€ B๊ฐ€ ๋˜‘๊ฐ™์€ ํ•„๋“œ์™€ ๋ฉ”์„œ๋“œ๋ฅผ ์ œ๊ณตํ•˜๋”๋ผ๋„ ํด๋ž˜์Šค ์ด๋ฆ„์ด ๋‹ค๋ฅด๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค๋ฅธ ํด๋ž˜์Šค๋กœ ์ทจ๊ธ‰ํ•œ๋‹ค. ๋ฐ˜๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” '๊ตฌ์กฐ'๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํƒ€์ž…์„ ๊ตฌ๋ถ„ํ•œ๋‹ค. ์ฆ‰, ํด๋ž˜์Šค ์ด๋ฆ„์— ์ƒ๊ด€์—†์ด ์–ด๋–ค ํƒ€์ž…์— ๊ฑธ๋งž์€ ํ•„๋“œ์™€ ๋ฉ”์„œ๋“œ๋ฅผ ์ง€๋‹Œ ๊ฐ์ฒด๋ผ๋ฉด ํ•ด๋‹น ํƒ€์ž…์œผ๋กœ ๊ฐ„์ฃผํ•œ๋‹ค. ๋• ํƒ€์ดํ•‘์ด๋ž€ ์ด๋ฆ„์€ "๋งŒ์•ฝ ์–ด๋–ค ์ƒˆ๊ฐ€ ์˜ค๋ฆฌ์ฒ˜๋Ÿผ ๊ฑท๊ณ , ํ—ค์—„์น˜๊ณ , ๊ฝฅ๊ฝฅ๊ฑฐ๋ฆฐ๋‹ค๋ฉด ๋‚˜๋Š” ๊ทธ ์ƒˆ๋ฅผ์˜ค๋ฆฌ๋ผ๊ณ  ๋ถ€๋ฅผ ๊ฒƒ์ด๋‹ค."๋ผ๋Š” ๋น„์œ ์—์„œ ๋‚˜์™”๋‹ค. > ์š”์•ฝ: ๊ฐ์ฒด์˜ ๋ณ€์ˆ˜ ๋ฐ ๋ฉ”์†Œ๋“œ์˜ ์ง‘ํ•ฉ์ด ๊ฐ์ฒด์˜ ํƒ€์ž…์„ ๊ฒฐ์ • ๊ทธ๋ž˜์„œ ์ž๋ฃŒ๋ฅผ ์ฐพ์•„ ์œ„์˜ ๋‚ด์šฉ์„ ์ฝ”๋“œ๋กœ ํ’€์ดํ•ด ๋ดค๋‹ค. ์œ„์˜ ์ฝ”๋“œ๋ฅผ ๋ณด๋ฉด Qauckable์„ ์ƒ์†๋ฐ›์ง€ ์•Š์€ Pig ํด๋ž˜์Šค๊ฐ€ cryQuack์ด๋ผ๋Š” ํ•จ์ˆ˜์˜ ์ธ์ˆ˜: Quackable ๋กœ ์ž…๋ ฅ๋˜์—ˆ๋”๋ผ๋„ ์‹คํ–‰์ด ๋œ

2022๋…„ 1์›” 9์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

DOM Interface

typescript๋ฅผ ์‚ฌ์šฉํ•˜๋‹ค๋ณด๋ฉด DOM๊ณผ ๊ด€๋ จ๋˜๋ฉฐ, ์ด๋ฏธ ์ •์˜๋˜์–ด ์žˆ๋Š” interface๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ๊ฐ€ ์žˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ChildNode, HTMLElement๊ฐ€ ํ•ด๋‹นํ•œ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์ •๋ง ํ—ท๊ฐˆ๋ฆฐ๋‹ค. ChildNode, HTMLElement ๋ญ๊ฐ€ ๋‹ค๋ฅธ๊ฑฐ์ง€? ๊ทธ๋ž˜์„œ ์กฐ์‚ฌํ•ด๋ณด์•˜๋‹ค. 1. DOM Node, DOMElement ์ฐจ์ด 1.1 DOM Node NODE์˜ ์˜๋ฏธ๋Š” ๋ถ€๋ชจ ์ž์‹์˜ ๊ด€๊ณ„์— ์žˆ๋‹ค. ์•„๋ž˜ html document ๊ตฌ์กฐ๋ฅผ ๋ณด๋ฉด ๋ถ€๋ชจ ์ž์‹ ํ˜•์ œ ๊ด€๊ณ„์— ๋”ฐ๋ผ ํ‘œํ˜„๋˜๊ณ  ์žˆ๋‹ค. html์€ head, body ์ž์‹ ๋…ธ๋“œ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ์ด๋Ÿฌํ•œ ํƒœ๊ทธํ˜• node(html element) ๋ฟ๋งŒ์•„๋‹ˆ๋ผ text node๋„ node ์ด๊ธฐ ๋•Œ๋ฌธ์— ๋ถ€๋ชจ ํ˜•์ œ ๊ด€๊ณ„๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ๋”ฐ๋ผ์„œ text node๋„ before, after, parentElement ๋“ฑ์˜ ๊ด€๊ณ„๋œ node๋ฅผ ์ฐพ๊ธฐ ์œ„ํ•œ ๋ฉ”์„œ๋“œ๋ฅผ ํฌํ•จํ•˜๊ณ  ์žˆ๋‹ค. 1.1.1 Node Types ๋…ธ๋“œ๋Š” ํƒ€์ž…์„ ๊ฐ€์ง€

2021๋…„ 12์›” 27์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

typescript์˜ Mapped type์— ๋Œ€ํ•ด

Mapped type mapped type์€ ๊ฐ์ฒด์— ๋Œ€ํ•œ type์„ ์ง€์ •ํ•  ๋•Œ, property key ํ˜น์€ value๋ฅผ ์กฐ๊ธˆ ๋” ์œ ์—ฐํ•˜๊ฒŒ ์ง€์ •ํ•˜๋„๋ก ๋„์™€์ค€๋‹ค. ์œ ์—ฐํ•˜๋‹ค๋Š” ์˜๋ฏธ๋Š”, ๋งˆ์น˜ Js์˜ computed property names ๋ฌธ๋ฒ• ์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค. ์ด๋ฅผ ์ž˜ ํ™œ์šฉํ•˜๋ฉด typescript์—์„œ ์ œ๊ณตํ•˜๋Š” type utils๋ฅผ ๋„˜์–ด์„œ ๋‚˜๋งŒ์˜ utils๋ฅผ ๋งŒ๋“ค๊ณ  ์‹ถ์„ ๋•Œ, ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. js compomputed property names ์˜ˆ์‹œ Mappted type ์‘์šฉ ๊ฐ์ฒด์˜ key๋Š” ๋ชจ๋ฅด์ง€๋งŒ type์€ ์•Œ๊ณ ์žˆ๋Š” ๊ฒฝ์šฐ, ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด ๋ฌธ๋ฒ•์€ interface์—๋„ ์ ์šฉ๊ฐ€๋Šฅํ•˜๋‹ค. PropertyKes(๋ณดํ†ต keyof ๋กœ ์ถ”์ถœํ•œ key๋“ค)์„ ํ†ตํ•ด type์˜ key๋ฅผ ์ง€์ •ํ•˜๊ณ  ์‹ถ์€ ๊ฒฝ์šฐ. key Remapping vis as ๋ณธ์ธ์ด Mappted type์„ ์•Œ์•„๋ณด๊ฒŒ๋œ ๊ณ„๊ธฐ๋‹ค.

2021๋…„ 9์›” 26์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท