profile
์žฌ๋ฏธ์žˆ๋Š” ์•„์ด๋””์–ด ๋– ์˜ฌ๋ฆฌ๋Š” ๊ฒƒ์„ ์ข‹์•„ํ•˜๊ณ , ์ด๋ฅผ ๊ตฌํ˜„ํ•˜์—ฌ ์„ธ์ƒ์— ์ฆ๊ฑฐ์›€์„ ์„ ๋ฌผํ•˜๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ์ž…๋‹ˆ๋‹ค.
post-thumbnail

[React] 13์žฅ : ๋ฆฌ์•กํŠธ ๋ผ์šฐํ„ฐ๋กœ SPA ๊ฐœ๋ฐœํ•˜๊ธฐ

๋ฆฌ์•กํŠธ ๋ผ์šฐํ„ฐ๋Š” ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ์—์„œ์˜ ๋ผ์šฐํŒ…์„ ๊ฐ„๋‹จํ•˜๊ฒŒ ๊ตฌํ˜„ํ•˜๋„๋ก ๋„์™€์ค€๋‹ค. >// ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ค์น˜ $ yarn add react-router-dom 1. ๋ผ์šฐํ„ฐ ์ ์šฉ ํ”„๋กœ์ ํŠธ index.jsํŒŒ์ผ์—์„œ react-router-dom์˜ BrowseRouter ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋ Œ๋”๋ง ํ•˜๊ณ ์ž ํ•˜๋Š” APP ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐ์‹ธ๋ฉด ๋œ๋‹ค. ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๋Š” ํŽ˜์ด์ง€๋ฅผ ์ƒˆ๋กœ๊ณ ์นจ ํ•˜์ง€ ์•Š์œผ๋ฉด์„œ ์ฃผ์†Œ๋ฅผ ๋ณ€๊ฒฝํ•œ๋‹ค. 2. Route ์ปดํฌ๋„ŒํŠธ๋กœ ์ฃผ์†Œ ์„ค์ • (1) ๊ทœ์น™ Route ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ด์šฉํ•˜๋ฉด, url ๊ฒฝ๋กœ์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ๋‹ค. ์ฃผ์†Œ์— ๋Œ€์‘ํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ์•„๋ž˜์™€ ๊ฐ™๋‹ค. > ๋งŒ์•ฝ ํ™ˆ์˜ ์ฃผ์†Œ๋ฅผ '/'๋กœ ์„ค์ •ํ•˜๊ณ  ํ”„๋กœํ•„์˜ ์ฃผ์†Œ๋ฅผ '/profile'๋กœ ์„ค์ •ํ•œ๋‹ค๋ฉด '/'์ด ๊ฒน์น˜๊ธฐ ๋•Œ๋ฌธ์— ํ”„๋กœํ•„ ํŽ˜์ด์ง€์—์„œ ํ™ˆ์˜ ๋‚ด์šฉ๋„ ๋ณด์ผ ๊ฒƒ์ด๋‹ค. ๋”ฐ๋ผ์„œ ํ™ˆ์˜ ์ฃผ์†Œ ๊ทœ์น™์— exact = {true}๋ฅผ ์ถ”๊ฐ€ํ•ด์ค˜์•ผ ํ•œ๋‹ค. ์—ฌ๊ธฐ์„œ๋Š” ์˜ˆ์‹œ๋กœ Home ํŽ˜์ด์ง€์™€ A

2021๋…„ 1์›” 21์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[React] 12์žฅ : immer ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

์ปดํฌ๋„ŒํŠธ์—์„œ ์ƒํƒœ๋ฅผ ์—…๋ฐ์ดํŠธ ํ• ๋•Œ๋Š” ๋ถˆ๋ณ€์„ฑ์„ ์œ ์ง€ํ•˜๋ฉด์„œ ์ƒํƒœ๋ฅผ ์—…๋ฐ์ดํŠธ ํ•˜๋Š”๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค. ๋ถˆ๋ณ€์„ฑ์ด ์ง€์ผœ์ง€์ง€ ์•Š์œผ๋ฉด ๊ฐ์ฒด ๋‚ด๋ถ€์˜ ๊ฐ’์ด ๋ฐ”๊ปด๋„ ๊ฐ์ง€๋ฅผ ๋ชปํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. >// immer ์„ค์น˜ $ yarn add immer ์—ฌํƒœ๊นŒ์ง€๋Š” ๊ธฐ์กด์˜ ๊ฐ’์„ ์œ ์ง€ํ•˜๋ฉด์„œ ์›ํ•˜๋Š” ๊ฐ’์„ ์ƒˆ๋กœ ์ง€์ •ํ•˜์ง€ ์œ„ํ•ด ์ „๊ฐœ ์—ฐ์‚ฐ์ž(...)๋ฅผ ์‚ฌ์šฉํ–ˆ๋Š”๋ฐ ์‚ฌ์šฉํ•˜๊ธฐ์— ์ข€ ๋ฒˆ๊ฑฐ๋กญ๋‹ค. ๋˜ํ•œ ์ „๊ฐœ ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๊ฐ์ฒด๋‚˜ ๋ฐฐ์—ด ๋‚ด๋ถ€์˜ ๊ฐ’์„ ๋ณต์‚ฌํ•˜๋ฉด ์–•์€ ๋ณต์‚ฌ๋ฅผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋‚ด๋ถ€์˜ ๊ฐ’์„ ์™„์ „ํžˆ ์ƒˆ๋กœ ๋ณต์‚ฌํ•˜๋Š”๊ฒƒ์ด ์•„๋‹ˆ๋‹ค! ๋ฐฐ์—ด์ด๋‚˜ ๊ฐ์ฒด์˜ ๊ตฌ์กฐ๊ฐ€ ๋ณต์žกํ• ๋•Œ ์ฝ”๋“œ๊ฐ€ ๋ณต์žกํ•ด์ง€๊ณ  ์ž‘์„ฑํ•˜๋Š”๊ฒƒ์ด ๋ฒˆ๊ฑฐ์šด๋ฐ, ์ด๋Ÿฌํ•œ ๋ฒˆ๊ฑฐ๋กœ์šด์„ ํ•ด๊ฒฐํ•ด์ฃผ๋Š” ๊ฒƒ์ด immer ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋‹ค. 1. produce ํ•จ์ˆ˜ immer ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ produce ํ•จ์ˆ˜๋Š” ๋‘๊ฐ€์ง€ ์ธ์ž๋ฅผ ๋ฐ›๋Š”๋‹ค. ์ฒซ๋ฒˆ์งธ ํŒŒ๋ผ๋ฏธํ„ฐ๋Š” ์ˆ˜์ •ํ•˜๊ณ  ์‹ถ์€ ์ƒํƒœ, ๋‘๋ฒˆ์งธ ํŒŒ๋ผ๋ฏธํ„ฐ๋Š” ์—…๋ฐ์ดํŠธ ํ•จ์ˆ˜์ด๋‹ค. ๋‘๋ฒˆ์งธ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ์—…๋ฐ์ดํŠธ ํ•จ์ˆ˜๋ฅผ ์ „๋‹ฌํ•  ๊ฒฝ์šฐ, ์ „๋‹ฌํ•˜๋Š” ์—…๋ฐ์ดํŠธ ํ•จ์ˆ˜์—์„œ ์›ํ•˜๋Š” ๊ฐ’์„ ๋ณ€๊ฒฝ

2021๋…„ 1์›” 21์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[React] 11์žฅ : ์ปดํฌ๋„ŒํŠธ ์„ฑ๋Šฅ ์ตœ์ ํ™”

10์žฅ์—์„œ ๋งŒ๋“ค์—ˆ๋˜ To-do App์—์„œ ๋ฐ์ดํ„ฐ๊ฐ€ ๋งŽ์•„์ง€๋ฉด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ๋Š๋ ค์งˆ ๊ฒƒ์ด๋‹ค. App.jsํŒŒ์ผ์„ ์ข€ ์ˆ˜์ •ํ•ด์„œ ๋งŽ์€ ๋ฐ์ดํ„ฐ๋ฅผ ๋ Œ๋”๋ง ํ•ด๋ณด์ž! 1. ๋งŽ์€ ๋ฐ์ดํ„ฐ ๋ Œ๋”๋ง (1) useState์˜ ๊ธฐ๋ณธ๊ฐ’์„ ํ•จ์ˆ˜๋กœ #createBulkTodos๋Š” ๋ฐ˜๋ณต๋ฌธ์„ ํ†ตํ•ด ๋งŽ์€ ๋ฐ์ดํ„ฐ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ํ•จ์ˆ˜์ด๋‹ค. useState์˜ ๊ธฐ๋ณธ๊ฐ’์„ createBulkTodos()๋กœ ์ง€์ •ํ•˜๋ฉด, ๋ฆฌ๋ Œ๋”๋ง ๋ ๋•Œ๋งˆ๋‹ค createBulkTodosํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜์ง€๋งŒ ๊ด„ํ˜ธ ์—†์ด createBulkTodos๋กœ ์ง€์ •ํ•˜๋ฉด, ์ฒ˜์Œ ๋ Œ๋”๋ง ๋ ๋•Œ๋งŒ createBulkTodos ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋œ๋‹ค. 2. ๋Š๋ ค์ง€๋Š” ์›์ธ ๋ถ„์„ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง ๋˜๋Š” ๊ฒฝ์šฐ๋Š” ์•„๋ž˜์™€ ๊ฐ™๋‹ค. ์ „๋‹ฌ๋ฐ›์€ props๊ฐ€ ๋ฐ”๋€” ๋•Œ ์ž์‹ ์˜ state๊ฐ€ ๋ฐ”๋€” ๋•Œ ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง ๋  ๋•Œ forceUpdate ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋  ๋•Œ ๋”ฐ๋ผ์„œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ถˆํ•„์š”ํ•˜๊ฒŒ ๋ฆฌ๋ Œ๋”๋ง ๋˜๋Š”๊ฑธ ๋ฐฉ์ง€ํ•ด์•ผ ํ•œ๋‹ค. 3. ์ปดํฌ

2021๋…„ 1์›” 21์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[React] 3์žฅ : ์ปดํฌ๋„ŒํŠธ

์ปดํฌ๋„ŒํŠธ ์„ ์–ธ๋ฐฉ์‹์€ ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ์™€ ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์žˆ๋‹ค. rcc + enter -> ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ ์ž‘์„ฑ ์ฝ”๋“œ ์ƒ์„ฑ rsc + enter -> ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ ์ž‘์„ฑ ์ฝ”๋“œ ์ƒ์„ฑ 1. ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ render ํ•จ์ˆ˜๊ฐ€ ๋ฌด์กฐ๊ฑด ์žˆ์–ด์•ผ ํ•œ๋‹ค. 2. ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ ํ•จ์ˆ˜๋ฅผ ์ž‘์„ฑํ• ๋•Œ ๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค. ๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์€ ์•„์˜ˆ ๋™์ผํ•œ๊ฒƒ์ด ์•„๋‹ˆ๋ฏ€๋กœ ์ฃผ์˜! function ํ‚ค์›Œ๋“œ ์‚ฌ์šฉ ์ž์‹ ์ด ์ข…์†๋œ ๊ฐ์ฒด๋ฅผ this๋กœ ๊ฐ€๋ฆฌํ‚จ๋‹ค. ํ™”์‚ดํ‘œ ํ•จ์ˆ˜ ์‚ฌ์šฉ ์ž์‹ ์ด ์ข…์†๋œ ์ธ์Šคํ„ด์Šค๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค. ํ•จ์ˆ˜๋ฅผ ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ์ „๋‹ฌํ• ๋•Œ ์œ ์šฉ 3. props ์ปดํฌ๋„ŒํŠธ ์†์„ฑ์„ ์„ค์ •ํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์š”์†Œ์ด๋‹ค. props๊ฐ’์€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ถˆ๋Ÿฌ์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์—์„œ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. (1) ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น ๋ฌธ๋ฒ• ๊ตฌ์กฐ ๋ถ„ํ•ด ๋ฌธ๋ฒ•์ด๋ผ๊ณ ๋„ ๋ถˆ๋ฆฐ๋‹ค. ํ•จ์ˆ˜์˜ ํŒŒ๋ผ๋ฏธํ„ฐ ๋ถ€๋ถ„์—๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. (2) propTypes props์˜ ํƒ€์ž…์„ ์ง€์ •ํ• 

2021๋…„ 1์›” 18์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[React] 2์žฅ : JSX

1. ์ฝ”๋“œ ์ดํ•ดํ•˜๊ธฐ (1) ๋ฒˆ๋“ค๋Ÿฌ import ๊ตฌ๋ฌธ์€ ์›๋ž˜ ๋ธŒ๋ผ์šฐ์ €์—๋Š” ์—†๋˜ ๊ธฐ๋Šฅ์ธ๋ฐ, ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์•„๋‹Œ ํ™˜๊ฒฝ์—์„œ js๋ฅผ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋„๋ก node.js์—์„œ ์ง€์›ํ•ด์ฃผ๋Š” ๊ธฐ๋Šฅ์ด๋‹ค. ์ด๋Ÿฌํ•œ ๊ธฐ๋Šฅ์„ ๋ธŒ๋ผ์šฐ์ €์—์„œ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฒˆ๋“ค๋Ÿฌ๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๋ฐ, ๋ฒˆ๋“ค๋Ÿฌ ๋„๊ตฌ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด import๋กœ ๋ชจ๋“ˆ์„ ๋ถˆ๋Ÿฌ์™”์„ ๋•Œ ๋ถˆ๋Ÿฌ์˜จ ๋ชจ๋“ˆ์„ ๋ชจ๋‘ ํ•ฉ์ณ ํ•˜๋‚˜์˜ ํŒŒ์ผ์„ ์ƒ์„ฑํ•ด์ค€๋‹ค. ์ด ์ฑ…์˜ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” src/index.js๋กœ ํ•„์š”ํ•œ ํŒŒ์ผ๋“ค์„ ๋‹ค ๋ถˆ๋Ÿฌ์„œ ๋ฒˆ๋“ค๋งํ•œ๋‹ค. ๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ์—์„œ ๋ฒˆ๋“ค๋Ÿฌ๋กœ ์ฃผ๋กœ ์›นํŒฉ์„ ์‚ฌ์šฉํ•œ๋‹ค. svg, css ํŒŒ์ผ์„ ๋ถˆ๋Ÿฌ์˜ค๋Š” ๊ฒƒ์€ ์›นํŒฉ์˜ ๋กœ๋”๋ผ๋Š” ๊ธฐ๋Šฅ์ด ๋‹ด๋‹นํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ์›นํŒฉ์˜ ๋กœ๋” ๊ฐ™์€ ๊ฒƒ๋„ ์›๋ž˜ ์ง์ ‘ ์„ค์น˜ํ•ด์•ผ ํ•˜๋Š”๋ฐ, create react-app ๋ช…๋ น์–ด๊ฐ€ ์•Œ์•„์„œ ํ•ด์คฌ๊ธฐ ๋•Œ๋ฌธ์— ๋”ฐ๋กœ ์„ค์ •ํ•  ํ•„์š”๊ฐ€ ์—†๋‹ค. (2) ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ ![](https://images.velog.io/images/jooyeon/post/718a1e0c-d355-4599-aa1

2021๋…„ 1์›” 16์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[React] 1์žฅ : ๋ฆฌ์•กํŠธ ์‹œ์ž‘

1. ๋ฆฌ์•กํŠธ ์ดํ•ด ์ปดํฌ๋„ŒํŠธ๋Š” ํ”„๋กœ์ ํŠธ์—์„œ ํŠน์ • ๋ถ€๋ถ„์ด ์–ด๋–ป๊ฒŒ ์ƒ๊ธธ์ง€ ์ •ํ•˜๋Š” ์„ ์–ธ์ฒด์ด๋‹ค. (1) ์ดˆ๊ธฐ ๋ Œ๋”๋ง render() ํ•จ์ˆ˜๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์–ด๋–ป๊ฒŒ ์ƒ๊ฒผ๋Š”์ง€ ์ •์˜ํ•˜๋Š” ์—ญํ• ์„ ํ•œ๋‹ค. ๋”๋ถˆ์–ด, ๋ทฐ๊ฐ€ ์–ด๋–ป๊ฒŒ ์ƒ๊ฒผ๊ณ  ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•˜๋Š”์ง€ ๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜์ด๋‹ค. render() ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด ์ดˆ๊ธฐ ๋ Œ๋”๋ง์„ ๋‹ค๋ฃจ๋Š”๋ฐ, ์ด๋•Œ ๋‘ ๊ฐ€์ง€ ์ ˆ์ฐจ๋ฅผ ๋”ฐ๋ฅธ๋‹ค. ๋ฌธ์ž์—ด ํ˜•ํƒœ์˜ HTML ์ฝ”๋“œ๋ฅผ ์ƒ์„ฑ ํŠน์ • DOM์— ํ•ด๋‹น๋‚ด์šฉ์„ ์ฃผ์ž… (2) Re๋ Œ๋”๋ง (์กฐํ™”๊ณผ์ •) ๋ทฐ์— ์ˆ˜์ •์‚ฌํ•ญ์ด ์ƒ๊ฒผ์„ ๋•Œ ์กฐํ™”๊ณผ์ •์„ ๊ฑฐ์นœ๋‹ค. ์ปดํฌ๋„ŒํŠธ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์—…๋ฐ์ดํŠธ ํ–ˆ์„ ๋•Œ ์ƒˆ๋กœ์šด ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ง€๊ณ  render()ํ•จ์ˆ˜๋ฅผ ๋‹ค์‹œ ํ˜ธ์ถœํ•œ๋‹ค. render()ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’์„ ๋ฐ”๋กœ DOM์— ์ ์šฉํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, ์ด์ „ render()ํ•จ์ˆ˜๊ฐ€ ๋งŒ๋“  ์ปดํฌ๋„ŒํŠธ ์ •๋ณด์™€ ํ˜„์žฌ render() ํ•จ์ˆ˜๊ฐ€ ๋งŒ๋“  ์ปดํฌ๋„ŒํŠธ ์ •๋ณด๋ฅผ ๋น„๊ตํ•˜์—ฌ ๋‘˜์˜ ์ฐจ์ด๋งŒ ์—…๋ฐ์ดํŠธ ํ•˜๋Š” ๊ฒƒ์ด๋‹ค. 2. ๋ฆฌ์•กํŠธ ํŠน์ง• (1) Dom DOM์ด

2021๋…„ 1์›” 16์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท