post-thumbnail

TIL101. Web3 NFT dApp ๋งŒ๋“ค๊ธฐ

nft minting, staking ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๋ฉฐ NFT dApp ๋งŒ๋“œ๋Š” ์ผ๋ จ์˜ ๊ณผ์ •๋“ค์„ ์ •๋ฆฌํ•ด๋ณด์ž. minting page nft์—์„œ ๋งํ•˜๋Š” ๋ฏผํŒ…์€ ๋‘๊ฐ€์ง€ ๋œป์ด ์žˆ๋‹ค. ํ•˜๋‚˜๋Š” ํŒ๋งค์ž ์ž…์žฅ์—์„œ ๊ฐ€์ƒํ™”ํ๋กœ NFT๋ฅผ ๋งŒ๋“ค์–ด ๋‚ธ๋‹ค๋Š” ๋œป์ด๊ณ , ๋‹ค๋ฅธ ํ•˜๋‚˜๋Š” ๊ตฌ๋งค์ž ์ž…์žฅ์—์„œ NFT๋ฅผ ๊ตฌ๋งคํ•œ๋‹ค๋Š” ๋œป๋„ ๋œ๋‹ค. ์ง€๊ธˆ ๋‹ค๋ฃจ๊ณ  ์žˆ๋Š” dapp์ƒ ๋ฏผํŒ… ํŽ˜์ด์ง€๋Š” NFT๋ฅผ ๊ตฌ๋งคํ•  ์ˆ˜ ์žˆ๋Š” ํŽ˜์ด์ง€๋ฅผ ๋งํ•œ๋‹ค. minting ๊ณผ์ • 1. web3 ์ง€๊ฐ‘ ์—ฐ๊ฒฐ web3 ์ง€๊ฐ‘์€ dpp๊ณผ ์ƒํ˜ธ์ž‘์šฉํ•˜๊ณ  ์ด๋”๋ฆฌ์›€ ๋ธ”๋ก์ฒด์ธ์—์„œ ๊ฑฐ๋ž˜๋ฅผ ์ˆ˜ํ–‰ํ•˜๋Š”๋ฐ ์‚ฌ์šฉ๋œ๋‹ค. ์ง€๊ฐ‘ ์ž์ฒด๊ฐ€ ์•”ํ˜ธ์ž์ฒด๋ฅผ ๋ณด๊ด€ํ•˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๊ณ , ๋””์ง€ํ„ธ ์ž์‚ฐ์— ์•ก์„ธ์Šคํ•  ์ˆ˜ ์žˆ๋Š” ์ •๋ณด๋ฅผ ์ €์žฅํ•œ๋‹ค. web์—์„œ๋Š” ์ง์ ‘์ ์œผ๋กœ ์Šค๋งˆํŠธ ์ปจํŠธ๋ž™ํŠธ์™€ ์ƒํ˜ธ์ž‘์šฉํ•  ์ˆ˜๋Š” ์—†๋‹ค. ๊ทธ๋ž˜์„œ JSON-

2022๋…„ 12์›” 15์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

TIL100. Next.JS 13 ์ƒˆ๋กœ์šด ํŠน์ง•๋“ค

v13 ๋ณ€๊ฒฝ์‚ฌํ•ญ์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž. app/ Directory *app/ ๋””๋ ‰ํ† ๋ฆฌ ๊ตฌ์กฐ๋Š” beta๋ฒ„์ „์ด๊ธฐ ๋•Œ๋ฌธ์— ์‹ค์ œ ํ”„๋กœ๋•์…˜ ๋ ˆ๋ฒจ์—์„œ๋Š” ๊ถŒ์žฅ๋˜์ง€ ์•Š๋Š”๋‹ค. ๊ธฐ์กด์—๋Š” pages ๋””๋ ‰ํ† ๋ฆฌ ์•ˆ์— ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜์—ฌ Automating Routing์„ ์‹คํ–‰ํ–ˆ์ง€๋งŒ, 13๋ฒ„์ „๋ถ€ํ„ฐ๋Š” app/์ด๋ผ๋Š” ์ƒˆ๋กœ์šด ๋””๋ ‰ํ† ๋ฆฌ๊ฐ€ ๋“ฑ์žฅํ•˜์˜€๋‹ค. ํŒŒ์ผ ์‹œ์Šคํ…œ ๊ธฐ๋ฐ˜์—์„œ ๋””๋ ‰ํ„ฐ๋ฆฌ ๊ธฐ๋ฐ˜ ๋ผ์šฐํŒ… ์‹œ์Šคํ…œ์œผ๋กœ ์ „ํ™˜ํ•˜์˜€๋‹ค. ํ˜„์žฌ๋Š” pages์™€ app ๋””๋ ‰ํ† ๋ฆฌ๊ฐ€ ๊ณต์กดํ•˜๋Š” ๋ฒ ํƒ€ ๋ฒ„์ „์œผ๋กœ ์ œ๊ณต๋œ๋‹ค. app ๋””๋ ‰ํ† ๋ฆฌ ์•ˆ์—๋Š” layout.js, page.js, head.jsํŒŒ์ผ์ด ์กด์žฌํ•œ๋‹ค. *dev server๋ฅผ ๋Œ๋ฆฌ๋ฉด ์ž๋™์ ์œผ๋กœ head.js์™€ layout.js๋ฅผ ์ƒ์„ฑํ•ด์ค€๋‹ค. ![](https://velog.velcdn.com/images

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

TIL99. Next.JS 13 ํ™˜๊ฒฝ์„ค์ •

์—…๋ฐ์ดํŠธ๋œ next.js 13๋ฅผ ์‚ฌ์šฉํ•ด๋ณด์ž. (ํ™˜๊ฒฝ์„ค์ •ํŽธ) Next.js๋ž€ next.js๋Š” react์—์„œ SSR์„ ์‰ฝ๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋„๋ก Vercel์—์„œ ๋งŒ๋“  ํ”„๋ ˆ์ž„์›Œํฌ์ด๋‹ค. Next.js๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  ์ดˆ๊ธฐ ์›น์‚ฌ์ดํŠธ๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•  ๋•Œ๋งˆ๋‹ค ์„œ๋ฒ„์— ์š”์ฒญ์„ ํ•ด์„œ ์ƒˆ๋กœ์šด html์„ ๋ถˆ๋Ÿฌ์™€ ๋งค๋ฒˆ ์ƒˆ๋กœ๊ณ ์นจ๋˜๋Š” ๋ฐฉ์‹์ด์—ˆ๋‹ค. ์ด๋ฅผ ๋ณด์™„ํ•˜๊ณ ์ž ๋‚˜์˜จ ๊ฒƒ์ด ๋‹จ์ผ ํŽ˜์ด์ง€๋กœ ์ตœ์ดˆ ํ•œ ๋ฒˆ ํŽ˜์ด์ง€ ์ „์ฒด๋ฅผ ๋กœ๋“œํ•˜๋Š” SPA์˜ CSR๋ฐฉ์‹์ด๊ณ , ๋Œ€ํ‘œ์ ์ธ SPA ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ react ์ด๋‹ค. ํ•˜์ง€๋งŒ, ๊ฒ€์ƒ‰์—”์ง„ ์ตœ์ ํ™”(seo)๋ฌธ์ œ๋‚˜ ์ดˆ๊ธฐ ํŽ˜์ด์ง€ ๋กœ๋”ฉ์ด ์˜ค๋ž˜ ๊ฑธ๋ฆฐ๋‹ค๋Š” ๋ฌธ์ œ์ ์ด ์กด์žฌํ•œ๋‹ค. ๊ฒ€์ƒ‰์—”์ง„๋ด‡์€ js๋ฅผ ํ•ด์„ํ•˜๊ธฐ ํž˜๋“ค๊ธฐ ๋•Œ๋ฌธ์— html์—์„œ ํฌ๋กค๋ง์„ ํ•˜๋Š”๋ฐ, CSR๋ฐฉ์‹์€ client์—์„œ ํŽ˜์ด์ง€๋ฅผ ๊ตฌ์„ฑ

2022๋…„ 12์›” 9์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

TIL98. Firebase V9๋กœ CRUD ๊ตฌํ˜„

firebase ์‚ฌ์šฉํ•ด์„œ ๊ฒŒ์‹œํŒ CRUD๊ธฐ๋Šฅ์„ ๋งŒ๋“ค์–ด๋ณด์ž. Firebase v9 firebase๋Š” ๋ฒก์—”๋“œ ๊ธฐ๋Šฅ์„ ํด๋ผ์šฐ๋“œ ์„œ๋น„์Šค ํ˜•ํƒœ๋กœ ์ œ๊ณตํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฐฑ์—”๋“œ์—†์ด ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค ๋•Œ ์‚ฌ์šฉํ•˜๋ฉด ์œ ์šฉํ•˜๋‹ค. firebase๊ฐ€ ๋ฒ„์ „ ์—…๋ฐ์ดํŠธ๋ฅผ ํ•˜๋ฉด์„œ ๋ฌธ๋ฒ• ๋“ฑ์— ๋งŽ์€ ๋ณ€ํ™”๊ฐ€ ์ƒ๊ฒผ๋‹ค. firebase SDK ์„ค์ • ๋ฐ ๊ตฌ์„ฑ firebase ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ ํ›„ Firebase๋ฅผ ์ดˆ๊ธฐํ™”ํ•˜์—ฌ ์‚ฌ์šฉํ•˜๋ ค๋Š” ์ œํ’ˆ์˜ SDK๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ .env ํ™˜๊ฒฝ๋ณ€์ˆ˜๋Š” ๋…ธ์ถœ๋˜๋ฉด ๋ณด์•ˆ์ƒ ์œ„ํ—˜ํ•˜๊ธฐ๋•Œ๋ฌธ์— envํŒŒ์ผ์„ ํ™œ์šฉํ•ด์•ผ ํ•œ๋‹ค. ๋ณ€์ˆ˜๋ช…์˜ ์ƒ์„ฑ์€ ๋ฌด์กฐ๊ฑด REACT_APP์œผ๋กœ ์‹œ์ž‘ ํ”„๋กœ์ ํŠธ ์ตœ์ƒ๋‹จ์— ์œ„์น˜ํ•  ๊ฒƒ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์—์„œ ๊ฐœ๋ฐœ์„œ๋ฒ„๊ฐ€ ์‹คํ–‰์ค‘์ธ ๊ฒฝ์šฐ ํ™˜๊ฒฝ๋ณ€์ˆ˜ ๋ณ€๊ฒฝ์€ ์„œ๋ฒ„๋ฅผ ์žฌ์‹œ์ž‘ํ•ด์•ผ ์ ์šฉ๋จ create addDoc ๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌํ˜„ํ•œ๋‹ค. addDoc(' ํ‚ค๋ฅผ ํ†ตํ•ด ๊ฐ€์ ธ์˜จ DB ' , ' payload ') read read๋Š” query, getDocs ๋ฉ”์†Œ๋“œ๊ฐ€ ์žˆ๋‹ค.

2022๋…„ 5์›” 15์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

TIL97.Zustand

์ฐจ์„ธ๋Œ€ ์ƒํƒœ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ 'zustand'์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž. ์™œ Zustand์ธ๊ฐ€? ํ”„๋ก ํŠธ ๋ถ„์•ผ๋Š” ๋ณ€ํ™”๊ฐ€ ๋น ๋ฅด๊ฒŒ ์„ฑ์žฅํ•œ๋‹ค. ๊ทธ ์ค‘์—์„œ๋„ ํŠนํžˆ ์ƒํƒœ๊ด€๋ฆฌ๋Š” ๋‹ค์–‘ํ•œ ํˆด๋“ค์ด ๋“ฑ์žฅํ•˜๊ณ  ๋ฐœ์ „ํ•ด ๋‚˜๊ฐ€๊ณ  ์žˆ๋‹ค. ๊ฐ€์žฅ ์˜ค๋ž˜๋˜๊ณ  ์œ ๋ช…ํ•œ ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ๋– ์˜ฌ๋ฆฌ๋ฉด ๋‹จ์—ฐ '๋ฆฌ๋•์Šค'์ผ ๊ฒƒ์ด๋‹ค. ํ•˜์ง€๋งŒ ์š”์ฆ˜์—๋Š” ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์ด์œ ๋กœ '๋ฆฌ๋•์Šค'๋ณด๋‹ค๋Š” ๋‹ค๋ฅธ ๋„๊ตฌ๋ฅผ ์„ ํƒํ•˜๋Š” ์ถ”์„ธ๋‹ค. ๋ฆฌ๋•์Šค์˜ ๋‹จ์  ๊ฐœ๋…์ด๋‚˜ ์‚ฌ์šฉ๋ฒ• ๋“ฑ ๋Ÿฌ๋‹ ์ปค๋ธŒ๊ฐ€ ๋†’์€ ํŽธ์ด๊ธฐ ๋•Œ๋ฌธ์— ๋น ๋ฅธ ์‹œ์ผ๋‚ด์— ๋„์ž…ํ•ด์•ผ ํ•˜๋Š” ํ”„๋กœ์ ํŠธ์˜ ๊ฒฝ์šฐ ์ข‹์€ ์„ ํƒ์ด ์•„๋‹ˆ๋‹ค. ๋ณด์ผ๋Ÿฌ ํ”Œ๋ ˆ์ดํŠธ ์ฝ”๋“œ(์•ก์…˜ ํƒ€์ž…, ์•ก์…˜ ์ƒ์„ฑํ•จ์ˆ˜, ๋ฆฌ๋“€์„œ)๊ฐ€ ๋งŽ๋‹ค. ์ž‘์€ ๊ธฐ๋Šฅ์ด๋ผ๋„ ๋ฆฌ๋•์Šค๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ์ˆœ๊ฐ„ ๋ช‡ ๊ฐœ์˜ ํŒŒ์ผ๋“ค์„ ์ค€๋น„ํ•ด์•ผ ํ•œ๋‹ค. npm trend ์ฃผ๋ชฉ๋ฐ›๊ณ  ์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ 'jotai

2022๋…„ 5์›” 2์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

TIL96. ๋ฉ”ํƒ€๋งˆ์Šคํฌ ์ง€๊ฐ‘ ์—ฐ๋™(feat.web3-react)

๋ฉ”ํƒ€๋งˆ์Šคํฌ ํ…Œ์ŠคํŠธ ๋„คํŠธ์›Œํฌ์˜ ์ง€๊ฐ‘์ฃผ์†Œ, ์ž”๊ณ ๋ฅผ ํ™”๋ฉด์— ๋ฟŒ๋ ค๋ณด์ž. Web3-react๋ž€? ๋ฆฌ์•กํŠธ์—์„œ web3์˜ Dapp๊ณผ ๊ด€๋ จ๋œ ํŠน์ • ๋ฐ์ดํ„ฐ๋ฅผ ์ตœ์‹ ์ƒํƒœ๋กœ ์œ ์ง€ํ•ด์ฃผ๋Š” state machine์œผ๋กœ ๊ธฐ๋ณธ ๋ธ”๋ก์ฒด์ธ API๊ฐ€ ethers.js์ธ react ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค. *web3js web3.js๋Š” ๋‚ด๋ถ€์ ์œผ๋กœ HTTP๋‚˜ IPC(ํ”„๋กœ์„ธ์Šค ์‚ฌ์ด์—์„œ ํ†ต์‹ ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•˜๋Š” ๊ธฐ์ˆ )๋ฅผ ํ†ตํ•ด JSON-RPC API๋ฅผ ํ˜ธ์ถœํ•˜๋„๋ก ๋˜์–ด์žˆ๋‹ค. ์ด๋”๋ฆฌ์›€ ๋„คํŠธ์›Œํฌ๋Š” ๋…ธ๋“œ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ๊ณ , ๊ฐ ๋…ธ๋“œ๋Š” ๋ธ”๋ก์ฒด์ธ์˜ ๋ณต์‚ฌ๋ณธ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ์ด๋”๋ฆฌ์›€ ๋…ธ๋“œ๋“ค์€ JSON-RPC๋กœ๋งŒ ์†Œํ†ตํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— web3.js๋กœ ๊ฐœ๋ฐœ์ž๋“ค์ด ์‰ฝ๊ฒŒ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋„๋ก ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ธํ„ฐํŽ˜์ด์Šค๋กœ ์ƒํ˜ธ์ž‘์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค.

2022๋…„ 4์›” 27์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

TIL93. Recoil

๋˜ ๋‹ค๋ฅธ ์ƒํƒœ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ 'Recoil'์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ž. Recoil? ํŽ˜์ด์Šค๋ถ์—์„œ ๋งŒ๋“  ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค. ๋Œ€ํ‘œ์ ์ธ ์ƒํƒœ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ 'redux'๋Š” react๋งŒ์„ ์œ„ํ•œ ์ƒํƒœ๊ด€๋ฆฌ ๋„๊ตฌ๊ฐ€ ์•„๋‹ˆ๊ธฐ์— react์— ์ตœ์ ํ™”๋˜์ง€๋„ ์•Š์•˜๊ณ , ๋Ÿฌ๋‹์ปค๋ธŒ๋„ ๋†’์•˜๋‹ค. ์ด์— ๋น„ํ•ด recoil์€ hook์„ ์จ๋ดค๋‹ค๋ฉด ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ˆ˜์ค€์ด๋‹ค. Recoil ์‚ฌ์šฉํ•˜๊ธฐ ์ „์—ญ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก root์— recoilRoot ๊ฐ์‹ธ์ฃผ๊ธฐ atom ๊ธฐ์กด์˜ ์ƒํƒœ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ ์“ฐ์ด๋Š” store์™€ ์œ ์‚ฌํ•œ ๊ฐœ๋…์œผ๋กœ, ์ƒํƒœ์˜ ๋‹จ์œ„๋ฅผ ๋งํ•œ๋‹ค. atom์˜ ์ƒํƒœ๊ฐ€ ์—…๋ฐ์ดํŠธ๋˜๋ฉด, atom์„ ๊ตฌ๋…ํ•˜๊ณ  ์žˆ๋˜ ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ๋“ค์˜ state๊ฐ€ ์ƒˆ๋กœ์šด ๊ฐ’์œผ๋กœ ๋ฆฌ๋ Œ๋”๋ง๋œ๋‹ค. useRecoilValue ์ปดํฌ๋„ŒํŠธ์™€ atom์„ ์—ฐ๊ฒฐํ•˜๊ธฐ ์œ„ํ•œ ๋„๊ตฌ useSetRecoilState vaule๋ฅผ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ๋Š” ํ•จ์ˆ˜๋กœ, setState์™€ ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ ์ž‘๋™ํ•œ๋‹ค. use

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

92.React Query

๋ฆฌ์•กํŠธ ์ฟผ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด์„œ server์™€์˜ ๋น„๋™๊ธฐ ๋กœ์ง์ฝ”๋“œ๋ฅผ ์ค„์—ฌ๋ณด์ž. React Query? state๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ server์™€ client ์‚ฌ์ด์˜ ๋น„๋™๊ธฐ ๋กœ์ง๋“ค์„ ์‰ฝ๊ฒŒ ๋งŒ๋“ค์–ด์ฃผ๋Š” ๋„๊ตฌ์ด๋‹ค. ๊ทธ๋ž˜์„œ React Query๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ญ๊ฐ€ ์ข‹์€๋ฐ? ์ฒซ๋ฒˆ์งธ, ์ผ๋ จ์˜ ์ฝ”๋“œ๋ฅผ ํ™• ์ค„์—ฌ์ค€๋‹ค. ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๊ธฐ ์œ„ํ•œ ์ผ๋ จ์˜ ํ•„์ˆ˜์ ์ธ ์ฝ”๋“œ๋“ค์ด ์žˆ๋‹ค. ์˜ˆ๋ฅผ๋“ค์–ด, ์„œ๋ฒ„์™€ ํ†ต์‹ ํ•˜๊ธฐ ์œ„ํ•ด์„œ fetchํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค๊ณ , ๋ฐ›์•„์˜จ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ด์„ state๋ฅผ ๋งŒ๋“ค์–ด์ฃผ๊ณ , ๋ฐ›์•„์˜ค๋Š” ์ƒํƒœ์— ๋”ฐ๋ผ loading ํ™”๋ฉด์„ ๋ณด์—ฌ์ฃผ๊ธฐ ์œ„ํ•ด state๋ฅผ ๋งŒ๋“ค๊ณ  ์„ธํŒ…ํ•ด์ฃผ๋Š” ๋“ฑ์˜ ์„ธํŠธ ์ฝ”๋“œ๋“ค์ด ์žˆ๋‹ค. ํ•˜์ง€๋งŒ, react query์™€ ํ•จ๊ป˜๋ผ๋ฉด ์ฝ”๋“œ๋ฅผ ํš๊ธฐ์ ์œผ๋กœ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค. ๋‘๋ฒˆ์งธ, **๋ฐ์ดํ„ฐ๋ฅผ ์บ์‹œ์— ์ €์žฅํ•ด๋‘”

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

TIL88. zip array

๋‹ค๋ฅธ ๋‘ ๋ฐฐ์—ด์„ ํ•œ ๋ฐฐ์—ด์ฒ˜๋Ÿผ ๋งŒ๋“ค์–ด๋ณด์ž. ํ•ด๊ฒฐ์ƒํ™ฉ ํ•˜๋“œ์ฝ”๋”ฉ๋œ ๋ถ€๋ถ„์„ ๋งต์„ ๋Œ๋ ค์„œ ์˜ˆ์˜๊ฒŒ ๋งŒ๋“ค์–ด๋ณด์ž. ๋ชฉํ‘œ: ์„œ๋กœ ๋‹ค๋ฅธ ๋‘ ๋ฐฐ์—ด์„ ๊ฐ€์ง€๊ณ  ํ•˜๋‚˜์˜ ๋งต์„ ๋Œ๋ ค ํ™”๋ฉด์— ๋‚˜ํƒ€๋‚ด์•ผ ํ•œ๋‹ค. -> zip array ํ™œ์šฉํ•˜๊ธฐ zip ๊ธฐ๋ณธ ์˜ˆ์ œ ์š”์†Œ์˜ ๊ฐฏ์ˆ˜๊ฐ€ ์ •ํ•ด์ ธ ์žˆ๋Š” ๋ฐฐ์—ด, ํŠœํ”Œํ˜•ํƒœ zip ์ ์šฉํ•˜๊ธฐ ์šฐ์„  ๋ฐ์ดํ„ฐ์—์„œ ํ•„์š”ํ•œ ๋ถ€๋ถ„์„ ๋ฝ‘์•„ ๋ฐฐ์—ดํ˜•ํƒœ๋กœ ๋งŒ๋“ค์–ด์ค€๋‹ค. ์ฒซ๋ฒˆ์งธ ๋ฐฐ์—ด์— map์„ ๋Œ๋ ค์„œ ๋ฐฐ์—ด์˜ ์ฒซ๋ฒˆ์งธ ์š”์†Œ๋กœ ๋„ฃ์–ด์ฃผ๊ณ , ๋‘๋ฒˆ์งธ ์š”์†Œ๋กœ ์ธ๋ฑ์Šค๊ฐ’์„ ํ†ตํ•ด ๋‘๋ฒˆ์งธ ๋ฐฐ์—ด์˜ ๊ฐ’์„ ๋ฝ‘์•„์ฃผ๋Š” ํŠœํ”Œํ˜•ํƒœ๋กœ ๋ฆฌํ„ดํ•ด์ค€๋‹ค. ๋ฆฌํŒฉํ† ๋ง ํ•œ๋ฒˆ ๋” ๊ฐ„๊ฒฐํ•˜๊ฒŒ! ์™„์„ฑ๋œ ํ™”๋ฉด ์œ„ : 3 ์•„๋ž˜ : 1 ์™ผ์ชฝ : 0 ์˜ค๋ฅธ์ชฝ : 1

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

TIL87.forwardRef

ref๋ฅผ prop์œผ๋กœ ์ „๋‹ฌํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž. ref forwardRef ์•Œ์•„๋ณด๊ธฐ ์ด์ „์— ref๊ฐœ๋…์— ๋Œ€ํ•ด ๊ฐ„๋‹จํ•˜๊ฒŒ ์งš๊ณ  ๋„˜์–ด๊ฐ€์ž. react๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ DOM์— ์ ‘๊ทผํ•ด์•ผ ํ•˜๋Š” ์ƒํ™ฉ์ด ์ข…์ข… ๋ฐœ์ƒํ•œ๋‹ค. js์—์„œ ํŠน์ • DOM์— ์ ‘๊ทผํ•˜๊ธฐ ์œ„ํ•ด์„œ getElementById์™€ ๊ฐ™์€ DOM Selector๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ react์—์„œ๋Š” ref๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. ์œ„์˜ ์˜ˆ์‹œ์™€ ๊ฐ™์ด ๋ถ€๋ชจ์ปดํฌ๋„ŒํŠธ์—์„œ inputRef๊ฐ์ฒด๋ฅผ ์ž์‹์ธ Input์ปดํฌ๋„ŒํŠธ์— ref prop์œผ๋กœ ๋„˜๊ธด๋‹ค. ์ž์‹ Input์ปดํฌ๋„ŒํŠธ๋Š” ref๋กœ ๋„˜์–ด์˜จ inputRef ๊ฐ์ฒด๋ฅผ ๋‹ค์‹œ ๋‚ด๋ถ€์— ์žˆ๋Š” ์—˜๋ ˆ๋จผํŠธ์˜ ref prop์œผ๋กœ ๋„˜๊ฒจ์ฃผ๊ฒŒ ๋œ๋‹ค. ํ•˜์ง€๋งŒ ์‹คํ–‰์‹œ์ผœ๋ณด๋ฉด ref๋Š” prop์ด ์•„๋‹ˆ๋‹ค ๋ผ๋Š” ์˜ค๋ฅ˜๊ฐ€ ๋œฌ๋‹ค. ๋ฆฌ์•กํŠธ์—์„œ๋Š” key,ref์ฒ˜๋Ÿผ ํŠน์ˆ˜๋ชฉ์ ์œผ๋กœ ์‚ฌ์šฉ๋˜์–ด ์ผ๋ฐ˜์ ์ธ ์šฉ๋„๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋Š” prop์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์ด๋•Œ React์ปดํฌ๋„ŒํŠธ์—์„œ ref๋ฅผ prop์œผ๋กœ ์‚ฌ์šฉํ•˜๋ ค๋ฉด react์—

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

TIL86.useSelector, useDispatch, useCreate

useSelector, useDispatch, useCreate๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋ฆฌ๋•์Šค ์ƒํƒœ๋ฅผ ์กฐํšŒํ•˜๊ณ  ์‚ฌ์šฉํ•ด๋ณด์ž. useSelector useSelector Hook์„ ์‚ฌ์šฉํ•˜๋ฉด connectํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ ๋„ ๋ฆฌ๋•์Šค์˜ ์ƒํƒœ๋ฅผ ์กฐํšŒํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ฐœ๋…์ ์œผ๋กœ mapStateToProps์™€ ๋น„์Šทํ•˜๋‹ค. connectํ•จ์ˆ˜์™€ useSelector ์ฐจ์ด์  connect ํ•จ์ˆ˜๋Š” ํ•ด๋‹น ์ปจํ…Œ์ด๋„ˆ ์ปดํฌ๋„ŒํŠธ์˜ ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง๋  ๋•Œ ํ•ด๋‹น ์ปจํ…Œ์ด๋„ˆ ์ปดํฌ๋„ŒํŠธ์˜ props๊ฐ€ ๋ฐ”๋€Œ์ง€ ์•Š์•˜๋‹ค๋ฉด ๋ฆฌ๋ Œ๋”๋ง์ด ์ž๋™์œผ๋กœ ๋ฐฉ์ง€๋˜์–ด ์„ฑ๋Šฅ์ด ์ตœ์ ํ™”๋œ๋‹ค. ์ด์—๋น„ํ•ด, useSelector๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฆฌ๋•์Šค ์ƒํƒœ๋ฅผ ์กฐํšŒํ–ˆ์„ ๋•Œ๋Š” ์„ฑ๋Šฅ ์ตœ์ ํ™”๊ฐ€ ์ด๋ฃจ์–ด์ง€์ง€ ์•Š๊ธฐ๋•Œ๋ฌธ์— React.memo๋ฅผ ์ปจํ…Œ์ด๋„ˆ ์ปดํฌ๋„ŒํŠธ์— ์‚ฌ์šฉํ•ด์ค˜์•ผํ•œ๋‹ค. export default React.memo(Container); useDispatch useDispatch Hook์€ ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์—์„œ ์Šคํ† ์–ด์˜ ๋‚ด์žฅํ•จ์ˆ˜ dispatch๋ฅผ

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

TIL85.Redux Toolkit

๋ฆฌ๋•์Šค๋ฅผ ํŽธ๋ฆฌํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ฃผ๋Š” ๐ŸŽ์ข…ํ•ฉ์„ ๋ฌผ์„ธํŠธ '๋ฆฌ๋•์Šค ํˆดํ‚ท'์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž. Redux Toolkit์ด๋ž€? ๋ฆฌ๋•์Šค๋ฅผ ์‚ฌ์šฉํ•˜๋‹ค๋ณด๋ฉด ์•ก์…˜ํƒ€์ž…,์•ก์…˜์ƒ์„ฑํ•จ์ˆ˜, ๋ฆฌ๋“€์„œ ๋“ฑ ๋ฐ˜๋ณต๋˜๋Š” ์ฝ”๋“œ,์ฆ‰ ๋ณด์ผ๋Ÿฌํ”Œ๋ ˆ์ดํŠธ ์ฝ”๋“œ๋•Œ๋ฌธ์— ํ”ผ๋กœ๊ฐ์„ ๋Š๋‚„ ์ˆ˜ ์žˆ๋‹ค. ์ด๋•Œ ๋ฆฌ๋•์Šค ํˆดํ‚ท์„ ์‚ฌ์šฉํ•˜๋ฉด ์ฝ”๋“œ๋ฅผ ์ข€ ๋” ๊ฐ„๊ฒฐํ•˜๊ฒŒ ๋งŒ๋“ค์–ด ์ค„ ์ˆ˜ ์žˆ๋‹ค. ๋ฆฌ๋•์Šค ํˆดํ‚ท์€ ๋ฆฌ๋•์Šค์˜ ์ข…ํ•ฉ์„ ๋ฌผ์„ธํŠธ๋กœ redux thunk, immer, createaction ๋“ฑ์ด ๋‚ด์žฅ๋˜์–ด ์žˆ๋‹ค. configureStore toolkit์„ ์‚ฌ์šฉํ•˜๊ธฐ ์ „์—๋Š” createStore()๋ฅผ ํ˜ธ์ถœํ•˜๊ณ  root reducerํ•จ์ˆ˜๋ฅผ ์ „๋‹ฌํ•˜์—ฌ redux store๋ฅผ ์‚ฌ์šฉํ–ˆ๋‹ค. Toolkit์˜ configureStore๋Š” createStore๋ฅผ ํ™œ์šฉํ•œAPI๋กœ createStore๋ฅผ ๋ž˜ํ•‘ํ•˜์—ฌ ๋งŒ๋“ค์–ด์ง„ ํ•จ์ˆ˜์ด๊ธฐ๋•Œ๋ฌธ์— ๊ธฐ๋ณธ์ ์œผ๋กœ createStore์™€ ๋™์ผํ•œ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•œ๋‹ค.(store ์ƒ์„ฑ) (no toolkit) (with toolkit) crea

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

TIL84. ๋ฆฌ๋•์Šค ๋ฏธ๋“ค์›จ์–ด

'๋ฆฌ๋•์Šค ๋ฏธ๋“ค์›จ์–ด'๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋น„๋™๊ธฐ ์ž‘์—…์„ ์ฒ˜๋ฆฌํ•ด๋ณด์ž. ๋ฆฌ๋•์Šค ๋ฏธ๋“ค์›จ์–ด๋ž€? ๋ฏธ๋“ค์›จ์–ด๋Š” ์•ก์…˜๊ณผ ๋ฆฌ๋“€์„œ ์‚ฌ์ด์˜ ์ค‘๊ฐ„์ž๋กœ, ์•ก์…˜์„ ๋””์ŠคํŒจ์น˜ํ–ˆ์„ ๋•Œ ๋ฆฌ๋“€์„œ์—์„œ ์ด๋ฅผ ์ฒ˜๋ฆฌํ•˜๊ธฐ์— ์•ž์„œ ์‚ฌ์ „์— ์ง€์ •๋œ ์ž‘์—…๋“ค์„ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค€๋‹ค. ๋ฆฌ๋•์Šค๋Š” ์•ก์…˜ ๊ฐ์ฒด๊ฐ€ ์ƒ์„ฑ๋˜๊ณ , ๋””์ŠคํŒจ์น˜๋ฅผ ํ†ตํ•ด ์Šคํ† ์–ด์— ์ƒํƒœ ๋ณ€ํ™”๋ฅผ ์•Œ๋ฆฌ๋ฉด ๋ฆฌ๋“€์„œ๋Š” ์ •ํ•ด์ง„ ๋กœ์ง์— ๋”ฐ๋ฅธ ์•ก์…˜์„ ์ฒ˜๋ฆฌํ•œ ํ›„ ์ƒˆ๋กœ์šด ์ƒํƒœ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•˜๋Š” ๋™๊ธฐ์ ์ธ ํ๋ฆ„์„ ํ†ตํ•ด ์ด๋ค„์ง„๋‹ค. ํ•˜์ง€๋งŒ ์™ธ๋ถ€ ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญํ•˜๋Š” ๋น„๋™๊ธฐ์ ์ธ ์š”์†Œ๋“ค์„ ์ฒ˜๋ฆฌํ•ด์•ผ ํ•  ๊ฒฝ์šฐ๊ฐ€ ์žˆ์„ํ…๋ฐ ์ด๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด '๋ฆฌ๋•์Šค ๋ฏธ๋“ค์›จ์–ด'์ด๋‹ค. ![](https://images.velog.io/images/jo_love/post/b1d8e170-b071-426c-b828-e27a7067c850/%E1%84%85%E1%85%B5%E1%84%83%E1%85%A5%E1%86%A8%E1%84%89%E1%85%B3-%E1%84%86%E1%85%B5%E1%84%83%E1%85%B3%E1%86%AF

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

TIL83. Storybook

๋ฆฌ์•กํŠธ ๊ฐœ๋ฐœ ๋ผ์ดํ”„๋ฅผ ๋„์™€์ค„ ui ์ปดํฌ๋„ŒํŠธ ๊ฐœ๋ฐœํ™˜๊ฒฝ '์Šคํ† ๋ฆฌ๋ถ'์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ž. Storybook ์Šคํ† ๋ฆฌ๋ถ์€ ๊ฐ์ข… ๋ผ์šฐํŒ…๊ณผ ์Šคํ…Œ์ดํŠธ๋“ค๋กœ ์—ฐ๊ฒฐ๋˜์–ด์žˆ๋Š” ๋ฆฌ์•กํŠธ presentational component๋“ค์„ ๋…ธ๋ฉ€๋ผ์ด์ฆˆ์‹œ์ผœ ๋…๋ฆฝ๋œ ํ™˜๊ฒฝ์—์„œ ๋Œ์•„๊ฐ€๊ฒŒ ๋„์™€์ฃผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค. ๋ฆฌ์•กํŠธ์šฉ์œผ๋กœ ๊ฐœ๋ฐœ์ด ์‹œ์ž‘๋˜์—ˆ๊ณ , ํ˜„์žฌ๋Š” ๋ทฐ, ์•ต๊ทค๋Ÿฌ๊นŒ์ง€ ์ง€์›๊ฐ€๋Šฅํ•˜๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด storybook์ด ui์ปดํฌ๋„ŒํŠธ ๊ฐœ๋ฐœ์„ ์–ด๋–ป๊ฒŒ ๋„์™€์ค€๋‹ค๋Š” ๊ฒƒ์ธ์ง€ ์™œ ๋งŒ๋“ค์–ด์กŒ๋Š”์ง€์— ์ง‘์ค‘ํ•ด๋ณด์ž. ํƒ„์ƒ๋ฐฐ๊ฒฝ์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋ ค๋ฉด ์šฐ์„  react์˜ ํŒจํ„ด์— ๋Œ€ํ•œ ์„ค๋ช…์ด ํ•„์š”ํ•˜๋‹ค. presentational & container pattern react๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ํ”ํžˆ presentational & container ๋””์ž์ธ ํŒจํ„ด์„ ์‚ฌ์šฉํ•œ๋‹ค. ๋กœ์ง์„ ์ˆ˜ํ–‰ํ•˜๋Š” container, state์กฐ์ž‘์ด ์—†๊ณ  ๋ทฐ๋งŒ ๋ณด์—ฌ์ฃผ๋Š” presentational ์ปดํฌ๋„ŒํŠธ๋กœ ๋ถ„๋ฆฌ๋œ ํŒจํ„ด์„ ๋งํ•œ๋‹ค. ![](https://images.vel

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

TIL81. ๋ฆฌ์•กํŠธ ๋ผ์šฐํ„ฐ ๋น„๊ตํ•˜๊ธฐ

๋ฆฌ์•กํŠธ ํŽ˜์ด์ง•์ฒ˜๋ฆฌ๋ฅผ ๋„์™€์ฃผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์„ ๋น„๊ตํ•˜๊ณ  ์ƒํ™ฉ์— ๋งž๋Š” ๋ผ์šฐํ„ฐ๋ฅผ ์ ์šฉํ•ด๋ณด์ž. Redirect(with public route& private route) ์‚ฌ์šฉ์ž์˜ ๋กœ๊ทธ์ธ ์ƒํƒœ๋‚˜ ๊ถŒํ•œ์— ๋”ฐ๋ผ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒฝ๋กœ๊ฐ€ ๋‹ค๋ฅด๋‹ค. ์ด ๊ณผ์ •์„ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด์„œ PrivateRoute๋ฅผ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด, ๋กœ๊ทธ์ธํ•œ ์œ ์ €์—๊ฒŒ๋Š” ์ธ์ฆ์ด ์™„๋ฃŒ๋œ ๊ฒฝ์šฐ์—๋งŒ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ํŽ˜์ด์ง€(๋งˆ์ดํŽ˜์ด์ง€)๋ฅผ, ๊ทธ๋ ‡์ง€ ์•Š์€ ์‚ฌ์šฉ์ž๊ฐ€ ์ ‘๊ทผํ•˜๊ณ ์ž ํ•œ๋‹ค๋ฉด ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ redirection(ํšŒ์›๊ฐ€์ž…ํŽ˜์ด์ง€)ํ•œ๋‹ค. ์ปดํฌ๋„ŒํŠธ ๋˜ํ•œ ๋ Œ๋”๋งํ•  ์ปดํฌ๋„ŒํŠธ๋ฅผ prop์œผ๋กœ ๋„˜๊ฒจ๋ฐ›์€ ํ›„, ๋กœ์ปฌ์Šคํ† ๋ฆฌ์ง€์— ์ €์žฅ๋œ ํ† ํฐ์œผ๋กœ ์ธ์ฆ์ด ํ™•์ธ๋œ ์œ ์ €๋“ค๋งŒ ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ฆฌํ„ดํ•ด์ฃผ๋„๋ก ํ•œ๋‹ค. ![](https://images.velog.io/images/jo_love/post/ba11ddc3-935d-48c5-9242-4b08cac58c9d/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E

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

TIL80. Redux&React

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ”„๋ ˆ์ž„์›Œํฌ์ธ ์•ต๊ทค๋Ÿฌ,๋ทฐ์™€ ๋‹ฌ๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ ๋ฆฌ์•กํŠธ๋Š” ์ž์ฒด์ ์œผ๋กœ ์ƒํƒœ๊ด€๋ฆฌ ๋„๊ตฌ๋ฅผ ์ œ๊ณตํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•ด์„œ 'Redux'์™€ ์‚ฌ์šฉ๋œ๋‹ค. ๋ฆฌ์•กํŠธ์— redux๋ฅผ ์ ์šฉํ•˜์—ฌ ์‚ฌ์šฉํ•ด๋ณด์ž. ๊ตฌ์ฒด์ ์ธ ์‹ค์Šต์˜ˆ์ œ ๋งŒ๋“ค์–ด๋ณด๊ธฐ 1)์ปดํฌ๋„ŒํŠธ ๊ตฌ์กฐ ๋ฆฌ๋•์Šค๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ํŒจํ„ด์€ ํ”„๋ ˆ์  ํ…Œ์ด์…˜ ์ปดํฌ๋„ŒํŠธ + ์ปจํ…Œ์ด๋„ˆ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ถ„๋ฆฌํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ์ด ํŒจํ„ด์„ ์‚ฌ์šฉํ•˜๋ฉด ์ฝ”๋“œ์˜ ์žฌ์‚ฌ์šฉ์„ฑ์ด ๋†’์•„์ง€๋Š” ์žฅ์ ์ด ์žˆ๋‹ค. ํ”„๋ ˆ์  ํ…Œ์ด์…”๋‚  ์ปดํฌ๋„ŒํŠธ: ๋‹จ์ˆœํžˆ props๋ฅผ ๋ฐ›์•„์™€ ํ™”๋ฉด์— ui๋ฅผ ๋ณด์—ฌ์ฃผ๊ธฐ๋งŒ ํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ ์ปจํ…Œ์ด๋„ˆ ์ปดํฌ๋„ŒํŠธ: ๋ฆฌ๋•์Šค์™€ ์—ฐ๋™๋˜์–ด ์žˆ๋Š” ์ปดํฌ๋„ŒํŠธ๋กœ ๋ฆฌ๋•์Šค๋กœ๋ถ€ํ„ฐ ์ƒํƒœ๋ฅผ ๋ฐ›์•„์˜ค๊ฑฐ๋‚˜ ๋ฆฌ๋•์Šค ์Šคํ† ์–ด์— ์•ก์…˜์„ ๋””์ŠคํŒจ์น˜ํ•˜๊ธฐ๋„ ํ•œ๋‹ค.

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

TIL74. ํ˜•์ œ ์ปดํฌ๋„ŒํŠธ์˜ ๋ฐ์ดํ„ฐ ์ „์†ก(with Context API)

ํ˜•์ œ ์ปดํฌ๋„ŒํŠธ ๊ฐ„์˜ ์ƒํƒœ ์ „๋‹ฌ์„ Context API๋ฅผ ํ†ตํ•ด ์‹คํ˜„ํ•ด๋ณด์ž. ๋‚ด๊ฐ€ ์›ํ•˜๋Š” ์ž‘์—…์€ ํ˜•์ œ ์ปดํฌ๋„ŒํŠธ(quiz, result) ๊ฐ„์˜ ๋ฐ์ดํ„ฐ ์ „์†ก์ด๊ณ , ๊ฒ€์ƒ‰ํ•ด ๋ณธ ๊ฒฐ๊ณผ ์ „์—ญ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” context api๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค. Context API๋ž€? ์ „์—ญ์ƒํƒœ๊ด€๋ฆฌ๋กœ ์œ ๋ช…ํ•œ ๋ฆฌ๋•์Šค์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ๊ธ€๋กœ๋ฒŒํ•˜๊ฒŒ ์ƒํƒœ๊ด€๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค. Context ApI๋Š” ๋”ฐ๋กœ ์„ค์น˜ํ•˜์ง€ ์•Š์•„๋„ ๋ฆฌ์•กํŠธ์—์„œ ๊ธฐ๋ณธ์œผ๋กœ ์ง€์›ํ•˜๋Š” API๊ธฐ ๋•Œ๋ฌธ์— ํ˜ธ์ถœํ•ด์„œ ์“ฐ๊ธฐ๋งŒ ํ•˜๋ฉด๋œ๋‹ค. *Context API vs Redux Context๋Š” ์ˆ˜๋‹จ์ผ ๋ฟ ์ƒํƒœ๊ด€๋ฆฌ ์ž์ฒด๋Š” useState์™€ useReducer ๋กœ ํ•˜๊ฒŒ ๋œ๋‹ค. ๋ฆฌ๋•์Šค์™€์˜ ์ฃผ์š” ์ฐจ์ด๋Š” '์„ฑ๋Šฅ'์ด๋‹ค. Redux๋Š” ์ปดํฌ๋„ŒํŠธ์—์„œ ์ „์—ญ์ƒํƒœ์˜ ํŠน์ • ๊ฐ’์„ ์˜์กดํ•˜๊ฒŒ ๋  ๋•Œ ํ•ด๋‹น ๊ฐ’์ด ๋ฐ”๋€” ๋•Œ์—๋งŒ ๋ฆฌ๋ Œ๋”๋ง์ด ๋˜๋„๋ก ์ตœ์ ํ™”๊ฐ€ ๋˜์–ด์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ „์—ญ์ƒํƒœ ์ค‘ ์˜์กดํ•˜์ง€ ์•Š๋Š” ๊ฐ’์ด ๋ฐ”๋€Œ๊ฒŒ ๋  ๋•Œ์—๋Š” ์ปดํฌ๋„ŒํŠธ์—์„œ ๋‚ญ๋น„ ๋ Œ๋”๋ง์ด ๋ฐœ์ƒํ•˜์ง€

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

TIL73. ๋ฆฌ์•กํŠธ์—์„œ ๋ฐ์ดํ„ฐ ์ค„๋ฐ”๊ฟˆ ์ ์šฉํ•˜๊ธฐ

๋ฐ์ดํ„ฐ๋กœ ๋ฐ›์•„์˜จ ๋ฌธ์ž์—ด์— ์ค„๋ฐ”๊ฟˆ์„ ์ ์šฉํ•ด ์›ํ•˜๋Š” ํ˜•ํƒœ๋กœ ๋งŒ๋“ค์–ด๋ณด์ž. API๋ฅผ ํ†ตํ•ด ๋ฐ›์•„์˜ค๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์ˆ˜์ •ํ•˜๋Š” ์ƒํ™ฉ. ์›ํ•˜๋Š” ๊ตฌ์กฐ ์‹ค์ œ ๋ Œ๋”๋ง๋œ ๊ตฌ์กฐ ์‹œ๋„ ์ •๊ทœ์‹์„ ํ™œ์šฉํ•œ replace ๋ฉ”์†Œ๋“œ ๋ฐฑ์—”๋“œ์—๊ฒŒ ๋„์–ด์“ฐ๊ธฐ ํ•  ๋ถ€๋ถ„๋งˆ๋‹ค ๋ฅผ ๋„ฃ์–ด๋‹ฌ๋ผ๊ณ  ๋ถ€ํƒํ•˜๊ณ , repalce๋ฉ”์†Œ๋“œ๋กœ ์„ ๋„์–ด์“ฐ๊ธฐ๋กœ ๋ฐ”๊พธ๋ ค๋Š” ์‹œ๋„๋ฅผ ํ–ˆ๋‹ค. ๋ Œ๋”๋ง์ด ๋˜์ง€ ์•Š๋Š”๋‹ค... next... ํ•ด๊ฒฐ๋ฐฉ๋ฒ• step1. ๋ฐ์ดํ„ฐ ํ˜•ํƒœ ํŒŒ์•…ํ•˜๊ธฐ ๋ฐ›์•„์˜จ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋ฉด ๋ชจ๋‘ ๋ฌธ์ž์—ด๋กœ ์ฒ˜๋ฆฌ๋˜์–ด ๋“ค์–ด์˜ค๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค. ๋‚ด๊ฐ€ ๋งŒ๋“ค์–ด์•ผ ๋  ํ˜•ํƒœ๋Š” ์ด๋‹ค. step2. ๊ธฐ์ค€์œผ๋กœ split ํ•ด์ฃผ๊ธฐ step3. React jsx์— ์ ์šฉํ•˜๊ธฐ map์œผ๋กœ ์š”์†Œ ํ•˜๋‚˜ ํ•˜๋‚˜๋ฅผ ๋Œ๋ฉด์„œ ์‚ฌ์ด์— ๋กœ ๋„์–ด์“ฐ๊ธฐ๋ฅผ ๋งŒ๋“ค์–ด์ฃผ์—ˆ๋‹ค.

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

TIL72.react hook + axios ์‚ฌ์šฉํ•˜๊ธฐ

httpํ†ต์‹ ์„ ์œ„ํ•œ API๋กœ ๊ธฐ์กด์˜ ์‚ฌ์šฉํ•ด์˜ค๋˜ fetch ๋Œ€์‹  'axios'๋ฅผ ๋ฆฌ์•กํŠธ์— ์‚ฌ์šฉํ•ด๋ณด์ž. Axios Promise๋ฅผ ์‚ฌ์šฉํ•˜๋Š” http๋น„๋™๊ธฐ ํ†ต์‹  ๋ชจ๋“ˆ๋กœ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค. ํŒจํ‚ค์ง€ ์„ค์น˜๊ฐ€ ํ•„์š”ํ•˜๊ณ , npm i axios -g ํ•„์š”ํ•œ ๊ณณ์— importํ•˜์—ฌ ๋ชจ๋“ˆ์„ ๋ถˆ๋Ÿฌ์™€์•ผํ•œ๋‹ค. import axios from 'axios' fetch๊ณผ ๋‹ฌ๋ฆฌ, axios๋Š” json์„ ์ž๋™์œผ๋กœ ๋ณ€ํ™˜ํ•ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์— jsonํ™” ์ฝ”๋“œ๊ฐ€ ๋ถˆํ•„์š”ํ•˜๋‹ค. axios์— ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์•ž์—์„œ ๋งํ–ˆ๋“ฏ์ด axios๋Š” ๋น„๋™๊ธฐ ๋ฐฉ์‹์œผ๋กœ HTTP๋ฐ์ดํ„ฐ ์š”์ฒญ์„ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๊ณผ์ •์ด ํ•„์š”ํ•  ๋•Œ๊ฐ€ ์žˆ๋‹ค. async await ์‚ฌ์šฉ `Warning: An effect function must not return anything besides a function, which is used for clean-up. ` useEffectํ•จ์ˆ˜๋Š” ๋‹ค๋ฅธ ํ•จ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋ฉด ์•ˆ๋œ๋‹ค.

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

TIL71. Hooks์— TypeScript ์ ์šฉํ•˜๊ธฐ

useState + ํƒ€์ดํ•‘ useState()์™€ ๊ฐ™์ด Generics๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ•ด๋‹น ์ƒํƒœ๊ฐ€ ์–ด๋–ค ํƒ€์ž…์„ ๊ฐ€์ง€๊ณ  ์žˆ์„์ง€ ์„ค์ •ํ•˜๋ฉด ๋œ๋‹ค. ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ๋Š” ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์—†์ด ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ๊ณผ ๋ณ„ ์ฐจ์ด๊ฐ€ ์—†๋‹ค. hooks๋Š” class ์ปดํฌ๋„ŒํŠธ์™€ ๋‹ฌ๋ฆฌ, useState๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ Generics๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•„๋„ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๊ฐ€ ํƒ€์ž…์„ ์œ ์ถ”ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ƒ๋žตํ•ด๋„ ์ƒ๊ด€์—†๋‹ค. useState + Generics๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ ๊ทธ๋ ‡๋‹ค๋ฉด useState๊ฐ€ ํƒ€์ž…์„ ์ง€์ •ํ•ด์•ผํ•  ๋•Œ๋Š” ์–ธ์ œ์ผ๊นŒ? ์ƒํƒœ๊ฐ€ null์ผ ์ˆ˜๋„ ์žˆ๊ณ , ์•„๋‹์ˆ˜๋„ ์žˆ์„๋•Œ Generics์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. useState์—์„œ ๋นˆ๋ฐฐ์—ด์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ ํƒ€์ดํ•‘ ๋ฌธ์ œ๋ฅผ ์ผ์œผํ‚จ๋‹ค. ts๋‚ด์—์„œ ํ•ด๋‹น ๋ฐฐ์—ด์ด ์–ด๋–ค ํƒ€์ž…์œผ๋กœ ์ด๋ฃจ์–ด์ง„ ๋ฐฐ์—ด์ธ์ง€ ์ถ”๋ก ํ•˜์ง€ ๋ชปํ•˜๊ณ  'never'๋ฅผ ๋ณด์—ฌ์ค€๋‹ค. ์ด ๊ฒฝ์šฐ์—๋„ Generics๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ•ด๊ฒฐํ•œ๋‹ค. ์ด์™ธ์—๋„ ์ƒํƒœ์˜ ํƒ€์ž…์ด ๊นŒ๋‹ค๋กœ์šด ๊ตฌ์กฐ๋ฅผ ๊ฐ€์ง„ ๊ฐ์ฒด์ด๊ฑฐ

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