์ ์ฒด ๊ธ
-
- [JavaScript] for ๋ฌธ ์ ๋ฆฌ (for, for...in, for...of, forEach, for await...of)
for ๋ฌธ ์ ๋ฆฌ (for, for...in, for...of, forEach, for await...of)๋ค์ด๊ฐ๋ฉฐ์๋ฐ์คํฌ๋ฆฝํธ(JavaScript)์์ ์ฌ์ฉํ ์ ์๋ for ๋ฌธ(@for@, @for...in@, @for...of@, @forEach@, @for await...of@)์ ๋ํด ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํด๋ณธ๋ค. ์ข ๋ฅโ @for@ ๋ฌธํน์ ํ์๋งํผ ๋ฐ๋ณตํ ๋ ์ฌ์ฉํ๋ค.for (initialization; condition; increment) { // ๋ฐ๋ณตํ ์ฝ๋} ์์ ์ฝ๋for (let i = 0; i โก @for...in@ ๋ฌธ๊ฐ์ฒด์ ์ด๊ฑฐ ๊ฐ๋ฅํ ์์ฑ์ ๋ฐ๋ณตํ ๋ ์ฌ์ฉํ๋ค.๋ฐฐ์ด(Array)์์๋ ์ธ๋ฑ์ค๋ฅผ ๋ฐ๋ณตํ ์ ์์ง๋ง, ์ผ๋ฐ์ ์ผ๋ก ๊ฐ์ฒด(Object)์ ์ฌ์ฉ๋๋ค.for (const key in ob..
2024.08.25 -
- [React.js] ํจ์ํ ์ ๋ฐ์ดํธ์ ์ง์ ์ฐธ์กฐ ์ ๋ฐ์ดํธ
ํจ์ํ ์ ๋ฐ์ดํธ์ ์ง์ ์ฐธ์กฐ ์ ๋ฐ์ดํธ๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ(React.js)์์ ์ํ(Status)๋ฅผ ์ ๋ฐ์ดํธํ ๋, ํจ์ํ ์ ๋ฐ์ดํธ ๋ฐฉ๋ฒ๊ณผ ์ง์ ์ฐธ์กฐ ์ ๋ฐ์ดํธ ๋ฐฉ๋ฒ์ ์ฐจ์ด์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. ํจ์ํ ์ ๋ฐ์ดํธ(Functional Update)setPosts((prevPosts) => [postData, ...prevPosts])์ํ ์ ๋ฐ์ดํธ๊ฐ ์ด์ ์ํ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์ด๋ฃจ์ด์ง๋ค.ํจ์ํ ์ ๋ฐ์ดํธ๋ฅผ ์ฌ์ฉํ ๊ฒฝ์ฐ, ๋ค์๊ณผ ๊ฐ์ ์ฅ์ ์ด ์๋ค.์ฅ์ ์ค๋ช ์์ ์ฑ- ๋ฆฌ์กํธ์ ์ํ ์ ๋ฐ์ดํธ๋ ๋น๋๊ธฐ์ ์ผ๋ก ์ด๋ฃจ์ด์ง๊ธฐ ๋๋ฌธ์, ์ฌ๋ฌ ์ํ ์ ๋ฐ์ดํธ๊ฐ ๋์์ ๋ฐ์ํ ์ ์๋ค.- ์ด๋, ํจ์ํ ์ ๋ฐ์ดํธ ํํ๋ฅผ ์ฌ์ฉํ๋ฉด ์ต์ ์ํ ๊ฐ์ ๋ณด์ฅํ ์ ์๋ค.- @prevPosts@๋ ํญ์ ํ์ฌ ์ํ์ ์ต์ ์ค๋ ์ท์ ์ ๊ณตํ๋ค.๋์์ฑ ์ฒ๋ฆฌ- ์ํ ์ ๋ฐ์ด..
2024.08.22 -
- [React.js] ์กฐ๊ฑด๋ถ ๋ ๋๋ง ๋ฐฉ๋ฒ ์ ๋ฆฌ
์กฐ๊ฑด๋ถ ๋ ๋๋ง ๋ฐฉ๋ฒ ์ ๋ฆฌ๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ(React.js)์์์ ์กฐ๊ฑด๋ถ ๋ ๋๋ง ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค. ์กฐ๊ฑด๋ถ ๋ ๋๋ง(Conditional Rendering)๊ฐ๋ ํน์ ํ ์กฐ๊ฑด์ ๋ฐ๋ผ UI์ ์ผ๋ถ๋ฅผ ๋ณด์ฌ์ฃผ๊ฑฐ๋ ์จ๊ธฐ๋ ๋ฐฉ๋ฒ ๋ฐฉ๋ฒโ ์กฐ๊ฑด๋ถ ์ฐ์ฐ์ / ์ผํญ ์ฐ์ฐ์(? :)์กฐ๊ฑด๋ถ ๋ ๋๋ง์ ์ฝ๊ฒ ๊ตฌํํ ์ ์๋ ๋ฐฉ๋ฒ์กฐ๊ฑด์ด ์ฐธ์ผ ๋๋ ํน์ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํ๊ณ , ๊ฑฐ์ง์ผ ๋๋ ๋ค๋ฅธ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํ๊ฑฐ๋ ์๋ฌด ๊ฒ๋ ๋ ๋๋งํ์ง ์๊ฒ ํ ์ ์๋ค.function Example({ isVisible }) { return ( {isVisible ? ์ด ๋ด์ฉ์ ๋ณด์ ๋๋ค! : ์ด ๋ด์ฉ์ ๋ณด์ด์ง ์์ต๋๋ค!} );} โก ๋ ผ๋ฆฌ ์ฐ์ฐ์(&&)๋ ผ๋ฆฌ @&&@ ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ์ฌ ์กฐ๊ฑด์ด ์ฐธ์ผ ๋๋ง ๋ ๋๋งํ๋๋ก ํ ์ ์๋ค.์กฐ๊ฑด..
2024.08.22 -
- [TypeScript] ! ์ฐ์ฐ์(Non-null Assertion Operator)
! ์ฐ์ฐ์(Non-null Assertion Operator)๋ค์ด๊ฐ๋ฉฐํ์ ์คํฌ๋ฆฝํธ(TypeScript)์์ ์ฌ์ฉ๋๋ @!@ ์ฐ์ฐ์(Non-null Assertion Operator)์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค.์ด ์ฐ์ฐ์๋ ํ์ ์คํฌ๋ฆฝํธ์์๋ง ์ฌ์ฉํ ์ ์๋ค. ! ์ฐ์ฐ์(Non-null Assertion Operator)๊ฐ๋ ์ปดํ์ผ๋ฌ์๊ฒ ํด๋น ํํ์์ด @null@ ๋๋ @undefined@๊ฐ ์๋์ ๋ณด์ฅํ๋ค๊ณ ์๋ฆฌ๋ ์ญํ ์ ํ๋ ์ฐ์ฐ์ ์ฌ์ฉ ์let value: string | null | undefined = "Hello";// ์ฌ๊ธฐ์ ํ์ ์คํฌ๋ฆฝํธ๋ value๊ฐ null ๋๋ undefined์ผ ์ ์๋ค๊ณ ๊ฒฝ๊ณ ํ ์ ์๋ค.let length = value!.length; // ! ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ์ฌ ์ปดํ์ผ๋ฌ ๊ฒฝ๊ณ ๋ฅผ..
2024.08.20 -
- [TypeScript] MODULE_NOT_FOUND (Error: Cannot find module ~\react-scripts\bin\react-scripts.js) ์ค๋ฅ ํด๊ฒฐ ๋ฐฉ๋ฒ
MODULE_NOT_FOUND (Error: Cannot find module ~\react-scripts\bin\react-scripts.js) ์ค๋ฅ ํด๊ฒฐ ๋ฐฉ๋ฒ๋ค์ด๊ฐ๋ฉฐ์๋์ ๊ฐ์ ํ์ ์คํฌ๋ฆฝํธ(TypeScript) ์ปดํ์ผ ์ ๋ฐ์ํ๋ ๊ฒฝ๋ก ๊ด๋ จ ์ค๋ฅ๋ฅผ ํด๊ฒฐํ๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค.> my-react-app@0.1.0 start > react-scripts start 'Learn\react\react-beginner\my-react-app\node_modules\.bin\' is not recognized as an internal or external command, operable program or batch file. node:internal/modules/cjs/loader:1080 throw ..
2024.08.20 -
- [TypeScript] ์ ๋ค๋ฆญ(Generic)
์ ๋ค๋ฆญ(Generic)๋ค์ด๊ฐ๋ฉฐํ์ ์คํฌ๋ฆฝํธ(TypeScript)์์ ์ฌ์ฉ๋๋ ์ ๋ค๋ฆญ(Generic)์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. ์ ๋ค๋ฆญ(Generic)๊ฐ๋ ์ ์ฐํ๋ฉด์๋ ํ์ ์์ ์ฑ์ ์ ๊ณตํ๋ ๋ฐฉ๋ฒ์ ๋ค๋ฆญ์ ์ฌ์ฉํ๋ฉด ํจ์๋ ํด๋์ค๋ฅผ ๋ค์ํ ํ์ ๊ณผ ํจ๊ป ์ฌ์ฉํ ์ ์์ผ๋ฉฐ, ํ์ ์ ๊ตฌ์ฒด์ ์ผ๋ก ์ง์ ํ ์ ์๋ค. ์ ๋ค๋ฆญ์ ํ์์ฑ์๋์ @insertAtBeginning@ ํจ์๋ฅผ ๋ณด์.์ด ํจ์๋ ๋ฐฐ์ด๊ณผ ๊ฐ์ ๋งค๊ฐ๋ณ์๋ก ๋ฐ์, ๊ฐ์ด ๋ฐฐ์ด์ ๋งจ ์์ ์ถ๊ฐ๋ ์๋ก์ด ๋ฐฐ์ด์ ๋ฐํํ๋ค.function insertAtBeginning(array: any[], value: any) { return [value, ...array];}const updatedArray = insertAtBeginning(demoArray, -1); // [-1,..
2024.08.20 -
- [TypeScript] ํ์ ์คํฌ๋ฆฝํธ์ ์๋ฃํ(DataType)
ํ์ ์คํฌ๋ฆฝํธ์ ์๋ฃํ(TypeScript)๋ค์ด๊ฐ๋ฉฐํ์ ์คํฌ๋ฆฝํธ(TypeScript)์์ ์ฌ์ฉ๋๋ ์๋ฃํ(DataType)์ ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํด๋ณธ๋ค. ํ์ ์คํฌ๋ฆฝํธ์ ์๋ฃํโ ์์ ์๋ฃํ(Primitives)@number@ : ์ซ์ํ (์ ์, ์์ ๋ฑ)@string@ : ๋ฌธ์์ด @boolean@: @true@ ๋๋ @false@ ๊ฐ@null@, @undefined@ : ๊ธฐ๋ณธ์ ์ผ๋ก ๋ชจ๋ ํ์ ์ ์๋ธํ์ ์ผ๋ก ์ทจ๊ธ๋๋ค.// (1) ์ซ์let age: number;age = 25;// => let age: number = 25;// (2) ๋ฌธ์์ดlet name: string;name = "Peter";// => let name: string = "Peter";// (3) Booleanlet isActive: boolea..
2024.08.20 -
- [MongoDB] ํ์ด์ฌ(Python)์ผ๋ก MongoDB ์ฌ์ฉํ๊ธฐ (pymongo)
ํ์ด์ฌ(Python)์ผ๋ก MongoDB ์ฌ์ฉํ๊ธฐ (pymongo)๋ค์ด๊ฐ๋ฉฐํ์ด์ฌ(Python)์ผ๋ก MongoDB๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํด๋ณธ๋ค. MongoDB๊ฐ๋ NoSQL ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ์ฐํ ์คํค๋ง์ JSON๊ณผ ์ ์ฌํ ๋ฌธ์ ๊ตฌ์กฐ๋ฅผ ์ ๊ณตํ๋ค.ํ์ด์ฌ(Python)์์ MongoDB๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด @pymongo@ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํด์ผ ํ๋ค.@pymongo@ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ MongoDB์์ ์ํธ์์ฉ์ ๊ฐ๋จํ๊ฒ ํด์ฃผ๋ ํ์ด์ฌ ํด๋ผ์ด์ธํธ์ด๋ค.MongoDB์์๋ ๋ฐ์ดํฐ๋ฒ ์ด์ค ๋ด์ ์ปฌ๋ ์ (Collection)์ด๋ผ๋ ๋จ์๋ก ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๋ค. ๋ ์ปฌ๋ ์ ์์๋ ๋ฌธ์(Document)๊ฐ ๋ค์ด๊ฐ๋ค. (๋ฐ์ดํฐ) ์ค์นํ๊ธฐํ์ด์ฌ์์ MongoDB๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด์๋ @pymongo@ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ค์นํด์ค์ผ ํ๋ค.$ pip in..
2024.08.14 -
- [VS Code] ๊ฒ์ ์, ํน์ ํด๋๋ฅผ ๊ฒ์ ๋ฒ์์์ ์ ์ธ์ํค๋ ๋ฐฉ๋ฒ
๊ฒ์ ์, ํน์ ํด๋๋ฅผ ๊ฒ์ ๋ฒ์์์ ์ ์ธ์ํค๋ ๋ฐฉ๋ฒ๋ค์ด๊ฐ๋ฉฐVS Code์์ ๊ฒ์์ ํ ๋ @node_modules@ ๋ฑ ํน์ ํด๋๋ฅผ ๊ฒ์ ๋ฒ์์์ ์ ์ธํ๊ณ ์ถ์ ๋๊ฐ ์๋ค.์ ์ญ์ ์ผ๋ก ์ค์ ํ๋ ๋ฐฉ๋ฒ๊ณผ ํ๋ก์ ํธ ๋ณ๋ก ํน์ ํด๋๋ฅผ ๊ฒ์ ๋ฒ์์์ ์ ์ธ์ํค๋ ๋ฐฉ๋ฒ์ด ์กด์ฌํ๋ค. ๋ฐฉ๋ฒVS Code ์ค์ ํ์ผ์ธ @settings.json@ ํ์ผ์ @search.exclude@ํค์ ๊ฐ์ ์ค์ ํด์ฃผ๋ฉด ๋๋ค. โ ์ ์ญ์ ์ผ๋ก ํน์ ํด๋๋ฅผ ๊ฒ์ ๋ฒ์์์ ์ ์ธ์ํค๊ธฐVS Code๋ฅผ ์ด์ฉํ์ฌ ๊ฒ์์ ํ ๋, ํ๋ก์ ํธ์ ๊ด๊ณ ์์ด ์ ์ญ์ ์ผ๋ก ํน์ ํด๋๋ฅผ ๊ฒ์ ๋ฒ์์์ ์ ์ธ์ํค๋ ๋ฐฉ๋ฒ์ด๋ค.@[Ctrl]@ + @[Shift]@ + @[P]@๋ฅผ ๋๋ฌ ๋ช ๋ น ํ๋ ํธ(Command Palette)๋ฅผ ์คํํ๋ค.@Preferences: Open U..
2 2024.08.14 -
- [React.js] Compound Component ํจํด
Compound Component ํจํด๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ(React.js)์์ ์์ฃผ ์ฌ์ฉ๋๋ ๋์์ธ ํจํด(Design Pattern) ์ค ํ๋์ธ Compound Component ํจํด์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. Compound Component ํจํด๊ฐ๋ ์๋ก ๊ด๋ จ๋ ์ฌ๋ฌ ๊ฐ์ ์ปดํฌ๋ํธ๋ฅผ ํ๋์ ๋ถ๋ชจ ์ปดํฌ๋ํธ ์์ ์บก์ํํ๋ ๋ฐฉ์์ปดํ์ด๋ ์ปดํฌ๋ํธ์ ์ฃผ์ ์์ด๋์ด๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค(UI)๋ฅผ ๊ตฌ์ฑํ๋ ์ฌ๋ฌ ์์ ์ปดํฌ๋ํธ๋ฅผ ํ๋์ ์์ ์ปดํฌ๋ํธ ์์์ ์กฐํฉํ์ฌ ๋ ๋ณต์กํ UI๋ฅผ ๋ง๋๋ ๊ฒ์ด๋ค. Coompound Component ํจํด์ ์ ์ฉ ์ : @ - @ Option 1 Option 2 Option 3 Option 4 ์ฅ์ ๋์ผํ ์ปดํฌ๋ํธ๋ฅผ ๋ค์ํ ๋ฐฉ์์ผ๋ก ์ฌ์ฌ์ฉํ ์ ์๋ค.์ปดํฌ๋ํธ์ ๋ด๋ถ ๊ตฌ์กฐ๋ฅผ ๋ณ..
2024.08.12 -
- [React.js] Framer Motion ๋ผ์ด๋ธ๋ฌ๋ฆฌ
Framer Motion ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ด๊ฐ๋ฉฐFramer Motion ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. Framer Motion๊ฐ๋ ์ธํฐ๋ํฐ๋ธ ์น ์ ๋๋ฉ์ด์ ๊ณผ UI ๋์์ธ์ ์ฝ๊ฒ ๊ตฌํํ ์ ์๋๋ก ๋์์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฆฌ์กํธ ํ๋ ์์ํฌ์ ํจ๊ป ์ฌ์ฉ๋๋ฉฐ, ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๊ฐ ์ ๋๋ฉ์ด์ ์ ๋ ์ง๊ด์ ์ด๊ณ ํจ์จ์ ์ผ๋ก ๋ง๋ค ์ ์๊ฒ ๋์์ค๋ค.๊ฐ๋ ฅํ API๋ฅผ ์ ๊ณตํ์ฌ ๋ณต์กํ ์ ๋๋ฉ์ด์ ์ ์ฝ๊ฒ ์์ฑํ ์ ์๊ฒ ํด์ฃผ๋ฉฐ, ์ฝ๋ ๊ธฐ๋ฐ์ ์ ๋๋ฉ์ด์ ์ ๋ง๋ค ๋ ์์ฐ์ฑ์ ๋์ฌ์ค๋ค. ์ค์น$ npm install framer-motion # yarn add framer-motion ์ฃผ์ ๊ธฐ๋ฅ๊ธฐ๋ณธ์ ์ธ ๋ชจ์ ์ ์ฝ๊ฒ ์ ์ฉํ ์ ์๋ค.์์น, ํฌ๊ธฐ, ๋ถํฌ๋ช ๋ ๋ฑ์ ์์ฑ์ ์ ๋๋ฉ์ด์ ํํ ์ ์๋ค.๋๋๊ทธ์ ๊ฐ์ ์ธํฐ๋์ ์ ์์ฝ๊ฒ ๊ตฌํํ ์ ์๋ค.์๋ฅผ..
2024.08.11 -
- [Next.js] ์ ์ ์์ฑ(Static Generation)๊ณผ ์๋ฒ์ฌ์ด๋ ๋ ๋๋ง(Server-side Rendering)
์ ์ ์์ฑ(Static Generation)๊ณผ ์๋ฒ์ฌ์ด๋ ๋ ๋๋ง(Server-side Rendering)๋ค์ด๊ฐ๋ฉฐ์ฌ์ ๋ ๋๋ง ๋ฐฉ๋ฒ์ธ ์ ์ ์์ฑ(Static Generation)๊ณผ ์๋ฒ์ฌ์ด๋ ๋ ๋๋ง(Server-side Rendering)์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. ์ ์ ์์ฑ(Static Generation)๊ฐ๋ ์น ํ์ด์ง๋ฅผ ๋ฏธ๋ฆฌ ์์ฑํ์ฌ HTML ํ์ผ๋ก ์ ์ฅํ๋ ๋ฐฉ์์น ์ฌ์ดํธ์ ๋น๋ ๋จ๊ณ์์ ๋ชจ๋ ํ์ด์ง๊ฐ ์ฌ์ ์ ๋ ๋๋ง๋๋ฉฐ, ์ฌ์ฉ์๊ฐ ํ์ด์ง๋ฅผ ์์ฒญํ ๋ ์๋ฒ์์ ๋ฏธ๋ฆฌ ์์ฑ๋ HTML ํ์ผ์ ์ฆ์ ์ ๊ณตํ๋ ๋ฐฉ์๋น ๋ฅธ ๋ก๋ฉ ์๋์ ์๋ฒ ๋ถํ ๊ฐ์๋ฅผ ์ํด ์ฌ์ฉSSG(Static Site Generation)์ด๋ผ๊ณ ๋ ํ๋ค. ์ฅ์ ํ์ด์ง๊ฐ ๋ฏธ๋ฆฌ ์์ฑ๋์ด ์์ผ๋ฏ๋ก, ์ฌ์ฉ์๋ ๋น ๋ฅด๊ฒ ํ์ด์ง๋ฅผ ๋ณผ ์ ์๋ค. (๋น ๋ฅธ ํ์ด์ง ๋ก๋ฉ)์์ฒญ..
2024.08.08 -
- [Next.js] ๋ฉํ๋ฐ์ดํฐ(Metadata) ์ถ๊ฐํ๊ธฐ
๋ฉํ๋ฐ์ดํฐ(Metadata) ์ถ๊ฐํ๊ธฐ๋ค์ด๊ฐ๋ฉฐNext.js์์ ์ปดํฌ๋ํธ์ ๋ฉํ๋ฐ์ดํฐ(Metadata)๋ฅผ ์ถ๊ฐํ๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค. ๋ฉํ๋ฐ์ดํฐ(Metadata)์นํ์ด์ง์ ๋ํ ์ถ๊ฐ ์ ๋ณด๋ฅผ ์ ๊ณตํ๋ ๋ฐ์ดํฐ์ฃผ๋ก HTML ๋ฌธ์์ @@ ํ๊ทธ ์์ ํฌํจ๋์ด ์์ผ๋ฉฐ, ๊ฒ์ ์์ง ์ต์ ํ(SEO), ์์ ๋ฏธ๋์ด ๊ณต์ , ๋ธ๋ผ์ฐ์ ์ค์ ๋ฑ ์ฌ๋ฌ ๋ชฉ์ ์ผ๋ก ์ฌ์ฉ๋๋ค. ๋ฉํ๋ฐ์ดํฐ ์ถ๊ฐํ๊ธฐ์ ์ ํ์ด์ง(Static Page)์ ๋์ ํ์ด์ง(Dynamic Page)์ ๋ฉํ๋ฐ์ดํฐ๋ฅผ ์ถ๊ฐํ๋ ๋ฐฉ๋ฒ์ด ๋ค๋ฅด๋ค. ์ ์ ํ์ด์ง๋ฐฉ๋ฒํ์ด์ง๋ ๋ ์ด์์ ํ์ผ์ @metadata@๋ผ๋ ์ด๋ฆ์ ์์๋ฅผ ๋ด๋ณด๋ด๋ ๋ฐฉ์์ ํตํด ๋ฉํ๋ฐ์ดํฐ๋ฅผ ์ค์ ํ ์ ์๋ค.export const metadata = { title: 'All Meals', descriptio..
2024.08.07 -
- [React.js] Suspense ์ปดํฌ๋ํธ
Suspense ์ปดํฌ๋ํธ๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ(React.js)์์ ์ฌ์ฉ๋๋ @Suspense@ ์ปดํฌ๋ํธ์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. Suspense ์ปดํฌ๋ํธ๊ฐ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋น๋๊ธฐ ๋ฐ์ดํฐ๋ฅผ ์ฝ๊ฒ ๊ด๋ฆฌํ๊ณ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํ๊ธฐ ์ํด ๋์ ๋ ๊ธฐ๋ฅ์ฃผ๋ก ๋ฐ์ดํฐ ๋ก๋ฉ ์ํ๋ฅผ ์ฒ๋ฆฌํ๋๋ฐ ์ฌ์ฉ๋๋ค.์ด ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ์ฌ ๋น๋๊ธฐ ๋ฐ์ดํฐ๊ฐ ๋ก๋ฉ๋ ๋ ์ฌ์ฉ์์๊ฒ ๋ก๋ฉ ์คํผ๋(Spinner)๋ ๋์ฒด ์ปจํ ์ธ ๋ฅผ ๋ณด์ฌ์ค ์ ์๋ค. ์ฌ์ฉ๋ฒ@Suspense@ ์ปดํฌ๋ํธ๋ ์ฃผ๋ก ๋ค๋ฅธ ๋น๋๊ธฐ ์ปดํฌ๋ํธ๋ฅผ ๊ฐ์ธ๋ ์ฉ๋๋ก ์ฌ์ฉ๋๋ค.@Suspense@๋ @fallback@ ์ด๋ผ๋ ํ๋กํผํฐ๋ฅผ ํตํด ๋ก๋ฉ ์ค์ ๋ณด์ฌ์ค ์ปจํ ์ธ ๋ฅผ ์ง์ ํ ์ ์๋ค.Loading...}> ์ฌ์ฉ ์ ์ฃผ์ํ ์ @Suspense@๋ ํด๋ผ์ด์ธํธ ์ธก ๋ ๋๋ง์์ ๋์ํ๋ค.์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง์..
2024.08.06 -
- [Next.js] ์๋ฒ ์ปดํฌ๋ํธ์ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ
์๋ฒ ์ปดํฌ๋ํธ์ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ๋ค์ด๊ฐ๋ฉฐNext.js๋ ์๋ฒ ์ปดํฌ๋ํธ์ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ์ ๊ฐ๋ ์ ๋์ ํ ๋ฆฌ์กํธ ๊ธฐ๋ฐ์ ํ์คํ(Full-Stack) ํ๋ ์์ํฌ์ด๋ค.Next.js๋ ๋จ์ํ ํ๋ก ํธ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ ๋ฆฌ์กํธ๋ฅผ ๋์ด ์๋ฒ ์ธก์์๋ ์ฝ๋๋ฅผ ์คํํ ์ ์๋ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ค. ์๋ฒ ์ปดํฌ๋ํธ๊ฐ๋ Next.js ํ๋ก์ ํธ์์๋ ๋ชจ๋ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ๊ฐ ๊ธฐ๋ณธ์ ์ผ๋ก ์๋ฒ์์ ๋ ๋๋ง ๋๋ค.์ด ์ปดํฌ๋ํธ๋ค์ ์๋ฒ ์ปดํฌ๋ํธ๋ผ๊ณ ํ๋ฉฐ, ๋ธ๋ผ์ฐ์ ๊ฐ ์๋ ์๋ฒ์์ ์คํ๋๋ค. ์๋ค์๊ณผ ๊ฐ์ด ์ปดํฌ๋ํธ์ ๋ก๊ทธ๋ฅผ ์ถ๋ ฅํ๋ฉด, ์น ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ(ํด๋ผ์ด์ธํธ ๋จ)๊ฐ ์๋, IDE(์๋ฒ ๋จ)์ ํฐ๋ฏธ๋์์ ๋ก๊ทธ๋ฅผ ํ์ธํ ์ ์๋ค. ์ฅ์ ์ฑ๋ฅ ํฅ์ํด๋ผ์ด์ธํธ ์ธก์์ ๋ค์ด๋ก๋ํด์ผ ํ ์๋ฐ์คํฌ๋ฆฝํธ(JS) ์ฝ๋๊ฐ ์ค์ด๋ ๋ค. SEO ๊ฐ์ ์๋ฒ ๋จ์..
2024.08.05 -
- [Next.js] Image ์ปดํฌ๋ํธ
Image ์ปดํฌ๋ํธ๋ค์ด๊ฐ๋ฉฐNext.js์์ ๊ธฐ๋ณธ์ผ๋ก ์ ๊ณตํ๋ Image ์ปดํฌ๋ํธ์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. Image ์ปดํฌ๋ํธ๊ฐ๋ Next.js์์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ๊ณตํ๋ ์ด๋ฏธ์ง ์ต์ ํ๋ฅผ ์ํด ์ฌ์ฉ๋๋ ์ปดํฌ๋ํธํ์ด์ง ๋ก๋ฉ ์๋์ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํค๋๋ฐ ํฐ ๋์์ ์ค๋ค.๊ธฐ๋ณธ์ ์ผ๋ก ์ง์ฐ ๋ก๋ฉ(Lazy Loading)์ ์ ๊ณตํ๋ฉฐ, ๋ค์ํ ์ด๋ฏธ์ง ์ต์ ํ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ค. ์ฌ์ฉ ๋ฐฉ๋ฒ@next/image@ ๋ชจ๋์ ๋ถ๋ฌ์์ ์ฌ์ฉํ๋ค.import Image from 'next/image';export default function Home() { return ( Next.js Image Example );} ๊ธฐ๋ฅ์๋ ํฌ๊ธฐ ์กฐ์ ์ด๋ฏธ์ง๋ฅผ ์๋์ผ๋ก ํ์์ ๋ฐ๋ผ ๋ฆฌ์ฌ์ด์งํ์ฌ ๋ค์ํ ๋ทฐํฌํธ์ ๋๋ฐ์ด..
2024.08.05 -
- [VS Code] Cannot find module 'next/babel' ์ค๋ฅ ํด๊ฒฐํ๊ธฐ (Next.js)
Cannot find module 'next/babel' ์ค๋ฅ ํด๊ฒฐํ๊ธฐ (Next.js)๋ค์ด๊ฐ๋ฉฐVS Code์์ Next.js ํ๋ก์ ํธ๋ฅผ ์์ ํ ๋ ์๋์ ๊ฐ์ด ์ค๋ฅ๊ฐ ๋ฐ์ํ ๊ฒฝ์ฐ ํด๊ฒฐํ๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค. ๋ฐฉ๋ฒํ๋ก์ ํธ์ ์ต์์ ๊ฒฝ๋ก์ @.babelrc@ ํ์ผ์ ์์ฑํ๊ณ , ํ์ผ ์์ ๋ด์ฉ์ ๋ค์๊ณผ ๊ฐ์ด ์์ฑํ๋ค. /.babelrc{ "presets": ["next/babel"], "plugins": []} ๊ทธ๋ฆฌ๊ณ ํ๋ก์ ํธ์ ์ต์์ ๊ฒฝ๋ก์ ์๋ @.eslintrc.json@ ํ์ผ์ ์ด๊ณ ๋ค์๊ณผ ๊ฐ์ด ๋ด์ฉ์ ์์ ํด์ค๋ค. /.eslintrc.json@extends@์ ๊ฐ(Value)์ ๋ฐฐ์ด(Array) ํํ๋ก ๋ง๋ค์ด์ฃผ๊ณ , @"next/babel"@ ๊ฐ์ ๋ฐฐ์ด์ ๋ฃ์ด์ค๋ค.{ "extends": ["nex..
2024.08.05 -
- [React.js] ๋๊ด์ ์ ๋ฐ์ดํธ(Optimistic Updates) (React Query)
๋๊ด์ ์ ๋ฐ์ดํธ(Optimistic Updates) (React Query)๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ์ฟผ๋ฆฌ(React Query)์์ ์ฌ์ฉ๋๋ ๋๊ด์ ์ ๋ฐ์ดํธ(Optimistic Updates)์ ๋ํ์ฌ ์ ๋ฆฌํด๋ณธ๋ค. ๋๊ด์ ์ ๋ฐ์ดํธ(Optimistic Updating)๊ฐ๋ ๋ฐ์ดํฐ๊ฐ ์ค์ ์๋ฒ์ ๋ฐ์๋๊ธฐ ์ ์ ๋ฏธ๋ฆฌ UI์ ๋ฐ์ํ์ฌ ์ฌ์ฉ์ ๊ฒฝํ(UX)์ ํฅ์์ํค๋ ๊ธฐ๋ฒ์ฌ์ฉ์๊ฐ ์๋ฒ ์๋ต์ ๊ธฐ๋ค๋ฆฌ์ง ์๊ณ ๋ ์ฆ๊ฐ์ ์ธ ํผ๋๋ฐฑ์ ๋ฐ์ ์ ์๊ฒ ํด์ค๋ค. ์ฃผ์ ๋จ๊ณโ ๋ณ๊ฒฝ ์ ์ํ ์ ์ฅ๋๊ด์ ์ ๋ฐ์ดํธ๋ฅผ ์ํํ๊ธฐ ์ ์, ํ์ฌ ์ํ๋ฅผ ์ ์ฅํ๋ค.์ด ์์ ์ ์๋ฒ ์์ฒญ์ด ์คํจํ์ ๊ฒฝ์ฐ ์๋ ์ํ๋ก ๋กค๋ฐฑ(Rollback)ํ๊ธฐ ์ํด ํ์ํ๋ค. โก ๋๊ด์ ์ํ ์ ๋ฐ์ดํธ์๋ฒ์ ๋ฐ์ดํฐ๋ฅผ ์ ์กํ๊ธฐ ์ ์, ๋ฆฌ์กํธ ์ฟผ๋ฆฌ์ @queryClient.setQu..
2024.07.10 -
- [React.js] ๋ฆฌ์กํธ ์ฟผ๋ฆฌ(Tanstack Query, React Query)
๋ฆฌ์กํธ ์ฟผ๋ฆฌ(Tanstack Query, React Query)๋ค์ด๊ฐ๋ฉฐReact Query๋ผ๊ณ ๋ถ๋ฆฐ Tanstack Query ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค.Tanstack Query(React Query)๊ฐ๋ ๋ฆฌ์กํธ ์ ํ๋ฆฌ์ผ์ด์ ์์ ์๋ฒ ์ํ(๋ฐ์ดํฐ)๋ฅผ ์ฝ๊ฒ ๊ด๋ฆฌํ๊ณ ์กฐ์ํ ์ ์๋๋ก ๋์์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌReact Query๊ฐ 2022๋ ์ด์ Tanstack Query๋ก ์ด๋ฆ์ด ๋ณ๊ฒฝ๋์๋ค.React Query๊ฐ ํฌํจ๋ Tanstack ์ํ๊ณ๋ฅผ ํ์ฅํ๊ณ , ๋ค์ํ ํ๋ ์์ํฌ์ ํ๋ซํผ์์ ์ฌ์ฉํ ์ ์๋ ๋ฒ์ฉ ๋ฐ์ดํฐ ํ์นญ ๋ฐ ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ชฉํ๋ก ํ๊ธฐ ์ํด์ ์๋ค๊ณ ํ๋ค.Tanstack Query๋ ์ด์ React๋ฟ๋ง ์๋๋ผ Vue, Svelte, Solid์ ๊ฐ์ ๋ค๋ฅธ ํ๋ ์์ํฌ์ ๋ํ ์ง์๋ ํฌํจํ๊ณ ..
2024.07.09 -
- [React.js] ์ง์ฐ ๋ก๋ฉ(Lazy Loading)
์ง์ฐ ๋ก๋ฉ(Lazy Loading)๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ(React.js)์์ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฐฐํฌํ๊ธฐ ์ ์ ์ฝ๋ ์ต์ ํ ์์ ์ ํด์ฃผ์ด์ผ ํ๋๋ฐ, ์ด๋ ์ง์ฐ ๋ก๋ฉ(Lazy Loading)์ ํ์ฉํ ์ ์๋ค.์ง์ฐ ๋ก๋ฉ(Lazy Loading)์ด ๋ฌด์์ธ์ง ๊ฐ๋จํ ์ ๋ฆฌํด๋ณธ๋ค. ์ง์ฐ ๋ก๋ฉ(Lazy Loading)๊ฐ๋ ํ์ํ ์์ ์ ํน์ ์ปดํฌ๋ํธ๋ ๋ชจ๋์ ๋ก๋ํ์ฌ ์ด๊ธฐ ๋ก๋ฉ ์๊ฐ์ ์ค์ด๊ณ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ์ ํฅ์์ํค๋ ๊ธฐ์ ์ด ๋ฐฉ๋ฒ์ ์ฌ์ฉํ๋ฉด ์ด๊ธฐ ๋ก๋ฉ ์ ๋ถํ์ํ ์ฝ๋๊ฐ ๋ก๋๋์ง ์์ผ๋ฉฐ, ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํ ์ ์๋ค. ๊ธฐ๋ณธ์ ์ธ ์ฌ์ฉ ๋ฐฉ๋ฒ@React.lazy@์ @Suspense@๋ฅผ ์ฌ์ฉํ๋ฉด ์ปดํฌ๋ํธ๋ฅผ ๋์ ์ผ๋ก @import@ํ๊ณ ๋ก๋ฉ์ด ์๋ฃ๋ ๋๊น์ง ๋์ฒด UI(fallback)๋ฅผ ํ์ํ ์ ์๋ค. โ ์ปดํฌ๋ํธ ๋์ im..
2024.07.08 -
- [React.js] useSearchParams ํ (React Router)
useSearchParams ํ (React Router)๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ๋ผ์ฐํฐ(React Router)์์ ์ ๊ณตํ๋ @useSearchParams@ ํ ์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. useSearchParams๊ฐ๋ ๋ฆฌ์กํธ ๋ผ์ฐํฐ(React Router)๋ฅผ ์ฌ์ฉํ์ฌ URL์ ์ฟผ๋ฆฌ ํ๋ผ๋ฏธํฐ๋ฅผ ์ฝ๊ณ ์ค์ ํ๋ ๋ฐ ์ ์ฉํ ๋๊ตฌ์ด ํ ์ ์ฌ์ฉํ๋ฉด ์ปดํฌ๋ํธ๊ฐ URL์ ์ฟผ๋ฆฌ ์คํธ๋ง์ ์ฝ๊ฒ ์ ๊ทผํ๊ณ ์กฐ์ํ ์ ์๋ค.React Router v6์์ ๋์ ๋์๊ณ , ๊ธฐ์กด์ @useLocation@๊ณผ @useHistory@ ํ ์ ๊ฒฐํฉํ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ค. ์ฌ์ฉ๋ฒimport React from 'react';import { useSearchParams } from 'react-router-dom';function MyComponent() { /..
2024.07.08 -
- [React.js] defer() (React Router)
defer() (React Router)๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ๋ผ์ฐํฐ(React Router)์์ ์ ๊ณตํ๋ @defer()@์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. defer()๊ฐ๋ ๋ฆฌ์กํธ ๋ผ์ฐํฐ(React Router)์์ ์ ๊ณตํ๋ ๊ธฐ๋ฅ๋ฐ์ดํฐ๋ฅผ ๋ชจ๋ ๋ถ๋ฌ์ค๊ธฐ ์ ์ ํ์ด์ง ์ผ๋ถ๋ฅผ ๋จผ์ ๋ ๋๋งํ๊ณ , ๋ฐ์ดํฐ๊ฐ ๋์ฐฉํ๋ฉด ๋๋จธ์ง ๋ถ๋ถ์ ๋ ๋๋งํ ์ ์๋๋ก ํด์ค๋ค.ํ์ด์ง ๋ก๋ฉ ์๋๋ฅผ ํฅ์์ํค๊ณ , ์ฌ์ฉ์ ๊ฒฝํ(UX)์ ๊ฐ์ ํ๋ ๋ฐ ๋์์ ์ค๋ค. ์ฃผ์ ํน์ง๋น๋๊ธฐ ๋ฐ์ดํฐ ๋ก๋ฉ@defer@๋ ๋น๋๊ธฐ ๋ฐ์ดํฐ ๋ก๋ฉ์ ์ฒ๋ฆฌํ๋ ๋ฐ ์ฌ์ฉ๋๋ค.๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ๋์ ์ผ๋ถ ํ์ด์ง ์ฝํ ์ธ ๋ฅผ ๋จผ์ ๋ ๋๋งํ๊ณ , ๋ฐ์ดํฐ๊ฐ ๋์ฐฉํ๋ฉด ๋๋จธ์ง ์ฝํ ์ธ ๋ฅผ ๋ ๋๋งํ๋ค.๋น ๋ฅธ ํ์ด์ง ๋ ๋๋ง๋ชจ๋ ๋ฐ์ดํฐ๋ฅผ ๊ธฐ๋ค๋ฆฌ์ง ์๊ณ ๋ ํ์ด์ง ์ผ๋ถ๋ฅผ ์ฆ์ ๋ ๋๋งํ ์ ์์ด ํ์ด์ง ๋ก๋ฉ ์๊ฐ์ ๋จ์ถํ..
2024.07.07 -
- [React.js] useFetcher ํ (React Router)
useFetcher ํ (React Router)๋ค์ด๊ฐ๋ฌ๋ฆฌ์กํธ ๋ผ์ฐํฐ(React Router)์์ ์ ๊ณตํ๋ @useFetcher()@ ํ ์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. useFetcher๊ฐ๋ ๋ฆฌ์กํธ ๋ผ์ฐํฐ(React Router)์์ ํ์ด์ง ์ ํ ์์ด ๋ฐ์ดํฐ ๋ก๋ฉ์ด๋ ์ก์ ์ ์ฒ๋ฆฌํ ์ ์๊ฒ ๋์์ฃผ๋ ํ (Hook)์ฃผ๋ก ํผ ์ ์ถ์ด๋ ๋ฐ์ดํฐ ํ์นญ์ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์ฒ๋ฆฌํ๊ณ , ์ฌ์ฉ์์๊ฒ ์๊ฐ์ ์ ํ ์์ด ๊ฒฐ๊ณผ๋ฅผ ๋ณด์ฌ์ค์ผ ํ๋ ๊ฒฝ์ฐ์ ์ฌ์ฉํ๋ฉด ์ ์ฉํ๋ค. ์ฃผ์ ๊ธฐ๋ฅ๋ฐ์ดํฐ ๋ก๋ฉ ๋ฐ ์ก์ ํธ๋ฆฌ๊ฑฐ๋ก๋ฉ ์ํ๋ฅผ ๊ด๋ฆฌํ๊ณ , ๋ฐ์ดํฐ๋ฅผ ๋น๋๊ธฐ์ ์ผ๋ก ๊ฐ์ ธ์ค๊ฑฐ๋ ์๋ฒ์ ๋ฐ์ดํฐ๋ฅผ ์ ์ถํ ์ ์๋ค.ํ์ด์ง ์ ํ ์์.ํ์ด์ง ์ ํ ์์ด ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๊ฑฐ๋ ์ ์ถํ ์ ์์ผ๋ฏ๋ก, ์ฌ์ฉ์ ๊ฒฝํ์ด ๋ณด๋ค ๋งค๋๋ฝ๋ค.์ํ ๊ด๋ฆฌํ์ฌ ๋ก๋ฉ ์ํ์ ๋ก๋ฉ ์๋ฃ ํ ๋ฐ์ดํฐ๋ฅผ..
2024.07.07 -
- [React.js] json() ์ ํธ๋ฆฌํฐ ํจ์ (React Router)
json() ์ ํธ๋ฆฌํฐ ํจ์ (React Router)๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ๋ผ์ฐํฐ(React Router)์์ ์ ๊ณตํ๋ @json()@ ์ ํธ๋ฆฌํฐ ํจ์์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. json()๊ฐ๋ ๋ฆฌ์กํธ ๋ผ์ฐํฐ(React Router)์์ ์ ๊ณตํ๋ ํจ์React Router v6.4์์ ์ถ๊ฐ๋ ์ ํธ๋ฆฌํฐ ํจ์์ฃผ๋ก ๋ผ์ฐํฐ ํธ๋ค๋ฌ์์ ์ฌ์ฉ๋๋ฉฐ, JSON ํ์์ ๋ฐ์ดํฐ๋ฅผ ์๋ต(Response)์ผ๋ก ๋ฐํํ๋ค. ํน์ง์๋ ์ค์ ๋ Content-Type@json()@ ํจ์๋ ๋ฐํ๋ ์๋ต์ @Content-Type@ ํค๋๋ฅผ @application/json@์ผ๋ก ์๋์ผ๋ก ์ค์ ํ๋ค.๊ฐํธํ ์ฌ์ฉJSON ํ์์ ๋ฐ์ดํฐ๋ฅผ ๋ฐํํ๋๋ฐ ํ์ํ ์ฝ๋๋ฅผ ๊ฐ์ํํ์ฌ, ๊ฐ๋ฐ์๊ฐ ๋ณด๋ค ์ง๊ด์ ์ด๊ณ ๊ฐํธํ๊ฒ ์ฌ์ฉํ ์ ์๊ฒ ํ๋ค.์ํ(Status) ์ฝ๋ ์ค์ ๊ฐ๋ฅ@..
2024.07.05 -
- [JavaScript] JSON(JavaScript Object Notation) ๋ค๋ฃจ๊ธฐ
JSON(JavaScript Object Notation) ๋ค๋ฃจ๊ธฐ๋ค์ด๊ฐ๋ฉฐ์น ์๋ฒ ๋ฟ๋ง ์๋๋ผ ๋ค์ํ ๊ณณ์์ ๋ฐ์ดํฐ๋ฅผ ๊ตํํ ๋ ์ฌ์ฉ๋๋ ํ์ผ ํ์์ธ JSON(JavaScript Object Notation)์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. JSON(JavaScript Object Notation)๊ฐ๋ ๋ฐ์ดํฐ ๊ตํ ํ์์ผ๋ก ๋๋ฆฌ ์ฌ์ฉ๋๋ฉฐ, ๋ฌธ์์ด๋ก ์ธ์ฝ๋ฉ๋ ๊ฐ์ฒด๋ฅผ ํฌํจํ ๊ตฌ์กฐํ๋ ๋ฐ์ดํฐ๋ฅผ ํํํ๋ค.์๋ฐ์คํฌ๋ฆฝํธ๋ JSON ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฃจ๊ธฐ ์ํด JSON ๊ฐ์ฒด๋ฅผ ์ ๊ณตํ๋ค. ์ฃผ์ ๋ฉ์๋JSON ๊ฐ์ฒด์ ์ฃผ์ ๋ฉ์๋๋ก๋ @JSON.stringify()@์ @JSON.parse()@๊ฐ ์๋ค. โ JSON.stringfy()์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด(@{ prop: value, ... }@)๋ ๋ฐฐ์ด(@[value1, ..., valueN]@)..
2024.07.05 -
- [React.js] useRouterError ํ (React Router)
useRouterError ํ ๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ๋ผ์ฐํฐ(React Router)์ @useRouterError@ ํ ์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. useRouterError ํ ๊ฐ๋ ๋ฆฌ์กํธ ๋ผ์ฐํฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ(@react-router-dom@)์์ ์ ๊ณตํ๋ ํ ๋ผ์ฐํธ ์ฒ๋ฆฌ ์ค ๋ฐ์ํ ์๋ฌ๋ฅผ ์ก์์ ์ฒ๋ฆฌํ๋ ๋ฐ ์ฌ์ฉ๋๋ค.์ฃผ๋ก ์ค๋ฅ ๊ฒฝ๊ณ(Error Boundary)์ ํจ๊ป ์ฌ์ฉ๋์ด, ๋ผ์ฐํธ ๋ด์์ ๋ฐ์ํ๋ ์ค๋ฅ๋ฅผ ์ฒ๋ฆฌํ๊ณ ์ฌ์ฉ์์๊ฒ ์ ์ ํ ํผ๋๋ฐฑ์ ์ ๊ณตํ๋๋ฐ ์ฌ์ฉ๋๋ค. ์ฃผ์ ๊ธฐ๋ฅ์ค๋ฅ ๊ฐ์ง: ๋ผ์ฐํธ ์ปดํฌ๋ํธ์์ ๋ฐ์ํ๋ ์ค๋ฅ๋ฅผ ๊ฐ์งํ ์ ์๋ค.์๋ฌ ํธ๋ค๋ง: ๊ฐ์ง๋ ์ค๋ฅ๋ฅผ ์ฌ์ฉ์ ์ ์ ์๋ฌ ๋ฉ์์ง๋ ์ปดํฌ๋ํธ๋ก ๋ ๋๋งํ ์ ์๋ค.์ค๋ฅ ์ ๋ณด ์ ๊ณต: ์ค๋ฅ ๊ฐ์ฒด๋ฅผ ๋ฐํํ์ฌ ์ค๋ฅ ๋ฉ์์ง, ์คํ ํธ๋ ์ด์ค ๋ฑ์ ํ์ฉํ ์ ์๋ค. ์ฌ์ฉ ์์ ์์ 1..
2024.07.05 -
- [React.js] React Router์ loader ์์ฑ
React Router์ loader ์์ฑ๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ๋ผ์ฐํฐ(@react-router-dom@)์ @loader@ ์์ฑ์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. React Router์ @loader@ ์์ฑReact Router Version 6 ๋ถํฐ ์ฌ์ฉํ ์ ์๋ค.์ปดํฌ๋ํธ๊ฐ ๋๋๋ง๋๊ธฐ ์ ์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ฌ ์ ์๋ค.๋ก๋ ํจ์์์ ๋ฐํ๋ ๋ฐ์ดํฐ๋ ์๋์ผ๋ก ํด๋น ์ปดํฌ๋ํธ์์ ์ฌ์ฉํ ์ ์๊ฒ ๋๋ค.๋ก๋๋ ํจ์๋ก ์ ์๋๋ฉฐ, ํด๋น ํจ์์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ ์ปดํฌ๋ํธ์ ์ ๋ฌํ๋ค.๋ก๋ ํจ์๋ฅผ ์ฌ์ฉํ๋ฉด ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง๋๊ธฐ ์ ์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ฌ ์ ์์ด, ์ปดํฌ๋ํธ๊ฐ ์ด๊ธฐ ๋ก๋ฉ ์ํ๋ฅผ ํ์ํ์ง ์๊ณ ๋ฐ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ ๋๋งํ ์ ์๋ค.๋ฐ๋ผ์ ๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ ์ ์๋ค. ์์ ์ฝ๋import { RouterProvider, cre..
2024.07.03 -
- [React.js] ๋ผ์ฐํฐ ์ค์ ๋ฐฉ๋ฒ (React Router)
๋ผ์ฐํฐ ์ค์ ๋ฐฉ๋ฒ (React Route)๋ค์ด๊ฐ๋ฉฐReact Router(@react-router-dom@)์ ์ด์ฉํ์ฌ ๋ผ์ฐํฐ๋ฅผ ์ค์ ํ๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค. ๋ฐฉ๋ฒํจํค์ง ์ค์นํ๊ธฐ@react-router-dom@ ํจํค์ง๋ฅผ ์ค์นํ๋ ค๋ฉด ํฐ๋ฏธ๋์ ์๋ ๋ช ๋ น์ ์คํํ๋ค.$ npm install react-router-dom # yarn add react-router-dom ๋ฐฉ๋ฒ 1@createBrowserRouter@๋ฅผ ์ด์ฉํ๋ ๋ฐฉ๋ฒ์ด๋ค.import { createBrowserRouter, RouterProvider,} from "react-router-dom";import HomePage from "./pages/Home";import ProductsPage from "./pages/Products";co..
2024.07.02 -
- [React.js] ๋ฆฌ๋์ค(Redux), ๋ฆฌ๋์ค ํดํท(Redux Toolkit)
๋ฆฌ๋์ค(Redux), ๋ฆฌ๋์ค ํดํท(Redux Toolkit)๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ(React.js)์ ์ ์ญ ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค์ ํ๋์ธ ๋ฆฌ๋์ค(Redux)์ ๋ฆฌ๋์ค ํดํท(Redux Toolkit)์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. ๋ฆฌ๋์ค(Redux)๊ฐ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ํ ๊ด๋ฆฌ๋ฅผ ์ํด ์ฌ์ฉ๋๋ ์ํ ์ปจํ ์ด๋์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ๋ฅผ ์ค์์์ ๊ด๋ฆฌํจ์ผ๋ก์จ ์ํ ๋ณํ๋ฅผ ์ฝ๊ฒ ์ถ์ ํ๊ณ , ๋๋ฒ๊น ์ ๋จ์ํํ๋ฉฐ, ๋ค์ํ ์ปดํฌ๋ํธ ๊ฐ์ ์ํ๋ฅผ ๊ณต์ ํ๋ ๊ฒ์ ์ฝ๊ฒ ํด์ค๋ค.๋ฆฌ๋์ค๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด์๋ ์๋์ ๋ช ๋ น์ ์คํํ์ฌ ๊ด๋ จ ํจํค์ง๋ฅผ ์ค์นํด์ค๋ค.$ yarn add redux # npm install redux$ yarn add react-redux # npm install react-redux ๋ฆฌ๋์ค(..
2024.07.01 -
- [React.js] ๋ฆฌ์กํธ์์์ ์ํ ๊ด๋ฆฌ ๋ฐฉ๋ฒ
๋ฆฌ์กํธ์์์ ์ํ ๊ด๋ฆฌ ๋ฐฉ๋ฒ๋ฆฌ์กํธ(React)์์ ์ํ ๊ด๋ฆฌ ๋ฐฉ๋ฒ์ ๋ํด ์์๋ณด์.๋ฆฌ์กํธ์์๋ ์ํ ๊ด๋ฆฌ๋ฅผ ์ํด ์ฌ๋ฌ ๊ฐ์ง ๋ฐฉ๋ฒ์ ์ฌ์ฉํ ์ ์์ผ๋ฉฐ, ์ํฉ์ ๋ฐ๋ผ ์ ์ ํ ๋ฐฉ๋ฒ์ ์ ํํ๋ ๊ฒ์ด ์ค์ํ๋ค. ์ํ ๊ด๋ฆฌ ๋ฐฉ๋ฒ1. ์ง์ญ ์ํ(Local State)๋ฆฌ์กํธ์ useState ํ ์ ์ฌ์ฉํ์ฌ ์ปดํฌ๋ํธ ๋ด๋ถ์์ ์ํ๋ฅผ ๊ด๋ฆฌํ ์ ์๋ค.์์ ๊ท๋ชจ์ ์ ํ๋ฆฌ์ผ์ด์ ์ด๋ ๋จ์ผ ์ปดํฌ๋ํธ์์ ์ํ ๊ด๋ฆฌ๊ฐ ํ์ํ ๊ฒฝ์ฐ ์ ํฉํ๋ค.import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count..
2024.06.30