Close
Type at least 1 character to search
Back to top

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

์ž๋™์žฌ์ƒ์„ ๊ฑธ์ง€ ์•Š์Œ     PC ์ž๋™์žฌ์ƒ ๏ปฟ   ํ…Œ์ŠคํŠธ ์ œํ’ˆ์€ ์ŠคํŠœ๋””์˜ค์— ์—‘์Šค ์ œ์ž‘ ์ƒํ’ˆ์ธ ๋…ธ๋ž€ํ†ต์—ฐ๊ณ ๋กœ ์ง„ํ–‰. ๊ฒฐ๊ณผ๋Š” ์ถ”ํ›„ ๊ณต๊ฐœ   ํ…Œ์ŠคํŠธ ๋ชฉ์ . 1. ์ž๋™์žฌ์ƒ์€ ์กฐํšŒ์ˆ˜๊ฐ€ ์นด์šดํŠธ ๋˜๋Š”๊ฐ€ 2. ์•„์ดํ”„๋ ˆ์ž„์œผ๋กœ ์‚ฝ์ž…ํ•œ ์˜์ƒ์˜ ์กฐํšŒ์ˆ˜๋Š” ์œ ํŠœ๋ธŒ ์˜์ƒ ์กฐํšŒ์ˆ˜์— ๋ฐ˜์˜์ด ๋˜๋Š”๊ฐ€. >> ๊ฒฐ๊ณผ 1. ์ž๋™์žฌ์ƒ์€ ์กฐํšŒ์ˆ˜ ์นด์šดํŠธ๊ฐ€ ์•ˆ๋จ. 2. ์•„์ดํ”„๋ ˆ์ž„์œผ๋กœ ์‚ฝ์ž…ํ•œ ์˜์ƒ์˜ ์กฐํšŒ์ˆ˜๋Š” ์œ ํŠœ๋ธŒ ์˜์ƒ ์กฐํšŒ์ˆ˜์— ๋ฐ˜์˜ ๋จ.

    ์•„์ดํ”„๋ ˆ์ž„์„ ์ด์šฉํ•ด ์œ ํŠœ๋ธŒ ์˜์ƒ ์‚ฝ์ž… ์‹œ, ๋ชจ๋ฐ”์ผ์—์„  ์ž๋™์žฌ์ƒ์ด ๋˜์ง€ ์•Š๋Š”๋‹ค.   ๋ชจ๋ฐ”์ผ์—์„œ ์˜์ƒ์„ ์ž๋™์žฌ์ƒ ์‹œํ‚ค๊ธฐ ์œ„ํ•ด์„  iframe ์„ ๋ถ™์—ฌ๋„ฃ๋Š” ๋ฐฉ์‹์ด ์•„๋‹ˆ๋ผ API ๋ฅผ ํ™œ์šฉํ•ด ์˜์ƒ์„ ๋ถ™์—ฌ๋„ฃ์–ด์•ผ ํ•œ๋‹ค. ์•„๋ž˜ ๋งํฌ์—์„œ ํด๋ผ์ด์–ธํŠธ์˜ ์ƒ์„ธํŽ˜์ด์ง€์— ๋ฐ˜์˜ํ•œ ์œ ํŠœ๋ธŒ API ์Šคํฌ๋ฆฝํŠธ ๋ฅผ ๊ธฐ์žฌํ•ด๋‘์—ˆ๋‹ค.   *์˜์ƒ์˜ ๊ฐ€๋กœ์„ธ๋กœ ๊ธธ์ด์— ๋”ฐ๋ฅธ ๋””์ž์ธ ํŽธ์ง‘์€ ์•ฝ๊ฐ„์˜ ๊ฐœ๋ฐœ ์ง€์‹์ด ํ•„์š”ํ•˜๋‹ค. *๊ฐ ์˜์ƒ์— ๋งž์ถฐ์„œ ์ฝ”๋“œ๊ฐ€ ๋„˜๋ฒ„๋ง ๋˜์–ด ์žˆ๋‹ค.       ์ฝ”๋“œํŽœย  ๋งํฌย  ์ด๋™ https://codepen.io/febreast/pen/ZEbmGRQ      

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