๋‚ ์งœ ์„ ํƒ๊ธฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํ†ตํ•ฉ

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

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

์‹ค์Šต ์˜ˆ์ œ

๋ทฐ๋กœ ํ†ตํ•ฉํ•  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๋‚ ์งœ ์„ ํƒ๊ธฐ(DatePicker) ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. ๋‚ ์งœ ์„ ํƒ๊ธฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” jQuery ํ”Œ๋Ÿฌ๊ทธ์ธ์œผ๋กœ๋„ ์žˆ๊ณ  ๋…๋ฆฝ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ๋„ ๋งŽ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ๋Š” Pickaday๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์‹ค์Šตํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

์‹ค์Šต ํฌ์ธํŠธ

  1. ์ปดํฌ๋„ŒํŠธ ๋ชจ๋“ˆํ™”
  2. ๋ทฐ ๋ผ์ดํ”„ ์‚ฌ์ดํด์— ๋Œ€ํ•œ ์ดํ•ด
  3. ์ปดํฌ๋„ŒํŠธ ํ†ต์‹  ๋ฐฉ์‹์— ๋Œ€ํ•œ ์ดํ•ด
  4. v-model ๋‚ด๋ถ€ ๋™์ž‘ ๋ฐฉ์‹์— ๋Œ€ํ•œ ์ดํ•ด

์‹ค์Šต ์ฝ”๋“œ