React 4

[React] Can't resolve 'queryString' in ...

๊ฐ‘์ž๊ธฐ ์ด ์˜ค๋ฅ˜๊ฐ€ ๋œจ๋ฉด์„œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์‹คํ–‰๋˜์ง€ ์•Š์Œimport {enabled} from "express/lib/application"; ๊ฐ์ฒด ๋‚ด `enabled`๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋˜ ๋„์ค‘ import ๋ฌธ์ด ์ž˜๋ชป ์ž‘์„ฑ๋˜๋ฉด์„œ ์ƒ๊ธด ์˜ค๋ฅ˜.

React 2025.03.13

[React] ๋ฆฌ๋•์Šค(Redux)

๋ฆฌ๋•์Šค(Redux)๋ฆฌ์•กํŠธ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ. ์ฃผ์š” ๊ฐœ๋…์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค. ์ฝ๊ธฐ ์ „์šฉ ์ƒํƒœ ๋ฆฌ๋•์Šค์—์„œ ์ „์—ญ์œผ๋กœ ๊ด€๋ฆฌํ•˜๋Š” ๊ฐ’์€ ์ฝ๊ธฐ ์ „์šฉ์œผ๋กœ, ์ง์ ‘ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์—†๋‹ค. ๋‹จ์ผ ์Šคํ† ์–ด ์ „์ฒด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•œ ์ƒํƒœ๋“ค์„ ์ €์žฅํ•˜๊ณ  ์žˆ๋Š” ํ•˜๋‚˜์˜ ๊ฐ์ฒด.์•ก์…˜ ์ƒํƒœ์˜ ๋ณ€๊ฒฝ์„ ์š”์ฒญํ•˜๊ธฐ ์œ„ํ•œ ๊ฐ์ฒด. ๋ฆฌ๋“€์„œ ์•ก์…˜๊ณผ ์ด์ „ ์ƒํƒœ๋ฅผ ๋ฐ›์•„ ์ƒˆ๋กœ์šด ์ƒํƒœ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ์ˆœ์ˆ˜ ํ•จ์ˆ˜. ํ๋ฆ„์ปดํฌ๋„ŒํŠธ - ์•ก์…˜ ์ƒ์„ฑ - ๋””์ŠคํŒจ์น˜ - ์Šคํ† ์–ด - ๋ฆฌ๋“€์„œ - ์ƒˆ ์ƒํƒœ - ์ปดํฌ๋„ŒํŠธ ๋ฆฌ๋ Œ๋”๋ง  ๐Ÿ“Œ ์ƒํƒœ(State)์ „์ฒด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์–ด๋””์„œ๋“  ์ ‘๊ทผํ•˜๊ณ  ๊ณตํ†ต์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์„ ์–ธ๋œ ์ „์—ญ๋ณ€์ˆ˜์™€ ์œ ์‚ฌํ•˜๋‹ค. ๋‹จ, ๋ฆฌ๋•์Šค๋Š” ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ํ๋ฆ„์„ ๊ฐ€์ง€๋ฏ€๋กœ ์ฝ๊ธฐ๋Š” ์–ด๋””์„œ๋“  ์ž์œ ๋กญ๊ฒŒ ๊ฐ€๋Šฅํ•˜์ง€๋งŒ ์ˆ˜์ •์€ ๋ฐ˜๋“œ์‹œ ์•ก์…˜์„ ํ†ตํ•ด์„œ๋งŒ ์ด๋ฃจ์–ด์ง„๋‹ค.  ๐Ÿ“Œ ์Šคํ† ..

React 2025.03.04

[React] To-do list ๋งŒ๋“ค๊ธฐ

๐Ÿ“Œํ™˜๊ฒฝMacVSCode  ๐Ÿ“Œ์ถ”๊ฐ€ํ•˜๊ธฐ`input`์— ํ• ์ผ์„ ์ž…๋ ฅํ•˜๊ณ  ์—”ํ„ฐ๋ฅผ ์ž…๋ ฅ(๋˜๋Š” ์ถ”๊ฐ€ ๋ฒ„ํŠผ ํด๋ฆญ)ํ• ์ผ ๋ชฉ๋ก์ด ์ถ”๊ฐ€๋˜์–ด์•ผ ํ•œ๋‹ค.  function App() { return ( ํ• ์ผ ๋ชฉ๋ก ์ถ”๊ฐ€ );}export default App; ๊ธฐ๋ณธ ํƒœ๊ทธ๋ฅผ ๋งŒ๋“ค์–ด์ฃผ๊ณ , ๋ณ€๊ฒฝ๋œ ๊ฐ’์„ ์ถ”์ ํ•˜๊ธฐ ์œ„ํ•œ `useState`์™€ `onChange` ํ•จ์ˆ˜๋ฅผ ์ถ”๊ฐ€ํ•œ๋‹ค.  const [toDo, setTodo] = useState(""); const [todoList, setTodoList] = useState([]); function onChange(e) { setTodo(e.target.value); } // ... ..

React 2024.05.27

[React] ๊ธฐ์ดˆ

๐Ÿ“Œํ™˜๊ฒฝMacVSCode  ๐Ÿ“Œ๋ฆฌ์•กํŠธ๋ž€?์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ. ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ๋น ๋ฅด๊ณ  ์‰ฝ๊ฒŒ UI๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋•๋Š”๋‹ค. ๋ฐ˜๋ณต๋˜๋Š” ์ฝ”๋“œ ์กฐ๊ฐ์„ ์ปดํฌ๋„ŒํŠธ๋กœ ์ •์˜ํ•˜์—ฌ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ณ , ๋ณ€๊ฒฝ๋œ ๋ถ€๋ถ„๋งŒ ์žฌ๋žœ๋”๋งํ•˜์—ฌ ํšจ์œจ์„ ๋†’์ธ๋‹ค.  - Vanilla JS : HTML ํƒœ๊ทธ๋ฅผ ๋จผ์ € ๋งŒ๋“ค๊ณ  property๋ฅผ ์„ค์ •ํ•œ ๋’ค Javascript ์ฝ”๋“œ๋กœ ํ•ด๋‹น ํƒœ๊ทธ๋ฅผ ๋ณ€๊ฒฝํ•จ.- React.js : ์š”์†Œ(Element)๋ฅผ ์›ํ•˜๋Š” ๋Œ€๋กœ ์ƒ์„ฑํ•œ ๋’ค HTML๋กœ ๋งŒ๋“ค์–ด์„œ ๋ Œ๋”๋งํ•จ. const span = ReactDOM.createElement( "span", // html ํƒœ๊ทธ {id : "id"}, // property "Hello, I'm span" // innerText); ์ด๋ ‡๊ฒŒ ์ง์ ‘ UI๋ฅผ ์ž‘์„ฑํ• ..

React 2024.05.14