๐Ÿ‘ฉ‍๐Ÿ’ป๊ฐœ๋ฐœ_TIL 23

[ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ] ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ์“ฐ๋Š” ์ด์œ 

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ž€? - ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์— ํƒ€์ž…์„ ๋ถ€์—ฌํ•œ ์–ธ์–ด - ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ๊ณผ๋Š” ๋‹ค๋ฅด๊ฒŒ, ์ปดํŒŒ์ผ(ํŒŒ์ผ ๋ณ€ํ™˜)๊ณผ์ •์„ ๊ฑฐ์ณ์•ผ ํ•ฉ๋‹ˆ๋‹ค. * ์ปดํŒŒ์ผ: ์–ด๋–ค ์–ธ์–ด์˜ ์ฝ”๋“œ๋ฅผ ๋‹ค๋ฅธ ์–ธ์–ด๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๊ฒƒ, ๊ทธ๋Ÿฌํ•œ ์—ญํ• ์„ ํ•˜๋Š” ํ”„๋กœ๊ทธ๋žจ์„ ์ปดํŒŒ์ผ๋Ÿฌ๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. (์ปดํŒŒ์ผ๋Ÿฌ์™€ ์ธํ„ฐํ”„๋ฆฌํ„ฐ์˜ ์ฐจ์ด๋Š” ์ด ์˜์ƒ์œผ๋กœ ์žฌ๋ฐŒ๊ฒŒ ์ตํž ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.๐Ÿ˜Ž) ์™œ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ์“ฐ๋‚˜์š”? ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ํฌ๊ฒŒ ๋‘ ๊ฐ€์ง€ ๊ด€์ ์—์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์ฝ”๋“œ ์ž‘์„ฑ ์‹œ ๋ฐœ์ƒํ•˜๋Š” ๋ฌธ์ œ๋ฅผ ๋ณด์™„ํ•ด์ฃผ๋Š” ํšจ๊ณผ์ ์ธ ์–ธ์–ด์ž…๋‹ˆ๋‹ค. 1. ์—๋Ÿฌ๋ฅผ ์‚ฌ์ „์— ๋ฐฉ์ง€ 2. ์ฝ”๋“œ ์ž๋™์™„์„ฑ ๋ฐ ๊ฐ€์ด๋“œ ํ™œ์šฉ 1. ์—๋Ÿฌ๋ฅผ ์‚ฌ์ „์— ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค. ๋ฐ์ดํ„ฐ ํƒ€์ž…์ด ๋‹ฌ๋ผ์ง€๋ฉด ๋ฐ˜ํ™˜๋˜๋Š” ๊ฐ’๋„ ๋‹ฌ๋ผ์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฆ‰ ์˜๋„ํ•˜์ง€ ์•Š์€ ๊ฐ’์ด ์ƒ์„ฑ๋  ์ˆ˜ ์žˆ๋Š”๋ฐ์š”. ์•„๋ž˜์— ๋‘ ์ˆซ์ž๋ฅผ ๋”ํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ฒซ ๋ฒˆ์งธ ํ•จ์ˆ˜..

[๋ฆฌ์•กํŠธ]๋ฆฌ์•กํŠธ ๋ผ์šฐํ„ฐ ์ดˆ๊ธฐ ์„ธํŒ…์„ ํ•ด๋ณด์ž!

1. ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ค์น˜ yarn add react-router-dom ๋˜๋Š” npm install react-router-dom (์ตœ์‹  ๋ฒ„์ „๋ณด๋‹ค ๋‹ค์šด๊ทธ๋ ˆ์ด๋“œ๋œ ๋ฒ„์ „์„ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์€ ๊ฒฝ์šฐ: react-router-dom@5(5๋ฒ„์ „)๊ณผ ๊ฐ™์ด ์ž…๋ ฅํ•ฉ๋‹ˆ๋‹ค. 2. importํ•˜๊ธฐ 3. App ๊ฐ์‹ธ๊ธฐ import์™€ App ๊ฐ์‹ธ๊ธฐ๋Š” index.js ํŒŒ์ผ์—์„œ ํ•œ ๋ฒˆ์— ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. react-router-dom์ด๋ผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์„ค์น˜ํ•˜๊ณ  ๊ฑฐ์ณ์•ผ ํ•  ๋‹จ๊ณ„๋ฅผ ์ •๋ฆฌํ•˜๊ณ , ๋‚˜์ค‘์— ๋‹ค๋ฅธ ํ”„๋กœ์ ํŠธ์— ์ ์šฉํ•  ๋•Œ ๋”์šฐ ์‰ฝ๊ฒŒ ์ฐพ์„ ์ˆ˜ ์žˆ๋„๋ก ์ผ์Šต๋‹ˆ๋‹ค.๐Ÿ˜Š happy hacking ํ•˜์„ธ์š”!

ํฐํŠธ๋ฅผ ์ ์šฉํ•ด๋ณด์ž! (ํฐํŠธ ๋‹ค์šด๋กœ๋“œ)

ํ”„๋กœ์ ํŠธ์— ํฐํŠธ๋ฅผ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ํฌ๊ฒŒ 2๊ฐ€์ง€๋กœ, 1. ์›นํฐํŠธ๋ฅผ ์ ์šฉํ•˜๊ฑฐ๋‚˜ 2. ttf ํ˜•์‹์˜ ํŒŒ์ผ์„ ๋‹ค์šด๋กœ๋“œ ๋ฐ›์•„ ํ”„๋กœ์ ํŠธ์— ์ €์žฅํ•ด์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ €๋„ ์ฒ˜์Œ์—๋Š” ์›นํฐํŠธ๋ฅผ ์ ์šฉํ–ˆ์—ˆ๋Š”๋ฐ์š”! ๊ตฌ๊ธ€๋ง์„ ํ•˜๋‹ค๋ณด๋‹ˆ ์›นํฐํŠธ ์ ์šฉ ๋ฐฉ์‹์œผ๋กœ ํฐํŠธ๋ฅผ ์„œ๋ฒ„-ํด๋ผ์ด์–ธํŠธ ๋ฐฉ์‹์œผ๋กœ ํฐํŠธ ํŒŒ์ผ์„ ๋ฐ›์•„์˜ค๋Š”๋ฐ, ์šฉ๋Ÿ‰์ด ํฌ๊ณ  ์‚ฌ์šฉ์ž์˜ ํ™˜๊ฒฝ์— ๋”ฐ๋ผ ๋กœ๋”ฉ ์†๋„๊ฐ€ ๋Š๋ ค์ง€๋Š” ๋‹จ์ ์ด ์žˆ๋‹ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ttf ํ˜•์‹์˜ ํฐํŠธ ํŒŒ์ผ์„ ๋‹ค์šด๋กœ๋“œ ๋ฐ›์•„ ์ €์žฅํ•ด ์‚ฌ์šฉํ•ด๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. 1. ํฐํŠธ ์‚ฌ์ดํŠธ์—์„œ ํฐํŠธ๋ฅผ ๊ณ ๋ฆ…๋‹ˆ๋‹ค. ๊ฐ€์žฅ ์œ ๋ช…ํ•˜๊ณ  ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฌ์šด ์‚ฌ์ดํŠธ๋Š” ๊ตฌ๊ธ€ ์›นํฐํŠธ์™€ ๋ˆˆ๋ˆ„๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ตฌ๊ธ€์€ ์˜์–ด์™€ ํ•œ๊ตญ์–ด ์ด์™ธ์—๋„ ๋‹ค์–‘ํ•œ ๊ตญ๊ฐ€์˜ ์–ธ์–ด๋ฅผ ์ง€์›ํ•˜๊ณ , ๋ˆˆ๋ˆ„๋Š” ํ•œ๊ธ€ ํฐํŠธ๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ์–ธ์–ด๋ณ„๋กœ ์ ์šฉํ•  ๋•Œ ์˜์–ด๋Š” ๊ตฌ๊ธ€ ์›นํฐํŠธ, ํ•œ๊ตญ์–ด๋Š” ๋ˆˆ๋ˆ„..

[๋ฆฌ์•กํŠธ] All component children of <Routes> must be a <Route> or <React.Fragment>(๋ฆฌ์•กํŠธ ๋ผ์šฐํ„ฐ v6 ์—…๋ฐ์ดํŠธ)

๋ฆฌ์•กํŠธ ๋ผ์šฐํŒ…์„ ์ ์šฉํ•˜๋ฉด์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์—๋Ÿฌ๋ฅผ ๋ฐœ๊ฒฌํ–ˆ๋Š”๋ฐ์š”. ๋ฆฌ์•กํŠธ ๋ผ์šฐํ„ฐ ๋ฒ„์ „์ด v5์—์„œ v6๋กœ ์—…๋ฐ์ดํŠธ๋˜๋ฉด์„œ ๋ณ€๊ฒฝ๋œ ์‚ฌํ•ญ๊ณผ ๊ด€๋ จ๋œ ์—๋Ÿฌ์ž…๋‹ˆ๋‹ค. (์—ญ์‹œ ํ”„๋ก ํŠธ์—”๋“œ์˜ ๊ธฐ์ˆ  ์—…๋ฐ์ดํŠธ๋Š” ๋นจ๋ผ๋„ ๋„ˆ๋ฌด ๋นจ๋ผ..) ๋ฐ”๋กœ ๋Œ€์‹ ์— ๋กœ ์ ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. Switch์™€ ๊ด€๋ จ๋œ ์—…๋ฐ์ดํŠธ ๋‚ด์šฉ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. 1. ๋Œ€์‹ ์— ์ด์ œ๋Š” ์“ฐ์„ธ์š”! 2. component={์ปดํฌ๋„ŒํŠธ๋ช…} ๋Œ€์‹ ์— ์ด์ œ๋Š” element={} ์“ฐ์„ธ์š”! (๊ฐœ์ธ์ ์œผ๋กœ 1๋ฒˆ์€ Routes, Route๋ผ๋Š” ๋™์ผํ•œ ๋‹จ์–ด์—์„œ ํ†ต์ผ์„ฑ์ด ์žˆ์–ด์„œ ์ข‹์€๋ฐ, component๋Œ€์‹ ์— element๋ฅผ ์“ฐ๋Š”๊ฑด ์ต์ˆ™ํ•˜์ง€ ์•Š์€ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค๐Ÿ˜ข) ์ œ๊ฐ€ ์ž‘์—…์ค‘์ธ ํ”„๋กœ์ ํŠธ์—๋„ ์•„๋ž˜์™€ ๊ฐ™์ด ์ ์šฉํ–ˆ๋”๋‹ˆ ์ •์ƒ์ ์œผ๋กœ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค. ๋งˆ์ง€๋ง‰์œผ๋กœ, ๋ฒจ๋กœํผํŠธ๋‹˜์ด ๋ฆฌ์•กํŠธ ๋ผ์šฐํ„ฐ ์—…๋ฐ์ดํŠธ์— ๊ด€ํ•ด ์—…๋กœ๋“œํ•œ ์˜์ƒ..

[๋ฆฌ์•กํŠธ]Module not found: Can't resolve ํŒŒ์ผ ๊ฒฝ๋กœ (์ƒ๋Œ€๊ฒฝ๋กœ ์ง€์ • ๋ฌธ์ œ)

Module not found: Can't resolve ํŒŒ์ผ ๊ฒฝ๋กœ ๋จผ์ € ๊ฒฐ๋ก ๋ถ€ํ„ฐ ๋งํ•˜์ž๋ฉด, ํŒŒ์ผ ์ƒ๋‹จ์— import ์ƒ๋Œ€ ๊ฒฝ๋กœ๋ฅผ ์ž˜๋ชป ์ •ํ•ด์ค€ ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ํ•ด๋‹น ํŒŒ์ผ ๊ฒฝ๋กœ์˜ ๋ชจ๋“ˆ์„ ์ฐพ์ง€ ๋ชปํ–ˆ๋‹ค๋Š” ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•  ๋•Œ, ์ƒ๋Œ€๊ฒฝ๋กœ๋ฅผ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ •ํ•ด์คฌ๋Š”์ง€ ํ™•์ธํ•ด๋ณผ ํ•„์š”๊ฐ€ ์žˆ๊ฒ ์Šต๋‹ˆ๋‹ค. ์ €๋Š” ๊ฐœ์ธ ํ”„๋กœ์ ํŠธ ํŒŒ์ผ์˜ ํด๋” ๊ตฌ์กฐ๋ฅผ ๋ณ€๊ฒฝํ•˜๊ณ  ์ฝ”๋“œ๋“ค์„ ์˜ฎ๊ธฐ๋Š” ์ž‘์—… ์ค‘์— ์œ„์™€ ๊ฐ™์€ ์—๋Ÿฌ๋ฅผ ๋ฐœ๊ฒฌํ–ˆ๋Š”๋ฐ์š”! ์•„๋ž˜์— ์ €์˜ ๋ฌธ์ œ ์ƒํ™ฉ๊ณผ ํ•ด๊ฒฐ ๊ณผ์ •, ํŒ์„ ์ ์–ด๋‘์—ˆ์Šต๋‹ˆ๋‹ค.๐Ÿ˜Š ๊ทธ๋ฆฌ๊ณ  ์•„๋ž˜ ์ƒ๋Œ€๊ฒฝ๋กœ์™€ ์ ˆ๋Œ€๊ฒฝ๋กœ์— ๋Œ€ํ•ด ์ •๋ฆฌ๋œ ๊ธ€์„ ์ฒจ๋ถ€ํ–ˆ์Šต๋‹ˆ๋‹ค! https://blog.naver.com/tipsware/221275416466 [์šฉ์–ด] ์ ˆ๋Œ€ ๊ฒฝ๋กœ, ์ƒ๋Œ€ ๊ฒฝ๋กœ, ์ž‘์—… ๊ฒฝ๋กœ์— ๋Œ€ํ•˜์—ฌ : C ์–ธ์–ด ๊ด€๋ จ ์ „์ฒด ๋ชฉ์ฐจ http://blog.nave..

[๋ฆฌ์•กํŠธ]์นดํ…Œ๊ณ ๋ฆฌ ํ•„ํ„ฐ๋ง ๋ฒ„ํŠผ ๊ตฌํ˜„์— ์ฐธ๊ณ ํ•œ ์ž๋ฃŒ

https://www.youtube.com/watch?v=gPH7sCyXFb4&t=1430s ๐Ÿ˜Ž๋ฌด์—‡์ด ์™œ ํ•„์š”ํ–ˆ๋‚˜? ๊ฐœ์ธ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ,์นดํ…Œ๊ณ ๋ฆฌ ํ•„ํ„ฐ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•  ํ•„์š”๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. '์ƒ์˜', 'ํ•˜์˜' ์ฒ˜๋Ÿผ ์นดํ…Œ๊ณ ๋ฆฌ ๋ณ„๋กœ ๋ฒ„ํŠผ์„ ๋งŒ๋“ค์–ด์„œ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด ํ•ด๋‹นํ•˜๋Š” ์ƒํ’ˆ๋งŒ ๋ณด์—ฌ์ฃผ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด ๋ชฉํ‘œ์˜€์Šต๋‹ˆ๋‹ค. ๐Ÿ˜Ž์–ด๋–ป๊ฒŒ ์ฐพ์•˜๋‚˜? ์šฐ์„  '๋ฆฌ์•กํŠธ ํ•„ํ„ฐ๋ง ๋ฒ„ํŠผ ๊ตฌํ˜„' ๊ฐ™์€ ํ‚ค์›Œ๋“œ๋กœ ๊ตฌ๊ธ€๋ง์„ ํ–ˆ์Šต๋‹ˆ๋‹ค. ์•„์‰ฝ์ง€๋งŒ ๊ตญ๋‚ด ๋ฌด๋ฃŒ ์ž๋ฃŒ ์ค‘์—์„œ๋Š” ๋”ฑ ์ œ๊ฒŒ ํ•„์š”ํ•œ ์ž๋ฃŒ๋ฅผ ์ฐพ๊ธฐ ํž˜๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ 'react filtering by category'๋ผ๋Š” ํ‚ค์›Œ๋“œ๋กœ Youtube๋กœ ๊ฒ€์ƒ‰ํ•˜๋‹ˆ, ๋‹คํ–‰ํžˆ ์›ํ•˜๋Š” ์˜์ƒ์ด ๊ฝค ๋งŽ์ด ๋‚˜์™”์Šต๋‹ˆ๋‹ค. ๊ทธ ์ค‘์—์„œ ๊ฐ€์žฅ ์ตœ๊ทผ์— ์—…๋กœ๋“œ๋œ ์˜์ƒ์„ ๋ณด๋ฉด์„œ ๊ฐœ๋…์„ ์ตํ˜”์Šต๋‹ˆ๋‹ค. ๐Ÿ˜Ž๋ฌด์—‡์„ ์•Œ๊ฒŒ ..

1 2 3 4