[BOOK] ๋ˆ์œผ๋กœ ์‚ด ์ˆ˜ ์—†๋Š” ๊ฒƒ๋“ค(What Money Canโ€™t Buy)

์‚ฌ๋žŒ๋‹ต๊ฒŒ ์‚ด๊ธฐ ์œ„ํ•œ ํ•œ ๋‹ฌ ํ•œ ๊ถŒ(2022/07)

์‚ฌ๊ณ  ํŒ๋‹ค๋Š” ๊ฒฝ์ œํ•™์˜ ๋…ผ๋ฆฌ๊ฐ€ ๋” ์ด์ƒ ๋ฌผ์งˆ์  ์žฌํ™”๋งŒ์ด ์•„๋‹Œ ํ˜„๋Œ€์ธ์˜ ์‚ถ ์ „์ฒด๋ฅผ ์ง€๋ฐฐํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค.

1980๋…„๋Œ€ ์ดˆ์— ์‹œ์ž‘๋œ ์‹œ์žฅ์ง€์ƒ์ฃผ์˜(market triumphalism)๋Š” ๋ฒˆ์˜๊ณผ ์ž์œ ๋ฅผ ํ–ฅํ•œ ์—ด์‡ ๊ฐ€ ์ •๋ถ€๊ฐ€ ์•„๋‹Œ ์‹œ์žฅ์— ์žˆ๋‹ค๋Š” ๋กœ๋„๋“œ ๋ ˆ์ด๊ฑด(Ronald Reagan)๊ณผ ๋งˆ๊ฐ€๋ › ๋Œ€์ฒ˜(Margaret Thatcher)์˜ ์‹ ๋…์— ๋”ฐ๋ผ ํƒ„์ƒํ•˜์˜€๋‹ค.

๊ทธ ํ›„ ์‹œ์žฅ(market)์€ ๊ณต์ต์„ ๋‹ฌ์„ฑํ•˜๋Š” ์ฃผ์š” ์ˆ˜๋‹จ์ด๋ผ๋Š” ์‹ ๋…์ด ๊ฐ•ํ™”๋˜์—ˆ๋‹ค.

ํ•˜์ง€๋งŒ ์˜ค๋Š˜๋‚  ์ด ์‹ ๋…์€ ๊ฐ•ํ•˜๊ฒŒ ์˜์‹ฌ๋ฐ›๊ณ  ์žˆ๊ณ , ์‹œ์žฅ์ง€์ƒ์ฃผ์˜์˜ ์‹œ๋Œ€๊ฐ€ ๋ง‰์„ ๋‚ด๋ฆฌ๊ณ  ์žˆ๋Š” ๊ฒƒ์œผ๋กœ ๋ณด์ธ๋‹ค.

์‹œ์žฅ์—์„œ ๊ธˆ์œต ์œ„๊ธฐ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด์„œ ์‹œ์žฅ๊ณผ ๋„๋•์ด ๋ถ„๋ฆฌ๋˜๊ณ  ์žˆ๋‹ค๋Š” ์ธ์‹์ด ๊ฐ•ํ•ด์กŒ๋‹ค.

ํƒ์š•์ด ๊ธˆ์œต ์œ„๊ธฐ์— ํฐ ์—ญํ• ์„ ํ–ˆ์ง€๋งŒ ๋” ํฐ ์›์ธ์€ ์‹œ์žฅ ๊ฐ€์น˜๊ฐ€ ์›๋ž˜ ์†ํ•˜์ง€ ์•Š๋˜ ์‚ถ์˜ ์˜์—ญ์œผ๋กœ ํŒฝ์ฐฝํ•œ ๊ฒƒ์œผ๋กœ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

์ด๋Ÿฌํ•œ ์ƒํ™ฉ์—์„œ ๋ˆ์œผ๋กœ ์‚ฌ์„œ๋Š” ์•ˆ๋˜๋Š” ๊ฒƒ์ด ์žˆ์„๊นŒ?

์ด์ œ๋Š” ํƒ„์†Œ๋ฐฐ์ถœ๊ถŒ, ๋Œ€๋ฆฌ๋ชจ ์ถœ์‚ฐ, ์ด๋ฏผ ๊ถŒ๋ฆฌ, ๋ช…๋ฌธ๋Œ€ ์ž…ํ•™ ํ—ˆ๊ฐ€ ๋“ฑ 30๋…„ ์ „์—๋Š” ์ƒ์ƒํ•˜์ง€๋„ ๋ชปํ–ˆ๋˜ ๊ฒƒ๋“ค์„ ๊ฑฐ๋ž˜ํ•˜๋Š” ์‹œ๋Œ€๊ฐ€ ๋˜์—ˆ๋‹ค.

๊ทธ๋ ‡๋‹ค๋ฉด ๋ฌด์—‡์ด ๋ฌธ์ œ์ผ๊นŒ?

๋ˆ์œผ๋กœ ๋ชจ๋“  ๊ฒƒ์„ ์‚ฌ๊ณ  ํŒ” ์ˆ˜ ์žˆ์„ ๋•Œ ๋ฐœ์ƒํ•˜๋Š” ๋ฌธ์ œ์ ์€ ๋ถˆํ‰๋“ฑ๊ณผ ๋ถ€ํŒจ, ์ฆ‰ ๊ฑฐ๋ž˜๊ฐ€ ์ฐจ๋ณ„์˜ ๊ทผ์›์ด ๋˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

์š”ํŠธ์™€ ์Šคํฌ์ธ ์นด, ํœด์–‘์ง€ ๋“ฑ ๋ถ€์ˆ˜์ ์ธ ์ฆ๊ฑฐ์›€์„ ๋ˆ„๋ฆด ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด ๋นˆ๋ถ€ ์ฐจ์˜ ์ „๋ถ€๋ผ๋ฉด ํฐ ๋ฌธ์ œ๊ฐ€ ๋˜์ง€ ์•Š๋Š”๋‹ค.

ํ•˜์ง€๋งŒ ์ •์น˜ ์˜ํ–ฅ๋ ฅ, ์˜๋ฃŒ, ์ฃผ๊ฑฐ์ง€ ์•ˆ์ •, ๊ต์œก ๊ธฐํšŒ ๋“ฑ ๋ถ€์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ๊ธฐํšŒ์™€ ํ˜œํƒ์ด ์ฃผ์–ด์ง€๊ธฐ ๋•Œ๋ฌธ์— ๊ทผ์›์ ์ธ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.

๋งŽ์€ ๊ฒฝ์ œํ•™์ž๋“ค์ด ๋งํ•˜๊ธธ ์‹œ์žฅ์€ ๊ตํ™˜๋˜๋Š” ์žฌํ™”์— ์˜ํ–ฅ์„ ๋ฏธ์น˜์ง€ ๋ชปํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค.

ํ•˜์ง€๋งŒ ์ด๋Š” ์‚ฌ์‹ค์ด ์•„๋‹ˆ๋ฉฐ ์‹œ์žฅ์€ ์–ธ์ œ๋‚˜ ํ”์ ์„ ๋‚จ๊ธด๋‹ค.

๋ฒŒ๊ธˆ๊ณผ ์š”๊ธˆ์„ ํ†ตํ•ด์„œ๋„ ์ดˆ๋ž˜ํ•˜๋Š” ๋ฌธ์ œ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

๋ฒŒ๊ธˆ์€ ๋„๋•์ ์œผ๋กœ ์Šน์ธ ๋ฐ›์ง€ ๋ชปํ•˜๋Š” ํ–‰๋™์— ๋Œ€ํ•œ ๋น„์šฉ์ด๊ณ , ์š”๊ธˆ์€ ๋„๋•์  ํŒ๋‹จ์ด ๋ฐฐ์ œ๋œ ๋‹จ์ˆœํ•œ ๊ฐ€๊ฒฉ์ด๋‹ค. 

ํ•˜์ง€๋งŒ ๋ฒŒ๊ธˆ์„ ์š”๊ธˆ์œผ๋กœ ์ทจ๊ธ‰ํ•˜๋ฉด ์–ด๋–ป๊ฒŒ ๋ ๊นŒ?

๋ฒŒ๊ธˆ์„ ์š”๊ธˆ์œผ๋กœ ๋Œ€ํ•˜๋ฉด ๋ฒŒ๊ธˆ์ด ๋‚˜ํƒ€๋‚ด๋Š” ๊ทœ๋ฒ”์„ ๋ฌด์‹œํ•˜๊ฒŒ ๋œ๋‹ค.

๊ณต๊ณต์˜ ์ด์ต์— ๊ฐ€์žฅ ๋ถ€ํ•ฉํ•˜๋Š” ๊ฒƒ์€ ์Šค์Šค๋กœ ์ฐธ์—ฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•˜์—ฌ ์Šค์Šค๋กœ ์ •ํ•  ์ˆ˜ ์žˆ๋Š” ๊ถŒ๋ฆฌ๋ฅผ ๋ถ€์—ฌํ•˜๋Š” ๊ฒƒ์œผ๋กœ ๋ˆ์œผ๋กœ ์‚ฌ๋Š” ๊ฒƒ๋ณด๋‹ค ๋‹ค ๋” ํฐ ์ง€์ง€๋ฅผ ์ด๋Œ์–ด๋‚ผ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค.

๋„๋•์  ์‹ ๋…์ด๋‚˜ ํฅ๋ฏธ์™€ ๊ฐ™์€ ๋‚ด์žฌ์  ๋™๊ธฐ์™€ ๋ˆ๊ณผ ๋ณด์ƒ๊ณผ ๊ฐ™์€ ์™ธ์žฌ์  ๋™๊ธฐ๋Š” ์ฐจ์ด๊ฐ€ ์žˆ๋‹ค.

๋‚ด์žฌ์ ์œผ๋กœ ๊ฐ€์น˜๋ฅผ ๋‘๋Š” ํ™œ๋™์— ์ฐธ์—ฌํ•˜๋Š” ์‚ฌ๋žŒ์—๊ฒŒ ๋ˆ์„ ์ง€๊ธ‰ํ•˜๋ฉด ํฅ๋ฏธ์™€ ํ—Œ์‹ ์„ ๋ฐ€์–ด๋‚ด๊ณ  ๊ฐ€์น˜๋ฅผ ๋–จ์–ด๋œจ๋ ค ๋™๊ธฐ์œ ๋ฐœ์„ ์•ฝํ™”์‹œํ‚ค๋Š” ๊ฒฐ๊ณผ๋ฅผ ๋‚ณ๋Š”๋‹ค.

์‚ฌํšŒ, ๊ฒฝ์ œ์ ์œผ๋กœ ์ดํƒ€์ฃผ์˜๋ฅผ ๋ฌด๋ชจํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜๋ฉด ๋‹ค๋ฅธ ๊ณต๊ณต์˜ ๋ชฉ์ ์„ ์œ„ํ•ด ์“ธ โ€˜์ดํƒ€์ฃผ์˜โ€™์˜ ๊ณต๊ธ‰๋Ÿ‰์ด ๊ณ ๊ฐˆ๋œ๋‹ค๊ณ  ํ•˜์ง€๋งŒ ์ดํƒ€์ฃผ์˜, ๊ด€์šฉ, ๊ฒฐ์†, ์‹œ๋ฏผ์ •์‹ ์€ ์‚ฌ์šฉํ• ์ˆ˜๋ก ๊ณ ๊ฐˆ๋˜๋Š” ์ƒํ’ˆ์ด ์•„๋‹ˆ๋ผ ์˜คํžˆ๋ ค ์šด๋™ํ•˜๋ฉด ๋ฐœ๋‹ฌํ•˜๊ณ  ๋”์šฑ ๊ฐ•ํ•ด์ง€๋Š” ๊ทผ์œก์— ๊ฐ€๊น๋‹ค๊ณ  ๋ด์•ผ ํ•œ๋‹ค.

์‹œ์žฅ๊ณผ ์ƒ์—…์ด ์žฌํ™”์˜ ์„ฑ์งˆ์„ ๋ฐ”๊พธ๋Š” ์ƒํ™ฉ์„ ๋ชฉ๊ฒฉํ–ˆ๋‹ค๋ฉด ์‹œ์žฅ์— ์†ํ•œ ์˜์—ญ์€ ๋ฌด์—‡์ด๊ณ  ์‹œ์žฅ์— ์†ํ•˜์ง€ ์•Š์€ ์˜์—ญ์€ ๋ฌด์—‡์ธ์ง€๋„ ์˜๋ฌธ์„ ๋˜์ ธ์•ผ ํ•œ๋‹ค.

์žฌํ™”์˜ ์˜๋ฏธ์™€ ๋ชฉ์ , ์žฌํ™”๋ฅผ ์ง€๋ฐฐํ•˜๋Š” ๊ฐ€์น˜๋ฅผ ๋‘๊ณ  ๊นŠ์€ ์‚ฌ๊ณ  ์—†์ด๋Š” ์ด๋Ÿฌํ•œ ์งˆ๋ฌธ์— ๋Œ€๋‹ตํ•  ์ˆ˜ ์—†๋‹ค. 

์šฐ๋ฆฌ๋Š” ๋ฐ˜๋Œ€์— ๋ถ€๋”ชํž๊นŒ๋ฐ” ๋‘๋ ค์›Œ ์ž์‹ ์˜ ๋„๋•์ , ์ •์‹ ์  ํ™•์‹ ์„ ๊ณต๊ณต์˜ ์žฅ์— ๋‚ด๋ณด์ด๊ธฐ ์ฃผ์ €ํ•˜๊ณ  ์‹œ์žฅ์ด ๋Œ€์‹  ๊ฒฐ์ •์„ ๋‚ด๋ฆฌ๋„๋ก ํ—ˆ์šฉํ•˜๊ฒŒ ๋œ๋‹ค. 

์‚ฌํšŒ ์ „๋ฐ˜์—๋„ ๋ถˆํ‰๋“ฑ์ด ์‹ฌํ™”ํ•˜๋ฉด์„œ ๋ชจ๋“  ๊ฒƒ์ด ์‹œ์žฅ์˜ ์ง€๋ฐฐ๋ฅผ ๋ฐ›๋Š” ํ˜„์ƒ์€ ๋ถ€์œ ํ•œ ์‚ฌ๋žŒ๊ณผ ๊ทธ๋ ‡์ง€ ๋ชปํ•œ ์‚ฌ๋žŒ๋“ค์˜ ์‚ถ์„ ์ ์ฐจ ๋ถ„๋ฆฌํ•˜๊ฒŒ ๋œ๋‹ค.

๋ฐฐ๊ฒฝ, ์‚ฌํšŒ์  ์œ„์น˜, ํƒœ๋„, ์‹ ๋…์ด ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์ด ๋งค์ผ ์ƒํ™œํ•˜๋ฉฐ ์„œ๋กœ ๋งˆ์ฃผํ•˜๊ณ  ๋ถ€๋”ชํžˆ๊ฒŒ ๋˜๋ฉด ์„œ๋กœ์˜ ์ฐจ์ด๋ฅผ ๊ฒฌ๋ŽŒ๋‚ด๊ณ  ํ˜‘์ƒํ•˜๊ฒŒ ๋˜๊ณ  ๊ณต๊ณต์˜ ์„ ์— ๊ด€์‹ฌ์„ ์Ÿ๊ฒŒ ๋œ๋‹ค๊ณ  ํ•œ๋‹ค. 

๊ฒฐ๊ตญ ์šฐ๋ฆฌ๊ฐ€ ๋งˆ์ฃผํ•˜๋Š” ์‹œ์žฅ์˜ ๋ฌธ์ œ๋Š” ์–ด๋–ป๊ฒŒ ํ•จ๊ป˜ ์‚ด์•„๊ฐ€๊ณ  ์‹ถ์€๊ฐ€์— ๊ด€ํ•œ ๋ฌธ์ œ๊ฐ€ ๋œ๋‹ค.

๊ฐœ๋ฐœ์ž์˜ ์ผ๋ณธ์–ด ์‚ฌ์ „(้–‹็™บใฎ่พžๆ›ธ)

้–‹็™บ่€…ใŒใ‚ˆใไฝฟใ†ๅ˜่ชžใ‚ณใƒฌใ‚ฏใ‚ทใƒงใƒณ

์ผ๋ณธ์–ด ์„œ์ ์„ ๋ฒˆ์—ญํ•˜๋ฉด์„œ ์ •๋ฆฌํ•˜๋Š” ๊ฐœ๋ฐœ ์šฉ์–ด.

์˜์–ด ๋‹จ์–ด๋ฅผ ๊ทธ๋Œ€๋กœ ์“ฐ๋Š” ์นดํƒ€์นด๋‚˜๊ฐ€ ๋งŽ์ง€๋งŒ ์žฅ์Œ์ด๋‚˜ ํ‘œ๊ธฐ๋ฒ• ๋“ฑ์˜ ์ฐธ๊ณ ๋ฅผ ์œ„ํ•ด ํ•จ๊ป˜ ์ •๋ฆฌ.



ไธŠๆ›ธใ [ใ†ใ‚ใŒใ] โ€“ ๋ฎ์–ด์“ฐ๊ธฐ(overwrite)
ๅ—ใ‘ๅ–ใ‚‹ [ใ†ใ‘ใจใ‚‹] โ€“ ๋ฐ›๋‹ค(receive)
ใ‚ขใ‚ฏใ‚ปใ‚น [ใ‚ใใ›ใ™] โ€“ ์•ก์„ธ์Šค(access)
ๅ€ค [ใ‚ใŸใ„] โ€“ ๊ฐ’(value)



ใ‚ณใƒณใƒใƒผใƒใƒณใƒˆ [ใ“ใ‚“ใฝใƒผใญใ‚“ใจ] โ€“ ์ปดํฌ๋„ŒํŠธ(component)
ใ‚ณใƒผใƒซใƒใƒƒใ‚ฏ [ใ“ใƒผใ‚‹ใƒใƒƒใ‚ฏ] โ€“ ์ฝœ๋ฐฑ(callback)
ๅˆ‡ใ‚Šๆ›ฟใˆ [ใใ‚Šใ‹ใˆ] โ€“ ์ „ํ™˜(convert)
็’ฐๅขƒ [ใ‹ใ‚“ใใ‚‡ใ†] โ€“ ํ™˜๊ฒฝ(environment)
็ต„ใฟๅˆใ‚ใ› [ใใฟใ‚ใ‚ใ›] โ€“ ์กฐํ•ฉ(combination)
้–ขๆ•ฐ [ใ‹ใ‚“ใ™ใ†] โ€“ ํ•จ์ˆ˜(function)



ๅฎŸ่ฃ… [ใ˜ใฃใใ†] โ€“ ๋งˆ์šดํŠธ(mount)
็–Ž็ตๅˆ [ใใ‘ใคใ”ใ†] โ€“ ์†Œ๊ฒฐํ•ฉ(loose coupling)
่จญ่จˆ [ใ›ใฃใ‘ใ„] โ€“ ์„ค๊ณ„(design)
ใ‚นใ‚ญใƒซ [ใ™ใใ‚‹] โ€“ ์Šคํ‚ฌ(skill)
ๅบงๆจ™ [ใ–ใฒใ‚‡ใ†] โ€“ ์ขŒํ‘œ(coordinate)



ใƒˆใƒชใ‚ฌใƒผ [ใจใ‚ŠใŒใƒผ] โ€“ ํŠธ๋ฆฌ๊ฑฐ(trigger)
ใƒ‡ใƒ—ใƒญใ‚ค [ใงใทใ‚ใ„] โ€“ ๋ฐฐํฌ(deploy)
ใƒ„ใƒผใƒซ [ใคใƒผใ‚‹] โ€“ ํˆด(tool)
ใƒ‡ใƒผใ‚ฟ [ใงใƒผใŸ] โ€“ ๋ฐ์ดํ„ฐ(data)
ใƒ†ใ‚ญใ‚นใƒˆ [ใฆใใ™ใจ] โ€“ ํ…์ŠคํŠธ(text)



่ช่จผ [ใซใ‚“ใ—ใ‚‡ใ†] โ€“ ์ธ์ฆ(identification)



ๆŒฏใ‚‹่ˆžใ„ [ใตใ‚‹ใพใ„] โ€“ ๋™์ž‘(behavior)
ใƒ˜ใƒƒใƒ€ใƒผ [ใธใฃใ ใƒผ] โ€“ ํ—ค๋”(header)
ใƒœใƒ‡ใ‚ฃ [ใผใงใƒ] โ€“ ๋ฐ”๋””(body)
ๅผ•ๆ•ฐ [ใฒใใ™ใ†] โ€“ ์ธ์ˆ˜(argument), ํ•จ์ˆ˜ ํ˜ธ์ถœ ์‹œ ์ „๋‹ฌ ๊ฐ’
ใƒ‘ใƒฉใƒกใƒผใ‚ฟ [ใฑใ‚‰ใ‚ใƒผใŸ] โ€“ ํŒŒ๋ผ๋ฏธํ„ฐ(parameter), ํ•จ์ˆ˜ ์ •์˜ ์‹œ ์ „๋‹ฌ ๊ฐ’
ใƒ•ใƒญใƒณใƒˆใ‚จใƒณใƒ‰ [ใตใ‚ใ‚“ใจใˆใ‚“ใฉ] โ€“ ํ”„๋ก ํŠธ์—”๋“œ(frontend)
ใƒ•ใƒญใƒผ [ใตใ‚ใƒผ] โ€“ ํ๋ฆ„, ํ”Œ๋กœ์šฐ(flow)



ใƒžใ‚คใ‚ฐใƒฌใƒผใ‚ทใƒงใƒณ [ใพใ„ใใ‚Œใƒผใ—ใ‚‡ใ‚“] โ€“ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜(migration)



ใ‚„ใ‚Šใจใ‚Š โ€“ ์ฃผ๊ณ  ๋ฐ›์Œ
ๅ‘ผใณๅ‡บใ™ [ใ‚ˆใณใ ใ™] โ€“ ํ˜ธ์ถœ(call)



ใƒซใƒผใƒ†ใ‚ฃใƒณใ‚ฐ [ใ‚‹ใƒผใฆใƒใ‚“ใ] โ€“ ๋ผ์šฐํŒ…(routing)
ใƒฌใƒณใƒ€ใƒชใƒณใ‚ฐ [ใ‚Œใ‚“ใ ใ‚Šใ‚“ใ] โ€“ ๋ Œ๋”๋ง(rendering)


interface, type ์ฐจ์ด์ ์ด ๋ญ˜๊นŒ(Typescript)

๋น„์Šทํ•˜์ง€๋งŒ ๋™์ผํ•˜์ง€ ์•Š์€ interface vs type

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์—์„œ ํƒ€์ž…์„ ์„ ์–ธํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” interface ๋˜๋Š” type ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

๊ฐ๊ฐ์˜ ์„ ์–ธ ๋ฐฉ์‹์€ ๋‹ค์Œ๊ณผ ๊ฐ™์œผ๋ฉฐ =์˜ ์œ ๋ฌด๋งŒ ๋‹ค๋ฆ…๋‹ˆ๋‹ค.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// interface
interface Team{
name : string
}
// type
type Team = {
name : string
}
// interface interface Team{ name : string } // type type Team = { name : string }
// interface
interface Team{
  name : string
}

// type
type Team = {
  name : string
}

๊ทธ๋ฆฌ๊ณ  ํƒ€์ž…์˜ ํ™•์žฅ ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// interface
interface City extends Team {
city : string
}
// type
type City = Team & {
city : string
}
// interface interface City extends Team { city : string } // type type City = Team & { city : string }
// interface
interface City extends Team {
  city : string
}

// type
type City = Team & {
  city : string
}

interface์™€ type์˜ ๊ฐ€์žฅ ํฐ ์ฐจ์ด์ ์€ ๋ฐ”๋กœ ์„ ์–ธ์  ํ™•์žฅ(Declaration Merging) ๊ธฐ๋Šฅ์ธ๋ฐ์š”.

์„ ์–ธ์  ํ™•์žฅ์ด๋ž€ ์ด๋ฏธ ์„ ์–ธ๋œ ํƒ€์ž… ์„ ์–ธ์— ํ•„๋“œ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

ํ•˜๋‚˜๋Š” ๊ฐ€๋Šฅํ•˜๊ณ  ํ•˜๋‚˜๋Š” ๊ฐ€๋Šฅํ•˜์ง€ ์•Š์€๋ฐ interface๋งŒ ๊ฐ€๋Šฅํ•œ ๊ฒƒ์ด ํŠน์ง•์ž…๋‹ˆ๋‹ค.

์‚ฌ์šฉ ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
interface Team {
name : string
}
interface Team {
manager : string
}
interface Team { name : string } interface Team { manager : string }
interface Team {
  name : string
}

interface Team {
  manager : string
}

์œ„์™€ ๊ฐ™์€ ๋ฐฉ๋ฒ•์œผ๋กœ ์ด๋ฏธ ์„ ์–ธ๋œ interface์— ๋‹ค์‹œ ํ•„๋“œ๋ฅผ ์„ ์–ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ type์„ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฐฉ๋ฒ•์œผ๋กœ ์‚ฌ์šฉํ•˜๋ฉด ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
type Team = {
name : string
}
// Error ๋ฐœ์ƒ -> 'Duplicate identifier 'Team'
type Team = {
manager : string
}
type Team = { name : string } // Error ๋ฐœ์ƒ -> 'Duplicate identifier 'Team' type Team = { manager : string }
type Team = {
  name : string
}


// Error ๋ฐœ์ƒ -> 'Duplicate identifier 'Team'
type Team = {
  manager : string
}

์ถ”๊ฐ€๋กœ type์€ ์›์‹œํ˜•(number, string ๋“ฑ) ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค๋ฅธ ์ด๋ฆ„์œผ๋กœ ์ง€์ •ํ•ด์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์ง€๋งŒ interface๋Š” ๋ถˆ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

์ž์„ธํ•œ ๋‚ด์šฉ์€ ๋‹ค์Œ ์ฝ”๋“œ์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
//type์œผ๋กœ ์›์‹œํ˜• ๋ฐ์ดํ„ฐ์˜ ์ด๋ฆ„์„ ์ง€์ •
type NameDataType = string;
const printName = (name : NameDataType ) => {
console.log(name);
}
//interface๋Š” ๋ถˆ๊ฐ€
interface NameType extends string {
}
//type์œผ๋กœ ์›์‹œํ˜• ๋ฐ์ดํ„ฐ์˜ ์ด๋ฆ„์„ ์ง€์ • type NameDataType = string; const printName = (name : NameDataType ) => { console.log(name); } //interface๋Š” ๋ถˆ๊ฐ€ interface NameType extends string { }
//type์œผ๋กœ ์›์‹œํ˜• ๋ฐ์ดํ„ฐ์˜ ์ด๋ฆ„์„ ์ง€์ •
type NameDataType = string;

const printName = (name : NameDataType ) => {
  console.log(name);
}

//interface๋Š” ๋ถˆ๊ฐ€
interface NameType extends string {
}

์ฐจ์ด์ ์„ ์‹ ๊ฒฝ์จ๋„ ๋˜์ง€ ์•Š์„ ์ƒํ™ฉ์ด๋ผ๋ฉด ์ทจํ–ฅ์— ๋”ฐ๋ผ ์„ ํƒํ•˜๋ฉด ๋˜์ง€๋งŒ ๊ธฐ๋ณธ์ ์œผ๋กœ๋Š” interface๋ฅผ ์“ฐ๋ฉด ํฐ ๋ฌธ์ œ๊ฐ€ ์—†๋‹ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

์ฐธ๊ณ  : typescript ๊ณต์‹ ๋ฌธ์„œ

๊ฒฝ๋ถ€์„  ์ œ๋กœ๋ฐ์ด ํƒ๋ฐฐ ๋ฐฉ๋ฌธ๊ธฐ, ์ฃผ์ฐจ ์ •๋ณด, ์‹ ๋ถ„์ฆ(๊ณ ์†๋ฒ„์Šค ๋‹น์ผ ํƒ๋ฐฐ)

๋ถ€์‚ฐ(์‚ฌ์ƒ) -> ์„œ์šธ(๊ฒฝ๋ถ€) ๋‹น์ผ ํƒ๋ฐฐ ์ด์šฉ๊ธฐ

์—„๋งˆ์˜ ์†๋ง›์„ ๊ณต์ˆ˜๋ฐ›๊ณ  ์‹ถ์„ ๋•Œ ์ฃผ๋กœ ๋– ์˜ค๋ฅด๋Š” ๊ฒƒ์€ ์Šคํ‹ฐ๋กœํผ ๋ฐ•์Šค + ์šฐ์ฒด๊ตญ ํƒ๋ฐฐ์ž…๋‹ˆ๋‹ค.

ํƒ€์ง€ ์‚ด์ด๋ฅผ ํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์˜ ๊ฒฝํ—˜์€ ๋น„์Šทํ• ํ…๋ฐ์š”.

์Œ์‹๋ฌผ์ด ๋ถ€ํŒจ๋˜๊ธฐ ์‰ฌ์šด ์—ฌ๋ฆ„์ฒ ์ด๋‚˜ ๊ธ‰ํ•œ ๋ฌผ๊ฑด์ด ์žˆ์„ ๋•Œ๋Š” ๋‹น์ผ์— ๋ฐ›์„ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฐ”๋กœ ๊ณ ์†๋ฒ„์Šค ๋‹น์ผ ํƒ๋ฐฐ์ธ๋ฐ์š”.

์ผ๋ฐ˜ ์—ฌ๊ฐ์˜ ๋‚จ๋Š” ํ™”๋ฌผ์นธ์„ ์ด์šฉํ•ด ๋ฌผ๊ฑด์„ ์ถœ๋ฐœ์ง€์—์„œ ๋„์ฐฉ์ง€๋กœ ๋ณด๋‚ด๋ฏ€๋กœ ์˜ˆ๋งค ์‚ฌ์ดํŠธ์—์„œ ์ผ๋ฐ˜ ์—ฌ๊ฐ์˜ ์Šค์ผ€์ค„์„ ํ™•์ธํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

์ œ๊ฐ€ ์ด๋ฒˆ์— ๋ฐ›์€ ํƒ๋ฐฐ๋Š” ๋ƒ‰๋™ ์‹ํ’ˆ 1๋ฐ•์Šค๋กœ ๋ฌด๊ฒŒ๋Š” ์•ฝ 10kg, ํƒ๋ฐฐ ๋น„์šฉ์€ 10,000์›์ž…๋‹ˆ๋‹ค.

์™€์ดํ”„๊ฐ€ ์ข‹์•„ํ•˜๋Š” ์ œ์œก๋ณถ์Œ๊ณผ ๊ตญ์ด ๊ฐ€๋“.

๊ทธ๋ฆฌ๊ณ  ์ฐพ์œผ๋Ÿฌ ๊ฐˆ ์ƒํ™ฉ์กฐ์ฐจ ์—ฌ์˜์น˜ ์•Š์€ ๊ฒฝ์šฐ ํ€ต์œผ๋กœ ์—ฐ๊ณ„๋„ ๋˜์–ด ์žˆ๋Š” ๊ฒƒ ๊ฐ™์•„์š”!

1. ํƒ๋ฐฐ ์ฐพ์œผ๋Ÿฌ ๊ฐ€๊ธฐ

๋ฐœ์‹ ์ž์—๊ฒŒ ์ˆ˜ํ•˜๋ฌผ ๋ฒˆํ˜ธ์™€ ๋„์ฐฉ ์œ„์น˜, ๋„์ฐฉ ์‹œ๊ฐ„์„ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.

์ €๋Š” ์‹ ์„ธ๊ณ„ ๋ฐฑํ™”์ ์— ์ฃผ์ฐจํ•˜๊ณ  ๊ณ ์†ํ„ฐ๋ฏธ๋„(๊ฒฝ๋ถ€์„ )์œผ๋กœ ๋ฌดํ„ฑ๋Œ€๊ณ  ์ฐพ์•„๊ฐ”์œผ๋‚˜

๋„ค๋น„์— โ€˜์ œ๋กœ๋ฐ์ดํƒ๋ฐฐโ€™๋ฅผ ๊ฒ€์ƒ‰ํ•˜๋ฉด ์ฃผ์ฐจ์žฅ๊นŒ์ง€ ๋ฐ”๋กœ ์•ˆ๋‚ดํ•ด์ค๋‹ˆ๋‹ค.

์ง€ํ•˜์ฒ ์„ ํƒ€๊ณ  ๊ฐ„๋‹ค๋ฉด ๊ฒฝ๋ถ€์„  ๋ฒ„์Šค ๋„์ฐฉ์ง€์ด์ž ์Šน๊ฐ๋“ค์ด ๋‚ด๋ฆฌ๋Š” ๊ณณ๊นŒ์ง€ ์ฐพ์•„๊ฐ‘๋‹ˆ๋‹ค.

๊ฝค๋‚˜ ๊ฑธ์–ด์•ผ ํ•˜๋Š”๋ฐ์š”. ๋๊นŒ์ง€ ๊ฑธ์–ด๊ฐ€๋ฉด ๋ฐ”๋กœ ์˜†์— ๊ฑด๋ฌผ์ด ๋ฉ๊ทธ๋Ÿฌ๋‹ˆ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋ ‡๊ฒŒ ์ƒ๊ธด ๊ฑด๋ฌผ์ด๊ตฌ์š”.

์ฐจ๋Ÿ‰์„ ์ด์šฉํ•ด ๋ฐฉ๋ฌธํ•œ๋‹ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์•„์š”.

์ž…๊ตฌ์ชฝ ๋„๋กœ๋Š” ํ•ญ์ƒ ๋ณต์žกํ•˜๋ฏ€๋กœ ๋ฒ„์Šค์ •๋ฅ˜์žฅ์„ ์ง€๋‚˜๋ฉด ๋ฐ”๋กœ ์ œ์ผ ์˜ค๋ฅธ์ชฝ ์ฐจ์„ ์œผ๋กœ ๋ถ™์–ด์•ผ ํŽธํ•˜๊ฒŒ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์–ด์š”.

์ฃผ์ฐจ๋น„์˜ ๊ฒฝ์šฐ ์ตœ์ดˆ 15๋ถ„ ๋ฌด๋ฃŒ์ด๋ฉฐ 30๋ถ„๋‹น 3000์›์ด๋ผ๊ณ  ํ•˜๋„ค์š”(22๋…„ 8์›” ๊ธฐ์ค€).

์ ‘์ˆ˜ ์„ผํ„ฐ ๋‚ด๋ถ€์— ์ฃผ์ฐจ๋น„ ํ• ์ธ์„ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ปดํ“จํ„ฐ๊ฐ€ ์žˆ๊ณ  ์…€ํ”„๋กœ ์ฐจ๋Ÿ‰ ๋“ฑ๋ก ์‹œ 10๋ถ„ ์ถ”๊ฐ€ ๋ฌด๋ฃŒ ์ด์šฉ์ด ๊ฐ€๋Šฅํ–ˆ์–ด์š”.

์ด๋ ‡๊ฒŒ ์ƒ๊ธด ์ปดํ“จํ„ฐ์—์š”.

2. ํƒ๋ฐฐ ์ˆ˜๋ นํ•˜๊ธฐ

์šฉ๊ฑด์— ๋”ฐ๋ผ โ€˜๋„์ฐฉ ์ ‘์ˆ˜โ€™ ๋˜๋Š” โ€˜๋ฐœ์†ก ์ ‘์ˆ˜โ€™ ์‹ ์ฒญ์„œ๋ฅผ ์ž‘์„ฑํ•ด์•ผ ํ•˜๊ตฌ์š”.


์—ฌ๊ธฐ๋Š” ๋ฐœ์†ก์„ ์œ„ํ•œ ์ฐฝ๊ตฌ


์—ฌ๊ธฐ๋Š” ์ˆ˜๋ น์„ ์œ„ํ•œ ์ฐฝ๊ตฌ


์ด๋ ‡๊ฒŒ ์ ‘์ˆ˜์ฆ์„ ์ œ์ถœํ•˜๊ณ  ์‹ ๋ถ„์ฆ์„ ํ™•์ธํ•˜๋ฉด โ€˜๊ด€๊ณ„์ž ์™ธ ์ถœ์ž…๊ธˆ์ง€โ€™ ๋ฌธ์œผ๋กœ ๋“ค์–ด๊ฐ€์„œ ๋ฌผ๊ฑด์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋Š” ์ˆ˜๋ น์ฆ์„ ๊ฑด๋„ค์ค๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ ๊ณ ์†๋„๋กœ ๊ตํ†ต ์ƒํ™ฉ์— ๋”ฐ๋ผ ๋„์ฐฉ์ด ๋Šฆ์–ด์ง€๋Š” ๊ฒฝ์šฐ ์ €์ฒ˜๋Ÿผ ์‚ฌ์ง„ ์ฐ๊ณ  ๋†€๋ฉด์„œ ๊ธฐ๋‹ค๋ ค์•ผ ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹คโ€ฆ.(์˜ค๋Š˜์˜ ํฌ์ŠคํŒ…์ด ํƒ„์ƒํ•˜๊ฒŒ ๋œ ๋ฐฐ๊ฒฝ..)

์ €๋Š” ์นผ ๊ฐ™์€ ์‚ฌ๋žŒ์ด๋ผ ๋„์ฐฉ์‹œ๊ฐ„์— ๋”ฑ ๋งž์ถฐ๊ฐ”๋”๋‹ˆ ์กฐ๊ธˆ ๊ธฐ๋‹ค๋ ธ๋„ค์š”..

๋ฌผ๊ฑด์ด ๋„์ฐฉํ•˜๋ฉด ์•ˆ์ชฝ์— ์ž˜ ๋ณด๊ด€ํ•˜๊ณ  ์žˆ์œผ๋‹ˆ ๋„ˆ๋ฌด ์„œ๋‘๋ฅด๊ฑฐ๋‚˜ ์‹œ๊ฐ„์— ๋”ฑ ๋งž์ถฐ์„œ ๊ฐˆ ํ•„์š”๋Š” ์—†์„ ๊ฒƒ ๊ฐ™์•„์š”.

๋ฌด์‚ฌ ์ˆ˜๋ น ์™„๋ฃŒ์˜ ๊ธฐ์จ.

3. ๊ฐ„๋žต ์‚ฌํ•ญ ์ •๋ฆฌ

  • ์ค€๋น„๋ฌผ : ์ˆ˜ํ•˜๋ฌผ ๋ฒˆํ˜ธ, ์ˆ˜๋ น์ธ ์‹ ๋ถ„์ฆ
  • ์ฃผ์ฐจ ์ด์šฉ๋ฃŒ : ์ดˆ๊ธฐ 15๋ถ„ ๋ฌด๋ฃŒ(๋“ฑ๋ก ์‹œ 10๋ถ„ ์ถ”๊ฐ€ ๋ฌด๋ฃŒ), 30๋ถ„๋‹น 3,000์›(22๋…„8์›”)
  • ์ˆ˜๋ น ์†Œ์š” ์‹œ๊ฐ„ : ๋ฒ„์Šค ๋„์ฐฉ ํ›„ ์•ฝ 10๋ถ„ ์ด๋‚ด
  • ์œ„์น˜ : ์„œ์šธํŠน๋ณ„์‹œ ์„œ์ดˆ๊ตฌ ์‹ ๋ฐ˜ํฌ๋กœ 194 ์ œ๋กœ๋ฐ์ดํƒ๋ฐฐ ํ†ตํ•ฉ์„ผํ„ฐ
  • ๋„ค๋น„ ๊ฒ€์ƒ‰ : ์ œ๋กœ๋ฐ์ดํƒ๋ฐฐ
  • ํ™ˆํŽ˜์ด์ง€ : zerodayexpress.com/

์ด์ „์— ๋‹ค๋ฅธ ํ„ฐ๋ฏธ๋„์—์„œ๋Š” ๋ฒ„์Šค๊ฐ€ ๋“ค์–ด์˜ค๋Š” ์‹œ๊ฐ„์— ๋งž์ถฐ ๋„์ฐฉํ•˜๋Š” ๋ฒ„์Šค๋กœ ์ฐพ์•„๊ฐ€์„œ ๊ธฐ์‚ฌ ์•„์ €์”จ์—๊ฒŒ ์ œ ๋ฌผ๊ฑด ์ฃผ์„ธ์š”~~ ํ–ˆ๋˜ ๊ฒƒ ๊ฐ™์€๋ฐ ๊ฝค ๋งŽ์ด ํŽธ๋ฆฌํ•ด์ง„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋ฐœ์ „ํ•˜๋Š” ์„ธ์ƒ!

๋‰ด๋ฐœ๋ž€์Šค 2002, ML2002RC ๊ตฌ์ž…๊ธฐ(Kream ํ›„๊ธฐ)

ML2002RC, NBP7CB123G, Gray

๋‰ด๋ฐœ๋ž€์Šค 992์˜ ํ•˜์œ„ ํ˜ธํ™˜(?)์œผ๋กœ ๋ถˆ๋ฆฌ๋Š” 2002 ๊ทธ๋ ˆ์ด ๊ตฌ์ž… ๊ธฐ๋ก.

์–ผ๋งˆ ์ „ ํฌ๋ฆผ๊ณผ ๋ฌด์‹ ์‚ฌ์˜ ์ž์กด์‹ฌ ์‚ฌ๊ฑด์„ ํ†ตํ•ด ํฌ๋ฆผ์— ๋Œ€ํ•ด ์•Œ๊ฒŒ ๋˜์—ˆ๊ณ  ์ด๋ฒˆ์— ์ฒ˜์Œ์œผ๋กœ ์ œํ’ˆ์„ ๊ตฌ๋งค๋ฅผ ํ•˜๋Š” ๊ณ„๊ธฐ๊ฐ€ ๋˜์—ˆ๋‹ค.

ํŠน๋ณ„ ์ฃผ๊ฐ„์ด๋ผ๊ณ  ๋‚˜์ดํ‚ค ์˜จ๋ผ์ธ ์‚ฌ์ดํŠธ์—์„œ ํ‰์†Œ ๊ตฌํ•˜๊ธฐ ํž˜๋“  ๋ฉํฌ ์ œํ’ˆ ๋“ฑ์ด ํ’€๋ฆฌ๊ธธ๋ž˜ ๊ตฌ๊ฒฝํ•ด๋ณด๋‹ˆ ์ œํ’ˆ๋งˆ๋‹ค ํŠน์ • ์‚ฌ์ด์ฆˆ๋งŒ ํ’ˆ์ ˆ์ธ ์ƒํƒœ์˜€๋‹ค.

์–ด์ฐŒ์–ด์ฐŒ ์ฐพ๋‹ค๋ณด๋‹ˆ ๊ฐ™์€ ์‹ ๋ฐœ์ด๋ผ๋„ ์‚ฌ์ด์ฆˆ๋ณ„๋กœ ๊ธˆ์•ก์ด ์ฒœ์ฐจ๋งŒ๋ณ„์ด์—ˆ๊ณ  ํฌ๋ฆผ์—์„œ ์ •๊ฐ€๋ณด๋‹ค ๋น„์‹ธ๊ฒŒ ํŒ”๋ฆฌ๋Š” ์‚ฌ์ด์ฆˆ๊ฐ€ ๊ฑฐ์˜ ํ’ˆ์ ˆ์ธ ์ƒํƒœ์˜€๋‹ค.

๋ฆฌ์…€๋Ÿฌ ์„ ์ƒ๋‹˜๋“ค์ด ๋จผ์ € ๊ตฌ๋งคํ•œ ๊ฒƒ ๊ฐ™์€๋ฐ ๋‚˜ ๊ฐ™์€ ๋А๋ฆผ๋ณด๋Š” ํฌ๋ฆผ์—์„œ ๊ตฌ๋งคํ•˜๋Š” ๊ฒŒ ๋ง˜ ํŽธํ•˜์ง€ ์‹ถ๋‹ค.

ํŒ๋งค ์˜คํ”ˆ ์‹œ๊ฐ„์— ๋‚˜๋Š” ์„ธ์ƒ ๋ชจ๋ฅด๊ณ  ์ง‘์—์„œ ๋ฉธ์น˜ ์œก์ˆ˜๋‚˜ ์šฐ๋ฆฌ๊ณ  ์žˆ์—ˆ๊ฒ ์ง€..

ํฌ๋ฆผ ์ ‘์† ๊ณ„๊ธฐ๋Š” ๋‚˜์ดํ‚ค์˜€์ง€๋งŒ ๊ตฌ๋งค๋Š” ๋‰ด๋ฐœ๋ž€์Šค๋กœ ์ด๋ฃจ์–ด์ง€๋Š” ์˜์‹์˜ ํ๋ฆ„.

๊ตฌ๋งค ํ›„๊ธฐ์ด๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์ง„๊ณผ ํฌ๋ฆผ์˜ ์„œ๋น„์Šค ๊ฒฝํ—˜์— ๋Œ€ํ•ด ์˜ฌ๋ฆฌ๊ฒ ๋‹ค.

์‚ฌ์ง„์€ ๋ถ„๋ฆฌ์ˆ˜๊ฑฐ ์ง์ „์˜ ์‹ ๋ฐœ์ฒ˜๋Ÿผ ๋‚˜์™”์ง€๋งŒ ์˜คํ•ด์ž…๋‹ˆ๋‹ค..

๊ฐœ์ธ์ ์œผ๋กœ ๋„ˆ๋ฌด ๋ง˜์— ๋“œ๋Š” ๋””์ž์ธ๊ณผ ์ƒ‰๊น”.

์•„์ฃผ ์˜ค๋ž˜์ „๋ถ€ํ„ฐ ์ด ๋””์ž์ธ์˜ ์‹ ๋ฐœ์„ ๋ด์™”์ง€๋งŒ ๊ฐœ์ธ์ ์œผ๋กœ๋Š” ์งˆ๋ฆฌ์ง€ ์•Š์•„ ์ข‹๋‹ค.

์‹ ๋‚˜์„œ ๋ด‰์ธ ํ•ด์ œํ•˜๊ณ  ๋‚˜์„œ์•ผ ์‚ฌ์ง„๋“ค์„ ์ฐ์—ˆ์ง€๋งŒ ์• ํ”Œ ์ œํ’ˆ๊ณผ ๋น„์Šทํ•˜๊ฒŒ ์‹ ๋ฐœ ๋ฐ•์Šค๊ฐ€ ๋น„๋‹๋กœ ๋ฐ€๋ด‰์ด ๋˜์–ด ์žˆ๊ณ  ์‹ ๋ฐœ๋งˆ๋‹ค ๊ฒ€์ˆ˜ ์™„๋ฃŒ ํƒ๊ณผ ํ™•์ธ์„œ, ๊ทธ๋ฆฌ๊ณ  ์Šคํ‹ฐ์ปค๊ฐ€ ๋“ค์–ด์žˆ๋‹ค.

๋†€๋ž€ ์ ์€ ๋ฐฐ์†ก ์†๋„์ธ๋ฐ ํ† ์š”์ผ ์˜คํ›„์— ์ฃผ๋ฌธํ–ˆ์œผ๋‚˜ ์›”์š”์ผ์— ๋„์ฐฉํ•˜๋Š” ์Šคํ”ผ๋””ํ•จ!

์†”์ฐํžˆ ํ† ์š”์ผ ์˜คํ›„์— ์ฃผ๋ฌธํ•˜๋ฉด์„œ โ€œ์ง€๊ธˆ ์ฃผ๋ฌธ ์‹œ ์›”์š”์ผ ๋„์ฐฉโ€ ์ด๋ผ๊ณ  ์จ์žˆ๊ธธ๋ž˜ ์†์œผ๋กœ ๋ปฅ์น˜์‹œ๋„ค ๋ผ๊ณ  ์ƒ๊ฐํ–ˆ๋‹คโ€ฆ

ํฌ๋ฆผ์—์„œ ๋ฐฐ์†ก๋„ ํ•จ๊ป˜ ๊ด€๋ฆฌํ•˜๊ณ  ์žˆ๋Š”์ง€ ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ ์ด๋Ÿฌ๋ฉด ํฌ๋ฆผ์—์„œ ์•ˆ ์‚ด ์ด์œ ๊ฐ€ ์—†์ž–์•„?๋ผ๋Š” ๋А๋‚Œ์ด ๋“ค ์ •๋„๋กœ ๋น ๋ฅด๊ณ  ๊ตฌ๋งค ํ›„๊ธฐ๋„ ๋งŒ์กฑ์Šค๋Ÿฌ์› ๋‹ค(๊ด‘๊ณ ๋น„ ๋ฐ›์€ ๊ฑฐ ์•„๋‹ˆ์ง€๋งŒ ๋ฐ›๊ณ  ์‹ถ์–ด์š”..).

ํŒ๋งค ๊ฐ€๊ฒฉ์—์„œ 3์ฒœ์› ํ• ์ธ์€ ๋ฐ•์Šค ์ƒํƒœ ๋ถˆ๋Ÿ‰์ด ์ด์œ .

์–ด์ฐจํ”ผ ๋ฐ•์Šค๋Š” ๋‚ด์ผ ๋ถ„๋ฆฌ ์ˆ˜๊ฑฐํ•จ์— ์žˆ์„ ํ…Œ๋‹ˆ ๊ทธ๊ฒƒ๋„ ๋งŒ์กฑ!

๋‚จ์ž์ง€๋งŒ ๋ฐœ์ด ๋งˆ์ดํฌ๋กœ ์‚ฌ์ด์ฆˆ๋ผ 245.

๋ฐœ ๋ณผ์ด ๋„“์€ ํŽธ์ด๋ผ ์‚ฌ์ด์ฆˆ ๋”ฑ ๋งž์ถฐ์„œ ์‹ ์œผ๋ฉด ์‹ ๋ฐœ์ด ์กฐ๊ธˆ ๋šฑ๋šฑํ•ด์ง..ใ… ใ… 

๋‰ด๋ฐœ๋ž€์Šค 530๋ณด๋‹ค ์กฐ๊ธˆ ๋” ๋ฐœ ๋ณผ์ด ์ข์€ ๋А๋‚Œ์ด ๋“ค์–ด์š”.

์‹ ๋ฐœ๋ˆ์„ ํฐ์ƒ‰์œผ๋กœ ๊ต์ฒดํ•˜๋ฉด ๋” ์‚ฐ๋œปํ•  ๊ฒƒ ๊ฐ™์•„ ์ค€๋น„์ค‘!

[BOOK] ํด๋ฆฐ์ฝ”๋“œ(Clean Code)

์‚ฌ๋žŒ๋‹ต๊ฒŒ ์‚ด๊ธฐ ์œ„ํ•œ ํ•œ ๋‹ฌ ํ•œ ๊ถŒ(2022/06)

๊ถ๊ทน์ ์œผ๋กœ ์ฝ”๋“œ๋Š” ์š”๊ตฌ์‚ฌํ•ญ์„ ์ƒ์„ธํžˆ ํ‘œํ˜„ํ•˜๋Š” ์–ธ์–ด๋‹ค.

ํ•„์š”์— ๋”ฐ๋ผ ์š”๊ตฌ ์‚ฌํ•ญ์— ๋” ๊ฐ€๊นŒ์šด ์–ธ์–ด๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ณ  ์ •ํ˜• ๊ตฌ์กฐ๋ฅผ ๋ฝ‘์•„๋‚ด๋Š” ๋„๊ตฌ๋ฅผ ๋งŒ๋“ค ์ˆ˜๋„ ์žˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ์ •๋ฐ€ํ•œ ํ‘œํ˜„์€ ํ•ญ์ƒ ํ•„์š”ํ•˜๊ณ  ์ด ํ•„์š”์„ฑ์€ ์—†์•จ ๋ฐฉ๋ฒ•์ด ์—†์œผ๋ฏ€๋กœ ์ฝ”๋“œ๋„ ํ•ญ์ƒ ์กด์žฌํ•  ์ˆ˜ ๋ฐ–์— ์—†๋‹ค.

์ฝ”๋“œ ์ž‘์„ฑ ์‹œ ์‹œ๊ฐ„์„ ๋“ค์—ฌ ๊นจ๋—ํ•œ ์ฝ”๋“œ๋ฅผ ๋งŒ๋“œ๋Š” ๋…ธ๋ ฅ์ด ๊ฒฐ๊ตญ์—๋Š” ๋น„์šฉ ์ ˆ๊ฐ ๋ฟ ์•„๋‹ˆ๋ผ ์ „๋ฌธ๊ฐ€๋กœ์„œ ์‚ด์•„๋‚จ๋Š” ๊ธธ์ด๋ผ๊ณ  ํ•œ๋‹ค.

์ผ์ •์— ์ซ“๊ธฐ๋”๋ผ๋„ ๋Œ€๋‹ค์ˆ˜์˜ ๊ด€๋ฆฌ์ž๋Š” ์ข‹์€ ์ฝ”๋“œ๋ฅผ ์›ํ•˜๋ฉฐ ์ข‹์€ ์ฝ”๋“œ๋ฅผ ์‚ฌ์ˆ˜ํ•˜๋Š” ์ผ์€ ๋ฐ”๋กœ ํ”„๋กœ๊ทธ๋ž˜๋จธ์˜ ์ฑ…์ž„์ด๋‹ค. 

์ •ํ•ด์ง„ ๊ธฐํ•œ์„ ๋ฐ”๊พธ๋Š” ์œ ์ผํ•œ ๋ฐฉ๋ฒ•์€ ์–ธ์ œ๋‚˜ ์ฝ”๋“œ๋ฅผ ๊นจ๋—ํ•˜๊ฒŒ ์œ ์ง€ํ•˜๋Š” ์Šต๊ด€์ด๊ณ  ๊นจ๋—ํ•œ ์ฝ”๋“œ๋Š” ๋ณด๊ธฐ์— ์ฆ๊ฑฐ์šด ์ฝ”๋“œ๋‹ค.

๊นจ๋—ํ•œ ์ฝ”๋“œ๋Š” ๋ณด๋Š” ์‚ฌ๋žŒ์—๊ฒŒ ์ฆ๊ฑฐ์›€์„ ์„ ์‚ฌํ•ด์•ผ ํ•˜๊ณ  ์„ธ์„ธํ•œ ์‚ฌํ•ญ๊นŒ์ง€ ๊ผผ๊ผผํ•˜๊ฒŒ ์ฒ˜๋ฆฌํ•˜๋Š” ์ฝ”๋“œ๋‹ค.

๊นจ๋—ํ•œ ์ฝ”๋“œ๋Š” ํ•œ ๊ฐ€์ง€๋ฅผ ์ž˜ํ•œ๋‹ค.

๋‚˜์œ ์ฝ”๋“œ๋Š” ๋„ˆ๋ฌด ๋งŽ์€ ์ผ์„ ํ•˜๋ ค๊ณ  ์• ์“ฐ๋‹ค๊ฐ€ ์˜๋„๊ฐ€ ๋’ค์„ž์ด๊ณ  ๋ชฉ์ ์ด ํ๋ ค์ง€๊ฒŒ ๋œ๋‹ค.

๊นจ๋—ํ•œ ์ฝ”๋“œ๋Š” ๋‹จ์ˆœํ•˜๊ณ  ์ง์ ‘์ ์ด๋ฉฐ ์ž˜ ์“ด ๋ฌธ์žฅ์ฒ˜๋Ÿผ ์ฝํžˆ๊ณ  ์„ค๊ณ„์ž์˜ ์˜๋„๋ฅผ ์ˆจ๊ธฐ์ง€ ์•Š๋Š”๋‹ค.

ํฌ๊ธฐ๊ฐ€ ํฐ ์ฝ”๋“œ๋ณด๋‹ค๋Š” ์ž‘์€ ์ฝ”๋“œ๊ฐ€ ๊ฐ€์น˜์žˆ์œผ๋ฉฐ ์ฝ”๋“œ๋Š” ์ž‘์„์ˆ˜๋ก ์ข‹๋‹ค.

๊นจ๋—ํ•œ ์ฝ”๋“œ๋Š” ์ฃผ์˜๊นŠ๊ฒŒ ์ž‘์„ฑํ•œ ์ฝ”๋“œ๋‹ค.

์‹œ๊ฐ„์„ ๋“ค์—ฌ ๊น”๋”ํ•˜๊ณ  ๋‹จ์ •ํ•˜๊ฒŒ ์ •๋ฆฌํ•œ ์ฝ”๋“œ๋‹ค.

์„ธ์„ธํ•œ ์‚ฌํ•ญ๊นŒ์ง€ ๊ผผ๊ผผํ•˜๊ฒŒ ์‹ ๊ฒฝ์“ด ์ฝ”๋“œ๋‹ค.

ํ”„๋กœ๊ทธ๋žจ์„ ๋‹จ์ˆœํ•˜๊ฒŒ ๋ณด์ด๋„๋ก ๋งŒ๋“œ๋Š” ์—ด์‡ ๋Š” ์–ธ์–ด๊ฐ€ ์•„๋‹ˆ๋ผ ํ”„๋กœ๊ทธ๋ž˜๋จธ๋‹ค.

๋ณ€์ˆ˜, ํ•จ์ˆ˜, ํด๋ž˜์Šค ๋„ค์ด๋ฐ ์‹œ ์˜๋ฏธ์žˆ๋Š” ์ด๋ฆ„์„ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค.

์˜๋„๋ฅผ ๋ถ„๋ช…ํžˆ ํ•ด์•ผ ํ•˜๊ณ  ์ข‹์€ ์ด๋ฆ„์„ ์ง€์œผ๋ ค๋ฉด ์‹œ๊ฐ„์ด ๊ฑธ๋ฆฌ์ง€๋งŒ ์ตœ์ข…์ ์œผ๋กœ๋Š” ์ด ์ด๋ฆ„์„ ํ†ตํ•ด ์ ˆ์•ฝํ•˜๋Š” ์‹œ๊ฐ„์ด ๋” ๋งŽ๋‹ค.

๋ณ€์ˆ˜, ํ•จ์ˆ˜, ํด๋ž˜์Šค ์ด๋ฆ„์€ ์กด์žฌ ์ด์œ ์™€ ์ˆ˜ํ–‰ ๊ธฐ๋Šฅ, ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์„ ๋‚˜ํƒ€๋‚ด๋„๋ก ํ•˜์—ฌ ์ฃผ์„์ด ํ•„์š”๊ฐ€ ์—†๋„๋ก ํ•œ๋‹ค.

๋‹น์—ฐํ•˜๊ฒŒ๋„ ๊ทธ๋ฆ‡๋˜๊ฑฐ๋‚˜ ์˜คํ•ด๋ฅผ ๋ถˆ๋Ÿฌ์ผ์œผํ‚ฌ ์ˆ˜ ์žˆ๋Š” ์ด๋ฆ„์€ ํ”ผํ•œ๋‹ค.

์˜ˆ๋ฅผ ๋“ค๋ฉด ์‹ค์ œ๋Š” List๊ฐ€ ์•„๋‹ˆ์ง€๋งŒ itemList๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ O(๋Œ€๋ฌธ์ž o), l(์†Œ๋ฌธ์ž L)๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ—ท๊ฐˆ๋ฆฌ๊ฒŒ ๋งŒ๋“ค๊ฑฐ๋‚˜ prevGetNameAndAgeData, prevGetNameAndSexData ๋“ฑ๊ณผ ๊ฐ™์ด ํ•œ ๋ˆˆ์— ๊ตฌ๋ถ„ํ•˜๊ธฐ ์–ด๋ ค์šด ์ด๋ฆ„์ด๋‹ค.

ํ•ญ์ƒ ์˜๋ฏธ๋ฅผ ๊ฐ–๊ณ  ๊ตฌ๋ถ„์„ ํ•ด์•ผ ํ•˜๋ฉฐ ์ปดํŒŒ์ผ๋Ÿฌ๋‚˜ ์ธํ„ฐํ”„๋ฆฌํ„ฐ๋งŒ ํ†ต๊ณผํ•˜๋ ค๋Š” ์˜๋„๋กœ ์ฝ”๋“œ๋ฅผ ๊ตฌํ˜„ํ•˜๋ฉด ์•ˆ๋œ๋‹ค.

์—ฐ์†๋œ ์ˆซ์ž๋ฅผ ๋ง๋ถ™์ด๊ฑฐ๋‚˜ ์˜๋„๋ฅผ ๋“œ๋Ÿฌ๋‚ด์ง€ ์•Š๋Š” ์ด๋ฆ„์€ ์ž‘์„ฑํ•˜์ง€ ๋ง๊ณ  ์ฝ๋Š” ์‚ฌ๋žŒ์ด ์ฐจ์ด๋ฅผ ์•Œ๋„๋ก ์ง€์–ด์•ผ ์ข‹์€ ์ด๋ฆ„์ด๋‹ค.

์˜๋ฏธ ์ด์™ธ์—๋„ ์‚ฌ์šฉ์ž๊ฐ€ ๋ฐœ์Œํ•˜๊ฑฐ๋‚˜ ๊ฒ€์ƒ‰ํ•˜๊ธฐ ์‰ฌ์šด ์ด๋ฆ„์„ ์‚ฌ์šฉํ•œ๋‹ค.

์˜ˆ๋ฅผ ๋“ค๋ฉด GenYrDt๋ณด๋‹ค GenerateYearDate๊ฐ€ ํ›จ์”ฌ ๋‚ซ๋‹ค.

์ด๋ฆ„ ๊ธธ์ด๋Š” ๋ฒ”์œ„ ํฌ๊ธฐ์— ๋น„๋ก€ํ•ด์•ผ ํ•œ๋‹ค.

์™œ๋ƒํ•˜๋ฉด ๋‚˜์ค‘์— ์ฝ”๋“œ๊ฐ€ ๋ณต์žกํ•ด์กŒ์„ ๋•Œ ab์™€ ๊ฐ™์€ ๋‹จ์ˆœํ•œ ์ด๋ฆ„์€ ๊ฒ€์ƒ‰์ด ๊ฑฐ์˜ ๋ถˆ๊ฐ€๋Šฅํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

ํ•ญ์ƒ ๋‚จ๋“ค์ด ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๊ฒŒ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•œ๋‹ค.

์ „๋ฌธ๊ฐ€๋ผ๊ณ  ๋ถˆ๋ฆฌ๋Š” ํ”„๋กœ๊ทธ๋ž˜๋จธ๋Š” ๋ช…๋ฃŒํ•จ์„ ์ตœ์šฐ์„ ์œผ๋กœ ํ•˜์—ฌ ํ•ญ์ƒ ๋‚จ๋“ค์ด ์ดํ•ดํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•œ๋‹ค.

ํด๋ž˜์Šค์™€ ๊ฐ์ฒด ๋ช…๋ช… ์‹œ์—๋Š” ๋ช…์‚ฌ, ๋ช…์‚ฌ๊ตฌ๊ฐ€ ์ ํ•ฉํ•˜๋ฉฐ ๋™์‚ฌ๋Š” ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ๋ฉ”์„œ๋“œ๋Š” ๋™์‚ฌ๋‚˜ ๋™์‚ฌ๊ตฌ๊ฐ€ ์ ํ•ฉํ•˜๋‹ค.

๋ช…๋ช… ์‹œ ๊ธฐ๋ฐœํ•˜๊ฑฐ๋‚˜ ๋ณดํŽธ์ ์œผ๋กœ ์ดํ•ดํ•˜๊ธฐ ์–ด๋ ค์šด ์ด๋ฆ„์€ ํ”ผํ•˜๋Š” ๊ฒŒ ์ข‹์œผ๋ฉฐ ์˜ˆ๋ฅผ ๋“ค์–ด ํŠน์ • ๋ฌธํ™”๋ฅผ ์ดํ•ดํ•ด์•ผ๋งŒ ์•Œ ์ˆ˜ ์žˆ๋Š” ๋‹จ์–ด๋‚˜ ๊ตฌ์–ด์ฒด, ์†์–ด ๋“ฑ์ด ์žˆ๋‹ค.

ํ•œ ๊ฐœ๋…์—์„œ๋Š” ํ•˜๋‚˜์˜ ์ด๋ฆ„๋งŒ ์„ ํƒํ•˜๊ณ  get, retrieve, bring, fetch, take ๋“ฑ ๊ฐ™์€ ๊ธฐ๋Šฅ์˜ ๋ฉ”์„œ๋“œ๋Š” ์ด๋ฆ„์„ ํ†ต์ผํ•œ๋‹ค. 

์ด๋ฆ„์ด ๋‹ค๋ฅด๋ฉด ํด๋ž˜์Šค์™€ ํƒ€์ž…๋„ ๋‹ค๋ฅด๊ฒŒ ์—ฌ๊ธฐ๊ธฐ ์‰ฌ์šฐ๋ฏ€๋กœ ์ผ๊ด€์„ฑ์žˆ๋Š” ์–ดํœ˜๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์ผ๊ด€์„ฑ ์†์—์„œ ๋งฅ๋ฝ์„ ์•Œ ์ˆ˜ ์žˆ๋„๋ก ํ•ด์•ผ ํ•œ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด ๋‘ ๊ฐ’์„ ๋”ํ•˜๋Š” ๋ฉ”์„œ๋“œ๊ฐ€ add๋ผ๋ฉด ํ•˜๋‚˜์˜ ๊ฐ’ ๋งŒ์„ ๋”ํ•˜๋Š” ๋ฉ”์„œ๋“œ๋Š” insert, append๋กœ ์ง“๋Š” ๊ฒƒ์ด๋‹ค.

ํ•ด๋ฒ• ์˜์—ญ์€ ๊ธฐ์ˆ  ๊ฐœ๋…์—์„œ ๊ฐ€์ ธ์˜จ ์ด๋ฆ„์ด ์ดํ•ดํ•˜๊ธฐ ์‰ฌ์šด๋ฐ ์•Œ๊ณ ๋ฆฌ์ฆ˜, ์ˆ˜ํ•™ ์šฉ์–ด, ํŒจํ„ด ์ด๋ฆ„ ๋“ฑ ์ด๋ฏธ ์ต์ˆ™ํ•œ ๊ฐœ๋…์ด ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๋‹ค.

ํ•˜์ง€๋งŒ ๋ฌธ์ œ ์˜์—ญ์€ ํ•ด๋‹น ์˜์—ญ์—์„œ ๊ฐ€์ ธ์˜จ ์ด๋ฆ„๋„ ๋ฌธ์ œ๊ฐ€ ์—†๋‹ค.

์˜๋ฏธ ์žˆ๋Š” ๋งฅ๋ฝcontext์„ ์‚ฌ์šฉํ•˜์—ฌ ํด๋ž˜์Šค, ํ•จ์ˆ˜์— ๋งฅ๋ฝ์„ ๋ถ€์—ฌํ•˜๊ฑฐ๋‚˜ ์ ‘๋‘์–ด๋ฅผ ์‚ฌ์šฉํ•ด ์˜๋ฏธ๋ฅผ ๋ถ„๋ช…ํ•˜๊ฒŒ ํ•œ๋‹ค.

๋˜ํ•œ ๋ถˆํ•„์š”ํ•œ ๋งฅ๋ฝcontext์€ ์‚ฌ์šฉํ•˜์ง€ ๋ง๊ณ  ์˜๋ฏธ๊ฐ€ ๋ถ„๋ช…ํ•œ ๊ฒฝ์šฐ์— ํ•œํ•ด ์งง์€ ์ด๋ฆ„์ด ๊ธด ์ด๋ฆ„๋ณด๋‹ค ์ข‹์œผ๋ฏ€๋กœ ๋ถˆํ•„์š”ํ•œ ๋ถ€๋ถ„์„ ์ถ”๊ฐ€ํ•˜์ง€ ์•Š๋„๋ก ํ•œ๋‹ค.

๋ฌธ์žฅ์ด๋‚˜ ๋ฌธ๋‹จ์ฒ˜๋Ÿผ ์ฝํžˆ๋Š” ์ฝ”๋“œ๊ฐ€ ์•„๋‹ˆ๋ฉด ํ‘œ๋‚˜ ์ž๋ฃŒ๊ตฌ์กฐ์ฒ˜๋Ÿผ ์ฝํžˆ๋Š” ์ฝ”๋“œ๋ฅผ ์งœ๋Š” ๋ฐ ์ง‘์ค‘ํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

ํ•จ์ˆ˜๋Š” ๋ฌด์กฐ๊ฑด ์ž‘๊ฒŒ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด ์ข‹๊ณ  ์ค‘์ฒฉ ๊ตฌ์กฐ๊ฐ€ ์ƒ๊ธธ๋งŒํผ ํ•จ์ˆ˜๊ฐ€ ์ปค์ง€๋Š” ๊ฒƒ์€ ์ข‹์ง€ ์•Š๋‹ค.

ํ•จ์ˆ˜๋Š” ํ•œ ๊ฐ€์ง€๋งŒ์„ ํ•ด์•ผ ํ•œ๋‹ค.

์ค‘๋ณต์€ ๋ชจ๋“  ์†Œํ”„ํŠธ์›จ์–ด์—์„œ ์•…์˜ ๊ทผ์›์ด๋‹ค.

ํ•˜์œ„ ๋ฃจํ‹ด์„ ๋ฐœ๋ช…ํ•œ ์ด๋ž˜๋กœ ์†Œํ”„ํŠธ์›จ์–ด ๊ฐœ๋ฐœ์—์„œ ์ง€๊ธˆ๊นŒ์ง€์˜ ํ˜์‹ ์€ ์†Œ์Šค ์ฝ”๋“œ์˜ ์ค‘๋ณต์„ ์ œ๊ฑฐํ•˜๋ ค๋Š” ์ง€์†์ ์ธ ๋…ธ๋ ฅ์œผ๋กœ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

์†Œํ”„ํŠธ์›จ์–ด๋ฅผ ์งœ๋Š” ๊ฒƒ์€ ๊ธ€์ง“๊ธฐ์™€ ๋น„์Šทํ•˜๋‹ค.

์ฒ˜์Œ์—๋Š” ๊ธธ๊ณ  ๋ณต์žกํ•˜๊ณ  ์ •๋ฆฌ๊ฐ€ ์•ˆ๋œ ์ƒํƒœ์ง€๋งŒ ์ฝ”๋“œ๋ฅผ ๋‹ค๋“ฌ๊ณ  ์ •๋ฆฌํ•˜์—ฌ ์ตœ์ข…์ ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ฝ”๋“œ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด๋‹ค.

ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ๊ธฐ์ˆ ์€ ์–ธ์ œ๋‚˜ ์–ธ์–ด ์„ค๊ณ„์˜ ๊ธฐ์ˆ ์ด๋‹ค.

ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ๋Œ€๊ฐ€(ๅคงๅฎถ)๋Š” ์‹œ์Šคํ…œ์„ ๊ตฌํ˜„ํ•  ํ”„๋กœ๊ทธ๋žจ์ด ์•„๋‹ˆ๋ผ ํ’€์–ด๊ฐˆ ์ด์•ผ๊ธฐ๋กœ ์—ฌ๊ธด๋‹ค. 

์ฃผ์„์€ ์–ธ์ œ๋‚˜ ์‹คํŒจ๋ฅผ ์˜๋ฏธํ•˜๋ฉฐ ์ฝ”๋“œ๋กœ ์˜๋„๋ฅผ ํ‘œํ˜„ํ•˜์ง€ ๋ชปํ•œ ์‹คํŒจ๋ฅผ ๋งŒํšŒํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์œผ๋กœ ๋ณธ๋‹ค.

๋”ฐ๋ผ์„œ ์ฃผ์„์ด ํ•„์š”ํ•œ ์ƒํ™ฉ์— ์ฒ˜ํ•˜๋ฉด ์ฝ”๋“œ๋กœ ์˜๋„๋ฅผ ํ‘œํ˜„ํ•  ๋ฐฉ๋ฒ•์„ ๋จผ์ € ์ฐพ๋Š”๋‹ค.

์ฃผ์„์€ ์˜ค๋ž˜๋ ์ˆ˜๋ก ์ฝ”๋“œ์—์„œ ๋ฉ€์–ด์ง€๋ฉฐ ๋‚ด์šฉ์ด ์ž˜๋ชป๋  ๊ฐ€๋Šฅ์„ฑ๋„ ์ปค์ง„๋‹ค.

์ฝ”๋“œ๋ฅผ ์œ ์ง€๋ณด์ˆ˜ํ•ด๋„ ์ฃผ์„๊นŒ์ง€ ์œ ์ง€๋ณด์ˆ˜ํ•˜๊ธฐ๋Š” ํž˜๋“ค๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

์ง„์‹ค์€ ์˜ค์ง ํ•œ ๊ณณ, ์ฝ”๋“œ์—๋งŒ ์กด์žฌํ•œ๋‹ค.

์ฒ˜์Œ๋ถ€ํ„ฐ ๋ฐ”๋ฅด๊ฒŒ ์‹œ์Šคํ…œ์„ ๋งŒ๋“ค ์ˆ˜ ์—†๋‹ค.

๋Œ€์‹  ์˜ค๋Š˜ ์ฃผ์–ด์ง„ ์‚ฌ์šฉ์ž ์Šคํ† ๋ฆฌ์— ๋งž์ถฐ ์‹œ์Šคํ…œ์„ ๊ตฌํ˜„ํ•˜๊ณ  ๋‚ด์ผ์€ ์ƒˆ๋กœ์šด ์Šคํ† ๋ฆฌ์— ๋งž์ถฐ ์‹œ์Šคํ…œ์„ ์กฐ์ •ํ•˜๊ณ  ํ™•์žฅํ•œ๋‹ค.

์ด๊ฒƒ์ด ๋ฐ˜๋ณต์ ์ด๊ณ  ์ ์ง„์ ์ธ ์• ์ž์ผ(Agile) ๋ฐฉ์‹์˜ ํ•ต์‹ฌ์ด๋‹ค.

์ผ„ํŠธ ๋ฒก(Kent Beck)์ด ์ œ๊ธฐํ•˜๋Š” ๋‹จ์ˆœํ•œ ์„ค๊ณ„ ๊ทœ์น™ ๋„ค ๊ฐ€์ง€๋Š” ์ˆœ์„œ๋Œ€๋กœ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  • ๋ชจ๋“  ํ…Œ์ŠคํŠธ๋ฅผ ์‹คํ–‰ํ•œ๋‹ค.
  • ์ค‘๋ณต์„ ์—†์•ค๋‹ค.
  • ํ”„๋กœ๊ทธ๋ž˜๋จธ์˜ ์˜๋„๋ฅผ ํ‘œํ˜„ํ•œ๋‹ค.
  • ํด๋ž˜์Šค์™€ ๋ฉ”์„œ๋“œ ์ˆ˜๋ฅผ ์ตœ์†Œํ™”ํ•œ๋‹ค.

ํ…Œ์ŠคํŠธ ๊ฐ€๋Šฅํ•œ ์‹œ์Šคํ…œ์„ ๋งŒ๋“ค๋ ค๊ณ  ์• ์“ฐ๋ฉด ์„ค๊ณ„ ํ’ˆ์งˆ์ด ๋”๋ถˆ์–ด ๋†’์•„์ง€๋ฏ€๋กœ ํ…Œ์ŠคํŠธ๋Š” ํด๋ฆฐ ์ฝ”๋“œ๋ฅผ ์œ„ํ•œ ํ•„์ˆ˜ ์š”์†Œ์ด๋‹ค.

ํ…Œ์ŠคํŠธ ์ผ€์ด์Šค๊ฐ€ ๋งŽ์„์ˆ˜๋ก ๊ฐœ๋ฐœ์ž๋Š” ํ…Œ์ŠคํŠธ๊ฐ€ ์‰ฝ๋„๋ก ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ฒŒ ๋˜๊ณ  ์ฒ ์ €ํžˆ ํ…Œ์ŠคํŠธ ๊ฐ€๋Šฅํ•œ ์‹œ์Šคํ…œ์„ ๋งŒ๋“ค๋ฉด ๋” ๋‚˜์€ ์„ค๊ณ„๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค.

๊ฒฐํ•ฉ๋„๊ฐ€ ๋†’์œผ๋ฉด ํ…Œ์ŠคํŠธ ์ผ€์ด์Šค ์ž‘์„ฑ์ด ์–ด๋ ค์šฐ๋ฏ€๋กœ ๊ฒฐํ•ฉ๋„๋ฅผ ๋‚ฎ์ถ”๋ฉด ์„ค๊ณ„ ํ’ˆ์งˆ์€ ๋”์šฑ ๋†’์•„์ง„๋‹ค. 

Emotion(Styled), Props ์ „๋‹ฌํ•˜๊ธฐ(Typescript)

Typescript์™€ ํ•จ๊ป˜ ๋™์  CSS ์Šคํƒ€์ผ ์‚ฌ์šฉํ•˜๊ธฐ
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import styled from "@emotion/styled";
const StyledPropsTest = styled.div`
width: 120px;
height: 40px;
font-size: 25px;
background: ${(props) => (props.testProps ? "blue" : "red")};
color: white;
`;
const StyledTest = ({testprops}) => {
return(
<StyledPropsTest testProps={testprops}>Prop Test</StyledPropsTest>
)
}
export default StyledTest;
import styled from "@emotion/styled"; const StyledPropsTest = styled.div` width: 120px; height: 40px; font-size: 25px; background: ${(props) => (props.testProps ? "blue" : "red")}; color: white; `; const StyledTest = ({testprops}) => { return( <StyledPropsTest testProps={testprops}>Prop Test</StyledPropsTest> ) } export default StyledTest;
import styled from "@emotion/styled";

const StyledPropsTest = styled.div`
  width: 120px;
  height: 40px;
  font-size: 25px;
  background: ${(props) => (props.testProps ? "blue" : "red")};
  color: white;
`;

const StyledTest = ({testprops}) => {
  return(
    <StyledPropsTest testProps={testprops}>Prop Test</StyledPropsTest>
  )
}

export default StyledTest;

์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ณ€์ˆ˜๋ฅผ CSS์— ์ „๋‹ฌํ•˜์—ฌ ๋™์  ์Šคํƒ€์ผ์„ ์ ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์œ„์™€ ๊ฐ™์ด props๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ Typescipt๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ custom props๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์—๋Ÿฌ๋ฅผ ๋งŒ๋‚˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

(property) testProps: boolean
Type โ€˜{ children: string; testProps: boolean; }โ€™ is not assignable to type โ€˜IntrinsicAttributes & { theme?: Theme | undefined; as?: ElementType<any> | undefined; } & ClassAttributes<HTMLDivElement> & HTMLAttributes<โ€ฆ>โ€™.
Property โ€˜testPropsโ€™ does not exist on type โ€˜IntrinsicAttributes & { theme?: Theme | undefined; as?: ElementType<any> | undefined; } & ClassAttributes<HTMLDivElement> & HTMLAttributes<โ€ฆ>โ€™.ts(2322)

์ด๋Š” ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์—์„œ props์˜ ํƒ€์ž…์„ ์ฒดํฌํ•˜๊ธฐ ๋•Œ๋ฌธ์ธ๋ฐ์š”.

๋‹ค์Œ๊ณผ ๊ฐ™์ด ๊ฐ„๋‹จํ•˜๊ฒŒ <{data:type}>์˜ ํƒ€์ž… ๋‹จ์–ธ(Type Assertion)์œผ๋กœ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const StyledPropsTest = styled.div<{testProps:boolean}>`
width: 120px;
height: 40px;
font-size: 25px;
background: ${(props) => (props.testProps ? "blue" : "red")};
color: white;
`;
const StyledPropsTest = styled.div<{testProps:boolean}>` width: 120px; height: 40px; font-size: 25px; background: ${(props) => (props.testProps ? "blue" : "red")}; color: white; `;
const StyledPropsTest = styled.div<{testProps:boolean}>`
  width: 120px;
  height: 40px;
  font-size: 25px;
  background: ${(props) => (props.testProps ? "blue" : "red")};
  color: white;
`;

๋‹ค์Œ๊ณผ ๊ฐ™์ด ์—๋Ÿฌ๊ฐ€ ์‚ฌ๋ผ์ง„ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•œ์šฐ๋ฆฌ ๋ณธ์ ์—์„œ ๊ตญ์ˆ˜์ „๊ณจ ๋งˆ์‹œ๊ธฐ(ํ† ์š”์ผ ๋Ÿฐ์น˜)

๊ฒฉ์‹์žˆ๋Š” ์ž๋ฆฌ ๋˜๋Š” ์™ธ๊ตญ์ธ ์นœ๊ตฌ์—๊ฒŒ ์†Œ๊ฐœํ•˜๊ธฐ ์ข‹์€ ๋ง›

๋กฏ๋ฐํƒ€์›Œ์ ์—์„œ ๋ง›๋ณธ ๋’ค๋กœ ๊พธ์ค€ํžˆ ์ฐพ๊ฒŒ ๋œ ํ•œ์šฐ๋ฆฌ์˜ ๊ตญ์ˆ˜์ „๊ณจ!

์ตœ๊ทผ ์™€์ดํ”„์˜ ์ตœ์•  ์Œ์‹์ž…๋‹ˆ๋‹ค.

๋‘˜์ด ๋จน๋‹ค๊ฐ€ ํ•˜๋‚˜๊ฐ€ ์–ด์ฉŒ๊ณ  ํ•˜๋Š” ๊ทน๋‹จ์ ์ธ ์˜ˆ๋ฅผ ๋“ค์ง€ ์•Š๋”๋ผ๋„ ์ถฉ๋ถ„ํžˆ ๋ฏธ์‹์˜ ์ฆ๊ฑฐ์›€์„ ๋А๋‚„ ์ˆ˜ ์žˆ๋Š” ๋ง›์ž…๋‹ˆ๋‹ค.

๋ณธ์ ์€ ์–ด๋–จ๊นŒ ์‹ถ์–ด ํ† ์š”์ผ์— ๋ฐฉ๋ฌธ์„ ํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค.

์–‘์€ ์กฐ๊ธˆ ์ฐจ์ด๊ฐ€ ๋‚œ๋‹ค๊ณ  ํ•˜์ง€๋งŒ ์‹ค์ œ๋กœ ๋А๋ผ๊ธฐ์—๋Š” ๋ฏธ๋ฏธํ•  ์ •๋„์˜ ์ฐจ์ด๋กœ ๋Ÿฐ์น˜ ๊ฐ€๊ฒฉ์— ๋จน์„ ์ˆ˜ ์žˆ๋‹ค๋‹ˆ!

์•ž์œผ๋กœ ๋ณธ์ ์˜ ๋‹จ๊ณจ์ด ๋˜๊ธฐ๋กœ ํ–ˆ์Šต๋‹ˆ๋‹ค.

ํ•œ์šฐ๊ตญ์ˆ˜์ „๊ณจ์˜ ๊ฐ€๊ฒฉ์€ 33,000์›์ด์ง€๋งŒ ๋Ÿฐ์น˜๋Š” 1์ธ๋‹น 25,000์›์œผ๋กœ(๋ฌผ๋ก  ์ด๊ฒƒ๋„ ์‹ผ ๊ธˆ์•ก์€ ์•„๋‹ˆ์ง€๋งŒ..) ๋งค์šฐ ๋งŒ์กฑ์Šค๋Ÿฐ ํ•œ ๋ผ์˜€์Šต๋‹ˆ๋‹ค.

์ฃฝ ์ถ”๊ฐ€๋Š” 1์ธ๋ถ„์— 5,000์›์ด์—ˆ๋˜ ๊ฒƒ ๊ฐ™์•„์š”.

์ฃผ์ฐจ ์‹œ ๋ฐœ๋ ›์€ ํ•„์ˆ˜์ธ ๊ฒƒ ๊ฐ™๊ตฌ์š”.

๋ฐœ๋ ›๋น„๋Š” 3,000์›์ด์—ˆ์Šต๋‹ˆ๋‹ค.

2์ธต์˜ ๋ถ„์œ„๊ธฐ๋Š” ์ด๋ ‡์ง€๋งŒ ๋ณธ์ ์€ ๊ฑด๋ฌผ์„ ํ†ต์งธ๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค๋ณด๋‹ˆ ๋‹ค๋ฅธ ์ธต๋“ค๋„ ํ•œ๋ฒˆ์”ฉ ๋ฐฉ๋ฌธํ•ด๋ณด๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค.

์•„๋ž˜์ฒ˜๋Ÿผ ํ›„๋ฌธ ์ถœ๊ตฌ ์ชฝ์—๋Š” ๋ฐ˜์ฐฌ์ด๋‚˜ ์š”๋ฆฌ๋„ ํฌ์žฅ ๊ตฌ์ž…์ด ๊ฐ€๋Šฅํ•˜๋”๋ผ๊ตฌ์š”.

Homepage : http://www.hwrfood.com/

Address : ์„œ์šธ์‹œ ๊ฐ•๋‚จ๊ตฌ ๋„์‚ฐ๋Œ€๋กœ304 (์‹ ์‚ฌ์—ญ 1๋ฒˆ, ๊ฐ•๋‚จ๊ตฌ์ฒญ 3๋ฒˆ, ์••๊ตฌ์ •๋กœ๋ฐ์˜ค์—ญ 5๋ฒˆ ์ถœ๊ตฌ)

leaflet, ๋ฐ˜๋ณต๋˜๋Š” ์ง€๋„์— marker ํ‘œ์‹œํ•˜๊ธฐ(react)

๋งต ์ถ•์†Œ ์‹œ ๋ฐ˜๋ณต๋˜๋Š” ์ง€๋„์— Marker ๋ฐ˜์˜ํ•˜๊ธฐ

๋‹ค๋ฅธ ์˜ต์…˜์„ ์„ค์ •ํ•˜์ง€ ์•Š๋Š” ํ•œ ๋งต์„ ์ตœ๋Œ€๋กœ ์ถ•์†Œํ•˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ง€๋„๊ฐ€ ๋ฐ˜๋ณต๋˜์–ด ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค.

์—ฌ๊ธฐ์„œ ๋งต์„ ์˜ค๋ฅธ์ชฝ์ด๋‚˜ ์™ผ์ชฝ์œผ๋กœ ๋„˜๊ฒจ์„œ ์ค‘์‹ฌ์„ ๋ฐ”๊ฟ”๋„ Marker๋Š” ๊ทธ๋Œ€๋กœ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ ๋งต ๋ Œ๋”๋ง ์‹œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด โ€˜worldCopyJumpโ€™ ์˜ต์…˜์„ ๋„ฃ์–ด์ฃผ๋ฉด ์ค‘์‹ฌ์ด ์ด๋™ํ•˜๋”๋ผ๋„ ๊ธฐ์กด์˜ Marker๋ฅผ ๋ชจ๋‘ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<MapContainer
center={[35.102, 129.067]}
zoom={5}
scrollWheelZoom={true}
worldCopyJump
>
<MapContainer center={[35.102, 129.067]} zoom={5} scrollWheelZoom={true} worldCopyJump >
<MapContainer
   center={[35.102, 129.067]}
   zoom={5}
   scrollWheelZoom={true}
   worldCopyJump
>

์˜ต์…˜ ํ•˜๋‚˜๋งŒ์œผ๋กœ ๋งต์„ ์ด๋™ํ•˜๋ฉด Marker๋„ ์ด๋™ํ•˜์—ฌ ๊ฐ™์€ ์ขŒํ‘œ์— ํ‘œ์‹œ๋˜๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

leaflet ๋งต ํ‘œ์‹œ ์–ธ์–ด ๋ณ€๊ฒฝ

์ง€๋„ ๋ฐ์ดํ„ฐ ์„œ๋ฒ„ ๋ณ€๊ฒฝํ•˜๊ธฐ

leaflet์˜ ๊ธฐ๋ณธ ๋งต์€ ๊ฐ ์ง€์—ญ๋งˆ๋‹ค ํ˜„์ง€ ๋‚˜๋ผ์˜ ์–ธ์–ด๋กœ ํ‘œ๊ธฐ๋˜์–ด ํ•œ๊ตญ ๋งต์€ ํ•œ๊ตญ์–ด, ์ผ๋ณธ ๋งต์€ ์ผ๋ณธ์–ด, ํ”„๋ž‘์Šค ๋งต์€ ํ”„๋ž‘์Šค์–ด๋กœ ํ‘œ๊ธฐ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ ์ „์ฒด ๋งต์„ ์˜์–ด๋กœ ํ‘œ๊ธฐํ•˜๊ณ  ์‹ถ๊ฑฐ๋‚˜ ์‚ฐ๋งฅ, ํ•ด์–‘ ๋“ฑ ์šฉ๋„์— ๋งž๊ฒŒ ์ง€๋„์˜ ์ด๋ฏธ์ง€๋ฅผ ๋ณ€๊ฒฝํ•˜๊ณ  ์‹ถ์„ ๋•Œ๋Š” ์•„๋ž˜ ๋งํฌ์—์„œ ์›ํ•˜๋Š” ๋งต์˜ ์œ ํ˜•๊ณผ ์„œ๋ฒ„๋ฅผ ํ™•์ธํ•˜์—ฌ ์„œ๋ฒ„๋งŒ ๋ณ€๊ฒฝํ•ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

1. ๋งํฌ์—์„œ ์„œ๋ฒ„ ํ™•์ธ

http://leaflet-extras.github.io/leaflet-providers/preview/

๋งํฌ์— ์ ‘์†ํ•˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํ™”๋ฉด์ž…๋‹ˆ๋‹ค.

์ดˆ๋ก์ƒ‰ ๋„ค๋ชจ์นธ์—์„œ ์„œ๋ฒ„ ์ •๋ณด, ๋นจ๊ฐ„์ƒ‰ ๋„ค๋ชจ์นธ์—์„œ ๋งต์˜ ์ข…๋ฅ˜ ์ƒ˜ํ”Œ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ƒ˜ํ”Œ๋กœ OpenStreetMap.France๋ฅผ ์ ์šฉํ•ด๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

๋นจ๊ฐ„ ๋„ค๋ชจ์นธ์—์„œ OpenStreetMap.France์„ ์„ ํƒํ•˜๋ฉด ์ดˆ๋ก ๋„ค๋ชจ์นธ์— ์„œ๋ฒ„ ์ •๋ณด๊ฐ€ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

โ€˜https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.pngโ€™

โ€˜&copy; OpenStreetMap France | &copy; <a href=โ€https://www.openstreetmap.org/copyrightโ€>OpenStreetMap</a> contributorsโ€™

์ด ๋‘ ๋ถ€๋ถ„๋งŒ ์ฝ”๋“œ์—์„œ ๋ณ€๊ฒฝํ•ด์ฃผ๋ฉด ๋ฐ”๋กœ ์ ์šฉ์ด ๋ฉ๋‹ˆ๋‹ค.

2. ์ฝ”๋“œ ์ ์šฉ

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import { MapContainer, TileLayer, useMap, Marker, Popup } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import { icon } from "leaflet";
const Icon = icon({
iconUrl: "marker-icon.png",
iconSize: [16, 16],
iconAnchor: [12, 16],
});
const MyMap = () => {
return (
<MapContainer
center={[37.56675, 126.97842]}
zoom={10}
scrollWheelZoom={true}
style={{ width: "500px", height: "500px" }}
>
<TileLayer
attribution='&copy; OpenStreetMap France | &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png"
/>
<Marker position={[37.56675, 126.97842]} icon={Icon}>
<Popup>์„œ์šธ์‹œ์ฒญ์ด์—์š”.</Popup>
</Marker>
</MapContainer>
);
};
export default MyMap;
import { MapContainer, TileLayer, useMap, Marker, Popup } from "react-leaflet"; import "leaflet/dist/leaflet.css"; import { icon } from "leaflet"; const Icon = icon({ iconUrl: "marker-icon.png", iconSize: [16, 16], iconAnchor: [12, 16], }); const MyMap = () => { return ( <MapContainer center={[37.56675, 126.97842]} zoom={10} scrollWheelZoom={true} style={{ width: "500px", height: "500px" }} > <TileLayer attribution='&copy; OpenStreetMap France | &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png" /> <Marker position={[37.56675, 126.97842]} icon={Icon}> <Popup>์„œ์šธ์‹œ์ฒญ์ด์—์š”.</Popup> </Marker> </MapContainer> ); }; export default MyMap;
import { MapContainer, TileLayer, useMap, Marker, Popup } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import { icon } from "leaflet";
const Icon = icon({
  iconUrl: "marker-icon.png",
  iconSize: [16, 16],
  iconAnchor: [12, 16],
});

const MyMap = () => {
  return (
    <MapContainer
      center={[37.56675, 126.97842]}
      zoom={10}
      scrollWheelZoom={true}
      style={{ width: "500px", height: "500px" }}
    >
      <TileLayer
        attribution='&copy; OpenStreetMap France | &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png"
      />
      <Marker position={[37.56675, 126.97842]} icon={Icon}>
        <Popup>์„œ์šธ์‹œ์ฒญ์ด์—์š”.</Popup>
      </Marker>
    </MapContainer>
  );
};

export default MyMap;

์„ค์ •์— ๋”ฐ๋ผ ๋ณ€๊ฒฝ๋œ ๋งต๊ณผ ์–ธ์–ด๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.