๐ช Programming
[JS] Lodash _.memoize ์์ค ์ฝ๋ ํบ์๋ณด๊ธฐ
[JS] Lodash _.memoize ์์ค ์ฝ๋ ํบ์๋ณด๊ธฐ
2024.04.30_.memoize ์์ค์ฝ๋Lodash ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ Memoize ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ฉด ์ด์ ์ ์งํํ๋ ์ฐ์ฐ ๊ฒฐ๊ณผ๋ฅผ ์ฌ์ฌ์ฉํ ์ ์๋ค. ์ค์๊ฐ ๊ฒ์์ฐฝ์ ๊ตฌํํ ๋ ์
๋ ฅํ ํค์๋์ ๋ํ API ํธ์ถ์ ์๋ํ๋๋ฐ, ์ด๋ฏธ ๊ฒ์ํ๋ ํค์๋๋ ๊ฒฐ๊ณผ๋ฅผ ์บ์ฑํด๋๊ณ ์ฌ์ฌ์ฉํ๋ฉด API ์ค๋ณต ํธ์ถ์ ๋ฐฉ์งํ ์ ์๋ค. ์ด๋ Lodash์ Memoize๋ฅผ ํ์ฉํ ์ ์๋ค(๋ฌผ๋ก ํค์๋์ ๋ํ ๊ฒฐ๊ณผ๊ฐ์ด ์์ฃผ ๋ณํ๋ค๋ฉด ์บ์ฑ ๊ธฐ๋ฅ์ ์ฌ์ฉํ ํ์ ์๋ค) ์ค์๊ฐ ๊ฒ์์ฐฝ์ ํ์ฉํ Memoizeimport _ from 'lodash';export const requestQuotes = _.memoize(async (title) => { const res = await fetch( `https://animechan.vercel.app/ap..
[React] ๋ฆฌ์กํธ๋ก ์ค์๊ฐ ๊ฒ์์ฐฝ ๊ตฌํํ๊ธฐ
[React] ๋ฆฌ์กํธ๋ก ์ค์๊ฐ ๊ฒ์์ฐฝ ๊ตฌํํ๊ธฐ
2024.04.30๊ธ ์์ ์ฌํญ์ ๋
ธ์
ํ์ด์ง์ ๊ฐ์ฅ ๋น ๋ฅด๊ฒ ๋ฐ์๋ฉ๋๋ค. ๋งํฌ๋ฅผ ์ฐธ๊ณ ํด ์ฃผ์ธ์ Debounce๋ ์ด๋ฒคํธ๊ฐ ์ฐ์์ ์ผ๋ก ๋ฐ์ํด๋ ํญ์ ๋ง์ง๋ง ์ด๋ฒคํธ๋ง ์ฒ๋ฆฌํ๋ ๊ฒ์ ๋งํ๋ฉฐ, Memoize๋ ์ด์ ์ฐ์ฐ ๊ฒฐ๊ณผ๋ฅผ ์ฌ์ฌ์ฉํ๋ ๊ฒ์ ๋งํ๋ค. Debounce์ Memoize๋ฅผ ํ์ฉํด ๋ถํ์ํ API ์์ฒญ์ ๋ฐฉ์งํ ์ ์๋ค. Animichan์ ์ผ๋ณธ ์ ๋๋ฉ์ด์
์ ๋ฑ์ฅํ ์ธ์ฉ๋ฌธ(Quotes)์ ์ ๊ณตํ๋ OpenAPI๋ค. title ๋งค๊ฐ๋ณ์์ ์ ๋๋ฉ์ด์
์ ๋ชฉ์ ์ฟผ๋ฆฌ์คํธ๋ง ๋ณด๋ด์ ์์ฒญํ๋ฉด, ํด๋น ์ ๋๋ฉ์ด์
์ ์ธ์ฉ๋ฌธ ์ธํธ๋ฅผ ๋ฐ์์ฌ ์ ์๋ค. ์ด API๋ฅผ ์ด์ฉํด ๊ฐ๋จํ ๊ฒ์ ์ดํ๋ฆฌ์ผ์ด์
์ ๊ตฌํํ ์ ์๋ค. // Request'https://animechan.vercel.app/api/quotes/anime?title=naruto'..
[HTML/CSS] ํผ ํ๋(input) ์์ ๋ณ๊ฒฝํ๊ธฐ — accent-color
[HTML/CSS] ํผ ํ๋(input) ์์ ๋ณ๊ฒฝํ๊ธฐ — accent-color
2024.04.29ํผ ํ๋(input) ์คํ์ผ์ ๋๋ฐ์ด์ค, OS, ๋ธ๋ผ์ฐ์ ์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋ฏ๋ก ์ํ๋ ์คํ์ผ์ ์ง์ ํ๊ธฐ ํ๋ค๋ค. ํ์ง๋ง accent-color CSS ์์ฑ์ ์ด์ฉํ๋ฉด ํผ ํ๋์ ๊ฐ์กฐ ์์์ ์์ฝ๊ฒ ๋ณ๊ฒฝํ ์ ์๋ค. accent-color ์์ฑ์ input ํ๊ทธ์ checkbox radio range ํ์
์ ์ ์ฉํ ์ ์๋ค. CSS ์
๋ ํฐ์ input๋ง ๋ช
์ํ๋ค๋ฉด checkbox radio range ํ์
์ ๋ชจ๋ ์ ์ฉ๋๋ค.input { }input[type="radio"] { }input[type="checkbox"] { }input[type="range"] { } accent-color ์์ฑ์ Chrome, Firefox ์ต์ ๋ฒ์ ์์ ์ง์ํ๋ค. ์์ฝ๊ฒ๋ ์ฌํ๋ฆฌ์์ ์ง์ํ์ง ์๋๋ค. ์์HTML โผ ..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก์ Proxy ๊ฐ์ฒด / Reflect
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก์ Proxy ๊ฐ์ฒด / Reflect
2024.04.29๊ธ ์์ ์ฌํญ์ ๋
ธ์
ํ์ด์ง์ ๊ฐ์ฅ ๋น ๋ฅด๊ฒ ๋ฐ์๋ฉ๋๋ค. ๋งํฌ๋ฅผ ์ฐธ๊ณ ํด ์ฃผ์ธ์ Vue.js์์ Reactive๋ก ๋ฐ์์ฑ์ ์ฃผ์
ํ ๋ฐ์ดํฐ๋ฅผ ์ฝ์๋ก ์ฐ์ด๋ณด๋ฉด ์๋์ฒ๋ผ Proxy `{ ... }` ํํ๋ก ์ถ๋ ฅํ๋ค. Proxy๋ฅผ ์ฌ์ฉํด์ ์
๋ ฅํ ๋ฐ์ดํฐ(์ํ)๋ฅผ ํ ๋ฒ ๊ฐ์ผ ๊ฒ์ด๋ค. ์ด๋ ๊ฒ Proxy๋ฅผ ์ด์ฉํ๋ฉด ๊ฐ์ฒด ํ๋กํผํฐ์ ์ฝ๊ธฐ / ์ฐ๊ธฐ ๊ฐ์ ์์
์ ์ค๊ฐ์ ๊ฐ๋ก์ฑ์ ์ํ๋ ์์
์ ์ํํ๋๋ก ํ ์ ์๋ค. ์ฌ์ฉ ๋ฐฉ๋ฒconst proxy = new Proxy(target, handler); target : Proxy๋ก ๊ฐ์ ์๋ณธ ๊ฐ์ฒด. ํจ์๋ฅผ ํฌํจํ ๋ชจ๋ ๊ฐ์ฒด ๊ฐ๋ฅhandler : get์ด๋ set ๊ฐ์ ๋์์ ๊ฐ๋ก์ฑ๋ ๋ฉ์๋(ํธ๋ฉ; trap)์ด ๋ด๊ธด ๊ฐ์ฒด. ๊ฐ์ฒด๋ฅผ proxy๋ก ๊ฐ์ผ ํ, handler์ ์์ํ๋ ..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด ํ๋กํผํฐ ์ค๋ช
์ / ํ๋๊ทธ / ์ต์๋ฒ ํจํด
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด ํ๋กํผํฐ ์ค๋ช ์ / ํ๋๊ทธ / ์ต์๋ฒ ํจํด
2024.04.29๊ธ ์์ ์ฌํญ์ ๋
ธ์
ํ์ด์ง์ ๊ฐ์ฅ ๋น ๋ฅด๊ฒ ๋ฐ์๋ฉ๋๋ค. ๋งํฌ๋ฅผ ์ฐธ๊ณ ํด ์ฃผ์ธ์ ํ๋กํผํฐ ํ๋๊ทธ๊ฐ์ฒด๋ ๊ฐ(value) ์ธ์๋ ํ๋๊ทธ(flag)๋ผ๋ ํน๋ณ์ ์์ฑ์ด ์๋ค. ํ๋๊ทธ๋ ์๋ 3๊ฐ์ง ์ข
๋ฅ๊ฐ ์๋ค. ์ผ๋ฐ์ ์ผ๋ก ๊ฐ์ฒด๋ฅผ ์ ์ธํ๋ฉด(๊ฐ์ฒด ๋ฆฌํฐ๋ด ํน์ Object ์์ฑ์ ํจ์ ์ฌ์ฉ) ํ๋กํผํฐ์ ํ๋๊ทธ๋ `true`๋ฅผ ๊ธฐ๋ณธ๊ฐ์ผ๋ก ๊ฐ์ง๋ค. ํ๋กํผํฐ ๊ฐ ์์ ํ๋กํผํฐ ์ญ์ ๋ฐ๋ณต๋ฌธ ๋์ดํ๋๊ทธ ์์ `writable: false`โโ
โ
โ
`enumerable: false`โ
โ
โโ
`configurable: false`โ
โโ
โ writable (์์ )`true` : ํ๋กํผํฐ ๊ฐ ์์ ๊ฐ๋ฅ`false` : ํ๋กํผํฐ ๊ฐ ์์ ๋ถ๊ฐ (ํ๋กํผํฐ ์ญ์ ๋ ๊ฐ๋ฅ)enumerable (์ด๊ฑฐ)`true` : ๋ฐ๋ณต๋ฌธ์ผ๋ก ๋์ด ๊ฐ๋ฅ`false` : ๋ฐ..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ๋๋ฐ์ด์ค Debounce, ์ค๋กํ Throttle ๊ตฌํํ๊ธฐ
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ๋๋ฐ์ด์ค Debounce, ์ค๋กํ Throttle ๊ตฌํํ๊ธฐ
2024.04.29๋๋ฐ์ด์ค๋ input ์ด๋ฒคํธ์(๋ฆฌ์กํธ์์ onChange), ์ค๋กํ์ scroll ์ด๋ฒคํธ์ ์์ฃผ ์ฌ์ฉ๋๋ค. ๋๋ฐ์ด์ค๋ ์๋ฌด๋ฆฌ ๋ง์ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํด๋ ๋ง์ง๋ง ์ด๋ฒคํธ๋ง ์คํํ๋ ๋ฐ๋ฉด, ์ค๋กํ์ ์ ์ด๋ `n` ๋ฐ๋ฆฌ์ด ๋ง๋ค ์ ๊ธฐ์ ์ผ๋ก ๊ธฐ๋ฅ ์คํ์ ๋ณด์ฅํ๋ ์ ์ด ๊ฐ์ฅ ํฐ ์ฐจ์ด์ . ์ฐธ๊ณ ๋ก Lodash ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ฐ์ด์ค์ ์ค๋กํ ๋ฉ์๋๊ฐ ํฌํจ๋์ด ์๋ค._.debounce(func, wait, [options])_.throttle(func, wait, [options]) ๋๋ฐ์ด์ค | Debounce์ด๋ฒคํธ๊ฐ ์ฐ์์ ์ผ๋ก ๋ฐ์ํด๋ ํญ์ ๋ง์ง๋ง ์ด๋ฒคํธ๋ง ์ฒ๋ฆฌ์ด๋ฒคํธ๋ฅผ ๊ทธ๋ฃนํํ์ฌ ํน์ ์๊ฐ์ด ์ง๋ ํ ํ๋์ ์ด๋ฒคํธ๋ง ๋ฐ์ํ๋๋ก ํ๋ ๊ธฐ์ ๋๋ฐ์ด์ค ์์ ์ฝ๋ โผfunction debounce(callback, ms) { ..
[Git] Github ๋งํฌ๋ค์ด์ ๊ฐ์ฃผ ๋ฌ๊ธฐ
[Git] Github ๋งํฌ๋ค์ด์ ๊ฐ์ฃผ ๋ฌ๊ธฐ
2024.04.29๊ฐ์ฃผ ์ฌ์ฉ๋ฒ21๋
10์๋ถํฐ Github์๋ Markdown ๊ฐ์ฃผ๋ฅผ ์ง์ํ๋ค. ์ฌ์ฉ ๋ฐฉ๋ฒ๋ ๊ฐ๋จํ๋ค. ๊ฐ์ฃผ๋ฅผ ๋ฌ๊ณ ์ถ์ ๋ฌธ์ฅ์ ๋๊ดํธ๋ฅผ ์ด๊ณ [^๋ฒํธ|์ ๋ชฉ] ํํ๋ก ์
๋ ฅํ๋ฉด ๋๋ค. ex) [^1] [^memo] ๊ฐ์ฃผ ์ ๋ชฉ์ ์์ด๋ง ์ง์ํ๋ ๋ฏ ํ๋ค. ํ๋ฆฌ๋ทฐ ํ๋ฉด์์ ์ ๋ชฉ์ผ๋ก ์
๋ ฅํ์ด๋ ํญ์ ๋ฒํธ๋ก ๋์จ๋ค. ์์ฝ๊ฒ๋ ๊ฐ์ฃผ์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ฆฌ๋ฉด ๊ฐ์ฃผ ์ค๋ช
์ด ๋ณด์ด๋ ํดํ ๊ธฐ๋ฅ์ ์ง์ํ์ง ์๋๋ค. ๊ฐ์ฃผ์ ๋ํ ์ค๋ช
์ [^๋ฒํธ|์ ๋ชฉ]: ์ค๋ช
ํํ๋ก ์
๋ ฅํ๋ฉด ๋๋ค. ๊ฐ์ฃผ ์ค๋ช
์ ์ด๋์ ์
๋ ฅํ๋ ์๊ด์์ด ํญ์ ํ๋จ์ ์์นํ๊ฒ ๋๋ค. ๋งํฌ๋ค์ด ํ๋ฆฌ๋ทฐ ํ๋ฉด์์ [^1] ๊ฐ์ฃผ๋ฅผ ํด๋ฆญํ๋ฉด ํ๋จ์ ์๋ ๊ฐ์ฃผ ์ค๋ช
์ผ๋ก ์ด๋ํ๋ค. ๊ฐ์ฃผ ์ค๋ช
์์ ↵ ์์ด์ฝ์ ๋๋ฅด๋ฉด ๋ค์ ํด๋น ๊ฐ์ฃผ๊ฐ ๋ฌ๋ ค์๋ ๋ฌธ์ฅ์ผ๋ก ์ด๋ํ๋ค.JavaScript๋ ํด..
[React] ๋ฆฌ์กํธ ์์ ๋๋๊ทธ์ค๋๋กญ ๊ตฌํ
[React] ๋ฆฌ์กํธ ์์ ๋๋๊ทธ์ค๋๋กญ ๊ตฌํ
2024.04.28TL;DR๋๋๊ทธํ ์ ์๋ ์์๋ก ๋ณ๊ฒฝ — draggable={true}๋๋๊ทธ ์์ — onDragStart ์ด๋ฒคํธ ํธ๋ฆฌ๊ฑฐ๋๋๊ทธํ๊ณ ์๋ ์์์ ์ธ๋ฑ์ค ์ ๋ณด ์ ์ฅ — state.draggedFrom๋๋๊ทธ ์ํ true๋ก ๋ณ๊ฒฝ — state.isDragging์ด๋ฒคํธ ํธ๋ฆฌ๊ฑฐ ์์ ์ ์๋ฆฌ๋จผํธ ๋ฆฌ์คํธ ์ ์ฅ — state.originalOrder๋ง์ฐ์ค ์ปค์๊ฐ ๋๋กญ ๊ฐ๋ฅํ ์์ญ์ ์์ ๋ — onDragOver ์ด๋ฒคํธ ํธ๋ฆฌ๊ฑฐdrop ์ด๋ฒคํธ๋ฅผ ์ฌ์ฉํ ์ ์๋๋ก dragOver ๊ธฐ๋ณธ ์ด๋ฒคํธ ๋ฐฉ์ง — e.preventDefault()๋ง์ฐ์ค ํฌ์ธํฐ ์์น์ ์๋ ์์์ ์ธ๋ฑ์ค ์ ์ฅ — state.draggedTo์๋ฆฌ๋จผํธ ์์ ๋ณ๊ฒฝ — state.updatedOrder ๋๋๊ทธ์ค์ธ ์์ดํ
์ ๋ง์ฐ์ค ํฌ์ธํฐ ์์น(draggedTo..
[Algorithm] ํน์ ์ ๊น์ง์ ํฉ ๊ตฌํ๊ธฐ / ๋ฑ์ฐจ์์ด (๊ฐ์ฐ์ค ๊ณต์)
[Algorithm] ํน์ ์ ๊น์ง์ ํฉ ๊ตฌํ๊ธฐ / ๋ฑ์ฐจ์์ด (๊ฐ์ฐ์ค ๊ณต์)
2024.04.28ํ๋ก๊ทธ๋๋จธ์ค ๋ฌธ์ ํ๋ก๊ทธ๋๋จธ์ค์ "๋ถ์กฑํ ๊ธ์ก ๊ณ์ฐํ๊ธฐ" ๋ฌธ์ ๋ค. ์๋ 3๊ฐ ํ๋ผ๋ฏธํฐ๋ฅผ ๋ฐ๋๋ค. price : ๋์ด๊ธฐ๊ตฌ์ ์ด์ฉ๋ฃmoney : ๊ณ ๊ฐ์ด ๊ฐ์ง๊ณ ์๋ ๊ธ์กcount : ๊ณ ๊ฐ์ด ํด๋น ๋์ด๊ธฐ๊ตฌ๋ฅผ ์ด์ฉํ ํ์ ๋์ด๊ธฐ๊ตฌ๋ฅผ ์ด์ฉํ ํ์๊ฐ ๋์ด๋ ๋๋ง๋ค ํ์ ๋งํผ์ ์ด์ฉ๋ฃ๋ฅผ ๋ ๋ฐ๋๋ค. ๋์ด๊ธฐ๊ตฌ์ ์ด์ฉ๋ฃ price ๊ฐ 100์์ด๋ผ๋ฉด 1๋ฒ ์ด์ฉํ ๋ 100์, 2๋ฒ ์ด์ฉํ ๋ 200์, 3๋ฒ ์ด์ฉํ ๋ 300์์ด ๋๋ค. ๋์ด๊ธฐ๊ตฌ๋ฅผ count ๋ฒ ํ์ ๋ money ๊ธ์ก์์ ์ผ๋ง๋ ๋ชจ์๋ผ๋์ง๋ฅผ ๋ฐํํด์ผ ๋๋ค. ๊ธ์ก์ด ๋ชจ์๋ผ์ง ์์ผ๋ฉด 0์ ๋ฐํํ๋ค. ๋ฐ๋ณต๋ฌธ์ ์ด์ฉํ๋ฉด ์๋์ฒ๋ผ ์ฝ๊ฒ ํ ์ ์๋ค.function solution(price, money, count) { let sum = 0; for (let i..
[CS] ์ง๋ฒ ๊ณ์ฐ ๋ฐฉ๋ฒ — 10์ง์ โ 2์ง์ ๋ณํ
[CS] ์ง๋ฒ ๊ณ์ฐ ๋ฐฉ๋ฒ — 10์ง์ โ 2์ง์ ๋ณํ
2024.04.282์ง๋ฒ์ ์ฌ์ฉํ๋ ์ด์ 2์ง๋ฒ์ 0~1๋ก ์ซ์๋ฅผ ํํํ๋ ๋ฐฉ๋ฒ์ด๋ค. ์ ๊ธฐ ์ ํธ๋ก ์๋ํ๋ ๊ธฐ๊ณ์ธ ์ปดํจํฐ๋ 2์ง๋ฒ์ ๊ธฐ๋ฐ์ผ๋ก ์ค๊ณ๋๋ค. ์ ๊ธฐ์ ์ ํธ๋ก ์๋ฏธ๋ฅผ ์ ๋ฌํ ์ ์๋ ์ต์ ๋จ์๋ ON, OFF์ด๋ค. ์ ๊ธฐ ์ ํธ๊ฐ ์๋ ์ํ๋ฅผ 1, ์๋ ์ํ๋ฅผ 0์ผ๋ก ์ค์ ํ๋ค. ์ด๋ ๊ฒ ๋จ 2๊ฐ์ง ์ํ๋ง 2์ง์๋ก ํํํ๋ ๊ฒ์ด ๊ฐ์ฅ ๊ฐ๋จํ๊ณ ์ ํํ๊ธฐ ๋๋ฌธ์ด๋ค. 2์ง์๋ฅผ ์ฌ์ฉํ๋ฉด 0๊ณผ 1๋ก ๋จ์ํ๊ฒ ์ฒ๋ฆฌํ ์ ์์ด ์๋๊ฐ ๋น ๋ฅด์ง๋ง ์์ ์ซ์๋ ๋งค์ฐ ๊ธธ์ด์ง๋ ๋จ์ ์ด ์๋ค. ๋ ๋ง์ ์ ํธ๋ฅผ ์ฌ์ฉํ ์๋ ์์ง๋ง, 2๊ฐ ์ด์์ ์ ํธ๋ฅผ ์ฌ์ฉํ๋ฉด ์ ํํ ์ ํธ๋ฅผ ์ธก์ ํ๋๋ฐ ๋น์ฉ์ด ๋ง์ด ๋ค๊ธฐ ๋๋ฌธ์ ํ์ฌ๊น์ง๋ 2์ง์๋ฅผ ์ฌ์ฉํ๋ ๊ฒ. ๊ฐ ์ง๋ฒ์ ํน์ง2์ง์ : Binary Number | ไบ่ฟๅถ (0~1๋ก ์ซ์๋ฅผ ํํํ๋ ๋ฐฉ๋ฒ)3์ง์ : T..
[React] ๋ฆฌ์กํธ ๋ง์ฐ์ค ๋๋๊ทธ ๊ฐ๋ฅํ ์์ ๋ง๋ค๊ธฐ / ๊ธฐํ ํ๋กํผํฐ
[React] ๋ฆฌ์กํธ ๋ง์ฐ์ค ๋๋๊ทธ ๊ฐ๋ฅํ ์์ ๋ง๋ค๊ธฐ / ๊ธฐํ ํ๋กํผํฐ
2024.04.27์์ ์์์ ์ฝํ
์ธ ๊ฐ ๋ถ๋ชจ ์์๋ณด๋ค ํฌ๋ค๋ฉด, ๋ถ๋ชจ ์์์ ์คํฌ๋กค์ด ์๊ธฐ๊ณ , ๋ง์ฐ์ค ํ ๋ก ์คํฌ๋กคํ ์ ์๋ค. ๋ง์ฐ์ค ํ ์ธ์๋ click / move ์ด๋ฒคํธ๋ฅผ ์ด์ฉํด ๋ง์ฐ์ค ๋๋๊ทธ๋ก ์คํฌ๋กคํ๋๋ก ๋ง๋ค ์ ์๋ค. TL;DRโถ ๋ง์ฐ์ค๋ฅผ ํด๋ฆญํ์ ๋`clientX`, `clientY` (๋ทฐํฌํธ ๊ธฐ์ค)์ขํ์, ์์์ ์คํฌ๋กค ์์น `scrollLeft`, `scrollTop` ์ ์ฅํด๋ฆญ ์ํ `true`๋ก ๋ณ๊ฒฝ(CSS) `cursor: grabbing user-select: none` โท ํด๋ฆญํ ์ํ์์ ๋ง์ฐ์ค๋ฅผ ์ด๋(๋๋๊ทธ)ํ์ ๋โ ์ด๋์ ๋ฉ์ถ ์ง์ (clientX/Y)๊ณผ โก๋ง์ฐ์ค๋ฅผ ํด๋ฆญํ ์ง์ **(clientX/Y)**์ ๋บ ๊ฐ ๊ณ์ฐ — ์คํฌ๋กคํ ๋ฒ์(์์์ ํ์ฌ ์คํฌ๋กค ์์น)์ (์คํฌ๋กคํ ๊ฐ)์ ๋บ ์์น๋ก ์คํฌ..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ URL ๊ฐ์ฒด / searchParams
[JS] ์๋ฐ์คํฌ๋ฆฝํธ URL ๊ฐ์ฒด / searchParams
2024.04.27URL ๊ฐ์ฒด ํ์ฌ ํ์ด์ง์ URL์ด ์๋์ ๊ฐ๋ค๊ณ ๊ฐ์ ํ์ ๋... ์ฐธ๊ณ ๋ก %20 ์ ๋น์นธ(space) 1๊ฐhttps://example.com/?name=Jonathan%20Smith&age=18 url ๊ฐ์ฒด์ search ์์ฑ์ ์ด์ฉํด ๋ชจ๋ ์ฟผ๋ฆฌ ์คํธ๋ง ๋ด์ฉ์ ๊ฐ์ ธ์ฌ ์ ์๋คconst url = new URL(window.location.href); // ํ์ฌ urlurl.search; // '?name=Jonathan%20Smith&age=18' name age ๊ฐ์ ํน์ ์ฟผ๋ฆฌ ์คํธ๋ง๋ง ๊ฐ์ ธ์ค๊ณ ์ถ๋ค๋ฉด URLSearchParams ๋ฉ์๋๋ฅผ ์ด์ฉํ๋ฉด ๋๋ค. get์ผ๋ก ๊ฐ์ ์กฐํํ๊ณ append(๊ธฐ์กด ๊ฐ์ ์ด์ด๋ถ์ด๊ธฐ) ํน์ set(๊ธฐ์กด๊ฐ ๊ต์ฒด)์ผ๋ก ์๋ก์ด ๊ฐ์ ์ถ๊ฐํ ์๋ ์๋ค.url.searchPara..