Vue TDD

Vue TDD - E2E ํŽธ

2020. 8. 2. 21:01
๋ชฉ์ฐจ
  1. Table of Content
  2. ๐Ÿ“Œ Introduction
  3. ๐Ÿ“Œ Usage of Cypress1
  4. ๐Ÿ“Œ Usage of Cypress2
  5. ๐Ÿ“Œ Usage of Cypress3
  6. ๐Ÿ“Œ Usage of Cypress4
  7. ๐Ÿ“Œ Conclusion
  8. ๐Ÿ“Œ Reference
๋ฐ˜์‘ํ˜•

Table of Content

  • Introduction
  • Usage of Cypress1
  • Usage of Cypress2
  • Usage of Cypress3
  • Usage of Cypress4
  • Conclusion
  • Reference

๐Ÿ“Œ Introduction

์•ˆ๋…•ํ•˜์„ธ์š”. ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” e2e test๋ฅผ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค. Cypress๋ฅผ ์ด์šฉํ•˜์—ฌ ์ง„ํ–‰ํ•˜๊ฒŒ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๐ŸŽ‰ ์ด๋ฒˆ ํฌ์ŠคํŒ…์€ ๊ฐ„๋‹จํ•˜๊ฒŒ tdd-todo๋ฅผ ํ†ตํ•˜์—ฌ 5๊ฐœ์˜ todo๋ฅผ ์ถ”๊ฐ€ํ•ด๋ณด๊ณ  5๊ฐœ๊ฐ€ ์ •๋ง๋กœ ์ถ”๊ฐ€๊ฐ€ ๋ฌ๋Š”์ง€์— ๊ด€ํ•œ e2eํ…Œ์ŠคํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

๐Ÿšจํ•ด๋‹น ํฌ์ŠคํŒ…์—์„œ๋Š” ์„ค์น˜ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ๋Š” ๋‹ค๋ฃจ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ Cypress์˜ ๋ฌธ๋ฒ•๊ณผ ๊ฐ™์€ ์ž์„ธํ•œ ๋ฐฉ๋ฒ•์€ ๋‹ค๋ฃจ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๐Ÿ“Œ Usage of Cypress1

Cypress๋ฅผ ์ด์šฉํ•˜๊ธฐ ์ „์— DOM ํƒ์ƒ‰ ํ• ๋•Œ ํ•ญ์ƒ ์—ผ๋‘ํ•ด์•ผ ํ•˜๋Š” ๊ฒƒ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๐ŸคŸ๐Ÿป DOM ํƒ์ƒ‰: ์ž˜๋ชป๋œ ์˜ˆ

container.querySelector('.box > .value')
.querySelector('span.value')
.querySelector('.text.white')
container.children[0];

๐ŸคŸ๐Ÿป DOM ํƒ์ƒ‰: ์˜ฌ๋ฐ”๋ฅธ ์˜ˆ

container.querySelector('.count-value')
๊ธฐ๋Šฅ๋งŒ์„ ์œ„ํ•œ ์˜๋ฏธ์žˆ๋Š” ํด๋ž˜์Šค๋ช… ์‚ฌ์šฉ
container.querySelector('[data-testid="count-value"]')
ํ…Œ์ŠคํŠธ๋ฅผ ์œ„ํ•œ ๋ณ„๋„์˜ ์†์„ฑ๊ฐ’ ์‚ฌ์šฉ

์ด๋ ‡๊ฒŒ ์‚ฌ์šฉ์„ ํ•ด์ฃผ๋Š” ์ด์œ ๋Š” html๊ณผ ๊ฐ™์€ ์‹œ๊ฐ์ ์ธ ์š”์†Œ๊ฐ€ ๋ฐ”๋€Œ์—ˆ์„๋•Œ ํ…Œ์ŠคํŠธ๊ฐ€ ๊ธˆ๋ฐฉ ๊นจ์ง€๋Š” ๊ฒƒ์„ ๋ฐฉ์ง€ ํ•˜๊ธฐ ์œ„ํ•จ์ž…๋‹ˆ๋‹ค.

๐Ÿ“Œ Usage of Cypress2

์ตœ๋Œ€ํ•œ ์ž์ฃผ ์“ฐ์ด๋Š” ๊ฒƒ๋“ค์€ command๋กœ ๋“ฑ๋กํ•ด์ฃผ๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

// commands.js

Cypress.Commands.add('cget', (datacy) => cy.get(`[data-cy=${datacy}]`));

์ €๋Š” ํ•ญ์ƒ dom์„ ๊ฐ€์ ธ์˜ฌ๋•Œ data-cy๋กœ ์„ค์ •์„ ํ•ฉ๋‹ˆ๋‹ค. ์œ„ ์ฒ˜๋Ÿผ ๋‹จ์ถ•ํ‚ค๋ฅผ ๋“ฑ๋กํ•ด์ฃผ์ง€ ์•Š์€ ์ƒํ™ฉ์—์„œ๋Š” cy.get('[data-cy=${datacy}]')์ฒ˜๋Ÿผ ๋ถˆ๋Ÿฌ์˜ค๊ฒŒ ๋˜์–ด์žˆ์–ด ๊ท€์ฐฎ์„๋•Œ๊ฐ€... ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ํ•œ๋ฒˆ์— cy.cget('datacy')๋กœ ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋ ‡๊ฒŒ ํ•˜๋Š” ์ด์œ ๋Š” ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋ฅผ ๋ณด๋ฉด ํ…Œ์ŠคํŠธ ์˜๋„๊ฐ€ ๋ช…ํ™•ํ•˜๊ฒŒ ๋‚˜์™€์žˆ์–ด์•ผ ํ•˜๋Š”๋ฐ e2eํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋Š” ๋Œ€๋ถ€๋ถ„ ๊ทธ๋ ‡์ง€ ๋ชปํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ตœ๋Œ€ํ•œ ์ผ์ƒ ์–ธ์–ด(์‚ฌ๋žŒ์—๊ฒŒ ํŽธ์•ˆํ•จ์„ ์ฃผ๋Š”)์œผ๋กœ ๋œ commands๋ฅผ ์ด์šฉํ•˜์—ฌ ์ด๋Ÿฌํ•œ ๋ถ€๋ถ„์„ ์ค„์ด๊ธฐ ์œ„ํ•จ์ž…๋‹ˆ๋‹ค.

๐Ÿ“Œ Usage of Cypress3

์„ธ๋ฒˆ์งธ๋Š” ํ•œ๊ฐœ์˜ ๋™์ž‘์œผ๋กœ ๋งŽ์€ ํ…Œ์ŠคํŠธ๋ฅผ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

์ด๋ ‡๊ฒŒ ์ž‘์„ฑํ•˜๋Š” ์ด์œ ๋Š” ๊ฐ„๊ฒฐ์„ฑ์„ ์ง€ํ‚ค๊ธฐ ์œ„ํ•ด์„œ ์ž…๋‹ˆ๋‹ค. e2e ์ฝ”๋“œ๋Š” ์‹ค์ œ ๋™์ž‘์„ ์„ ์–ธํ•˜๋Š” ์ฝ”๋“œ๋“ค๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ์–ด์„œ ์ž์นซ ํ•˜๋ฉด ์ฝ”๋“œ์˜ ๊ธธ์ด๊ฐ€ ๊ธฐํ•˜๊ธ‰์ˆ˜ ์ ์œผ๋กœ ๊ธธ์–ด์ง€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ์ด๋ ‡๊ฒŒ ๊ธธ์–ด์ง„ ์ฝ”๋“œ๋Š” ๊ฐ€๋…์„ฑ์ด ๋–จ์–ด์ง€๋ฉฐ ์œ„์— ์–ธ๊ธ‰ํ–ˆ๋˜ ์˜๋„ ์กฐ์ฐจ ๋งค์šฐ ๋ถˆ๋ถ„๋ช… ํ•ด์ง€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ fail์ด ๋–จ์–ด์ง€๊ฒŒ ๋˜์–ด๋„ debugํ•˜๊ธฐ๊ฐ€ ๋งค์šฐ ์–ด๋ ค์›Œ ์ง‘๋‹ˆ๋‹ค.(์–ด๋А ๋™์ž‘์—์„œ ์ •ํ™•ํ•˜๊ฒŒ ์–ด๋–ค ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ๋Š”์ง€ ๋ชจ๋ฅด๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.) ๋”ฐ๋ผ์„œ ํ•œ๊ฐœ์˜ ๋™์ž‘์„ ํ•˜๋”๋ผ๋„ ์ตœ๋Œ€ํ•œ ๋งŽ์€ ํ…Œ์ŠคํŠธ๊ฐ€ ์ˆ˜๋ฐ˜๋˜์–ด ์งˆ ์ˆ˜ ์žˆ๋„๋ก ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

์œ„์˜ ๊ทธ๋ฆผ์—์„œ ๋‹ค์Œ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅธ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

๋‹ค์Œ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋Š” ํ–‰์œ„๋Š” ์ด 4๊ฐ€์ง€๋ฅผ ํ…Œ์ŠคํŠธ๋ฅผ ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

  1. ๋Œ€ํšŒ๋ช…์„ ์ž…๋ ฅํ•˜๋ผ๋Š” ๋ฉ”์„ธ์ง€๊ฐ€ ์ •ํ™•ํ•˜๊ฒŒ ๋‚˜์˜ค๋Š”์ง€
  2. ์ฐธ๊ฐ€์ž ์ˆ˜๋ฅผ ์ž…๋ ฅํ•˜๋ผ๋Š” ๋ฉ”์„ธ์ง€๊ฐ€ ์ •ํ™•ํ•˜๊ฒŒ ๋‚˜์˜ค๋Š”์ง€
  3. (์‚ฌ์ง„์—์„œ๋Š” ๋‚˜์˜ค์ง„ ์•Š์ง€๋งŒ)ํ† ์ŠคํŠธ ๋ฉ”์„ธ์ง€๊ฐ€ ์ •ํ™•ํ•˜๊ฒŒ ์ถœ๋ ฅ์ด ๋˜๋Š”์ง€
  4. ํผ์ด ๋‹ค์ฑ„์›Œ์ง€์ง€ ์•Š์œผ๋ฉด route ์ด๋™์ด ๋˜์ง€ ์•Š๊ฒŒ ํ•˜๋Š”์ง€

์ด๋Ÿฐ์‹์œผ๋กœ ์ตœ๋Œ€ํ•œ ํ•œ๊ฐœ์˜ ๋™์ž‘์œผ๋กœ ๋งŽ์€ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋Š” ์ฝ”๋“œ๋ฅผ ์šฐ์„ ์ ์œผ๋กœ ์ž‘์„ฑํ•˜๊ณ  ๊ทธ๋’ค์— ์—๋Ÿฌ๊ฐ€ ๋งŽ์ด ๋‚  ๋ถ€๋ถ„์„ ์„ธ๋ถ€์ ์œผ๋กœ ์ž‘์„ฑ์„ ํ•˜๋Š”๊ฒŒ ์ข‹์Šต๋‹ˆ๋‹ค.

๐Ÿ“Œ Usage of Cypress4

์ด์ œ ์ •๋ง ์‹ค์ œ๋กœ ์‚ฌ์šฉํ•œ ๊ฒƒ์„ ๋ณด์—ฌ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค. ์ฝ”๋“œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

describe('Todo Cypress test', () => {
  it('Add 5 Todos test', () => {
    cy.visit('/'); // ๋ฉ”์ธ '/'๋กœ ๊ฐ‘๋‹ˆ๋‹ค. -> localhost:xxxx
    for (let i = 1; i < 6; i += 1) { // ์ด 5๋ฒˆ for ๋ฌธ์„ ๋•๋‹ˆ๋‹ค.
      cy.cget('todoInsertInput').type(`test${i}`); // test1, test2, test3 ....์„ ์ž…๋ ฅํ•ฉ๋‹ˆ๋‹ค.
      cy.cget('todoAddBtn').fclick(); // ์ถ”๊ฐ€ํ•˜๊ธฐ ๋ฒ„ํŠผ ํด๋ฆญ
    }
    cy.cget('listTodo').should('have.length', 5); // ์‹ค์ œ๋กœ 5๊ฐœ๊ฐ€ ์ถ”๊ฐ€๊ฐ€ ๋ฌ๋Š”์ง€ ์ฒดํฌ๋ฅผ ํ•ฉ๋‹ˆ๋‹ค.
  });
});

๐Ÿ“Œ Conclusion

e2eํ…Œ์ŠคํŠธ๋Š” ์ง€๋‚œ ํฌ์ŠคํŒ… ์ฒ˜๋Ÿผ storybook๊ณผ logicํ…Œ์ŠคํŠธ์ฒ˜๋Ÿผ ์‹ ๊ฒฝ ์“ธ ๊ฒƒ์€ ๋”ฑํžˆ ์—†์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ e2eํ…Œ์ŠคํŠธ๋กœ ์–ด๋–ค ๋ถ€๋ถ„๊นŒ์ง€ ํ…Œ์ŠคํŠธ๋ฅผ ํ•ด์•ผํ•˜๋Š”๊ฐ€์— ๊ด€ํ•œ ๋ถ€๋ถ„์€ ํ•ญ์ƒ ๊ณ ๋ฏผ์Šค๋Ÿฝ์Šต๋‹ˆ๋‹ค. (unit test์—์„œ ๊ฑธ๋Ÿฌ์งˆ ์ˆ˜๋„ ์žˆ๊ณ  storybook ํ…Œ์ŠคํŠธ์—์„œ๋„ ๊ณตํ†ต๋œ ๋ถ€๋ถ„์ด ์กด์žฌํ•˜๊ธฐ ๋•Œ๋ฌธ) ๊ทธ๋ž˜์„œ ์ œ๊ฐ€ ์ƒ๊ฐํ•œ ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • view์˜ ํ˜•ํƒœ๋ฅผ ๊ณ ์ณ๋„ ์—๋Ÿฌ๊ฐ€ ์•ˆ๋‚˜๋Š” ์ •๋„์˜ ํ…Œ์ŠคํŠธ
  • ์ตœ๋Œ€ํ•œ ๋งŽ์€ logic์„ ๋Œ€๋Ÿ‰์œผ๋กœ ๋ฌถ์–ด์„œ ํ…Œ์ŠคํŠธ(์ฒ˜์Œ ๋ถ€ํ„ฐ ๋๊นŒ์ง€ ์ž˜๋Œ์•„ ๊ฐ€๋Š” ๊ฒƒ์„ ๋ณด๊ธฐ ์œ„ํ•จ)

์—ฌ๊ธฐ์„œ ๋‘๋ฒˆ์งธ๋Š” ๊ทธ๋ ‡๋‹ค๊ณ  ์น˜๋”๋ผ๋„ ์ฒซ๋ฒˆ์งธ๋Š” ๋„๋Œ€์ฒด ์™œ? ๋ผ๋Š” ์งˆ๋ฌธ์ด ๋“ค์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ํšŒ์‚ฌ ํ”„๋กœ์ ํŠธ๋Š” ๋งŽ์€ view๊ฐ€ ๋ฐ”๋€Œ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. View์ ์ธ ๋ถ€๋ถ„๊นŒ์ง€ ํ…Œ์ŠคํŠธ๋ฅผ ํ•˜๋‹ค๋ณด๋ฉด 2์ฃผ๋งˆ๋‹ค ๋ฐ”๋€Œ๋Š” view๋ฅผ ํ…Œ์ŠคํŒ…ํ•˜๊ธฐ์—๋Š” ๋„ˆ๋ฌด ๋ฒ…์ฐจ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ํ•ญ์ƒ ์ดํ”ผ๋ผ๋ฏธ๋“œ๋Š” ๊ธฐ์–ตํ•˜์„ธ์š”. (snap shot ํ…Œ์ŠคํŠธ๋Š” storybook์œผ๋กœ ๋Œ€์ฒด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.)

๋‹ค์Œ ์‹œ๊ฐ„์—๋Š” TDD๋ฅผ ํ•˜๋ฉด์„œ ๊ฒช๋Š” ์• ๋กœ์‚ฌํ•ญ๋“ค๊ณผ ์ €์— ๊ด€ํ•œ ์ƒ๊ฐ๋“ค์„ ์ •๋ฆฌํ•˜๋Š” ํฌ์ŠคํŒ…์œผ๋กœ ๋งŒ๋‚˜์š”~~

๐Ÿ“Œ Reference

  • Testing Vue.js Applications by Edd Yerburgh
  • ์‹ค์šฉ์ ์ธ ํ”„๋ก ํŠธ์—”๋“œ ํ…Œ์ŠคํŠธ ์ „๋žต
  • Cypress ๊ณต์‹ ํ™ˆ
๋ฐ˜์‘ํ˜•

'Vue TDD' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

Vue TDD - ํšŒ๊ณ ํŽธ  (0) 2020.08.10
Test code ์‰ฝ๊ฒŒ ์“ฐ๊ธฐ - 1  (0) 2020.08.06
Vue TDD - Storybook ํŽธ  (0) 2020.07.31
Vue TDD - Vuex ํŽธ  (0) 2020.07.30
Vue TDD - Component ํŽธ  (0) 2020.07.25
  1. Table of Content
  2. ๐Ÿ“Œ Introduction
  3. ๐Ÿ“Œ Usage of Cypress1
  4. ๐Ÿ“Œ Usage of Cypress2
  5. ๐Ÿ“Œ Usage of Cypress3
  6. ๐Ÿ“Œ Usage of Cypress4
  7. ๐Ÿ“Œ Conclusion
  8. ๐Ÿ“Œ Reference
'Vue TDD' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • Vue TDD - ํšŒ๊ณ ํŽธ
  • Test code ์‰ฝ๊ฒŒ ์“ฐ๊ธฐ - 1
  • Vue TDD - Storybook ํŽธ
  • Vue TDD - Vuex ํŽธ
eddie0329
eddie0329
Front-end Developer
๋ฐ˜์‘ํ˜•
eddie0329
Eddie Sunny's Blog
eddie0329
์ „์ฒด
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (100)
    • Summary of Book (0)
    • Vue Study (11)
    • Vue TDD (9)
    • Vue BDD (5)
    • Design Pattern (9)
    • Javascript Study (3)
    • React Study (15)
    • React TDD (1)
    • Vue Storybook (2)
    • Refactoring (0)
    • Graphql_Apollo (3)
    • Svelte (8)
    • Open Source (1)
    • D3 (4)
    • Typescript (1)
    • CSS (2)
    • Android (0)
    • Java (0)
    • Kotlin (0)
    • ์žก๋‹ด (0)
    • Swift (19)
    • Rust (2)
    • ํšŒ์‚ฌ์ด์•ผ๊ธฐ (2)
    • ReactNative Study (2)
    • Vitest (0)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • Home

๊ณต์ง€์‚ฌํ•ญ

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • apollo
  • TypeScript
  • Kotlin
  • swift5
  • jest
  • client only
  • React Native
  • react
  • Nextjs
  • Javascript
  • svelte
  • vue cypress
  • vue bdd
  • vue tdd
  • D3
  • vue storybook
  • TDD
  • swift
  • Design Pattern
  • CSS
  • Vue
  • react-component-slot
  • react useRef
  • slot ํŒจํ„ด
  • vue3
  • Vue test
  • Cypress
  • storybook6
  • javascript pattern
  • BDD

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

hELLO ยท Designed By ์ •์ƒ์šฐ.
eddie0329
Vue TDD - E2E ํŽธ
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.