๐ŸŽ… ์š”์ •์„ ์ฐฉ์ทจํ•˜๋Š” ๋ฐฉ์น˜ํ˜• ๊ฒŒ์ž„ ๊ฐœ๋ฐœํ•œ ์ด์•ผ๊ธฐ

ES6 OOP์™€ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ, ๊ทธ๋ฆฌ๊ณ  ์ œ์ด์ฟผ๋ฆฌ(?)

Santa Inc.๋Š” ์ดˆ๊ตญ์  ๋ธ”๋ž™ ๊ธฐ์—… '์‚ฐํƒ€ ์ฃผ์‹ํšŒ์‚ฌโ€™๋ฅผ ์šด์˜ํ•˜๋Š” ๋ฐฉ์น˜ํ˜• ๊ฒŒ์ž„(Idle game)์ด๋‹ค. ์‚ฐํƒ€์˜ ๋ชฉ์ ์€ ์˜ค์ง ์„ ๋ฌผ ์ƒ์‚ฐ์„ ์ตœ๋Œ€๋กœ ๋Œ์–ด์˜ฌ๋ฆฌ๋Š” ๊ฒƒ. ์‚ฐํƒ€๋Š” ์ง์›์„ ๊ณ ์šฉํ•˜๊ณ , ์ •์ฑ…์„ ์ฑ„ํƒํ•˜๋ฉฐ ๋์—†์ด ์„ ๋ฌผ์„ ์ƒ์‚ฐํ•œ๋‹ค.

Santa Inc. ์„ธ๊ณ„๋ฅผ ์„ ๋„ํ•˜๋Š” ๊ธ€๋กœ๋ฒŒ ๊ธฐ์—…. ๋ฃจ๋Œํ”„.

Santa Inc.๋ฅผ ์ฒ˜์Œ ๋งŒ๋“  ๊ฑด 2015๋…„ ๊ฒจ์šธ์ด์—ˆ๋‹ค. ์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ๊ณต๋ถ€ํ•œ ํ›„ ๋งค๋…„ ํฌ๋ฆฌ์Šค๋งˆ์Šค๋งˆ๋‹ค ์ด์ƒํ•œ ๊ฑธ ๋งŒ๋“ค์—ˆ๋Š”๋ฐ, ์ด๊ฒƒ๋„ ๊ทธ ์ผํ™˜์ด์—ˆ๋‹ค. ๋‹น์‹œ์—” ํฌ๋ฆฌ์Šค๋งˆ์Šค์— ๋งž์ถฐ ๋Ÿฐ์นญํ•˜๊ฒ ๋‹ค๋Š” ์š•์‹ฌ์œผ๋กœ ํ•™๊ธฐ ์ค‘ 20์ผ๋งŒ์— ๊ฒŒ์ž„์„ ์™„์„ฑํ–ˆ๋‹ค. ๋ฌผ๋ก  ์ฝ”๋“œ๊ฐ€ ์—‰๋ง์ง„์ฐฝ์ด์—ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  2018๋…„, ์—‰๋ง์ด๋˜ ์ฝ”๋“œ๋ฅผ ES6 ํด๋ž˜์Šค ๋ฌธ๋ฒ•๊ณผ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•ด (์•„๋งˆ๋„) ๊น”๋”ํ•˜๊ฒŒ ์ •๋ฆฌํ–ˆ๋‹ค.

๐Ÿ˜ˆ ์‚ฐํƒ€๊ฐ€ ๋˜์–ด ๋ฃจ๋Œํ”„์™€ ์š”์ •์„ ์ฐฉ์ทจํ•ด๋ณด์„ธ์š”!

์ฒ˜์Œ ์•„์ด๋””์–ด๋Š” '์‚ฐํƒ€๊ฐ€ ์š”์ •์„ ๊ณ ์šฉํ•ด ํšŒ์‚ฌ๋ฅผ ์šด์˜ํ•˜๋Š” ๊ฒŒ์ž„โ€™์ด์—ˆ๋‹ค. ์–ด๋ ธ์„ ๋•Œ ์ค„๊ธฐ์ฐจ๊ฒŒ ํ•œ ๋กค๋Ÿฌ์ฝ”์Šคํ„ฐ ํƒ€์ด์ฟค์ด๋‚˜ ๋กœ์ฝ”๋ชจ์…˜๊ธ‰์˜ ์‹œ๋ฎฌ๋ ˆ์ด์…˜ ๊ฒŒ์ž„โ€ฆ์ด ์ด์ƒ์ ์ด๊ธด ํ•˜์ง€๋งŒ ๋‹น์žฅ ๋งŒ๋“œ๋Š” ๊ฑด ๋ฌด๋ฆฌ์˜€๋‹ค. ๋Œ€์‹  Cookie Clicker๋ผ๋Š” ๊ฒŒ์ž„์„ ์žฌ๋ฐŒ๊ฒŒ ํ•œ ๊ธฐ์–ต์ด ๋‚ฌ๊ณ , ์ด๊ฒƒ์ฒ˜๋Ÿผ ๋งŒ๋“ค์–ด๋ด์•ผ๊ฒ ๋‹ค๊ณ  ๊ฒฐ์‹ฌํ–ˆ๋‹ค.

ํฌ๋ฆฌ์Šค๋งˆ์Šค๊นŒ์ง€ ์‹œ๊ฐ„์ด ๋งŽ์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์— ๊ธฐํš, ๋””์ž์ธ, ๊ฐœ๋ฐœ์„ ๋ชจ๋‘ ๋™์‹œ์— ํ–ˆ๋‹ค. (๊ทธ๋Ÿฌ์ง€ ๋ง์•˜์–ด์•ผ ํ–ˆ๋‹ค! ๊ฐœ๋ฐœํ•˜๋‹ค๊ฐ€ ๊ฐ‘์ž๊ธฐ ์ƒ๊ฐ์ด ๋ฐ”๋€Œ์–ด ์ฝ”๋“œ๋ฅผ ์™„์ „ํžˆ ์ƒˆ๋กœ ์งœ๊ฑฐ๋‚˜ ์ƒˆ๋กœ์šด ๊ทธ๋ฆผ์„ ๊ทธ๋ ค์•ผ ํ•˜๋Š” ์ƒํ™ฉ์ด ์—ฌ๋Ÿฌ๋ฒˆ ๋ฐœ์ƒํ–ˆ๋‹ค.) ํ”„๋กœ์ ํŠธ ์ค‘๊ฐ„์— ์นœ๊ตฌ๊ฐ€ ๊ฒŒ์ž„ OST๊นŒ์ง€ ์ž‘๊ณกํ•ด์คฌ๋Š”๋ฐ, ๊ฒŒ์ž„ ๋ถ„์œ„๊ธฐ์™€ ๋†€๋ž๋„๋ก ์ž˜ ๋งž์•„ ๋–จ์–ด์ ธ์„œ ์‹ ์˜ ํ•œ ์ˆ˜์˜€๋˜ ๊ฒƒ ๊ฐ™๋‹ค.

ํ™•์žฅ ๋ถˆ๊ฐ€๋Šฅํ•œ ์•„์ดํ…œ ์ฝ”๋“œ

ํ”Œ๋ ˆ์ด์–ด๋Š” ๋ฃจ๋Œํ”„๋‚˜ ์š”์ •์„ ๊ณ ์šฉํ•ด์„œ ์„ ๋ฌผ์„ ์ƒ์‚ฐํ•˜๋„๋ก ํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ฒŒ์ž„ ํŠน์„ฑ์ƒ '๊ตฌ์ž…ํ•  ์ˆ˜ ์žˆ๋Š” ์•„์ดํ…œโ€™๊ณผ '์•„์ง ๊ตฌ์ž…ํ•  ์ˆ˜ ์—†๋Š” ์•„์ดํ…œโ€™์ด ๋‚˜๋‰˜์–ด ์žˆ๊ณ , ํŠน์ • ์กฐ๊ฑด์„ ๋งŒ์กฑํ•˜๋ฉด ์•„์ดํ…œ์˜ ์ž ๊ธˆ์ด ํ’€๋ฆฌ๋Š” ๋งค์ปค๋‹ˆ์ฆ˜์ด ํ•„์š”ํ–ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์•„์ดํ…œ ๋ฆฌ์ŠคํŠธ๋ฅผ ๋จผ์ € ๋งŒ๋“ค์—ˆ๋‹ค.

var htItem = [{
    k_name : "๋ฃจ๋Œํ”„",
    name : "dolf",
    img : "img/dolf.gif",
    num : 0,
    prod : 2,
    addi : 1,
    cost : 30,
    lv : false
}, {
    k_name : "์ธํ„ด ์š”์ •",
    name : "elf",
    img : "img/elf.gif",
    num : 0,
    prod : 5,
    addi : 2,
    cost : 200,
    lv : false
}, {
    // ...

์ด๋•Œ๋Š” ์™ ์ง€ ๋ชฐ๋ผ๋„ ๋ฐฐ์—ด์— ๊ฐ์ฒด๋‹ด๋Š” ๊ฑธ ๊ทธ๋ ‡๊ฒŒ ์ข‹์•„ํ–ˆ๋‹ค. ์‰ฝ๊ฒŒ ํŒŒ์•…ํ•˜๊ธฐ ํž˜๋“  ํ”„๋กœํผํ‹ฐ๋Š” ๋‘˜์งธ์น˜๊ณ , ๊ฐ€์žฅ ํฐ ๋ฌธ์ œ๋Š” ์•„์ดํ…œ์„ ์˜ค์ง ์ธ๋ฑ์Šค๋กœ ๊ด€๋ฆฌํ–ˆ๋‹ค๋Š” ์ ์ด๋‹ค. ํ”Œ๋ ˆ์ด์–ด๊ฐ€ ๊ฐ€์ง„ ์„ ๋ฌผ์— ๋”ฐ๋ผ n๋ฒˆ์งธ ์•„์ดํ…œ์„ ๊ตฌ์ž…ํ•  ์ˆ˜ ์žˆ๋„๋ก ์—ด๊ณ , ์•„์ดํ…œ ๋ฆฌ์ŠคํŠธ์—์„œ n๋ฒˆ์งธ ์š”์†Œ๋ฅผ ํด๋ฆญํ•˜๋ฉด htItem[n] ์•„์ดํ…œ์ด ๊ตฌ์ž…๋˜๋Š” ๋ฐฉ์‹์ด์—ˆ๋‹ค.

์–ด๋–ค ์•„์ดํ…œ์ด ๋ช‡ ๋ฒˆ์งธ ์ˆœ์„œ์ธ์ง€ ๊ธฐ์–ตํ•ด์•ผ ํ–ˆ๊ณ , htItem ์ค‘๊ฐ„์— ์ƒˆ๋กœ์šด ์•„์ดํ…œ์„ ๋ผ์›Œ ๋„ฃ์„ ์ˆ˜ ์—†์—ˆ๋‹ค. ์ด ๋•Œ๋ฌธ์— '๋ฃจ๋Œํ”„โ€™์™€ โ€˜์ธํ„ด ์š”์ •โ€™ ์‚ฌ์ด์— ๋“ค์–ด๊ฐˆ '์•Œ๋ฐ”์š”์ •โ€™์˜ ๊ทธ๋ž˜ํ”ฝ ์ž‘์—…์„ ๋งˆ์ณค์Œ์—๋„ ๋๋‚ด ์ถ”๊ฐ€ํ•˜์ง€ ๋ชปํ–ˆ๋‹ค.

์ŠคํŒŒ๊ฒŒํ‹ฐ ์ฃผ๋„ ๊ฐœ๋ฐœ

์•„์ดํ…œ ๊ด€๋ จ ์ฝ”๋“œ๋„ ์‹ฌ๊ฐํ–ˆ์ง€๋งŒ, ์ •์ฑ… ๋ถ€๋ถ„์€ ๋” ์‹ฌ๊ฐํ–ˆ๋‹ค. ํ”Œ๋ ˆ์ด์–ด๊ฐ€ ์ •์ฑ… ๋ฆฌ์ŠคํŠธ์—์„œ ์ •์ฑ…์„ ๊ตฌ์ž…ํ•˜๋ฉด ๊ทธ ์ •์ฑ…์ด ๊ฐ€์ง„ ํšจ๊ณผ๋ฅผ ์‹คํ–‰ํ•ด์•ผ ํ•˜๋Š”๋ฐ, ๊ทธ ๋ถ€๋ถ„์„ ์ด๋ ‡๊ฒŒ ์ฒ˜๋ฆฌํ–ˆ๋‹ค:

// ์ •์ฑ… ์„ ํƒ์— ๋”ฐ๋ฅธ ๋ถ„๊ธฐ๋ฅผ ์„ค์ •, ์ฒ˜๋ฆฌํ•œ๋‹ค.
function updatePolicy(sPolicy) {
    if(sPolicy == "practice") { // ๋ฆฌ๋ณธ๋ฌถ๊ธฐ
        nClickPres = 1.2;
        renderPolicyList(1);
    } else if(sPolicy == "smart-work") { // ์Šค๋งˆํŠธ ์—…๋ฌด ํ™˜๊ฒฝ
        nClickPres = 1.5;
        renderPolicyList(2);
    } else if(sPolicy == "night") { // ์•ผ๊ทผ๋ฌธํ™”
        htItem[0]["prod"] += 1;
        $("#dolf .pr").text(htItem[0]["addi"] + " ~ " + htItem[0]["prod"] + "๊ฐœ ์ƒ์‚ฐ");
        renderPolicyList(3); // ์—ด์ •ํŽ˜์ด ์˜คํ”ˆ
        renderPolicyList(4); // ๋ฉ€ํ‹ฐํƒœ์Šคํ‚น ์˜คํ”ˆ
    } else if(sPolicy == "pashion") { // ์—ด์ •ํŽ˜์ด
        // ...

์ง€์˜ฅ์ด ์žˆ๋‹ค๋ฉด ์ด๋Ÿฐ ๋ชจ์Šต์ผ๊นŒ? ์ •์ฑ… ๋ฆฌ์ŠคํŠธ๋„ ์•„์ดํ…œ์ฒ˜๋Ÿผ ๊ฐ์ฒด ๋ฐฐ์—ด๋กœ ๊ตฌ์„ฑํ–ˆ์ง€๋งŒ, ์ •์ฑ…๋งˆ๋‹ค ์‹คํ–‰ํ•  ์ฝ”๋“œ๊ฐ€ ๋‹ค๋ฅด๋‹ค๋Š” ์ ๊ณผ ํ•œ ์ •์ฑ…์ด ๋‹ค์Œ ์ •์ฑ…์„ ์—ฌ๋Ÿฌ ๊ฐœ ์—ด ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์ด ์•„์ดํ…œ๊ณผ๋Š” ๋‹ฌ๋ž๋‹ค. ๊ฐ€๋ น โ€˜๋ฆฌ๋ณธ๋ฌถ๊ธฐโ€™ ์ •์ฑ…์„ ๊ตฌ์ž…ํ•˜๋ฉด ์„ ๋ฌผ ์ƒ์ž๋ฅผ ํด๋ฆญํ•  ๋•Œ ๋“ค์–ด์˜ค๋Š” ์„ ๋ฌผ์ด 1.2๊ฐœ๊ฐ€ ๋˜๊ณ , ๋‹ค์Œ ์ •์ฑ…์ธ '์Šค๋งˆํŠธ ์—…๋ฌด ํ™˜๊ฒฝโ€™์ด ์—ด๋ฆฐ๋‹ค. ๋ฐ˜๋ฉด '์•ผ๊ทผ๋ฌธํ™”โ€™๋ฅผ ๊ตฌ์ž…ํ•˜๋ฉด ๋ฃจ๋Œํ”„(htItem[0]์ด ๋ฃจ๋Œํ”„๋ฅผ ์˜๋ฏธํ•˜๋Š” ๊ฒŒ ํฌ์ธํŠธ.)์˜ ์ตœ๋Œ€ ์ƒ์‚ฐ๋Ÿ‰์ด 1์˜ค๋ฅด๊ณ , '์—ด์ •ํŽ˜์ดโ€™์™€ '๋ฉ€ํ‹ฐํƒœ์Šคํ‚นโ€™์ด ์—ด๋ฆฐ๋‹ค.

์ค‘๊ฐ„์— ์ƒˆ๋กœ์šด ์ •์ฑ…์„ ๋ผ์›Œ ๋„ฃ์„ ์ˆ˜ ์—†์„ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ, ์ •์ฑ…์ด ์—ด๋ฆฌ๋Š” ์ˆœ์„œ์™€ ๊ฐ ์ •์ฑ…์˜ ์ธ๋ฑ์Šค, ํšจ๊ณผ, ์ด๋ฆ„์„ ๋ชจ๋‘ ์ˆ™์ง€ํ•ด์•ผ ํ–ˆ๋‹ค. ์†”์งํžˆ ์ด ๋ถ€๋ถ„์—์„œ ๋•Œ๋ ค์น ๊นŒ ๊ณ ๋ฏผํ–ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ โ€ฆ

ํฌ๋ฆฌ์Šค๋งˆ์Šค ์ง์ „, ์นœ๊ตฌ๋“ค์—๊ฒŒ ๋ฌด์ž‘์œ„๋กœ ๋งํฌ๋ฅผ ๋ฟŒ๋ ค ๋ฒ ํƒ€ํ…Œ์ŠคํŠธ๋ฅผ ํ–ˆ๋‹ค. ์•„์ดํ…œ์ด๋‚˜ ์ •์ฑ… ์ถ”๊ฐ€๋Š” ๋ถˆ๊ฐ€๋Šฅํ–ˆ๊ณ , ๋ฒ„๊ทธ ์ˆ˜์ •๊ณผ ๋ฐธ๋Ÿฐ์‹ฑ์— ์‹ ๊ฒฝ์ผ๋‹ค. ์ค‘๋…„๊ธฐ์‚ฌ ๊น€๋ด‰์‹์ด๋ผ๋Š” ๋ฐฉ์น˜ํ˜• ๊ฒŒ์ž„์„ ์ฐธ๊ณ ํ•ด ๋ฐธ๋Ÿฐ์Šค๋ฅผ ๋งž์ท„์ง€๋งŒ, ๋ง‰์ƒ ํ…Œ์ŠคํŠธ๋ฅผ ํ•ด๋ณด๋‹ˆ ์†๋ณผ ๊ณณ์ด ๋งŽ์•˜๋‹ค.

์ด๋Ÿฐ ์‹์˜ ์ŠคํŒŒ๊ฒŒํ‹ฐ ์ฝ”๋“œ๋“ค์„ santa.js์— ๋•Œ๋ ค ๋ฐ•์•˜๋‹ค. ์–ด์ฐŒ์ €์น˜ ๋Ÿฐ์นญํ•˜๊ธฐ ํ–ˆ์ง€๋งŒ ๋‹น์—ฐํžˆ ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ๋ถˆ๊ฐ€๋Šฅ์— ๊ฐ€๊นŒ์› ๊ณ , ๊ฒŒ์ž„ ํ›„๋ฐ˜๋ถ€์— ๊ฒŒ์ž„์ด ๋ฉˆ์ถฐ๋ฒ„๋ฆฐ๋‹ค๋Š” ๋ฆฌํฌํŠธ๋„ ๋งŽ์•˜๋‹ค. ๋ฃจ๋Œํ”„์™€ ์š”์ •์„ ์ฐฉ์ทจํ•˜๋ ค ํ–ˆ์œผ๋‚˜ ๊ฒฐ๊ณผ์ ์œผ๋กœ ๋‚ด๊ฐ€ ๋‚˜๋ฅผ ์ฐฉ์ทจํ•œ ์ƒํ™ฉ์ด ๋๋‹ค. ์ดํ›„๋กœ ์—…๋ฐ์ดํŠธ๋Š” ์ปค๋…• ์†Œ์ŠคํŒŒ์ผ์„ ๋‹ค์‹œ ์—ด์–ด๋ณด๋Š” ์ผ๋„ ์—†โ€ฆ์„ ์ค„ ์•Œ์•˜์œผ๋‚˜โ€ฆ

๐ŸŒ ์„ธ๊ณ„๋ฅผ ์„ ๋„ํ•˜๋Š” ๊ธ€๋กœ๋ฒŒ ๊ธฐ์—… (์ฃผ)์‚ฐํƒ€

2018๋…„์ดˆ ๊นƒ๋žฉ ํ”„๋กœ์ ํŠธ ๋ช‡ ๊ฐœ๋ฅผ ๊นƒํ—ˆ๋ธŒ๋กœ ์˜ฎ๊ธฐ๋Š” ์ž‘์—…์„ ํ–ˆ๋‹ค. ์ด๋•Œ Santa Inc. ์ฝ”๋“œ๋ฅผ ๋‹ค์‹œ ์—ด์–ด๋ดค๋Š”๋ฐ, ์ •๋ง '๋‚ด ์ธ์ƒ์— ์ด๋”ด ์ฝ”๋“œ๋ฅผ ๋‚จ๊ฒจ๋‘๋Š” ๊ฑด ๋ถ€๋„๋Ÿฌ์šด ์ผ์ด๋‹คโ€™๋ผ๋Š” ์ƒ๊ฐ์ด ๋“ค์–ด ๋ฐ”๋กœ ๋œฏ์–ด ๊ณ ์น˜๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค. ์ด๋•Œ๊ฐ€ 1์›”์ด์—ˆ์œผ๋‹ˆ ํฌ๋ฆฌ์Šค๋งˆ์Šค๊นŒ์ง€ ์‹œ๊ฐ„์€ ์ถฉ๋ถ„ํ–ˆ๋‹ค.

๋ชจ๋“  ๊ฒƒ์„ ๋ชจ๋“ˆํ™”ํ•˜์ž

๊ฒŒ์ž„์— ๋“ฑ์žฅํ•˜๋Š” ์ฃผ์š” ์š”์†Œ๋Š” ํฌ๊ฒŒ ๋‘ ๊ฐ€์ง€, ์ง์›๊ณผ ์ •์ฑ…์ด๋‹ค. ๋จผ์ € Worker ํด๋ž˜์Šค๋ฅผ ์ถ”์ƒ ํด๋ž˜์Šค๋กœ ํ™œ์šฉํ•˜๋ฉด์„œ ์ด๋ฅผ Rudolph๋‚˜ InternElf์™€ ๊ฐ™์€ ๊ฐ๊ฐ์˜ ์ง์› ํด๋ž˜์Šค์— ์ƒ์†ํ–ˆ๋‹ค. ES6 ๋•๋ถ„์— ํด๋ž˜์Šค ๋ฌธ๋ฒ•์— ๋”ฐ๋ผ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.

class Worker {
  static cost = 0;
  static minOutput = 0;
  static maxOutput = 0;

  constructor() {
    this.output = 0;
    this.level = 1;
    // ...
    this.img = '';
  }

  static getMinOutput() {
    return this.minOutput;
  }

  static getMaxOutput() {
    return this.maxOutput;
  }

  // ...

  next() {
    throw new Error('next() must be implemented.');
  }
}

export default Worker;

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

๊ทธ๋ฆฌ๊ณ  ๊ฐ ์ง์› ํด๋ž˜์Šค๋“ค์ด Worker๋ฅผ ์ƒ์†๋ฐ›๋Š”๋‹ค.

class Rudolph extends Worker {
  static cost = 1;
  static minOutput = 1;
  static maxOutput = 2;

  constructor() {
    super();

    this.name = 'rudolph';
    this.korName = '๋ฃจ๋Œํ”„';

    this.img = '/assets/rudolph.gif';
  }

  next() {
    return new ParttimeElf();
  }
}

export default Rudolph;

Rudolph ์ธ์Šคํ„ด์Šค๋ฅผ ํ†ตํ•ด next๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด ๋‹ค์Œ ๋‹จ๊ณ„ ์ง์›์ธ ์•Œ๋ฐ”์š”์ •(ParttimeElf)์„ ๋ฐ˜ํ™˜๋ฐ›๋Š”๋‹ค. ์ด๋ ‡๊ฒŒ ๋ชจ๋“  ์ข…๋ฅ˜์˜ ์ง์›์„ ๊ฐ๊ฐ์˜ ํด๋ž˜์Šค๋กœ ๋‚˜๋ˆ ์„œ ๊ด€๋ฆฌํ•˜๋‹ˆ ํ›จ์”ฌ ํŽธํ•˜๊ฒŒ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค. ์ •์ฑ…๋„ ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ ๊ตฌํ˜„ํ–ˆ๋‹ค.

โ€˜๊ฐ๋…๊ด€ ๋ฐฐ์น˜โ€™ ์ •์ฑ…์€ ๋ชจ๋“  ์ง์›์˜ ์ƒ์‚ฐ๋Ÿ‰์„ 1๋Š˜๋ ค์ค€๋‹ค. ์ด ๋™์ž‘๋„ ๋‹ค๋ฅธ ๋ชจ๋“ˆ์€ ์ „ํ˜€ ๊ฑด๋“œ๋ฆฌ์ง€ ์•Š๊ณ  ๊ฐ๋…๊ด€ ๋ฐฐ์น˜ ํด๋ž˜์Šค์—์„œ ์•„์ฃผ ๊ฐ„๋‹จํ•˜๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.

class Supervisor extends Policy {
  // ...
  static execute() {
    const workers = Game.getHiredWorkers();

    workers.forEach((worker) => {
      worker.setOutput(worker.getOutput() + 1);
      PersonnelInterface.updateOutput(worker.getName(), worker.getOutput());
      Game.addTotalOutput(1);
    });
  }
}

Supervisor.execute()์™€ ๊ฐ™์ด ํ˜ธ์ถœ๋˜๋ฉด ๊ณ ์šฉ๋œ ์ง์› ๊ฐ์ฒด๋กœ ๊ตฌ์„ฑ๋œ ๋ฐฐ์—ด์„ ๊ฐ€์ ธ์™€ ๊ฐ ์ง์›์˜ setOutput ๋ฉ”์†Œ๋“œ๋ฅผ ํ˜ธ์ถœํ•ด ์ƒ์‚ฐ๋Ÿ‰์„ 1์”ฉ ์ฆ๊ฐ€์‹œํ‚จ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์Šคํฌ๋ฆฐ์˜ ์‚ฌ์ด๋“œ๋ฐ”์— ์žˆ๋Š” '์ธ์‚ฌ ํƒญโ€™์„ ์—…๋ฐ์ดํŠธํ•˜๊ธฐ ์œ„ํ•ด PersonnelInterface์˜ updateOutput ๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ–ˆ๋‹ค.

์ด๋กœ์จ ์ง์›๊ณผ ์ •์ฑ…, ์ธํ„ฐํŽ˜์ด์Šค๊ฐ€ ์™„์ „ํžˆ ๋…๋ฆฝ์ ์œผ๋กœ ๋™์ž‘ํ•˜๋ฉฐ public ๋ฉ”์†Œ๋“œ๋ฅผ ํ†ตํ•ด ์ตœ์†Œํ•œ์˜ ๊ด€๊ณ„๋ฅผ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค. (์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„  ๋ชจ๋“  ํ”„๋กœํผํ‹ฐ๊ฐ€ publicํ•˜์ง€๋งŒโ€ฆ) ์˜ˆ์ „ ๋ฐฉ์‹๋Œ€๋กœ๋ผ๋ฉด if๋ฌธ ์ง€์˜ฅ์•ˆ์—์„œ ์ด์ค‘๋ฃจํ”„๋ฅผ ๋Œ๋ฆฌ๋Š” ์ง“์„ ํ–ˆ์„์ง€๋„ ๋ชจ๋ฅธ๋‹ค.

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜

์•„๋ฌด๋ฆฌ ES6๋ผ๋„ ์ž๋ฐ” ํ”„๋กœ๊ทธ๋ž˜๋ฐ์—์„œ์˜ ๊ฐœ๋ฐœ ๊ฒฝํ—˜์— ๋น„ํ•˜๋ฉด ๋ถˆํŽธํ•œ ์ ์ด ๋งŽ์•˜๋‹ค. abstract๋‚˜ interface๊ฐ™์€ OOP ๋ฌธ๋ฒ•์ด ์—†๋‹ค๋Š” ๊ฑด ๋‘˜์งธ์น˜๊ณ , ๋‹ค์–‘ํ•œ ํด๋ž˜์Šค๋ฅผ ๋‹ค๋ฃจ๋‹ค๋ณด๋‹ˆ ์›์‹œ ํƒ€์ž…๋งŒ ์ƒ๊ฐํ•  ์ˆ˜๊ฐ€ ์—†๋‹ค๋Š” ๊ฒŒ ํฐ ๋ฌธ์ œ์˜€๋‹ค. Worker ํƒ€์ž…, Policy ํƒ€์ž… ๋“ฑ์ด ๋งˆ๊ตฌ ์„ž์ด๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค. ์—ฌ๊ธฐ์— ๋”ํ•ด ์ธ์Šคํ„ด์Šค ๋ฉค๋ฒ„์˜ ์ž๋™ ์™„์„ฑ์ด ์ œ๋Œ€๋กœ ์•ˆ ๋œ๋‹ค๋Š” ๋ถˆํŽธํ•จ๋„ ์žˆ์—ˆ๋‹ค.

ํƒ€์ž… ๋ฌธ์ œ, ์—ญ์‹œ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๋ฐ”๋กœ ๋– ์˜ฌ๋ž๋‹ค. ๊ธฐ์กด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋กœ ๊ทธ๋Œ€๋กœ ์˜ฎ๊ธฐ๋Š” ์ž‘์—…์ด ํฌ๊ฒŒ ์–ด๋ ค์šธ ๊ฒƒ ๊ฐ™์ง€๋Š” ์•Š์•˜๋‹ค. ๋ฐ”๋กœ ์ƒˆ๋กœ์šด ๋ธŒ๋žœ์น˜๋ฅผ ๋งŒ๋“ค์–ด ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•˜๋Š” ์ž‘์—…์„ ์‹œ์ž‘ํ–ˆ๋‹ค.

abstract class Worker {
  protected static cost: number = 0;
  protected static minOutput: number = 0;
  protected static maxOutput: number = 0;

  protected output: number;
  protected level: number;
  protected levelCost: number;
  // ...
  protected img: string;
  
  constructor() {
    this.output = 0;
    this.level = 1;
    this.levelCost = 0;
    // ...
    this.img = '';
  }

  static getMinOutput(): number {
    return this.minOutput;
  }

  static getMaxOutput(): number {
    return this.maxOutput;
  }

  // ...

  abstract next(): Worker;
}

export default Worker;

๊ธฐ์กด ์ฝ”๋“œ์™€ ๊ฑฐ์˜ ๋น„์Šทํ•˜๋‹ค! ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” public, private, protected์™€ ๊ฐ™์€ ์ ‘๊ทผ ์ œํ•œ์ž๋ฅผ ์ œ๊ณตํ•œ๋‹ค. public์€ ์™ธ๋ถ€์—์„œ ํ•ด๋‹น ํด๋ž˜์Šค์˜ ๋ฉค๋ฒ„์— ์ง์ ‘ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ณ , private์€ ํ•ด๋‹น ํด๋ž˜์Šค ๋‚ด๋ถ€์—์„œ๋งŒ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  protected๋Š” ํ•ด๋‹น ํด๋ž˜์Šค์™€ ๊ทธ ์„œ๋ธŒํด๋ž˜์Šค์—์„œ๋งŒ ์ ‘๊ทผ ํ•  ์ˆ˜ ์žˆ๋‹ค.

Worker์˜ ํ”„๋กœํผํ‹ฐ๋“ค์„ protected๋กœ ์„ค์ •ํ•ด Worker์˜ ์„œ๋ธŒํด๋ž˜์Šค์—์„œ๋งŒ ํ”„๋กœํผํ‹ฐ์— ์ง์ ‘ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋„๋ก ์ œํ•œํ–ˆ๋‹ค. ์ด ํ”„๋กœํผํ‹ฐ๋“ค์€ ์˜ค์ง getter, setter ๋ฉ”์†Œ๋“œ๋ฅผ ํ†ตํ•ด์„œ๋งŒ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค.

์ถ”์ƒ ํด๋ž˜์Šค์™€ ์ถ”์ƒ ๋ฉ”์†Œ๋“œ๋„ ๋งŒ๋“ค ์ˆ˜๋„ ์žˆ๋‹ค. Worker ํด๋ž˜์Šค๋ฅผ ์ถ”์ƒ ํด๋ž˜์Šค๋กœ ๋งŒ๋“ค์–ด new Worker()์ฒ˜๋Ÿผ ์ƒ์„ฑํ•˜์ง€ ๋ชปํ•˜๋„๋ก ํ–ˆ๋‹ค. ๋˜ํ•œ ์•ž์„œ ์ง์ ‘ ์—๋Ÿฌ๋ฅผ ๋˜์ ธ์ฃผ๋˜ next ๋ฉ”์†Œ๋“œ๋„ ์ถ”์ƒ ๋ฉ”์†Œ๋“œ๋กœ ๋งŒ๋“ค์—ˆ๋‹ค. ์ด์ œ ์„œ๋ธŒํด๋ž˜์Šค์—์„œ next๋ฅผ ์˜ค๋ฒ„๋ผ์ด๋“œํ•˜์ง€ ์•Š์œผ๋ฉด ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ ์•Œ์•„์„œ ์žก์•„๋‚ธ๋‹ค.

๋Œ€์ฒด๋กœ ์ž๋ฐ” ๋ฌธ๋ฒ•๊ณผ ๊ต‰์žฅํžˆ ๋น„์Šทํ•˜๋‹ค๋Š” ๋Š๋‚Œ์„ ๋ฐ›์•˜๋‹ค.

๐Ÿ“Œ ์ฝ”๋”ฉ๋ง๊ณ  ๋‹ค๋ฅธ ์ž‘์—…๋“ค

ํ”„๋กœ๊ทธ๋ž˜๋ฐ๋ฟ ์•„๋‹ˆ๋ผ ๊ธฐํš๊ณผ ๊ทธ๋ž˜ํ”ฝ๋„ ์ค‘์š”ํ•œ ์ž‘์—…์ด์—ˆ๋‹ค.

๋งˆ์šฐ์Šค๋กœ ๋„ํŠธ์ฐ๊ธฐ

์•Œ๋ฐ”์š”์ •.

๋„ํŠธ๊ทธ๋ž˜ํ”ฝ ์™ธ์—๋Š” ์„ ํƒ์ง€๊ฐ€ ์—†์—ˆ๋‹ค. ๋‹คํ–‰์ธ ๊ฒƒ์€ ๋‚ด๊ฐ€ ๋„ํŠธ๊ทธ๋ž˜ํ”ฝ์„ ์ข‹์•„ํ•˜๊ณ , ๋„ํŠธ๋ฅผ ์ฐ๋Š” ๊ฒƒ๋„ ์ข‹์•„ํ•œ๋‹ค๋Š” ๊ฒƒ์ด์—ˆ๋‹ค. ๋งˆ์šฐ์Šค๋กœ ์—ด์‹ฌํžˆ ๋„ํŠธ๋ฅผ ์ฐ์–ด ํ”„๋ ˆ์ž„ ํฌํ•จ 30๊ฐœ ์ •๋„์˜ ์–ด์…‹์„ ๋งŒ๋“ค์—ˆ๋‹ค. ์ด ์ค‘์—๋Š” ์ธ๊ฒŒ์ž„์— ์ ์šฉ๋œ ๊ฒƒ๋„ ์žˆ๊ณ , ์•ˆํƒ€๊น๊ฒŒ ์ ์šฉ๋˜์ง€ ๋ชปํ•œ ๊ฒƒ๋„ ์žˆ๋‹ค. ๋นˆ ๊ต์‹ค์—์„œ ๋ˆˆ์˜ค๋Š” ์ฐฝ๋ฐ–์„ ๋ณด๋ฉฐ ๋„ํŠธ์ฐ๋˜(โ€ฆ) ๊ทธ๋•Œ๊ฐ€ ์ƒ๊ฐ๋‚œ๋‹ค.

์‚ฌ๋ผ์ง„ ์ฝ˜ํ…์ธ ์™€ ์ถ”๊ฐ€๋œ ์ฝ˜ํ…์ธ 

์‚ฌ์‹ค Santa Inc.๋Š” 2015๋…„ ์‚ฌํšŒ ์ด์Šˆ๋ฅผ ํ’์žํ•˜๊ธฐ ์œ„ํ•ด ๋งŒ๋“ค์—ˆ๋˜ ๊ฒŒ์ž„์ด์—ˆ๋‹ค. ๋‹น์‹œ์—๋Š” ํ•œ์ฐฝ ์—ด์ •ํŽ˜์ด๋‚˜ ๋…ธ๋™๊ฐœํ˜์— ๋Œ€ํ•œ ๋…ผ์˜๊ฐ€ ํ™œ๋ฐœํ–ˆ๊ณ , Molleindustria์ฒ˜๋Ÿผ ์‚ฌํšŒ์  ๋ฉ”์‹œ์ง€๋ฅผ ๋‹ด์€ ๊ฒฐ๊ณผ๋ฌผ์„ ๋งŒ๋“ค๊ณ  ์‹ถ์—ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ฒซ ๋ฒ„์ „์—๋Š” ํ”Œ๋ ˆ์ด์–ด๊ฐ€ ์•…๋• ์ •์ฑ…์„ ๋‹ค์ˆ˜ ์ฑ„ํƒํ•˜๋Š” ํ›„๋ฐ˜๋ถ€์— ์š”์ •๋“ค์ด ๋…ธ์กฐ๋ฅผ ๊ฒฐ์„ฑํ•ด ํŒŒ์—…์— ๋Œ์ž…ํ•˜๊ณ , ํšŒ์‚ฌ๊ฐ€ ๊ฐ์‹œ, ์†Œ์†ก ์ ˆ์ฐจ๋ฅผ ๊ฑฐ์น˜๋ฉฐ ๋…ธ์กฐ๋ฅผ ํŒŒ๊ดดํ•˜๋Š” ์‹œ๋‚˜๋ฆฌ์˜ค๊นŒ์ง€ ์žˆ์—ˆ๋‹ค.

๊ฒŒ์ž„์„ ๋‹ค์‹œ ๋งŒ๋“  2018๋…„์— ๋˜‘๊ฐ™์€ ์š”์†Œ๋ฅผ ๋„ฃ๊ธฐ์—” ์‹œ์˜์— ๋งž์ง€ ์•Š์•˜๋‹ค. ๋…ธ๋™ ์ด์Šˆ๋ฅผ ๊ทธ๋Œ€๋กœ ๋‹ค๋ฃจ๋˜, ๋ช‡๊ฐ€์ง€ ์ •์ฑ…์„ ๋นผ๊ณ  ์ด๋ฅผ ๋Œ€์ฒดํ•˜๋Š” ๋‹ค๋ฅธ ์ •์ฑ…๋“ค์„ ์ถ”๊ฐ€ํ–ˆ๋‹ค. ๊ธฐ์กด์˜ ํ•ด๊ณ  ํƒญ๋„ ์ธ์‚ฌ ํƒญ์œผ๋กœ ๋ฐ”๊ฟ” ์ง์›์„ ์Šน์ง„์‹œํ‚ค๋Š” ๊ธฐ๋Šฅ์„ ๋”ํ–ˆ๋‹ค.

๊ธฐ์กด์— ์ง์›์œผ๋กœ ์žˆ๋˜ '์ปคํ”Œโ€™๋„ ๋บ๋‹ค. ์˜ˆ์ „์—๋Š” ํฌ๋ฆฌ์Šค๋งˆ์Šค๋งˆ๋‹ค ์ปคํ”Œ์„ ๋ฐˆ์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ํ•œ๊ตญ ์ „ํ†ต(?)์— ๋”ฐ๋ผ ์ปคํ”Œ์„ ์ง์›์œผ๋กœ ๋„ฃ์—ˆ์œผ๋‚˜, ์ง€๊ธˆ ๋ณด๋‹ˆ ๋ณ„๋กœ ์ ์ ˆํ•˜์ง€ ์•Š์•˜๋‹ค. ์บ๋ฆญํ„ฐ์— ์  ๋” ๊ณ ์ •๊ด€๋…์ด ๊ทธ๋Œ€๋กœ ๋ฐ˜์˜๋˜๊ธฐ๋„ ํ–ˆ๊ณ , ์ตœ๊ทผ์—๋Š” ๊ทธ๋Ÿฐ ๋ฐˆ์ด ๊ฑฐ์˜ ์‚ฌ๋ผ์ง„ ๊ฒƒ ๊ฐ™๋‹ค. ๋Œ€์‹  ๊ทธ ์ž๋ฆฌ์— 'ํŠธ๋ฆฌโ€™๋ฅผ ์ถ”๊ฐ€ํ–ˆ๋‹ค. ํฌ๋ฆฌ์Šค๋งˆ์Šคํ•˜๋ฉด ํŠธ๋ฆฌ์ธ๋ฐ ์™œ ์ง„์ž‘์— ์•ˆ ๋„ฃ์—ˆ๋Š”์ง€ ๋ชจ๋ฅด๊ฒ ๋‹ค.

'์•„์ด๋“คโ€™๋„ ๋นผ๋ ค ํ–ˆ๋‹ค. ์•„์ด๋“ค์„ ์œ„ํ•ด ์„ ๋ฌผ์„ ์ฃผ๋Š” ์‚ฐํƒ€๊ฐ€ ์•„๋™๋…ธ๋™์„ ์žํ–‰ํ•˜๋Š” ๋ชจ์Šต์„ ํ†ตํ•ด ๋ธ”๋ž™๊ธฐ์—… ์‚ฐํƒ€ ์ฃผ์‹ํšŒ์‚ฌ์˜ ์ •์ฒด์„ฑ์„ ์ข€ ๋” ๋ช…ํ™•ํžˆ ํ•˜๋ ค๋Š” ์˜๋„์˜€๋Š”๋ฐ, ๋งˆ์Œ์ด ์•„ํŒŒ์„œ ์•„์ด๋“ค์€ ๊ณ ์šฉํ•˜์ง€ ์•Š์•˜๋‹ค๋Š” ๋ง์„ ๋“ฃ๊ณ  ์ด๋ฒˆ์—๋Š” ์—†์• ๋ ค ํ–ˆโ€ฆ์œผ๋‚˜ ๋ชจ ํšŒ์‚ฌ์—์„œ ์‹ฌ์•ผ ์—…๋ฌด์— ๋ถˆ๋ฒ•์ ์œผ๋กœ ์ฒญ์†Œ๋…„ ๋…ธ๋™์ž๋ฅผ ๋™์›ํ–ˆ๋‹ค๋Š” ๋‰ด์Šค๊ฐ€ ๋‚˜์™€ ๋‹ค์‹œ ๋„ฃ๊ฒŒ ๋˜์—ˆ๋‹ค.

์ถ”๊ฐ€๋กœ, ์˜ˆ์ „์— ์ถ”๊ฐ€ํ•˜์ง€ ๋ชปํ–ˆ๋˜ ๋น„์šด์˜ ์•Œ๋ฐ”์š”์ •์„ ๋ฃจ๋Œํ”„์™€ ์ธํ„ด์š”์ • ์‚ฌ์ด์— ๋„ฃ์—ˆ๋‹ค.

๐Ÿค” ๊ทธ๋Ÿฐ ์ง“์€ ํ•˜์ง€ ๋ง์•„์•ผ ํ–ˆ๋Š”๋ฐ

์ œ์ด์ฟผ๋ฆฌ๋ฅผ ๋ฒ„๋ฆฌ๊ณ  ์‹ถ์—ˆ์ง€๋งŒ ์ฒ˜์Œ ๋งŒ๋“ค ๋•Œ ์ œ์ด์ฟผ๋ฆฌ๋กœ ๋งŒ๋“ค์—ˆ๋”๋‹ˆ ๋’ค๋ฐ”๊พธ๋Š” ๊ฒŒ ์‰ฝ์ง€ ์•Š์•˜๋‹ค. ์•„์˜ˆ ์›น ๊ฒŒ์ž„ ์—”์ง„์„ ์“ฐ๋ฉด ์ข‹์€๋ฐ, ๋กœ์ง์„ ๊ณ ์น˜๋Š” ๊ฒƒ๋งŒ์œผ๋กœ๋„ ๋ฒ…์ฐจ์„œ ์ด ๋ถ€๋ถ„์€ ์ž˜ ์‹ ๊ฒฝ์“ฐ์ง€ ๋ชปํ–ˆ๋‹ค.

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

const WorkerItem = (
  name: string,
  img: string,
  korName: string,
  cost: number,
  minOutput: number,
  maxOutput: number
) => {
  return (
    `<li id="${name}">` +
      `<img class="worker-img" src="${img}"/>` +
      `<p>${korName}` +
        '<img class="item-present-img" src="./assets/present.png">' +
        `<span class="t">${cost}</span>` +
        `<br/><span class="pr">${minOutput} ~ ${maxOutput}๊ฐœ ์ƒ์‚ฐ</span>` +
      '</p>' +
    '</li>'
  );
};

export default WorkerItem;

์ง์› ๋ชฉ๋ก์˜ ๊ฐ ์•„์ดํ…œ์„ ์ปดํฌ๋„ŒํŠธ๋กœ ๋งŒ๋“ค์—ˆ๋‹ค. ์ด์ œ ํ•„์š”ํ•œ ๊ณณ์—์„œ ๋ถˆ๋Ÿฌ์™€ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ์ž˜ ๋„ฃ์–ด์ฃผ๋ฉด ๋œ๋‹ค.

import WorkerItem from './WorkerItem';
// ...
drawWorkerList(worker: Worker): void {
  // ...
  this.elements.workerList.append(
    WorkerItem(
      worker.getName(),
      worker.getImg(),
      worker.getKorName(),
      workerClass.getCost(),
      workerClass.getMinOutput(),
      workerClass.getMaxOutput()
    )
  );
  // ...

ํŒŒ๋ผ๋ฏธํ„ฐ๋„ ๋งŽ๊ณ  ๊ด€์‹ฌ์‚ฌ์˜ ๋ถ„๋ฆฌ๋„ ์™„๋ฒฝํ•˜์ง€ ์•Š์•„์„œ ์—ฌ์ „ํžˆ ๋งˆ์Œ์— ์•ˆ ๋“ค์ง€๋งŒ, ๊ทธ๋ž˜๋„ ๋กœ์ง๊ณผ ๋’ค์„ž์—ฌ ์žˆ๋Š” ๊ฒƒ๋ณด๋‹ค๋Š” ์กฐ๊ธˆ ๋‚˜์•„์กŒ๋‹ค. ๋ถ„๋ช… ์ œ์ด์ฟผ๋ฆฌ ์žฅ์ธ๋“ค์€ ๋” ๋‚˜์€ ๋ฐฉ๋ฒ•์„ ์ผ์„ ๊ฒƒ ๊ฐ™์€๋ฐ ์ž˜ ๋ชจ๋ฅด๊ฒ ๋‹ค.

ํ‰์†Œ ๊ฒŒ์ž„ ๊ฐœ๋ฐœ์ชฝ์€ ํฐ ๊ด€์‹ฌ์ด ์—†์Œ์—๋„ ์ฃผ๊ธฐ์ ์œผ๋กœ ๊ฒŒ์ž„์„ ๋งŒ๋“ค์–ด์ง€๊ณ  ์‹ถ์–ด์ง€๋Š” ์‹œ๊ธฐ๊ฐ€ ์˜จ๋‹ค. ๋‹ค์Œ์—๋Š” ์•„์˜ˆ (์˜ˆ์ „์— ํŒŒ๋‹ค๊ฐ€ ๊ด€๋‘”) ์œ ๋‹ˆํ‹ฐ๋ฅผ ๊ณต๋ถ€ํ•ด์„œ ๋งŒ๋“ค์–ด๋ณผ๊นŒํ•œ๋‹ค.

Santa Inc.์˜ ์ฝ”๋“œ๋Š” GitHub ์ €์žฅ์†Œ์—์„œ ์‚ดํŽด๋ณผ ์ˆ˜ ์žˆ๋‹ค.