๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
728x90
๋ฐ˜์‘ํ˜•

๐Ÿ“Œ Language37

[TS] Extends์™€ Implements ์ฐจ์ด (Difference between extends and implements) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ๐Ÿ’ป ์ž…๋‹ˆ๋‹ค. ์˜ค๋Š˜์€ TS์—์„œ ํด๋ž˜์Šค ์˜†์— extends์™€ implements๊ฐ€ ์ˆœ๊ฐ„ ํ—ท๊ฐˆ๋ ค์„œ ์ •ํ™•ํžˆ ๊ธฐ์–ตํ•˜๊ธฐ ์œ„ํ•ด ์ •๋ฆฌํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ Extends ์ƒ์†๋ฐ›๊ณ ์ž ํ•˜๋Š” ๋ถ€๋ชจ ํด๋ž˜์Šค๋ฅผ ๋ช…์‹œํ•˜๋Š” ๊ฒƒ. ์ฆ‰, extends์— ์›ํ•˜๋Š” ํด๋ž˜์Šค๋ฅผ ๋ช…์‹œํ•˜๋ฉด ํ•ด๋‹น ํด๋ž˜์Šค์˜ ํ”„๋กœํผํ‹ฐ์™€ ๋ฉ”์„œ๋“œ๋ฅผ ๋”ฐ๋กœ ๊ตฌํ˜„ํ•˜์ง€ ์•Š์•„๋„ ์ธ์Šคํ„ด์Šค์—์„œ ์ž์œ ๋กญ๊ฒŒ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ์‰ฝ๊ฒŒ ๋งํ•ด "๋ถ€๋ชจ๊ฐ€ ๊ฐ€์ง„ ๊ฑฐ ๋„ˆ ๋ง˜๋Œ€๋กœ ์จ๋„ ๋ผ~" ๋ผ๋Š” ๊ฒƒ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์•„๋ž˜์™€ ๊ฐ™์ด ๋ถ€๋ชจ ํด๋ž˜์Šค๋ฅผ ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค. class Parent { public lastName: string = "An"; public speakKorean() { console.log("์•ˆ๋…•ํ•˜์„ธ์š”"); } public eatWithChopsticks() { co.. 2022. 4. 2.
[TS] ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ(TypeScript)๋ž€? (feat. ์จ์•ผํ•˜๋Š” ์ด์œ ) ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ(TypeScript)๋ž€? ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์Šˆํผ์…‹์ธ ์˜คํ”ˆ์†Œ์Šค ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์ด๋‹ค. ๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ์—์„œ ๊ฐœ๋ฐœ, ์œ ์ง€ํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ์—„๊ฒฉํ•œ ๋ฌธ๋ฒ•์„ ์ง€์›ํ•œ๋‹ค. C#์˜ ๋ฆฌ๋“œ ์•„ํ‚คํ…ํŠธ์ด์ž ๋ธํŒŒ์ด, ํ„ฐ๋ณด ํŒŒ์Šค์นผ์˜ ์ฐฝ์‹œ์ž์ธ Anders Hejlsberg๊ฐ€ ๊ฐœ๋ฐœ์— ์ฐธ์—ฌํ•œ๋‹ค. ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ์™€ ์„œ๋ฒ„ ์‚ฌ์ด๋“œ๋ฅผ ์œ„ํ•œ ๊ฐœ๋ฐœ์— ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์„ ์‚ฌ์šฉํ•˜๋ฉด์„œ ์ปค๋‹ค๋ž€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๊ฒŒ ์„ค๊ณ„๋œ ์–ธ์–ด์ด๋‹ค.์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์Šˆํผ์…‹์ด๊ธฐ ๋•Œ๋ฌธ์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์ž‘์„ฑ๋œ ํ”„๋กœ๊ทธ๋žจ์ด ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ํ”„๋กœ๊ทธ๋žจ์œผ๋กœ๋„ ๋™์ž‘ํ•œ๋‹ค. ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์—์„œ ์ž์‹ ์ด ์›ํ•˜๋Š” ํƒ€์ž…์„ ์ •์˜ํ•˜๊ณ  ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ํ•˜๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์ปดํŒŒ์ผ๋˜์–ด ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค. ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ๋ชจ๋“  ์šด์˜ ์ฒด์ œ, ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €, ๋ชจ๋“  ํ˜ธ์ŠคํŠธ์—.. 2022. 3. 8.
[Swift] ๊ณ ๊ธ‰ ์—ฐ์‚ฐ์ž(Advanced Operator)๋ž€? (feat. ๋น„ํŠธ์—ฐ์‚ฐ์ž) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ๐Ÿ’ป ์ž…๋‹ˆ๋‹ค! ์˜ค๋Š˜์€ ์šฐ์—ฐํžˆ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋ฌธ์ œ๋ฅผ ํ’€๋‹ค๊ฐ€ '^=' ์™€ ๊ฐ™์€ ์—ฐ์‚ฐ์ž๋ฅผ ๋ฐœ๊ฒฌํ–ˆ๋Š”๋ฐ, ์ •ํ™•ํžˆ ์–ด๋–ค๊ฑด์ง€ ๋ชจ๋ฅด๊ฒ ๋”๋ผ๊ตฌ์š”. ์ฐพ์•„๋ณด๋‹ˆ ํ•ด๋‹น ์—ฐ์‚ฐ์ž๋Š” Swift์—์„œ ๊ณ ๊ธ‰ ์—ฐ์‚ฐ์ž๋กœ ๋ถ„๋ฅ˜ํ•ด ๋†“์•˜๋”๋ผ๊ตฌ์š”. ๊ทธ๋ž˜์„œ ์˜ค๋Š˜์€ Swift์˜ ๊ณ ๊ธ‰ ์—ฐ์‚ฐ์ž์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~! UInt ์šฐ์„  ๋“ค์–ด๊ฐ€๊ธฐ ์ „์— UInt์— ๋Œ€ํ•œ ์ดํ•ด๊ฐ€ ํ•„์š”ํ•ด์š”. ์›๋ž˜ Int๋Š” ์ •์ˆ˜ ์ฆ‰, ์Œ์ˆ˜์™€ ์–‘์ˆ˜๋ฅผ ๋ชจ๋‘ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์—ˆ์ฃ ? UInt๋Š” ์ด ์ค‘์—์„œ ์–‘์ˆ˜๋งŒ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. (์Œ์ˆ˜๋ฅผ ๋„ฃ์œผ๋ฉด ์ปดํŒŒ์ผ ์—๋Ÿฌ ๋ฐœ์ƒ) ๋ฒ”์œ„๋กœ ๋ณด๋ฉด Int8 = -128...127 ์ด๊ณ , UInt8 = 0...256, Int16 = -322768...322767์ด๊ณ  UInt16 = 0...65535 ์ž…๋‹ˆ๋‹ค. ์ •์ˆ˜ํ˜• ๋ณ€์ˆ˜์— ๋น„ํŠธ๊ฐ’ ์ž…๋ ฅํ•˜.. 2022. 2. 26.
[CSS] Flex ์†์„ฑ ์•Œ์•„๋ณด๊ธฐ (List of flex properties) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ๐Ÿ’ป ์ž…๋‹ˆ๋‹ค. ์˜ค๋Š˜์€ CSS์—์„œ ์‰ฝ๊ฒŒ ๋ ˆ์ด์•„์›ƒ์„ ํ•  ์ˆ˜ ์žˆ๋Š” Flex์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ flex-basis ํ”Œ๋ ‰์Šค ์•ˆ์— ์žˆ๋Š” ์š”์†Œ์˜ ๊ธฐ๋ณธ ํฌ๊ธฐ๋ฅผ ์„ค์ •ํ•˜๋Š” ์†์„ฑ 50px 100px 50px 1. px์ด๋‚˜ em์œผ๋กœ ์ง์ ‘ ์ง€์ •ํ•˜๊ธฐ ํŒŒ๋ž€์ƒ‰ ๋ฐ•์Šค 300px๋กœ ๋Š˜๋ฆฌ๊ธฐ (์—ฌ๊ธฐ์„œ nth-of-type(2)๋Š” flex์•ˆ์— ์žˆ๋Š” ์š”์†Œ ์ค‘ 2๋ฒˆ์งธ๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.) flex-basis: 300px; ํ•˜์ง€๋งŒ ๊ธ€์ž์˜ ๊ธธ์ด๋ณด๋‹ค ์งง๊ฒŒ ์ง€์ •ํ–ˆ์„ ๋• ๊ธ€์ž ๊ธธ์ด ๋งŒํผ๋งŒ ์กฐ์ •๋ฉ๋‹ˆ๋‹ค. 2. ํ‚ค์›Œ๋“œ๋กœ ์ง€์ •ํ•˜๊ธฐ ํ‚ค์›Œ๋“œ๋กœ ์ง€์ •ํ•˜๊ธฐ ์œ„ํ•ด์„œ ํŒŒ๋ž€์ƒ‰ ๋ฐ•์Šค์˜ ํ…์ŠคํŠธ ๊ธธ์ด๋ฅผ ๋Š˜๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค. abcdefg hijklmnop qrstuvwxyz 1. fill ํ…์ŠคํŠธ ๊ธธ์ด์— ๋”ฑ ๋งž๊ฒŒ ์กฐ์ •๋ฉ๋‹ˆ๋‹ค. flex-basis:.. 2022. 2. 22.
[CSS] ์ปฌ๋Ÿฌ์— ๊ด€ํ•œ ์†์„ฑ ์•Œ์•„๋ณด๊ธฐ (List of color properties) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ๐Ÿ’ป ์ž…๋‹ˆ๋‹ค! ์˜ค๋Š˜์€ CSS ์†์„ฑ ์ค‘ ์ปฌ๋Ÿฌ์— ๊ด€๋ จ๋œ ์†์„ฑ์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค! ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ color text ๋ฐ text-decoration ๋“ฑ์˜ ์ƒ‰์„ ์ •ํ•˜๋Š” ์†์„ฑ ์ƒ‰๊น”์„ ์ง€์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ 6๊ฐ€์ง€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. 1. name 2. hex 3. rgb 4. hsl 5. hwb 6. global ์•ˆ๋…•ํ•˜์„ธ์š” ์•ˆ๋…•ํ•˜์„ธ์š” ์•ˆ๋…•ํ•˜์„ธ์š” ์•ˆ๋…•ํ•˜์„ธ์š” 2022. 2. 22.
[CSS] CSS๋ž€? (feat. ๊ตฌ๋ฌธ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ๐Ÿ’ป ์ž…๋‹ˆ๋‹ค! ์š”์ฆ˜ ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ๋ฅผ ๊ณต๋ถ€ํ•˜๊ณ  ์žˆ๋Š”๋ฐ CSS์— ๋Œ€ํ•œ ๊ธฐ์–ต์ด ๊ฐ€๋ฌผ ๊ฐ€๋ฌผํ•ด์„œ ํ—ท๊ฐˆ๋ฆฌ๋”๋ผ๊ตฌ์š”.. ๊ทธ๋ž˜์„œ CSS์— ๋Œ€ํ•ด ๋‹ค์‹œ ํ•œ๋ฒˆ ์ œ๋Œ€๋กœ ์ •๋ฆฌํ•˜๊ณ  ๋„˜์–ด๊ฐ€๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ CSS๋ž€? Cascading Style Sheets์˜ ์ค„์ž„๋ง์ด๋ฉฐ ์ง๋…ํ•˜๋ฉด ๊ณ„๋‹จ์‹์œผ๋กœ ์ž‘์„ฑํ•˜๋Š” ์Šคํƒ€์ผ ์‹œํŠธ์ž…๋‹ˆ๋‹ค. ๋งˆํฌ์—… ์–ธ์–ด๊ฐ€ ์‹ค์ œ ํ‘œ์‹œ๋˜๋Š” ๋ฐฉ๋ฒ•์„ ๊ธฐ์ˆ ํ•˜๋Š” ์Šคํƒ€์ผ ์–ธ์–ด๋กœ HTML๊ณผ XML์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. HTML์ด ์›น์‚ฌ์ดํŠธ์˜ ๋ชธ์ฒด๋ฅผ ๋‹ด๋‹นํ•œ๋‹ค๋ฉด CSS๋Š” ๊ทธ ๋ชธ์ฒด๋ฅผ ์˜ˆ์˜๊ฒŒ ๊พธ๋ฏธ๋Š” ์—ญํ• ์„ ๋‹ด๋‹นํ•œ๋‹ค๊ณ  ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 1994๋…„ ํ•˜์ฝค ๋น„์›€ ๋ฆฌ๊ฐ€ ์ฒ˜์Œ ์ œ์•ˆํ•˜์—ฌ ์ดํ›„ W3C์—์„œ CSS2,CSS3๋ฅผ ๊ฐœ๋ฐœํ•ด์™”์Šต๋‹ˆ๋‹ค. CSS ๊ตฌ๋ฌธ ์ž‘์„ฑํ•˜๋Š” ๋ฒ• ์›ํ•˜๋Š” HTML ์š”์†Œ๋ฅผ ์„ ํƒํ•œ ๋’ค ๋ฐ”๊พธ๊ณ  ์‹ถ์€ ์†์„ฑ์„ ์„ ํƒํ•˜.. 2022. 2. 22.
[JS] ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฒ• ์•Œ์•„๋ณด๊ธฐ(Callback,Promise,Async & Await) ์•ˆ๋…•ํ•˜์„ธ์š” Foma๐Ÿ’ป ์ž…๋‹ˆ๋‹ค. ์˜ค๋Š˜๋„ ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ†ตํ•ด ๋ฐฐ์šด Callback ํ•จ์ˆ˜์™€ Promise์— ๋Œ€ํ•ด์„œ ์ œ๊ฐ€ ์ดํ•ดํ•œ ๋ฐฉ์‹๋Œ€๋กœ ์ •๋ฆฌํ•ด๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ Callback Callback ํ•จ์ˆ˜๋Š” ์‹คํ–‰ํ•˜๋Š” ์ฆ‰์‹œ ์™„๋ฃŒ๋˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ํŠน์ • ์ž‘์—…์„ ์‹คํ–‰ํ•˜๊ณ  ๋งˆ์นœ ๋’ค์— ์™„๋ฃŒ๋œ๋‹ค. ์ฆ‰, ๋น„๋™๊ธฐ์ ์œผ๋กœ ์ฒ˜๋ฆฌ๋˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค. ๋งŒ์•ฝ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋งŒ๋“œ๋Š” ์ž‘์—…์ด ์žˆ๋‹ค๋ฉด ์ž‘์—…์ด ์ •์ƒ์ ์œผ๋กœ ์ฒ˜๋ฆฌ๋˜๊ฑฐ๋‚˜ ์ค‘๊ฐ„์—์„œ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ๊ฒฝ์šฐ์— ์ž‘์—…์ด ์™„๋ฃŒ๋œ๋‹ค. ์ฝœ๋ฐฑ ํ•จ์ˆ˜๊ฐ€ ์™„๋ฃŒ๋˜๋Š” ๊ฒฝ์šฐ๋Š” ์ •์ƒ์ ์œผ๋กœ ์ฒ˜๋ฆฌ๋˜์—ˆ๊ฑฐ๋‚˜, ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•œ ๊ฒฝ์šฐ ๋ฟ์ด๋‹ค. ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ์‹์€ ์›ํ•˜๋Š” ํŒŒ๋ผ๋ฏธํ„ฐ ๊ฐ’๊ณผ ํ•จ๊ป˜ ์ž‘์—…์„ ์‹คํ–‰ํ•  ํ•จ์ˆ˜๋ฅผ ๋ฐ˜๋“œ์‹œ ๊ฐ™์ด ๋„ฃ์–ด์ค€๋‹ค. function loadScript(src,callback) { let s.. 2022. 2. 15.
[JS] Static,Protected,Private์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ธฐ ์•ˆ๋…•ํ•˜์„ธ์š” Foma๐Ÿ’ป ์ž…๋‹ˆ๋‹ค! ์˜ค๋Š˜๋„ ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋ฐฐ์šด Static,Protected,Private ์— ๋Œ€ํ•ด ์ œ๊ฐ€ ์ดํ•ดํ•œ ๊ฒƒ์„ ๋ฐ”ํƒ•์œผ๋กœ ์ •๋ฆฌํ•ด ๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค! ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ Static Static์€ ์ •์ ์ด๋ผ๋Š” ์˜๋ฏธ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์–ด, ๋ณ€ํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๋œป์ด๋‹ค. ์ด๊ฒƒ์„ ์ด์šฉํ•˜์—ฌ ์ •์  ๋ฉ”์„œ๋“œ, ํ”„๋กœํผํ‹ฐ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค. ์‰ฝ๊ฒŒ ๋งํ•˜๋ฉด ํด๋ž˜์Šค์—์„œ ๊ณตํ†ต์ ์œผ๋กœ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๋ถ€๋ถ„์ด๋‚˜ ๊ธฐ๋Šฅ์„ ๋ฏธ๋ฆฌ ์ •์˜ํ•ด ๋†“๋Š” ๊ฒƒ์ด๋‹ค. Static Property class Person { //๋ชจ๋“  ์‚ฌ๋žŒ์ด ๋™์ผํ•˜๊ฒŒ ๊ฐ€์ง€๊ณ  ์žˆ๊ณ  ๋ณ€ํ•˜์ง€ ์•Š๋Š” ๊ฐ’ static planet = "์ง€๊ตฌ" } //ํด๋ž˜์Šค ์ž์ฒด์—์„œ ๋ฐ”๋กœ ์ฝ๊ธฐ ๊ฐ€๋Šฅ console.log(Person.planet) //์ง€๊ตฌ Static Method class User { co.. 2022. 2. 15.
[JS] ํด๋ž˜์Šค(Class) ๊ธฐ๋ณธ ๋ฌธ๋ฒ•๊ณผ ์ƒ์† ์•ˆ๋…•ํ•˜์„ธ์š” Foma๐Ÿ’ป ์ž…๋‹ˆ๋‹ค! ์ด๋ฒˆ ๊ธ€๋„ ์—ญ์‹œ ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋ฐฐ์šด 'ํด๋ž˜์Šค'๋ฅผ ์ œ๊ฐ€ ์ดํ•ดํ•œ ๋ฐฉ์‹์œผ๋กœ ๋ณต์Šตํ•˜๋Š” ์ฐจ์›์—์„œ ์ •๋ฆฌํ•ด๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ ํด๋ž˜์Šค๋ž€? ํด๋ž˜์Šค๋Š” ๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์—์„œ ํŠน์ • ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๊ธฐ ์œ„ํ•ด ๋ณ€์ˆ˜์™€ ๋ฉ”์†Œ๋“œ๋ฅผ ์ •์˜ํ•˜๋Š” ์ผ์ข…์˜ ํ‹€๋กœ, ๊ฐ์ฒด๋ฅผ ์ •์˜ํ•˜๊ธฐ ์œ„ํ•œ ์ƒํƒœ(๋ฉค๋ฒ„ ๋ณ€์ˆ˜)์™€ ๋ฉ”์„œ๋“œ(ํ•จ์ˆ˜)๋กœ ๊ตฌ์„ฑ๋œ๋‹ค. - ์œ„ํ‚ค ๋ฐฑ๊ณผ - ์ฆ‰, ํด๋ž˜์Šค๋Š” ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค๊ธฐ ์‰ฝ๊ฒŒ ๋ฏธ๋ฆฌ ํ‹€์„ ๋งŒ๋“ค์–ด ๋†“๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํด๋ž˜์Šค ์ƒ์„ฑํ•˜๊ธฐ ์•ž์— ํด๋ž˜์Šค๋ฅผ ๋ถ™์—ฌ์ค€ ๋’ค constructor(์ƒ์„ฑ์ž)๋ฅผ ์ด์šฉํ•ด์„œ ์ดˆ๊ธฐํ™” ํ•ด์ค€๋‹ค. ๋ฉ”์„œ๋“œ๋‚˜ ํ”„๋กœํผํ‹ฐ๋ฅผ ์ƒ์„ฑํ•˜๊ฑฐ๋‚˜ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฒ•์€ ์ผ๋ฐ˜ ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค ๋•Œ์™€ ๋™์ผํ•˜๋‹ค. class Player { constructor(name) { this.height = 180 this.n.. 2022. 2. 12.
[JS] ํ”„๋กœํ† ํƒ€์ž…(Prototype) ๋‹ค๋ค„๋ณด๊ธฐ ์•ˆ๋…•ํ•˜์„ธ์š” Foma ๐Ÿ’ป ์ž…๋‹ˆ๋‹ค. ์˜ค๋Š˜๋„ ์—ญ์‹œ ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ†ตํ•ด ๋ฐฐ์šด ํ”„๋กœํ† ํƒ€์ž…์„ ๋ณต์Šตํ•˜๋Š” ์ฐจ์›์—์„œ ๋‹ค์‹œ ํ•œ๋ฒˆ ์ •๋ฆฌํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ Prototype์ด๋ž€? ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ชจ๋“  ๊ฐ์ฒด๋Š” ์ˆจ๊น€ ํ”„๋กœํผํ‹ฐ๋กœ Prototype์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ์ด๊ฒƒ์€ null์ด๊ฑฐ๋‚˜ ๋‹ค๋ฅธ ๊ฐ์ฒด๋ฅผ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ ์ด๊ฒƒ์„ ํ†ตํ•ด์„œ ํ•ด๋‹น ๊ฐ์ฒด์˜ ๊ธฐ๋Šฅ(๋ฉ”์„œ๋“œ)์„ ๋ณต์‚ฌํ•˜๊ฑฐ๋‚˜ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด๋ ‡๊ฒŒ ์ฐธ์กฐํ•œ ๋‹ค๋ฅธ ๊ฐ์ฒด๋ฅผ ํ˜„์žฌ ๊ฐ์ฒด์˜ 'ํ”„๋กœํ† ํƒ€์ž…'์ด๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค. Prototype ์„ค์ •ํ•˜๊ธฐ 1. __proto__ ์šด๋™์„ ์ˆ˜๋ฅผ ์ง€์นญํ•˜๋Š” 'player'๋ผ๋Š” ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๊ณ  let player = { firstName:"Young", lastName:"An", get fullName() { return this.firstName .. 2022. 2. 12.
[JS] ํ”„๋กœํผํ‹ฐ ์˜ต์…˜(ํ”Œ๋ž˜๊ทธ) ๋‹ค๋ฃจ๊ธฐ(Property Flag) ์•ˆ๋…•ํ•˜์„ธ์š” Foma๐Ÿ’ป ์ž…๋‹ˆ๋‹ค. ์˜ค๋Š˜์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ”„๋กœํผํ‹ฐ ํ”Œ๋ž˜๊ทธ์— ๋Œ€ํ•ด์„œ ์ •๋ฆฌํ•ด๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‚ฌ์ดํŠธ์—์„œ ๊ณต๋ถ€ํ•˜๋Š” ๊ฒƒ์„ ๋ณต์Šตํ•˜๋Š” ์ฐจ์›์—์„œ ์ œ๊ฐ€ ์ดํ•ดํ•œ ๋ฐฉ์‹์œผ๋กœ ์ ์–ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค! ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ Property Flag๋ž€? ํ”„๋กœํผํ‹ฐ๋Š” ๊ฐ’ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํ”Œ๋ž˜๊ทธ๋ผ ๋ถˆ๋ฆฌ๋Š” ํŠน๋ณ„ํ•œ ์†์„ฑ 3๊ฐ€์ง€๋ฅผ ๊ฐ€์ง„๋‹ค. 1. writable ํ•ด๋‹น ํ”„๋กœํผํ‹ฐ๋ฅผ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ๊ฒŒ ์„ค์ •ํ•˜๋Š” ํ”Œ๋ž˜๊ทธ 2. enumrable ํ•ด๋‹น ํ”„๋กœํผํ‹ฐ๋ฅผ ๋‚˜์—ดํ•  ์ˆ˜ ์žˆ๊ฒŒ ์„ค์ •ํ•˜๋Š” ํ”Œ๋ž˜๊ทธ 3. configurable ํ•ด๋‹น ํ”„๋กœํผํ‹ฐ๋ฅผ ์‚ญ์ œ, ํ”Œ๋ž˜๊ทธ ์ˆ˜์ •์ด ๊ฐ€๋Šฅํ•˜๊ฒŒ ์„ค์ •ํ•˜๋Š” ํ”Œ๋ž˜๊ทธ Property Flag ํ™•์ธํ•˜๋Š” ๋ฐฉ๋ฒ• Object.getOwnPropertyDescriptor(๊ฐ์ฒด,ํ”„๋กœํผํ‹ฐ๋ช…)์œผ๋กœ ํ™•์ธํ•˜๊ณ , ์ดˆ๊ธฐ์—” ๋ชจ๋‘ true๋กœ ์„ค์ •๋˜์–ด ์žˆ.. 2022. 2. 12.
[JS] JSON๊ณผ ๊ฐ์ฒด ๋‹ค๋ฃจ๊ธฐ ์•ˆ๋…•ํ•˜์„ธ์š” Foma ๐Ÿ’ป ์ž…๋‹ˆ๋‹ค! ์˜ค๋Š˜์€ JavaScript๋กœ JSON๊ณผ ๊ฐ์ฒด๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ฒ•์— ๋Œ€ํ•ด์„œ ์ •๋ฆฌํ•ด ๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ ๊ฐ์ฒด๋ฅผ JSON์œผ๋กœ ๋ฐ”๊พธ๊ธฐ JSON.stringify(๊ฐ์ฒด) ๊ตฌ๋ฌธ์„ ์‚ฌ์šฉํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค. let user = { name:"foma", age:27, color:"Black", [Symbol("id")]:123 } let json = JSON.stringify(user) console.log(json) //{"name":"foma","age":27,"color":"Black"} ๋งŒ์•ฝ ๋ฉ”์„œ๋“œ๋‚˜ undefined๊ฐ’์„ ๊ฐ€์ง„ ํ”„๋กœํผํ‹ฐ๊ฐ€ ์žˆ๋‹ค๋ฉด ์ž๋™์œผ๋กœ ๋ฌด์‹œํ•ฉ๋‹ˆ๋‹ค. user.sayHi = function() { print("sayHi") } user.somthing = un.. 2022. 2. 5.
728x90
๋ฐ˜์‘ํ˜•