์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- ๋๋ฆผ์ฝ๋ฉ
- Til
- fe
- heapq
- JS
- ์๊ณ ๋ฆฌ์ฆ
- node.js
- react
- ํ์ด์ฌ
- ํ๋ก์ ํธ
- HTML
- KDT
- ๋ ธ๋ง๋์ฝ๋
- ๋ชจ๊ฐ์ฝ
- ์ฝ๋ฉํ ์คํธ
- ํ๋ก ํธ์๋
- javascript
- ๊ทธ๋ฆฌ๋
- CSS
- mongodb
- ํ ์ดํ๋ก์ ํธ
- ํ๋ก๊ทธ๋๋จธ์ค
- error
- ์ฝ๋ฉ
- ๋ฐฑ์ค
- ๊ฐ๋ฐ
- ์ฝ๋ฉ์ ํ
- Python
- ํฌ๋กค๋ง
- ๊ตญ๋น์ง์
- Today
- Total
๋ชฉ๋กClient (28)
๐ฑ → ๐ณ
useState vs useRef vs Variable useState ์ state ๊ทธ๋ฆฌ๊ณ useRef ์ ref ์ ๋ฆฌ์กํธ ๋ด๋ถ์ ๋ณ์๊ฐ ๋ ๋๋ง์ ๋ฐ๋ผ ์ด๋ค ์์ผ๋ก ๋ณํํ ๊น ์ธ ๊ฐ์ง ๋ฒํผ์ผ๋ก ๊ฐ๊ฐ state/ ref / var ๊ฐ์ ์ฌ๋ฆฌ๋ ์ปดํฌ๋ํธ๋ฅผ ๊ตฌ์ฑ ๊ฐ์ ๋ณํ ์์ด ์ปดํฌ๋ํธ ๋ฆฌ๋ ๋๋ง์ ์ํด์ ํ๋์ ๋ฒํผ์ ๋ ๋ง๋ฆ → ๊ฐ ๋ฒํผ์ ํด๋ฆญํ๋ฉด์ ํด๋น ๊ฐ์ ๋ณํ ๊ด์ฐฐ import { useRef, useState } from "react"; const Comparing = () => { const [countState, setState] = useState(0); const [render, setRender] = useState(0); const countRef = useRef(0); let count..
React.Fragment ์ค์ ๋ฆฌ์กํธ์์ ์ปดํฌ๋ํธ๋ฅผ ์กฐํฉํ ๋, ์ต์์์ div๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ๋ฐํํด์ผํ๋ ๊ฒฝ์ฐ๊ฐ ์๊น css๊ฐ ๊นจ์ง๋ค๊ฑฐ๋, ํ ์ด๋ธ ์์ ์ฌ์ด์ div์์๊ฐ ๋ค์ด๊ฐ๋ฉด error๊ฐ ๋ฐ์ํ๋ ๊ฒฝ์ฐ React.Fragment๋ก return ๊ฐ์์ ์ต์์ tag ์ญํ ์ ํ๋ div ์์ ๊ธฐ import React from "react"; export default function ReactFragment() { return ( ์๋ ํ์ธ์! ๋ฐ๊ฐ์ต๋๋ค! ); } (react ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๊ธฐ๋ฅ์ด๋ฏ๋ก react ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ถ๊ฐ ํ์) React.Fragment๋ ๋ก ๋์ฒด ๊ฐ๋ฅ ! import React from "react"; export default function ReactFragment() ..
๐ JSX(Javascript XML) : Javascript์ XML์ ์ถ๊ฐํ ๋ฌธ๋ฒ ๊ฐ๋ฐ์๋ค์ด ๊ณผ๊ฑฐ DOM ๋ฐฉ์์ผ๋ก html์ ๊ทธ๋ฆฌ๋ค๋ณด๋ ๋ฐ๋ก ๋ฉ๋์ด ์๊ฐ์ -> ๊ทธ๋์ ๋ง๋ ๋ฌธ๋ฒ ๋ณดํต ๋ฆฌ์กํธ์์๋ง ์ฌ์ฉ html ๋ฌธ์ ๊ตฌ์กฐ๋ฅผ JS์์๋ ์ฌ์ฉ์ด ๊ฐ๋ฅํจ -> ๋ฐ๋ผ์ JS ๋ด๋ถ์์๋ html์ ์ง๋ฏ ์ฝ๋ ๊ตฌ์ฑ์ด ๊ฐ๋ฅํด์ง ๐ ๊ธฐ๋ณธ DOM ๋ฐฉ์์ผ๋ก html ๊ทธ๋ฆฐ ์ฝ๋ function HelloWorldButton() { const [isClick, setClickState] = React.useState(false); const text = isClick ? "It's clicked" : "Hello, React world"; return React.createElement( "button", { onClick..
๐ ์ ๊ฐ๊ตฌ๋ฌธ(Spread Syntax) 2015๋ ์ ์ถ๊ฐ ๋ ๋ฌธ๋ฒ ๋ฒก์๋์์ ํฐ ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฃฐ ๋ ์์ฃผ ์ฌ์ฉ ๋ณํฉ, ๊ตฌ์กฐ ๋ถํด ํ ๋น ๋ฑ์ ๋ค์ํ๊ฒ ์ฌ์ฉ ๊ฐ๋ฅ ๋ฐฐ์ด ๋๋ ๊ฐ์ฒด์ ๊ฐ์ ํ๋ํ๋ ๋ฐ๋ก ๋ถ๋ฆฌํด์ ํฉ๋ฟ๋ฆฌ๋ ์ญํ ์ํ๋ ๋ณ์ ์์ ...์จ์ฃผ๋ฉด ๋จ ๐ ์์1 const arr = [1, 2, 3, 4, 5, 6]; console.log(arr); //[ 1, 2, 3, 4, 5, 6 ] console.log(...arr); //1 2 3 4 5 6 ๐ ์์2 function spread(first, ...rest) { console.log(first); console.log(rest); } spread(1, 2, 3, 4, 5, 6, 7); ๐ node.js ๋ด์ฅ ๊ฐ์ฒด ์ฌ์ฉํ๊ธฐ ํ์ผ ์์น, ํ์ผ ์ด๋ฆ..
๐ Code Refactoring : ํ๋ก๊ทธ๋จ์ ๋์์ ๋ณํ์ง ์๊ณ , ํ๋ก๊ทธ๋จ์ ๋ด๋ถ ๊ตฌ์กฐ๋ฅผ ๊ฐ์ ํ๋ ๊ฒ! ์์ ๊ธฐ์ -> ์๋ก์ด ๊ธฐ์ ์ฝ๋ ๋นํจ์จ -> ํจ์จ(๋ฐ๋ณต๋ฌธ ์ค์ด๊ธฐ, ์ค๋ณต ๊ธฐ๋ฅ ์ ๊ฑฐ, ๋ฉ๋ชจ๋ฆฌ ํจ์จ ์ฆ๋) ์ฝ๋ ๊ฐ๋ ์ฑ ๋์ด๊ธฐ ์ฝ๋์ ํ์ฅ์ฑ ๋์ด๊ธฐ ๐ JS์์ Module ์ฌ์ฉํ๊ธฐ JS ๋ Module ์ ์ง์ํจ ๐ 2๊ฐ์ง ๋ฐฉ์ CommonJS ๋ฐฉ์ ES6 ๋ฐฉ์ โ CommonJS ๋ฐฉ์ node.js์์ ์ฌ์ฉํ๋ ๋ชจ๋ ๋ฐฉ์ ํค์๋ : require/ exports require๋ก ๋ชจ๋์ ๋ถ๋ฌ ์ฌ ๋, ์ฝ๋ ์ด๋ ๊ณณ์์๋ ๋ถ๋ฌ ์ฌ ์ ์์ โ๏ธ ์ ์ฒด ๋ชจ๋๋ก์จ ๋ด๋ณด๋ด๊ณ , ์ ์ฒด๋ฅผ ํ๋์ Obj๋ก ๋ฐ์์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ animals.js // @ts-check const animals = ['dog', ..
๐ JSDoc ๋? ์ผ์ข ์ ์ฃผ์ ๋ฌ๊ธฐ ๊ฑฐ์ ํ์คํ๊ฐ ๋์ด์ Vscode, Webstorm ๋ฑ ์์๋ ๊ธฐ๋ณธ์ผ๋ก ๊ธฐ๋ฅ์ ์ ๊ณต ํน์ ํํ๋ก ์ฃผ์์ ๋ฌ๋ฉด ํด๋น ์ฃผ์ ๋ด์ฉ์ ํตํด ํจ์์ ๊ธฐ๋ฅ ๋๋ ๋งค๊ฐ ๋ณ์์ ํ์ ๋ฑ์ ๋ฏธ๋ฆฌ ์๋ ค์ค ์ ์์ ์ฃผ์์ ๋ฌ ๋ /** */ ๋ก ๋ฌ๋ฉด ๋จ โ JSDoc ๋ถ๊ฐ ๊ธฐ๋ฅ @todo ๋ฉ๋ชจ์ฒ๋ผ ์ฌ์ฉ ๊ฐ๋ฅ, ๊ฐ๋ฐํ๋ค๊ฐ ๋ฉ์ถ๋ ๋ค์๋ถํฐ ํด์ผํ ๊ฒ ์จ๋๊ธฐ /** * @todo ๋ด์ผ ์๋ก์ด ๋งค๊ฐ๋ณ์ ์ถ๊ฐ ํด์ผํจ due to 10:30 .. */ @deprecated ๋ ์ด์ ํด๋น ๊ธฐ๋ฅ์ ์ฐ์ง ์์ ๋ ์ถ๊ฐ -> ํจ์ ์ฐ๋ฉด ๊ฐ๋ก์ค์ด ๊ทธ์ด์ง @type {ํ์ ํํ} ๋ณ์์ ํน์ ํ์ ์ ์ฐ๋ผ๊ณ ์๋ ค ์ค ๋ ์ฌ์ฉ์ด ๊ฐ๋ฅ ์์ฆ์ typescript๊ฐ ์ด ์ญํ ์ ๋์ ํด์ค์ ์ ์์ฐ๊ธด ํจ โ JSDoc..
๐ ๋ฌธ์์ด ๊ด๋ จ JS ๊ธฐ๋ฅ โ .length(); ๋ฌธ์์ด ๊ธธ์ด โ .indexOf(""); ๋ฌธ์์ด ์์น ์ฐพ๊ธฐ const str = "Hello, world"; console.log(str.indexOf("world")); // 7 โ .slice(start, end); ๋ฌธ์์ด ์๋ฅด๊ธฐ โ .replace("์ฐพ์ ๋ฌธ์", "๋ฐ๊ฟ ๋ฌธ์"); ๋ฌธ์์ด ๋ฐ๊พธ๊ธฐ โ .repeat(๋ฐ๋ณต ํ์); ๋ฌธ์์ด ๋ฐ๋ณตํ๊ธฐ let str = "์ฐ์"; let longStr = str.repeat(5) + "์ฐ"; console.log(longStr); โ .trim(); ์ ๋ค ๊ณต๋ฐฑ ๋ฌธ์ ์ ๊ฑฐํ๊ธฐ let str = " ์ฐ์์ฐ "; let trimStr = str.trim(); console.log(trimStr); //์ฐ์์ฐ ๐ ..
๐ DOM(Document Object Model) ๐ DOM API : Document Object Model Application Programming Interface โ querySelector("์์ ์ ํ์") CSS ์์ ์ ํ์๋ฅผ ์ฌ์ฉํด์ ์์ ์ด ๊ฐ์ ธ์ค๊ณ ์ถ์ดํ๋ ์์๋ฅผ ๊ฐ์ ธ์ค๋ ๋ฉ์๋ ๋ฌธ์์์ ๋ง๋๋ ์ ์ผ ์ฒซ๋ฒ์งธ ์์๋ฅผ ๋ฐํํจ โ getElementById("id") ID ์ด๋ฆ์ ๋ถ๋ฌ์ ํด๋น ID๋ฅผ ๊ฐ์ง๋ ์์๋ฅผ ๋ถ๋ฌ์ค๋ ๋ฉ์๋ โ classList classList.add('class1') : ์ ํ ์์์ class1์ด๋ผ๋ class ๋ํ๊ธฐ classList.remove('class1') : ์ ํ ์์์ class1์ด๋ผ๋ class ์ ๊ฑฐ classList.contains('class1')..