๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

IT96

[HTML/CSS/JS] codepen ํŽ˜์ด์ง€์— ๋ฒˆ๊ฐœ ํšจ๊ณผ ๊ตฌํ˜„ํ•˜๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์„ธ๊ณ„๋ฅผ ํƒ๊ตฌํ•ฉ์‹œ๋‹ค. codepen์˜ ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํŽ˜์ด์ง€์— ๋ฒˆ๊ฐœ ํšจ๊ณผ๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. https://codepen.io/jackrugile/pen/kQwPRO Canvas Lightning WIP Work in Progress... codepen.io ๊ตฌํ˜„ ํ™”๋ฉด Codepen์„ ํ™œ์šฉํ•˜์—ฌ ๋ฉ‹์ง„ ๋ฒˆ๊ฐœ ํšจ๊ณผ๋ฅผ ํŽ˜์ด์ง€์— ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. HTML, CSS ๊ทธ๋ฆฌ๊ณ  JavaScript์˜ ๊ธฐ๋ณธ์ ์ธ ์ง€์‹์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ์•„๋ž˜๋Š” ์ฝ”๋“œ ํ™œ์šฉ ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค. HTML CSS JS effect.html ์™€ ๊ฐ™์ด ํŒŒ์ผ์„ ๋งŒ๋“ค์–ด์„œ ์ฝ”๋“œ๋ฅผ ์ ์ ˆํžˆ ์กฐํ•ฉํ•˜๋ฉด ์œ„ ๊ตฌํ˜„ ํ™”๋ฉด๊ณผ ๊ฐ™์€ ํšจ๊ณผ๋ฅผ ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 2023. 10. 30.
[Spring Boot] ๋„ค์ด๋ฒ„ ๋‰ด์Šค API ํ™œ์šฉํ•ด์„œ ํŠน์ • ํ‚ค์›Œ๋“œ ๋‰ด์Šค ํŽ˜์ด์ง€์— ์ถœ๋ ฅํ•˜๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์„ธ๊ณ„๋ฅผ ํƒ๊ตฌํ•ฉ์‹œ๋‹ค. ๊ตฌํ˜„ ํ™”๋ฉด ๋„ค์ด๋ฒ„ API๋ฅผ ํ™œ์šฉํ•ด์„œ ๋‰ด์Šค ๋ฐ์ดํ„ฐ๋ฅผ ํŽ˜์ด์ง€์— ์ถœ๋ ฅํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 1. ๋„ค์ด๋ฒ„ ๊ฐœ๋ฐœ์ž์„ผํ„ฐ (NAVER Developers) ์— ์ ‘์†ํ•ฉ๋‹ˆ๋‹ค. ๋„ค์ด๋ฒ„ ๊ฐœ๋ฐœ์ž ์„ผํ„ฐ - NAVER Developers NAVER Developers ๋„ค์ด๋ฒ„ ์˜คํ”ˆ API๋“ค์„ ํ™œ์šฉํ•ด ๊ฐœ๋ฐœ์ž๋“ค์ด ๋‹ค์–‘ํ•œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋„๋ก API ๊ฐ€์ด๋“œ์™€ SDK๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ œ๊ณต์ค‘์ธ ์˜คํ”ˆ API์—๋Š” ๋„ค์ด๋ฒ„ ๋กœ๊ทธ์ธ, ๊ฒ€์ƒ‰, ๋‹จ์ถ•URL, ์บก์ฐจ๋ฅผ ๋น„๋กฏ ๊ธฐ๊ณ„๋ฒˆ์—ญ, ์Œ developers.naver.com 2. Documents > ์„œ๋น„์Šค API > ๊ฒ€์ƒ‰ ๊ฒ€์ƒ‰ > ๋‰ด์Šค - Search API (naver.com) ๊ฒ€์ƒ‰ > ๋‰ด์Šค - Search API ๊ฒ€์ƒ‰ > ๋‰ด์Šค ๋‰ด์Šค ๊ฒ€์ƒ‰ ๊ฐœ์š” ๊ฐœ์š” ๊ฒ€์ƒ‰ API์™€ ๋‰ด์Šค.. 2023. 10. 28.
[react] Lottie ํ™œ์šฉํ•˜์—ฌ react์—์„œ ๋กœ๋”ฉ ํ™”๋ฉด ๊ตฌ์„ฑํ•˜๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์„ธ๊ณ„๋ฅผ ํƒ๊ตฌํ•ฉ์‹œ๋‹ค. Lottie๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ๋กœ๋”ฉ ํ™”๋ฉด์„ ํšจ๊ณผ์ ์œผ๋กœ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜๋Š” ๊ตฌํ˜„ ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค. ๋กœ๋”ฉ ํ™”๋ฉด ์˜ˆ์‹œ Lottie ์‚ฌ์ดํŠธ ๋งํฌ https://lottiefiles.com/kr/ ๋ฌด๋ฃŒ ๋กœํ‹ฐ ์• ๋‹ˆ๋ฉ”์ด์…˜, ๋ชจ์…˜ ๊ทธ๋ž˜ํ”ฝ์„ ์œ„ํ•œ ๋ชจ๋“  ํ”Œ๋Ÿฌ๊ทธ์ธ๊ณผ ๋„๊ตฌ๋ฅผ ํ•œ ๊ณณ์— - ๋กœํ‹ฐํŒŒ์ผ์ฆˆ/LottieFi ๋กœํ‹ฐํŒŒ์ผ์ฆˆ/LottieFiles๋Š” ์˜คํ”ˆ์†Œ์Šค ์• ๋‹ˆ๋ฉ”์ด์…˜ ํฌ๋งท ๋กœํ‹ฐ๋ฅผ ์ œ๊ณตํ•˜๋Š” ์„ธ์ƒ์—์„œ ๊ฐ€์žฅ ํฐ ๋ฌด๋ฃŒ ํ”Œ๋žซํผ์ž…๋‹ˆ๋‹ค. ์›น, iOS, ์•ˆ๋“œ๋กœ์ด๋“œ, ์œˆ๋„์šฐ๋ฅผ ์œ„ํ•œ ๋ชจ์…˜ ๊ทธ๋ž˜ํ”ฝ ์ž‘์—…์„ ์ง€์›ํ•˜๋Š” ํ”Œ๋Ÿฌ๊ทธ์ธ๊ณผ ํˆด์„ ํ†ต lottiefiles.com 1. Lottie ์„ค์น˜ Lottie๋ฅผ ์„ค์น˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ํ„ฐ๋ฏธ๋„(Ctrl+J) ์— ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ช…๋ น์–ด๋ฅผ ์ž…๋ ฅํ•˜์—ฌ ์„ค์น˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. npm install.. 2023. 10. 27.
[react] React-Player๋ฅผ ํ™œ์šฉํ•˜์—ฌ YouTube ์˜์ƒ์„ ํŽ˜์ด์ง€ ๋ฐฐ๊ฒฝ์œผ๋กœ ์„ค์ •ํ•˜๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์„ธ๊ณ„๋ฅผ ํƒ๊ตฌํ•ฉ์‹œ๋‹ค. React ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ๋™์˜์ƒ ๋ฐ ์˜ค๋””์˜ค๋ฅผ ํ”Œ๋ ˆ์ดํ•˜๋ ค๋ฉด React Player ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ™œ์šฉํ•˜๋ฉด ๊ฐ„๋‹จํ•˜๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ธ”๋กœ๊ทธ ๊ธ€์—์„œ๋Š” React Player๋ฅผ ํ™œ์šฉํ•˜์—ฌ ๋™์˜์ƒ์„ ํŽ˜์ด์ง€์— ์‰ฝ๊ฒŒ ํ†ตํ•ฉํ•˜๊ณ  ์ œ์–ดํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ž์„ธํžˆ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. react ๊ตฌํ˜„ ํ™”๋ฉด 1. react-player ์„ค์น˜ ๋จผ์ €, react-player๋ฅผ ์„ค์น˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ํ„ฐ๋ฏธ๋„(Ctrl + J)์— ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ช…๋ น์–ด๋ฅผ ์ž…๋ ฅํ•˜์—ฌ ์„ค์น˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. npm install react-player 2. import react-player๋ฅผ ์„ค์น˜ํ•œ ํ›„์—๋Š”, ์›ํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ์— import ํ•ด์ค๋‹ˆ๋‹ค. import ReactPlayer from 'react-player/youtube' 3. ์ฝ”๋“œ.. 2023. 10. 27.
loading

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