๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐Ÿ“จ Web/-- react & redux & nextjs33

[React-redux] ๋Š˜ ๊ทธ๋ ‡๋“ฏ Todo List ๋ฅผ ๋งŒ๋“ค์–ด๋ณด๋ฉฐ ๋ฐฐ์šฐ๋Š” ๋ฆฌ์•กํŠธ ๋ฆฌ๋•์Šค ์˜ค๋Š˜์€ React ์—์„œ Redux ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ๋‹ค. ๊ทธ๋Ÿฌ๊ธฐ ์œ„ํ•ด์„œ๋Š” ์šฐ์„  2๊ฐ€์ง€ ๊ธฐ์ˆ ์ด ์„ ํ–‰๋˜์–ด์•ผ ํ•œ๋‹ค. React์™€ React-Hooks Redux ์˜ ๊ธฐ๋ณธ Concept ์œ„ ๋‚ด์šฉ๋“ค์„ ๋ชจ๋ฅธ๋‹ค๋ฉด ์กฐ๊ธˆ ํž˜๋“ค์–ด์งˆ ์ˆ˜ ์žˆ์œผ๋‹ˆ ์œ„ ๋งํฌ์—์„œ ํ™•์ธํ•˜๋Š” ๊ฒƒ๋„ ์ข‹์€ ๋ฐฉ๋ฒ•์ธ ๊ฒƒ ๊ฐ™๋‹ค. ๋ชฉ์ฐจ redux์™€ react-redux์˜ ์ฐจ์ด redux ์˜ ๊ธฐ๋ณธ ๊ฐœ๋… ๊ตฌ์„ฑ ์š”์†Œ Provider useDispatch() useSelector() react-redux ๋กœ todo list ๋งŒ๋“ค๊ธฐ ํ”„๋กœ์ ํŠธ ๋งŒ๋“ค๊ธฐ ์˜์กด์„ฑ ์ถ”๊ฐ€ styled-components react-redux UI ์ž‘์—…ํ•˜๊ธฐ ํ™ˆ ํ™”๋ฉด ๋งŒ๋“ค๊ธฐ ๋ฆฌ๋•์Šค ์ž‘์—…ํ•˜๊ธฐ action type ๋งŒ๋“ค๊ธฐ action creator ๋งŒ๋“ค๊ธฐ reducer ๋งŒ๋“ค๊ธฐ s.. 2021. 6. 10.
[Next.js] Next.js ํ”„๋กœ์ ํŠธ์—์„œ Storybook์œผ๋กœ TDD ํ•˜๊ธฐ (Feat. Atomic Design Pattern) Storybook์ด๋ž€? Storybook์€ UI ๊ตฌ์„ฑ ์š”์†Œ(์ปดํฌ๋„ŒํŠธ)๋ฅผ ๊ฐœ๋ฐœํ•˜๊ธฐ์œ„ํ•œ ์˜คํ”ˆ ์†Œ์Šค ๋„๊ตฌ์ด๋‹ค. React๋‚˜ Vue๋ฅผ ๋น„๋กฏํ•œ ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜ UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์ด ๋งŽ์•„์ง„ ํ˜„๋Œ€์˜ ์›น Front๊ฐœ๋ฐœ ์ƒํƒœ๊ณ„์—์„œ๋Š” ์ปดํฌ๋„ŒํŠธ ํ•˜๋‚˜ ํ•˜๋‚˜์˜ ์—ญํ• ์ด ๋งค์šฐ ์ค‘์š”ํ•ด์กŒ๋‹ค. ์—ฌ๊ธฐ์„œ ์ปดํฌ๋„ŒํŠธ๋Š” ์™ธ๋ถ€์— ์˜ํ–ฅ์„ ๋ฐ›์ง€ ์•Š๊ฒŒ Isolated ๋˜์–ด์•ผ ํ•œ๋‹ค. ๊ทธ๋Ÿฌ๊ธฐ ์œ„ํ•ด์„œ Atomic Design Pattern์ด๋ผ๋Š” ๊ฒƒ์ด ๋“ฑ์žฅํ•˜์˜€๊ณ  ๊ทธ์— ๋”ฐ๋ผ์„œ UI ์ž์ฒด์˜ ๋ Œ๋”๋ง์—๋„ ํ…Œ์ŠคํŠธ๋ฅผ ์‹ ๊ฒฝ์“ธ ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค. Storybook์€ ์‚ฌ์‹ค ํ…Œ์ŠคํŠธ์—๋งŒ ๊ตญํ•œ๋œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ์•„๋‹ˆ๊ณ  ๊ฐœ๋ฐœ๊ณผ ์ดํ•ด๊ด€๊ณ„์ž๋“ค ์‚ฌ์ด์—์„œ์˜ ์†Œํ†ต๊ณผ Docs ๋ฐ Props Test๋ฅผ ์ง„ํ–‰ํ•ด์ฃผ๋Š” ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜ ์˜คํ”ˆ ์†Œ์Šค ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค. ์šฐ๋ฆฌ๋Š” ์ด Storybook์„ ํ†ตํ•ด์„œ TDD๋ฅผ ์ง„.. 2021. 1. 18.
[Next.js] _document.js๋กœ ๋ ˆ์ด์•„์›ƒ ํ…œํ”Œ๋ฆฟ์„ ์‚ฌ์šฉํ•ด์„œ html ๊ณผ body ํƒœ๊ทธ ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ํ•˜๊ธฐ. Document ์ปดํฌ๋„ŒํŠธ Next.js์—๋Š” ํƒœ๊ทธ์™€ ํƒœ๊ทธ๋ฅผ ์กฐ์ž‘ํ•˜๊ธฐ ์œ„ํ•ด์„œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ œ๊ณตํ•œ๋‹ค. Build ์‹œ์ ์— _document.jsํŒŒ์ผ์„ pages ๋””๋ ‰ํ† ๋ฆฌ ์•ˆ์—์„œ ํƒ์ƒ‰ํ•˜๊ณ  ๋ฅผ extends ํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ด์šฉํ•ด์„œ ์ปค์Šคํ…€ ์„ค์ •์„ ๋ฐ›์•„๋“คํžˆ๋Š”๋ฐ, ์ด๋Š” ํ•„์ˆ˜ ํŒŒ์ผ์€ ์•„๋‹ˆ๋ฉฐ, ๋งŒ์•ฝ ์šฐ๋ฆฌ๊ฐ€ ์ปค์Šคํ…€ํ•˜์ง€ ์•Š์œผ๋ฉด ๊ธฐ๋ณธ Next์˜ ๋ชจ๋“ˆ์— ์กด์žฌํ•˜๋Š” _document.js ํŒŒ์ผ์„ ์‹คํ–‰์‹œํ‚จ๋‹ค. ํ”„๋กœ์ ํŠธ๊ฐ€ ์ปค์งˆ ์ˆ˜๋ก HTML ํƒœ๊ทธ๋ฅผ ์กฐ์ž‘ํ•ด์•ผํ•  ์ผ๋“ค์ด ๋งŽ์•„์ง€๋ฏ€๋กœ ์šฐ๋ฆฌ๋Š” _document.js์˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๋Š” ๋Šฅ๋ ฅ์ด ์žˆ์–ด์•ผ ํ•œ๋‹ค. ๊ธฐ๋ณธ ๊ตฌ์กฐ pages ๋””๋ ‰ํ† ๋ฆฌ ์•„๋ž˜์— _document.jsํŒŒ์ผ์„ ์ƒ์„ฑํ•œ๋‹ค. import Document, { Html, Head, Main, NextScript } from 'next/d.. 2021. 1. 3.
[Next.js] renderPage ํ•จ์ˆ˜๋กœ styled-components ์˜ค๋ฅ˜ ๋ฐฉ์ง€ํ•˜๊ธฐ. React ์—์„œ ์Šคํƒ€์ผ๋ง์„ ์œ„ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ๋Š” ๊ฐœ์ธ์ ์œผ๋กœ ๋‹จ์—ฐ styled-components๊ฐ€ ์••๋„์ ์œผ๋กœ ์ข‹๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค. ํ•˜์ง€๋งŒ Next์—์„œ๋Š” styled-components๊ฐ€ ์ œ๋Œ€๋กœ ๋™์ž‘ํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ๋‹ค. ์˜ค๋Š˜ ๊ทธ ์˜ค๋ฅ˜๋“ค์„ ๋ถ„์„ํ•ด๋ณด๊ณ  ์–ด๋–ป๊ฒŒ ํ•˜๋ฉด ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ์•Œ์•„๋ณด์ž. ๊ทธ๋ƒฅ styled-components๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ์–ด๋–ค ๋ฌธ์ œ๊ฐ€ ์ƒ๊ฐ€๋‚˜์š”? Next.js ์•ฑ์—์„œ styled-components๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์Šคํƒ€์ผ์ด ์ ์šฉ๋˜์ง€ ์•Š๊ณ  ์ผ์ • ์‹œ๊ฐ„ ์ดํ›„์— ์Šคํƒ€์ผ์ด ์ ์šฉ๋œ๋‹ค. ๋งˆ์น˜ CSS ํŒŒ์ผ์ด ๋กœ๋“œ๋˜์ง€ ์•Š๋‹ค๊ฐ€ ๊ฐ‘์ž๊ธฐ ๋กœ๋“œ๋˜๋Š” ๊ฒƒ ์ฒ˜๋Ÿผ ๋ณด์ด๋Š”๋ฐ, ์ด๋Š” UX์—์„œ ๋‚˜์œ ํ‰๊ฐ€๋กœ ๊ฐ์ธ๋  ์ˆ˜ ์žˆ๊ณ  ์‚ฌ์šฉ์ž์—๊ฒŒ ์•„์ฃผ ๋ถˆ์พŒํ•œ ๊ฒฝํ—˜์„ ์„ ์‚ฌํ•  ์ˆ˜ ์žˆ๋‹ค. ์™œ ๊ทธ๋Ÿฐ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ธฐ๋‚˜์š”? Next๋Š” ์šฐ์„  ๋ชจ๋“  ํŽ˜์ด์ง€๊ฐ€ Pre-R.. 2021. 1. 3.