์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 

React Router ์™„์ „ ์ •๋ณต

React ๋กœ SPA๋ฅผ ๋งŒ๋“œ๋Š” ๋ชจ๋“  ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ํ•„์ˆ˜์ธ React Router๋ฅผ ํ•จ๊ป˜ ์ •๋ณตํ•ด๋ณด์•„์š” ๐Ÿ’ช

Thumbnail

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[ํ”„๋ก ํŠธ์—”๋“œ, ์›น ๊ฐœ๋ฐœ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • ๋ฆฌ์•กํŠธ ๋ผ์šฐํ„ฐ๋ฅผ ์ด์šฉํ•œ ๊ธฐ๋ณธ์ ์ธ ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ ๋ผ์šฐํŒ…

  • ๋ฆฌ์•กํŠธ ๋ผ์šฐํ„ฐ 6.4 ์ดํ›„์— ์ƒˆ๋กญ๊ฒŒ ์ถ”๊ฐ€๋œ Data APIs ์‚ฌ์šฉ๋ฒ•

 SPA ๊ฐœ๋ฐœ์˜ ์ฝ”์–ด! ๋ฆฌ์•กํŠธ ๋ผ์šฐํ„ฐ 
ํ•ต์‹ฌ๋งŒ ๋น ๋ฅด๊ณ  ๊ฐ„๊ฒฐํ•˜๊ฒŒ ์•Œ๋ ค๋“œ๋ฆฝ๋‹ˆ๋‹ค.

๋ฆฌ์•กํŠธ ๊ฐœ๋ฐœ์ž๋ผ๋ฉด ๊ผญ ์•Œ์•„์•ผ ํ•  
React Router ์™„์ „ ์ •๋ณต

SPA(์‹ฑ๊ธ€ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜) ์›น ์•ฑ์„ ๊ฐœ๋ฐœํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” React Router(react-router-dom, ๋ฆฌ์•กํŠธ ๋ผ์šฐํ„ฐ)๋ฅผ ๋‹ค๋ฃน๋‹ˆ๋‹ค. 

๋ฆฌ์•กํŠธ๋ฅผ ํ•  ์ค„ ์•„๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ผ๋ฉด, React Router๋ฅผ ๋‹น์—ฐํžˆ ์•Œ๊ณ  ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ค‘์š”๋„์— ๋น„ํ•ด ์ ๋‹นํžˆ ์•„๋Š” ๋งŒํผ๋งŒ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝํ–ฅ์ด ๊ฐ•ํ•ฉ๋‹ˆ๋‹ค.

์ด ๊ฐ•์˜์—์„œ๋Š” ๋ธŒ๋ผ์šฐ์ € ์ฃผ์†Œ์ฐฝ๊ณผ ๋ฆฌ์•กํŠธ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์‚ฌ์ด์˜ ๊ด€๊ณ„๋ฅผ ๋„์™€์ฃผ๊ณ , ๋ฐœ์ „์‹œํ‚ค๊ณ  ์žˆ๋Š” ์ตœ์‹  ๋ฒ„์ „ react-router-dom ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋ฐฐ์šฐ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

๊ฐ•์˜ ํŠน์ง•

์ฝ”๋“œ๋ฅผ ํƒ€์ดํ•‘ํ•˜๋ฉฐ ์ตํž™๋‹ˆ๋‹ค

์ฝ”๋“œ๋ฅผ ์ง์ ‘ ํƒ€์ดํ•‘ํ•˜๋ฉฐ React Router์˜ ๊ธฐ๋Šฅ๊ณผ ์‚ฌ์šฉ๋ฒ•์„ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ์ตํž ์ˆ˜ ์žˆ๋„๋ก ๊ตฌ์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค.

๋น ๋ฅด๊ณ  ๊ฐ„๊ฒฐํ•œ ํ˜ธํก์œผ๋กœ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค

ํ๋ฆ„์„ ๋”ฐ๋ผ๊ฐ€๋ฉฐ ๋‹จ๊ธฐ๊ฐ„์— React Router์˜ ๊ฐœ๋…์„ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋”ฐ๋ผํ•˜๊ณ  ๋ณต์Šตํ•ด๋ณด์„ธ์š” 
ํ•™์Šต ์ž๋ฃŒ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค

  • โœ… Notion์„ ํ†ตํ•ด ๊ฐ•์˜์— ํ™œ์šฉํ•œ ๋ฌธ์„œ์™€ ์ถ”๊ฐ€์ ์ธ ๋ ˆํผ๋Ÿฐ์Šค๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. (์ฃผ๊ธฐ์ ์œผ๋กœ ์—…๋ฐ์ดํŠธ๋  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.)
  • โœ… Github์—์„œ ๊ฐ•์˜์— ํ™œ์šฉํ•œ ์ฝ”๋“œ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ’ก ์ˆ˜๊ฐ• ์ „ ํ™•์ธํ•ด์ฃผ์„ธ์š”

  • ์‹ค์Šต์€ macOS ํ™˜๊ฒฝ์—์„œ ์ง„ํ–‰๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ Windows์—์„œ๋„ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
  • Node.js ๋ฐ Visual Studio Code๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
  • React์— ๋Œ€ํ•ด ๊ธฐ๋ณธ์ ์ธ ํ•™์Šต์„ ๋งˆ์นœ ์ƒํƒœ๋กœ ๊ฐ€์ •ํ•˜๊ณ  ์ˆ˜์—…์„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.
  • ์‹ค์Šต์˜ ์†๋„๊ฐ€ ๋น ๋ฅด๊ฒŒ ๋А๊ปด์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ๋ฆ„์„ ์ดํ•ดํ•˜๋ฉฐ ๋น ๋ฅด๊ฒŒ ๋ณด์‹œ๋Š” ๊ฒƒ์„ ์˜๋„ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ, ๋น ๋ฅด๊ฒŒ ์–ธ๊ธ‰๋˜๋Š” ๊ฐœ๋…๋“ค์ด ๋‹ค์†Œ ์–ด๋ ค์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. (์งˆ๋ฌธ์„ ๋‚จ๊ฒจ์ฃผ์‹œ๋ฉด ์–ด๋ ต๊ฒŒ ๋А๊ปด์ง€๋Š” ๊ฐœ๋…๋“ค์— ๋Œ€ํ•ด ๋ณด๊ฐ•ํ•  ๊ณ„ํš์ด ์žˆ์Šต๋‹ˆ๋‹ค.)

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ๋ฆฌ์•กํŠธ ๋ผ์šฐํ„ฐ์— ๋Œ€ํ•ด ๋น ๋ฅด๊ณ  ์ž์„ธํžˆ ํ•™์Šตํ•˜๊ณ  ์‹ถ์€ ๋ฆฌ์•กํŠธ๋ฅผ ๋ง‰ ๋ฐฐ์šด ์ดˆ๋ณด ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž

  • ๋ฆฌ์•กํŠธ ๋ผ์šฐํ„ฐ๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š”๋ฐ ๋‹จ๊ธฐ๊ฐ„์— ๊ฐœ๋…์„ ์ตํžˆ๊ณ  ์‹ถ์€ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • React

  • JavaScript

์•ˆ๋…•ํ•˜์„ธ์š”
์ด์›…์žฌ์ž…๋‹ˆ๋‹ค.

11,785

๋ช…

์ˆ˜๊ฐ•์ƒ

124

๊ฐœ

์ˆ˜๊ฐ•ํ‰

4.7

์ 

๊ฐ•์˜ ํ‰์ 

5

๊ฐœ

๊ฐ•์˜

14๋…„์ฐจ ์†Œํ”„ํŠธ์›จ์–ด ์—”์ง€๋‹ˆ์–ด ์ž…๋‹ˆ๋‹ค.

 

2021๋…„ ๋ถ€ํ„ฐ๋Š” NHN Dooray ์—์„œ ํ”„๋ก ํŠธ์—”๋“œ๊ฐœ๋ฐœํŒ€์„ ๋ฆฌ๋“œํ•˜๋ฉฐ, ์„œ๋น„์Šค ์ „์ฒด์˜ UI ์— ๋Œ€ํ•œ ์ฑ…์ž„์„ ๋งก์•˜์Šต๋‹ˆ๋‹ค. ํŒ€์„ ๋งก์•„ ๊ธฐ์กด์— ์šด์˜ํ•˜๊ณ  ์žˆ๋˜ ๋ ˆ๊ฑฐ์‹œ ์‹œ์Šคํ…œ(AngularJS, Vue)์„ React, TypeScript ๋กœ ๋ฆฌ๋‰ด์–ผ ํ•˜์˜€์Šต๋‹ˆ๋‹ค. 10์ธ ์ด์ƒ์˜ ๋‹ค์ˆ˜ ํ”„๋ก ํŠธ์—”๋“œ ์—”์ง€๋‹ˆ์–ด๋“ค์ด ํ•˜๋‚˜์˜ ํ”„๋Ÿฌ๋•ํŠธ๋ฅผ ํ•จ๊ป˜ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋„๋ก ์•„ํ‚คํ…์ฒ˜๋ฅผ ์„ค๊ณ„ํ•˜๊ณ  ๊ด€๋ฆฌํ•˜๋Š” ์—…๋ฌด๋ฅผ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ „์ฒด ์„œ๋น„์Šค ๊ทœ๋ชจ๊ฐ€ ํฌ๊ณ  ๋ณต์žก๋„๊ฐ€ ๋†’์•„ Monorepo ๋กœ ๊ฐœ๋ฐœ ๋ฐ ์šด์˜ํ•˜๊ณ , Micro Frontend ๋ฅผ ๋„์ž…ํ•˜์—ฌ ๋ฐฐํฌ ์ฃผ๊ธฐ ๋‹จ์ถ•์— ๋Œ€ํ•ด ๋…ธ๋ ฅํ•ด์™”์Šต๋‹ˆ๋‹ค. Storybook ์„ ํ†ตํ•ด ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ ๊ทน์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๋ฉฐ, Design System ์„ ๊ตฌ์ถ•ํ•˜๊ณ  ํ™œ์šฉ์ด ๋  ์ˆ˜ ์žˆ๋„๋ก ํ”„๋กœ์„ธ์Šค๋ฅผ ๋‹ค๋“ฌ๋Š” ์—ญํ• ์„ ํ–ˆ์Šต๋‹ˆ๋‹ค.

 

์ด์ „์—๋Š” Studio XID ์—์„œ TypeScript ์™€ Electron ์„ ์ด์šฉํ•˜์—ฌ, ๋””์ž์ด๋„ˆ๋ฅผ ์œ„ํ•œ ์ธํ„ฐ๋ ‰์…˜ ํ”„๋กœํ† ํƒ€์ดํ•‘ ํˆด์ธ ProtoPie ๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ํ•œ๊ฐ€์ง€ ์ œํ’ˆ์„ ์•ฝ 4๋…„๋™์•ˆ ๋งŒ๋“ค๋ฉด์„œ ์ข‹์€ ์ฝ”๋“œ, ํ’ˆ์งˆ์ด ์ข‹์€ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ธฐ ์œ„ํ•ด ๋…ธ๋ ฅํ•ด์™”์Šต๋‹ˆ๋‹ค.

 

๋Œ€๊ทœ๋ชจ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์— ๋Œ€ํ•œ ๋” ๋‚˜์€ ๋ฐฉํ–ฅ์„ ๊ณ ๋ฏผํ•˜๊ณ , ์ ์šฉํ•˜๊ธฐ ์œ„ํ•ด ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
Microsoft MVP (TypeScript) ๋กœ ํ™œ๋™ํ•ด ์™”์œผ๋ฉฐ, ์ตœ์‹  ์›น๊ธฐ์ˆ ์— ๋Œ€ํ•ด ์‚ฌ๋žŒ๋“ค๊ณผ ์ด์•ผ๊ธฐ ํ•˜๋Š” ๊ฒƒ์„ ์ฆ๊น๋‹ˆ๋‹ค.

 

์—ฌ๋Ÿฌ ๊ณณ์—์„œ ํ”„๋ก ํŠธ์—”๋“œ ํŒ€์„ ์ด๋Œ๋ฉฐ, ์ฃผ๋กœ ํ•จ์ˆ˜ํ˜• ์–ธ์–ด(ํด๋กœ์ €)๋‚˜ Node.js ๋กœ ๋ฐฑ์—”๋“œ ์ž‘์—…์„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.
์ธํ”„๋ผ ์ž๋™ํ™”์— ๋Œ€ํ•œ ๊ด€์‹ฌ์ด ๋งŽ์Šต๋‹ˆ๋‹ค.

๋”๋ณด๊ธฐ

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

27๊ฐœ โˆ™ (1์‹œ๊ฐ„ 56๋ถ„)

๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!