TDD로 앞서가는 프론트엔드: 디자인, API 없이도 개발을 시작하는 방법

ѐߊ੄߽ݾਃࣗ ೐ۿ౟ূ٘ ਕఠಫߑध੄೐ۿ౟ূ٘ѐߊߑߨٍ૘ӝ 5%%۽೐ۿ౟ূ٘ѐߊೞӝ ೐۽ં౟ী੸ਊೞӝ஠஠য়ݗݒ੢ҙܻ1$ ੿ܻ

ѐߊ੄߽ݾਃࣗ ೐ۿ౟ূ٘ tই૒'&ѐߊ੉૓೯઺ੑפ׮u ൔೠѐߊ૑োࢎਬ

ӝദࢲ ѐߊ੄߽ݾਃࣗ ೐ۿ౟ূ٘ ݃௼স ٣੗ੋઁҕ '& ӝദࢎ೦੹׳ "1*ઁҕ ݃௼সઁҕ ٣੗ੋ
ӝദࢎ೦੹׳ #& ӝദࢎ೦੹׳ ஠஠য়೐ۿ౟ূ٘੄ѐߊ೒۽਋઺ೞա

ѐߊ੄߽ݾਃࣗ ೐ۿ౟ূ٘ ӝദ ࢲߡ ٣੗ੋ ݃௼স '& ೐ۿ౟ূ٘оѐߊਸ द੘ೞӝਤ೧ӝ׮ܻחदр

ӝദࢲ ٣੗ੋ ѐߊ੄߽ݾਃࣗ ೐ۿ౟ূ٘ #& ݃௼স '& "1*ઁҕ ٣੗ੋઁҕ ݃௼সઁҕ
ӝദࢎ೦੹׳ ӝദࢎ೦੹׳ ӝദࢎ೦੹׳ ٣੗ੋ ݃௼স "1*হ੉ޖ঺ਸೡࣻ੓ਸө

ӝദࢲ ٣੗ੋ ѐߊ੄߽ݾਃࣗ ೐ۿ౟ূ٘ #& ݃௼স '& ӝദࢎ೦੹׳ "1*ઁҕ ٣੗ੋઁҕ
݃௼সઁҕ ӝദࢎ೦੹׳ ӝദࢎ೦੹׳ ӝദࢎ೦੹׳ ٣੗ੋ ݃௼স "1*হ੉ޖ঺ਸೡࣻ੓ਸө

٣੗ੋ ݃௼স "1*হ੉ޖ঺ਸೡࣻ੓ਸө ӝദࢲ ੌ੿࢑੿ 10$߂ӝࣿѨૐ ೐۽ં౟ޙࢲ੘ࢿ ӝࣿझఖ֤੄ ߓನߑध֤੄ ಕ੉ૉীٮܲѐߊജ֤҃੄
(JU3FQPTJUPSZࢤࢿ ѐߊੋ೐ۄࣁ౴ ҕాஹನք౟ ਬ౰ѐߊ

ਢѐߊ੄߽ݾ૑੼ ೐ۿ౟ূ٘ ҳઑ੸ਵ۽٣੗ੋ ݃௼স "1*੘সҗэ਷׮ܲ੘সਸӝ׮۰ࢲद੘ ׮ܲߑߨ਷হਸө ੿ܻ

ਕఠಫߑध੄೐ۿ౟ূ٘ѐߊߑߨٍ૘ӝ t"1* ݃௼স੉ই૒աয়૑ঋওणפ׮u ൔೠ'&੄ѐߊ૑োࢎਬ

$PNQPOFOU ܻ࠙оמೠചݶ੄ҳࢿਃࣗ 5FTU పझ౟ ޙઁ೧Ѿ੄ఃਕ٘

׮ܰѱ߄ۄࠁӝചݶ੄ҳࢿਃࣗ ஹನք౟ $PNQPOFOU ചݶਃࣗ ӝמਃࣗ ஹನք౟חചݶ੄ҳࢿਃࣗੑפ׮ زदীӝמਃࣗ੉ӝب೤פ׮
ӝמҳഅী݃௼স਷೙ࣻ੸ੋਃࣗחইתפ׮ ӝמਃҳࢎ೦਷ӝദࢲী੿੄غয੓णפ׮ ৘द ߡౡਸ௿ܼೞݶ 00ಕ੉૑۽੉زೠ׮ զ૞ܳ௿ܼद զ૞оೞ੉ۄ੉౟ػ׮ ಕ੉૑૓ੑद ࢎ੉٘߄ח೦࢚јनػ׮

׮ܰѱ߄ۄࠁӝചݶਸࠁח೐ۿ౟ূ٘ѐߊ೒۽਋ ӝദࢲഛੋ ௏٘੘ࢿ ѐߊ৮ܐ ചݶഛੋ

׮ܰѱ߄ۄࠁӝ୶࢚ചػ೐ۿ౟ূ٘ѐߊ೒۽਋ ੘ࢿѾҗഛੋ ӝמਃҳࢎ೦ഛੋ ௏٘੘ࢿ ѐߊ৮ܐ

׮ܰѱ߄ۄࠁӝపझ౟ܳࠁח೐ۿ౟ূ٘ѐߊ೒۽਋ పझ౟Ѿҗഛੋ ӝദࢲഛੋ ӝמਃҳࢎ೦ഛੋ ௏٘੘ࢿ ѐߊ৮ܐ ୶റ݃௼স߂"1*ܳ੸ਊ

ѐߊ੄߽ݾਃࣗ ೐ۿ౟ূ٘ ӝദ ࢲߡ ٣੗ੋ ݃௼স '& ٣੗ੋ ݃௼স ೐ۿ౟ূ٘оѐߊਸ
द੘ೞӝਤ೧ӝ׮ܻחदр

খࢲաоח೐ۿ౟ূ٘ѐߊ ӝദ ࢲߡ ٣੗ੋ ݃௼স '& ٣੗ੋ ݃௼স ೐ۿ౟ূ٘оѐߊਸ খ׼ӟदр

ӝദࢲܳࠁҊ ௏٘ܳ੘ࢿೞҊ Ѿҗܳഛউೞחੌ߈੸ੋ೐ۿ౟ূ٘ѐߊ೒۽਋ ചݶ੉ইצపझ౟ܳࠁҊ੘ࢿ ӝמਃࣗܳݢ੷੘সೞৈࢶ೯ѐߊ ੿ܻ

٣੗ੋҗ݃௼স੉হח҃਋ "1*оই૒աয়૑ঋ਷҃਋ "1* ݃௼স ٣੗ੋহ੉5%%۽೐ۿ౟ূ٘ѐߊೞӝ

݃௼স ٣੗ੋহ੉5%%۽೐ۿ౟ূ٘ѐߊೞӝ ਋ܻח੉޷݆ࣻ਷৘ઁٜਸా೧ ೐ۿ౟ূ٘੄ױਤపझ౟ܳ੽೧৳णפ׮ ചݶহ੉ѐߊೞӝਤ೧ Ӓ઺যڃࠗ࠙ী઱ݾ೧ঠೡөਃ

݃௼স ٣੗ੋহ੉5%%۽೐ۿ౟ূ٘ѐߊೞӝ view = f(state) ೣࣻ੄ҙ੼ীࢲ߄ۄࠄஹನք౟੄ҳઑ

݃௼স ٣੗ੋহ੉5%%۽೐ۿ౟ূ٘ѐߊೞӝ view = f(state) ೣࣻ੄ҙ੼ীࢲ߄ۄࠄஹನք౟੄ҳઑ HTML String == f(state)

ஹನք౟ח࢚క TUBUF ܳੑ۱߉Ҋ ࠭ WJFX ܳ߈ജೞחੌઙ੄ೣࣻੑפ׮ ױਤపझ౟ղীࢲ਋ܻחҳ୓੸ੋ݃௼স੉ࢿҕ੸ਵ۽Ӓ۰૑Ҋ੓ח૑ঌ೙ਃоহणפ׮
Ӓ੷೙ਃೠਃࣗܳࢶఖೞৈ ੄بೠч੉֢୹غҊ੓ח૑ഛੋೞݶؾפ׮ ݃௼স ٣੗ੋহ੉5%%۽೐ۿ౟ূ٘ѐߊೞӝ // view <div data-testid="wrapper"> <button data-testid="testButton">{{text}}</button> </div> // test const wrapper = document.querySelector('[data-testid="wrapper"]); const button = document.querySelector('[data-testid="button"]);

ஹನք౟పझ౟੄௏٘ҳࢿ ୡӝ࢚కܳ઱ੑೠ׮ ഛੋೠ׮ ೧׼ਃࣗܳӝמೠ׮   ࢚కܳ߸҃ೠ׮ ୶റ ݃௼সѐߊীٮۄࢶఖ੗੄ਤ஖ܳ৤ѹࢲపझ౟੄߸҃ਸ୭ࣗച೤פ׮ ೙ਃೠਃࣗܳࢶఖೠ׮ ഛੋೡਃࣗܳࢶఖೠ׮

рױೠӝמਃҳࢎ೦ ௿ܼ੉оמ೧ঠೠ׮ ߡౡղޙҳӝੑоמ ٣੗ੋҗ݃௼সহ੉ߡౡஹನք౟ҳഅ ࠄ੗ܐীחࢤࢿഋ"*Ѿҗޛ੉ੌࠗನೣغয੓णפ׮

ஹನք౟౵ੌ੘ࢿ <script setup lang="ts"> const props = defineProps<{title: string}>(); const
emits = defineEmits<{click: []}>(); function onClick () { emits.click(); } </script> <template> <button data-testid="button" onClick="onClick"> <span data-testid=“title”>{{props.title}}</span> </button> </template> 7VF$PNQPOFOU'JMF

పझ౟౵ੌ੘ࢿ describe('ੑ۱ೠ ఫझ౟о ੿࢚੸ਵ۽ ߡౡী ֢୹ػ׮.', () => {
// ஹನք౟ܳ ݃਍౟ೞҊ, ୡӝ ࢚కܳ ࠗৈೠ׮. const wrapper = mount(SampleComponent, { props: { title: 'Sample', } }); // ഛੋೡ ਃࣗܳ ࢶఖೠ׮. const buttonTitleElement = findByTestId(wrapper, ‘[data-testid=“title"]'); // ഛੋೠ׮. expect(buttonTitleElement.innerText).toStrictEqual(‘Sample’); }) 5FTU'JMF

పझ౟౵ੌ੘ࢿ describe('ߡౡਸ ௿ܼ द, ௿ܼ ੉߮౟о ߊࢤೠ׮.', () =>
{ // ஹನք౟ܳ ݃਍౟ೞҊ, ୡӝ ࢚కܳ ࠗৈೠ׮. const wrapper = mount(SampleComponent, { props: { title: 'Sample', } }); // ഛੋೡ ਃࣗܳ ࢶఖೠ׮. const button = findByTestId(wrapper, '[data-testid="button"]'); await triggerEvent(button, 'click'); // ഛੋೠ׮. expect(wrapper.emitted('click')).toBeTruthy(); }) 5FTU'JMF

݃௼সহ੉ѐߊೠӝמٜ਷ ݃௼সҳઑоইצ೧׼పझ౟ࢶఖ੗ী੄ઓࢿ੉੓णפ׮ ஹನք౟ী݃௼সਸ߄ੋ٬ೞחҗ੿ NBSLVQ 5FTU4FMFDUPS GVODUJPO ੉חపझ౟ࢶఖ੗ܳഝਊೞৈ ݃௼সҳઑীਬোೞѱ੸ਊೡࣻ੓਺ਸ੄޷೤פ׮

ஹನք౟ী݃௼সਸ߄ੋ٬ೞחҗ੿ <div class="btn wrapper"> <h2 class="btn main-title">!</h2> <button type="button" class="btn
btn-outline-primary"></button> <span class="btn description">ߡౡ ޙҳ</span> </div> ઱য૓.BSLVQ'JMF

btn-outline-primary"></button> <span class="btn description">ߡౡ ޙҳ</span> </div> ઱য૓.BSLVQ'JMF ӝઓ੘ࢿػ݃௼স <button data-testid="button" onClick="onClick"> <span data-testid=“title”>{{props.title}}</span> </button>

btn-outline-primary"></button> <span class="btn description">ߡౡ ޙҳ</span> </div> ઱য૓.BSLVQ'JMF పझ౟ࢶఖ੗ܳ੸ਊೠ.BSLVQ'JMF <div class="btn wrapper"> <h2 class="btn main-title">!</h2> <button type="button" class="btn btn-outline-primary" data-testid=“button” /> <span class="btn description" data-testid=“title”>{{text}}</span> </div>

݃௼সҳઑо߸҃غযبࢶఖ੗ооܻఃחч੉ӝઓҗزੌೞӝٸޙীపझ౟חాҗೠ׮ ஹನք౟ী݃௼সਸ߄ੋ٬ೞחҗ੿ describe('ੑ۱ೠ ఫझ౟о ੿࢚੸ਵ۽ ߡౡী ֢୹ػ׮.', () => {
// ࢤۚ const buttonTitleElement = findByTestId(wrapper, ‘[data-testid=“title"]'); }) describe('ߡౡਸ ௿ܼ द, ௿ܼ ੉߮౟о ߊࢤೠ׮.', () => { // ࢤۚ const button = findByTestId(wrapper, '[data-testid="button"]'); }) <div class="btn wrapper"> <h2 class="btn main-title">!</h2> <button type="button" class="btn btn-outline-primary" data-testid=“button” /> <span class="btn description" data-testid=“title”>{{text}}</span> </div>

"1*হ੉ӝמѐߊೞӝ ߑߨࢲߡо"1*ܳ઴ٸө૑ӝ׮ܽ׮ ߑߨੋఠಕ੉झܳࢲߡ۽ࠗఠઁҕ߉ইNPDLBQJܳ݅ٚ׮ Ӓؘ۠"1*بੋఠಕ੉झبহ׮ݶ

"1*হ੉ӝמѐߊೞӝ ӝദࢲ ٣੗ੋ #& ӝദࢎ೦੹׳ ӝ ദ ࢎ ೦ ੹
׳ ӝദࢲחӝמਃҳࢎ೦ਸഈস੗ীѱ੹׳೤פ׮ '&חࢲߡ۽ࠗఠ"1*ܳ਽׹߉ইചݶਸӒ۰շפ׮ ೞ૑݅ӒѪ੉"1*੄ҳઑী'&੄7JFXоઙࣘؽਸ੄޷ೞ૑ঋणפ׮ '&ীࢲ೙ਃೠ7JFX.PEFM਷"1*৬߹ب۽'&о੿੄ೡࣻ੓णפ׮ '& ӝദࢎ೦੹׳ '&

"1*7JFX.PEFM7JFX "1*-BZFS 7JFX-BZFS "1*৬7JFX.PEFM੄ੋఠಕ੉झܻ࠙

"1*7JFX.PEFM7JFX "1*-BZFS 7JFX.PEFM-BZFS 7JFX-BZFS "1*৬7JFX.PEFM੄ੋఠಕ੉झܻ࠙

"1*7JFX.PEFM7JFX "1*-BZFS 7JFX.PEFM-BZFS 7JFX-BZFS "1*-BZFSח"1*੄ਃ୒җ਽׹ਸҙܻ೤פ׮ JOUFSGBDFחࢲߡীࢲ੿੄ೠ؀۽੘ࢿغযঠೞݴ ೧׼JOUFSGBDFܳా೧ࢲࢲߡ৬૒੽੸ਵ۽ഈস೤פ׮

"1*7JFX.PEFM7JFX "1*-BZFS 7JFX.PEFM-BZFS 7JFX-BZFS 7JFX.PEFM-BZFSীࢶ7JFXীࢎਊೡ.PEFMਸ੿੄೤פ׮ ӝദࢲী੿੄ػӝמਃҳࢎ೦ਸ୽઒ೞب۾੘ࢿ೤פ׮ 7JFXী૒੽੸ਵ۽ࢎਊغחчਸ'&੄ب؀۽੿੄೤פ׮

"1*7JFX.PEFM7JFX "1*-BZFS 7JFX.PEFM-BZFS 7JFX-BZFS 7JFX-BZFSীࢶ7JFX.PEFMਸా೧7JFX੄࢚కܳ੿੄೤פ׮ 7JFX-BZFSীࢲࢎਊೞחч਷   ࢚ਤ7JFX഑਷7JFX.PEFMীࢲ݅૒੽߉ਸࣻ੓णפ׮

ӝמਃҳࢎ೦ ೧׼೐۽೙ஹನք౟חࢲߡীQSP fi MFBQJܳഐ୹ೞৈчਸ଻ਕঠೠ׮ ೧׼ಕ੉૑ীࢲਬ੷੄ץ֎੐ਸࠅࣻ੓׮ ೧׼ಕ੉૑ীࢲਬ੷੄੹ചߣഐܳࠅࣻ੓׮ "1*হ੉ӝמѐߊೞӝ ࠄ੗ܐীחࢤࢿഋ"*Ѿҗޛ੉ੌࠗನೣغয੓णפ׮

7JFX.PEFMਸ੘ࢿೞחҗ੿ function useProfileViewModel () { const state = ref({ nickName:
'nickName', phoneNumber: '010-xxxx-xxxx', }) function getNickName () { return state.value.nickName; } function getPhoneNumber () { return state.value.phoneNumber; } return { getNickName, getPhoneNumber, } } ੐੄۽рױೠೣࣻ੄ഋకܳஂ೮ਸࡺ TUPSF৬э਷ഋకܳࢎਊ೧بޖҙ

7JFX.PEFMਸ߄ఔਵ۽7JFX੘ࢿ <script setup lang="ts"> const { getNickName, getPhoneNumber } =
useProfileViewModel(); </script> <template> <div> <span data-testid="nickName">{{getNickName()}}</span> <span data-testid="phoneNumber">{{getPhoneNumber()}}</span> </div> </template>

పझ౟౵ੌ੘ࢿ describe('ߡౡਸ ௿ܼ द, ௿ܼ ੉߮౟о ߊࢤೠ׮.', () => {
// ஹನք౟ܳ ݃਍౟ೞҊ, ୡӝ ࢚కܳ ࠗৈೠ׮. const wrapper = mount(SampleComponent); // ഛੋೡ ਃࣗܳ ࢶఖೠ׮. const nickName = findByTestId(wrapper, '[data-testid="nickName"]'); const phoneNumber = findByTestId(wrapper, '[data-testid="phoneNumber"]'); // ഛੋೠ׮. expect(nickName.innerText).toStrictEqual('nickName'); expect(phoneNumber.innerText).toStrictEqual('010-xxxx-xxxx'); })

प"1*৬߄ੋ٬ೞחҗ੿ प"1*ח঱ઁա7JFXীࢲࢎਊೞ۰חҳઑ৬࢚੉ೡࣻ੓णפ׮ ഑਷೙ਃহחч੉׸ѹ੓ਸࣻب੓णפ׮ ਋ܻח੉۞ೠ࢚ടী؀࠺ೡࣻ੓যঠ೤פ׮ interface APIResponse { phone: { first:
string; middle: string; last: string; }; nickname: string; name: string; } ৘ઁ

"1*-BZFSܳ੘ࢿೞחҗ੿ async function fetchProfile() { try { const response =
await fetch('/profile', { method: 'GET', headers: { 'Content-Type': 'application/json' } }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return await response.json(); } catch (error) { throw error; } } ࢲߡীࢲ੿੄ػJOUFSGBDFܳӒ؀۽߈ജ೤פ׮

7JFX.PEFMী"1*੸ਊ function useProfileViewModel () { const state = ref({ nickName:
'', phoneNumber: '', }) try { const {phone, nickname} = await fetchProfile(); const {first, middle, last} = phone; state.value = { nickName: nickname, phoneNumber: `${first}-${middle}-${last} }; } catch (e) {} // code… } "1*ೣࣻܳഝਊೞৈ7JFX.PEFMীݏѱ߸ജ೤פ׮ "1*ഐ୹Ѿҗܳ ޷ܻ੿೧૓࢚కী ݏ୾ࢲ౵य

పझ౟౵ੌࣻ੿ describe('ߡౡਸ ௿ܼ द, ௿ܼ ੉߮౟о ߊࢤೠ׮.', () => {
createMockAPI<APIResponse>('/profile', { nickName: 'nickName', phone: { first: '010', middle: 'xxxx', last: 'xxxx' }, name: 'test' }); const wrapper = mount(SampleComponent); const nickName = findByTestId(wrapper, '[data-testid="nickName"]'); const phoneNumber = findByTestId(wrapper, '[data-testid="phoneNumber"]'); expect(nickName.innerText).toStrictEqual('nickName'); expect(phoneNumber.innerText).toStrictEqual('010-xxxx-xxxx'); }) "1*਽׹ਸ.PDLJOH೤פ׮ӝઓ࢚క৬э਺ਵ۽పझ౟חాҗ೤פ׮ "1*.PDLJOH

੿ܻ ٣੗ੋ ݃௼সহ੉೐ۿ౟ূ٘ѐߊೞӝ పझ౟ࢶఖ੗ܳഝਊೞৈ ӝמݢ੷ѐߊ ചݶ؀नపझ౟۽ӝמਃҳࢎ೦ഛੋ ୶റ݃௼সѐߊद
ࢶఖ੗ܳ݃௼সҳઑীݏѱ৤ӣਵ۽ࢲࣻ੿୭ࣗച

੿ܻ "1*হ੉೐ۿ౟ূ٘ѐߊೞӝ "1*৬7JFX.PEFM 7JFXр੄ۨ੉যܻܳ࠙ "1*-BZFSীࢶ"1*੄਽׹ਃ୒ਸ׮ܖب۾ѐߊ 7JFX.PEFM-BZFSীࢲחӝמਃҳࢎ೦ীݏب۾'&ীࢲࢎਊೡJOUFSGBDF߹بѐߊ
7JFX-BZFSীࢲח7JFX.PEFMۨ੉যܳా೧"1*ղਊী੽Ӕೡࣻ੓ب۾ѐߊ ୶റ"1*ѐߊ৮ܐद 7JFX.PEFMࣻ੿߂"1*.PDLJOHਸాೞৈࣻ੿୭ࣗച

೐۽ં౟ী੸ਊೞӝ஠஠য়ݗݒ੢ҙܻ1$

೐۽ં౟ী੸ਊೞӝ஠஠য়ݗݒ੢ҙܻ1$ ೐۽ં౟ ೧Ѿߑߨ ೐۽ં౟৮ܐ

೐۽ં౟ী੸ਊೞӝ஠஠য়ݗݒ੢ҙܻ1$ ೐۽ં౟ ೐۽ં౟৮ܐ ೧Ѿߑߨ ೧Ѿ೧ঠೡޙઁ

೐۽ં౟ী੸ਊೞӝ஠஠য়ݗݒ੢ҙܻ1$ ೧Ѿ೧ঠೡޙઁחޖ঺੉঻ਸөਃ ஠஠য়ݗݒ੢ҙܻ1$੄

೐۽ં౟ୡӝ࢚ടҗ׼ݶ೮؍җઁ ӝദ ٣੗ੋ ݃௼স "4"1 ѐਘ ! ైੑदӝܳঌࣻহח٣੗ੋܻࣗझ ۽ஸઑ૒ղ׮ܲ೐۽ં౟۽ੋ೧ ٣੗ੋܻࣗझ੄ైੑदӝоѐਘо۝૑ো੉৘࢚غח࢚ട

೐۽ં౟ୡӝ࢚ടҗ׼ݶ೮؍җઁ ӝദ '& ௾೐۽ં౟о੓ਵפળ࠺೧઱ࣁਃ ࢎ੹ઑਯ৮ܐ ѐߊ৘੿दӝীݏ୾޷ܻഛࠁػ'&ܻࣗझ ৢ೧੄઱ਃ೐۽ં౟۽ࢤпೞৈ ޷ܻ׮ܲ೐۽ં౟੄ӝദٜب߹ب૓೯ؼ҅ദ੉হח࢚క

೐۽ં౟ୡӝ࢚ടҗ׼ݶ೮؍җઁ ࢶ೯೐۽ࣁझبੑ ӝദ ٣੗ੋ ݃௼স ޷ܻഛࠁೠ'&ܻࣗझ੄਍ਊ߂٣੗ੋܻࣗझ੄ҕߔ೧ࣗݾ੸ '&ࢶ೯ѐߊ೐۽ࣁझبੑ

೐۽ࣁझ੸ਊҗ੿ ળ࠺җ੿ प೯җ੿ ࢸٙҗ੿

೐۽ࣁझ੸ਊҗ੿ળ࠺җ੿ ױਤపझ౟ী੊ࣼೞ૑ঋ਷౱ਗٜ ޖ঺ਸపझ౟ೡѪੋо যڌѱపझ౟ೡѪੋо ӒܻҊӒѪਸযڌѱഛनೡࣻ੓ਸѪੋо ӝמױਤ੄ੌ੿࢑੿ ӝദࢲܳӝמױਤ۽যڌѱଂѓѪੋо ݆਷࠙۝੄ӝദী؀ೠੌ੿ਸҳࢿਗ߹۽যڌѱઑਯೡѪੋо

೐۽ࣁझ੸ਊҗ੿ળ࠺җ੿ nnnnnn nnnnnn nnnnnn ӝദࢲ ӝמܻ࠙ " # $
% ӝמਃҳࢎ೦ ௿ܼೞݶ000ೠ׮ "1*ਃ୒Ѿҗীٮۄ   000ചݶਸ֢୹ೠ׮ ૓ੑदۄ਋ఠܳ"۽੉زೠ׮ ੑ۱ػчী؀೧ࢲ   ਬബࢿѨࢎܳೠ׮ ੌ੿࢑੿ ೒ې׬ನழ NE NE NE NE ӝמױਤ੄ੌ੿࢑੿

పझ౟ 5FTU" 5FTU# 5FTU$ 5FTU% 5FTU4FMFDUPS" 5FTU4FMFDUPS# 5FTU4FMFDUPS$ 5FTU4FMFDUPS% ೐۽ࣁझ੸ਊҗ੿ળ࠺җ੿
ӝמਃҳࢎ೦ ௿ܼೞݶ000ೠ׮ "1*ਃ୒Ѿҗীٮۄ   000ചݶਸ֢୹ೠ׮ ૓ੑदۄ਋ఠܳ"۽੉زೠ׮ ੑ۱ػчী؀೧ࢲ   ਬബࢿѨࢎܳೠ׮ ӝמܻ࠙ܳాೠױਤపझ౟दաܻয়ഝਊ పझ౟दաܻয় ௿ܼೞݶ000ೠ׮ "1*ਃ୒Ѿҗীٮۄ   000ചݶਸ֢୹ೠ׮ ૓ੑदۄ਋ఠܳ"۽੉زೠ׮ ੑ۱ػчী؀೧ࢲ   ਬബࢿѨࢎܳೠ׮ ஹನք౟ $PNQPOFOU" $PNQPOFOU# $PNQPOFOU$

೐۽ࣁझ੸ਊҗ੿ࢸٙҗ੿ ೐۽ࣁझبੑী؀ೠܻझ௼ ୶о੸ੋ࠺ਊী؀ೠܻझ௼חযڌѱೡѪੋо ѐߊӝр੉טযա૓ঋਸө ੿݈۽ੌ੿ਸখ׼ӡࣻ੓ਸө ࢶ೯ѐߊ۽ੋೠ୶о࠺ਊ੉੹୓ӝр؀࠺঴݃ա੉ٙੋо

೐۽ࣁझ੸ਊҗ੿ࢸٙҗ੿ ೐۽ࣁझبੑী؀ೠܻझ௼ '&ੌ੿࢑੿ ٣੗ੋ૑ো৘࢚दр '&ੌ੿࢑੿઺ ݃௼সҙ۲ੌ੿ ୨ѐߊ৘࢚ӝр ࢶ೯ѐߊ۽ੋೠ '&୶о࠺ਊ
ࢶ೯ѐߊ۽ੋೠ୶о࠺ਊ੉੹୓ӝр؀࠺঴݃ա੉ٙੋо

೐۽ࣁझ੸ਊҗ੿ࢸٙҗ੿ ٣੗ੋ૑ো৘࢚दр '&ੌ੿࢑੿઺ ݃௼সҙ۲ੌ੿ '&ੌ੿࢑੿ ѐਘ ѐਘ ୨ѐߊ৘࢚ӝр ࢶ೯ѐߊ۽ੋೠ
'&୶о࠺ਊ ੹୓'&ѐߊੌ੿ѐਘ ೐۽ࣁझبੑী؀ೠܻझ௼

೐۽ࣁझ੸ਊҗ੿ࢸٙҗ੿ ೐۽ࣁझبੑী؀ೠܻझ௼ '&ੌ੿࢑੿઺ ݃௼সҙ۲ੌ੿ '&ੌ੿࢑੿ ѐਘ ٣੗ੋ૑ো৘࢚दр ѐਘ ѐਘ
ѐਘ ୨ѐߊ৘࢚ӝр ࢶ೯ѐߊ۽ੋೠ '&୶о࠺ਊ ٣੗ੋ૑ো৘࢚ӝрѐਘ

೐۽ࣁझ੸ਊҗ੿ࢸٙҗ੿ ೐۽ࣁझبੑী؀ೠܻझ௼ '&ੌ੿࢑੿ ѐਘ ٣੗ੋ૑ো৘࢚दр ѐਘ '&ੌ੿࢑੿઺ ݃௼সҙ۲ੌ੿ ѐਘ
ѐਘ ѐਘ ୨ѐߊ৘࢚ӝр ѐਘ ࢶ೯ѐߊ۽ੋೠ '&୶о࠺ਊ ੹୓'&ѐߊੌ੿઺݃௼সҙ۲ੌ੿ѐਘ

೐۽ࣁझ੸ਊҗ੿ࢸٙҗ੿ '&ੌ੿࢑੿ ѐਘ ٣੗ੋ૑ো৘࢚दр ѐਘ '&ੌ੿࢑੿઺ ݃௼সҙ۲ੌ੿ ѐਘ ѐਘ
ѐਘ ୨ѐߊ৘࢚ӝр ѐਘ ࢶ೯ѐߊ۽ੋೠ '&୶о࠺ਊ ѐਘ ೐۽ࣁझبੑറ   ୨ѐߊ৘࢚ӝр ѐਘ ୶о࠺ਊ੄୭؀஖о૑ো৘࢚दрࠁ׮ૣ׮ݶ ୭ࣗѐਘ੉࢚ѐߊӝрਸױ୷оמೡѪਵ۽౸ױ _ѐਘ _ѐਘ ೐۽ࣁझبੑী؀ೠܻझ௼ ୭؀৘࢚ӝр ݃௼স੸ਊҙ۲ੌ੿ਸ׮द୊਺ࠗఠࣗചೞח҃਋

೐۽ࣁझ੸ਊҗ੿प೯җ੿ ࠂ੟ೠపझ౟ா੉झٜী؀ೠ૓ੑ੢߷ ৘ઁী࠺೧ࠂ੟ೠஹನք౟పझ౟ ӝמҗചݶਸઑ೤ೞחҗ੿ীࢲ੄੉ग ҳ࢚೮؍ஹನք౟৬׮ܲҳઑ੄݃௼স ৈ۞ѐ੄ஹನք౟ܳపझ౟ೞח҃਋ పझ౟ࣄ۩ఠ઺ࠂޙઁ

೐۽ࣁझ੸ਊҗ੿प೯җ੿ ಁఢ1SPQTܳ઱ੑ߉ইӒ؀۽۪؊݂೧઱חױࣽೠஹನք౟ $PNQPOFOU 1SPQT )5.- HTML = component(props) ಁఢ੄ஹನք౟חэ਷ੑ۱ী؀೧э਷Ѿҗܳઁҕ೤פ׮
$PNQPOFOU QSPQT PVUQVU

೐۽ࣁझ੸ਊҗ੿प೯җ੿ ಁఢ৻ࠗীࢲঐޗ੸ਵ۽࢚కܳ઱ੑ߉ই۪؊݂೧઱חஹನք౟ $PNQPOFOU 1SPQT )5.- 4UBUF QSPQT PVUQVU HTML
= component(props) + state ಁఢ੄ஹನք౟оэ਷ੑ۱ী؀೧э਷Ѿҗܳઁҕೡࣻ੓ب۾ ࠗࣻബҗੋTUBUFܳ.PDLJOHೞৈ࢚ࣻചदఈפ׮ $PNQPOFOU TUBUF

೐۽ࣁझ੸ਊҗ੿प೯җ੿ ಁఢৈ۞ஹನք౟۽ҳࢿػా೤ஹನք౟ $PNQPOFOU )5.- $PNQPOFOU" $PNQPOFOU# $PNQPOFOU QSPQT PVUQVU
HTML = component(props*(componentB(propsB) + componentC(propsC))) ಁఢ੄ஹನք౟оэ਷ੑ۱ী؀೧э਷Ѿҗܳઁҕೡࣻ੓ب۾ ࠗࣻബҗੋ੗धஹನք౟੄QSPQTܳ.PDLJOHೞৈѾҗчਸ࢚ࣻചदఈפ׮ $PNQPOFOU QSPQT PVUQVU $PNQPOFOU QSPQT PVUQVU

೐۽ࣁझ੸ਊҗ੿प೯җ੿ ҳ࢚೮؍ஹನք౟৬׮ܲҳઑ੄݃௼স $PNQPOFOU" $PNQPOFOU$ $PNQPOFOU# $PNQPOFOU$ ӝמ੸ਵ۽э਷ӝמਵ۽р઱ೞৈ݅ٚஹನք౟੄݃௼ੑҳઑо࢚੉ೠ҃਋ ݃௼সীਃ୒ೞৈ೧׼ҳઑܳݏ୻פ׮
ೞա੄ஹನք౟۽݅٘חؘ࠺ਊ੉௼׮ݶ   ӝמਸ߹ب੄ݽٕ۽ܻ࠙ೞৈ ৈ۞ѐ੄ஹನք౟оӝמਸҕਬ೤פ׮ ӝദ੸ਃࣗ੄߸҃ਵ۽ӝמਸҕాചदఃӝয۵׮ݶ   ߹ب੄ஹನք౟۽ܻ࠙೤פ׮ ੉࢚җഅप੄࠺ਊਸ೤ܻ੸ਵ۽ݏ୶חҗ੿੉೙ਃ

೐۽ࣁझ੸ਊҗ੿प೯җ੿ పझ౟ࣄ۩ఠ੄࢚ࣘޙઁ $PNQPOFOU$ $PNQPOFOU" $PNQPOFOU$ DBTF DBTF EBUB -
UFTUJE   XSBQQFS EBUB - UFTUJE   DPNQPOFOU$ ৈ۞ஹನք౟ܳղನೠஹನք౟ܳపझ౟ೞח҃਋ ࢶఖ੗੄਋ࢶࣽਤ оמೞ׮ݶ੉޷పझ౟ػஹನք౟੄Ѿҗܳन܉ೞҊ   TIBMMPX.PVOUӝמਸഝਊೞৈ   पઁஹನք౟о۪؊݂غ૑ঋ਷࢚క۽పझ౟ పझ౟੄઱୓оࠗݽஹನք౟੐ਵ۽   فࣘࢿч੉୽جೡ҃਋ ࠗݽஹನք౟ীࢲࠗৈೠࣘࢿчਸ਋ࢶद   ߹ب੄ஹನք౟۽ܻ࠙ೠ׮ ೧׼పझ౟੄઱୓оغחஹನք౟ܳݺഛೞѱഛੋ

஠஠য়ݗݒ੢ҙܻ1$ѐߊఋ੐ۄੋ ӝദࢲ ୭ઙӝദࢲ࠙۝Q

஠஠য়ݗݒ੢ҙܻ1$ѐߊఋ੐ۄੋ ӝദࢲ ੌ੿࢑੿ ࢑੿غ঻؍ੌ੿NE ୭ઙӝദࢲ࠙۝Q

஠஠য়ݗݒ੢ҙܻ1$ѐߊఋ੐ۄੋ ӝദࢲ ੌ੿࢑੿ '&ѐߊ ٣੗ੋܻࣗझੋೠైੑदӝ૑ো ਍৔੉ग۽ੋೠ"1*ѐߊੋ۱ࠗ઒ 5%%ܳాೠࢶ೯ѐߊद੘
࢑੿غ঻؍ੌ੿NE ୭ઙӝദࢲ࠙۝Q

஠஠য়ݗݒ੢ҙܻ1$ѐߊఋ੐ۄੋ ӝദࢲ ੌ੿࢑੿ '&ѐߊ ٣੗ੋ ݃௼স ٣੗ੋ߂݃௼সܻࣗझѐਘٍైੑ ٣੗ੋܻࣗझੋೠైੑदӝ૑ো
਍৔੉ग۽ੋೠ"1*ѐߊੋ۱ࠗ઒ 5%%ܳాೠࢶ೯ѐߊद੘ ࢑੿غ঻؍ੌ੿NE ୭ઙӝദࢲ࠙۝Q

஠஠য়ݗݒ੢ҙܻ1$ѐߊఋ੐ۄੋ ੌ੿࢑੿ '&ѐߊ ٣੗ੋ ݃௼স '&ѐߊ৮ܐ ٣੗ੋ߂݃௼সѐߊ৮ܐ ѐߊػ݃௼সӝઓীѐߊػӝמਃࣗ৬Ѿ೤
٣੗ੋ߂݃௼সܻࣗझѐਘٍైੑ ٣੗ੋܻࣗझੋೠైੑदӝ૑ো ਍৔੉ग۽ੋೠ"1*ѐߊੋ۱ࠗ઒ 5%%ܳాೠࢶ೯ѐߊद੘ ࢑੿غ঻؍ੌ੿NE ୭ઙӝദࢲ࠙۝Q ٣੗ੋܻࣗझੋೠైੑदӝ૑ো ਍৔੉ग۽ੋೠ"1*ѐߊੋ۱ࠗ઒ 5%%ܳాೠࢶ೯ѐߊद੘ ࢑੿غ঻؍ੌ੿NE ୭ઙӝദࢲ࠙۝Q

஠஠য়ݗݒ੢ҙܻ1$ѐߊఋ੐ۄੋ ٣੗ੋ ݃௼স '&ѐߊ৮ܐ 2" ܾܻૉ ٣੗ੋ߂݃௼সѐߊ৮ܐ ѐߊػ݃௼সӝઓীѐߊػӝמਃࣗ৬Ѿ೤
٣੗ੋ߂݃௼সܻࣗझѐਘٍైੑ ٣੗ੋܻࣗझੋೠైੑदӝ૑ো ਍৔੉ग۽ੋೠ"1*ѐߊੋ۱ࠗ઒ 5%%ܳాೠࢶ೯ѐߊद੘ ࢑੿غ঻؍ੌ੿NE ୭ઙӝദࢲ࠙۝Q 2"߂ܾܻૉ૓೯ ٣੗ੋ߂݃௼সѐߊ৮ܐ ѐߊػ݃௼সӝઓীѐߊػӝמਃࣗ৬Ѿ೤ ٣੗ੋ߂݃௼সܻࣗझѐਘٍైੑ ٣੗ੋܻࣗझੋೠైੑदӝ૑ো ਍৔੉ग۽ੋೠ"1*ѐߊੋ۱ࠗ઒ 5%%ܳాೠࢶ೯ѐߊद੘ ࢑੿غ঻؍ੌ੿NE ٣੗ੋܻࣗझੋೠైੑदӝ૑ো ਍৔੉ग۽ੋೠ"1*ѐߊੋ۱ࠗ઒ 5%%ܳాೠࢶ೯ѐߊद੘ ࢑੿غ঻؍ੌ੿NE

Ѿҗ "4 - *4 50 - #& '& ѐਘ ѐਘ
୶оࣗਃػ'&ӝр ѐਘ ٣੗ੋܻࣗझ۽ੋೠ'&ѐߊ૑ো ѐਘ ઴যٚ੹୓ѐߊӝр ѐਘ ୨ѐߊӝр ѐਘ ѐਘ ੿ࠁٜ਷بݫੋীٮۄо߸੸ੌࣻ੓णפ׮ ೦ݾ ӝр ٣੗ੋ ѐਘ ݃௼স ѐਘ ࢲߡ ѐਘ

Ѿҗ "4 - *4 50 - #& '& ѐਘ ѐਘ
୶оࣗਃػ'&ӝр ѐਘ ٣੗ੋܻࣗझ۽ੋೠ'&ѐߊ૑ো ѐਘ ઴যٚ੹୓ѐߊӝр ѐਘ ୨ѐߊӝр ѐਘ ѐਘ ੿ࠁٜ਷بݫੋীٮۄо߸੸ੌࣻ੓णפ׮ ೦ݾ ӝр ٣੗ੋ ѐਘ ݃௼স ѐਘ ࢲߡ ѐਘ ୨ѐߊӝрডױ୷

੿ܻ ݃௼স഑਷٣੗ੋ੉ग۽ѐߊਸ޷ܞঠೞח౱ ӝמױਤ۽ੌ੿࢑੿߂ೖ୛ܳաׂࣻ੓ח౱ ױਤపझ౟ী੊ࣼೞѢաױਤపझ౟ܳѐߊ೐۽ࣁझী੸ਊೞҊर਷౱ '&ܻࣗझо׮ܲഈসࠗࢲী࠺೧ৈਬ੓ח࢚ടੋ౱ ੉۠౱੉ۄݶبੑਸҊ޹೧ࠁࣁਃ

੿ܻ ٣੗ੋ ݃௼সহ੉೐ۿ౟ূ٘ѐߊೞӝ పझ౟ࢶఖ੗ܳഝਊೞৈ ӝמݢ੷ѐߊ ചݶ؀नపझ౟۽ӝמਃҳࢎ೦ഛੋ ୶റ݃௼সѐߊद
ࢶఖ੗ܳ݃௼সҳઑীݏѱ৤ӣਵ۽ࢲࣻ੿୭ࣗച "1*হ੉೐ۿ౟ূ٘ѐߊೞӝ "1*৬7JFX.PEFM 7JFXр੄ۨ੉যܻܳ࠙ ୶റ"1*ѐߊ৮ܐद 7JFX.PEFMࣻ੿߂"1*.PDLJOHਸాೞৈࣻ੿୭ࣗച

੿ܻ ੸ਊױ҅ ೐۽ࣁझܳ੸ਊೞӝ੉੹ী ޙઁ࢚ടী؀ೠ੸೤ೠ೧Ѿߑߨੋ૑Ҋ޹ ӝמױਤ۽সޖܻܳ࠙ೡࣻ੓ח૑ ױਤపझ౟ܳ೐۽ં౟ী੸ਊೡࣻ੓ח૑
'&ܻࣗझীৈਬо੓ח૑ ѐߊী೙ਃೠױਤపझ౟੄ݾ੸੿ܻ߂ҕਬ ୶о੸ਵ۽ࣗਃغח࠺ਊ੉੹୓೐۽ં౟ੌ੿ী৔ೱ੉੓ਸ૑Ѩష

TDD로 앞서가는 프론트엔드: 디자인, API 없이도 개발을 시작하는 방법

TDD로 앞서가는 프론트엔드: 디자인, API 없이도 개발을 시작하는 방법

More Decks by kakao

Other Decks in Programming

Featured

Transcript