์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- javascript
- ๊ฐ๋ฐ์
- typescript
- frontend
- nextjs
- react
- ๊ฐ๋ฐ๋ธ๋ก๊ทธ
- ํฐ์คํ ๋ฆฌ
- ํ๊ณ ๋ก
- backend
- Today
- Total
๋ชฉ๋กโจ๏ธ Web Front-End (7)
๐ My name is Ez : ์ฝ๋ค ์ฌ์ ๊ฐ๋ฐlife

์ด๋ฒ ํ๋ก์ ํธ๋ ๊ฐ์ฅ ์์ ์ํฐํ์์ ์ปดํฌ๋ํธ๋ถํฐ ์์ํ๋ค. ๊ทธ๋์ ๊ฐ ๊ฐ์ ๊ณตํต์ปดํฌ๋ํธ๋ฅผ ๋จผ์ ํ๋ ๋ง๋ค์ด๋ณด๊ณ ๋ฆฌ๋ทฐํ๊ธฐ๋ก ํ๋ค. ์ค๋๊น์ง ์์ ์ ํ๊ณ ๋ด์ผ ๊ฐ์ด ๋ชจ์ฌ์ ๋ฆฌ๋ทฐ๋ฅผ ํ๊ธฐ๋ก ํ๋ค. ์ฐ๋ฆฌ ํ๋ก์ ํธ์์ ์์ฃผ ๋ง์ด ์ฌ์ฉ๋๋ Input์ ๋จผ์ ๋ง๋ค๊ธฐ๋ก ํ๋๋ฐ, InputBasic์ด๋ผ๊ณ ์ ํ๋ค. ๋จ์ ํ ์คํธ๋ฟ ์๋๋ผ , ์ซ์, ์์, ์์์ , ๊ณ์ข๋ฒํธ, ์จ๋, ์ ํ๋ฒํธ ๋ฑ.. ๋ค์ํ ํํ์ ํ ์คํธ๋ฅผ ์ ๋ ฅ๋ฐ๊ณ ์ปจํธ๋กคํด์ผ ํ๋ค. ๊ทธ๋ฆฌ๊ณ ์ธํ ๋ด๋ถ ๋ผ๋ฒจ(๋จ์ ํ๊ธฐ), ๊ฒ์์ฐฝ์ ๋๋ณด๊ธฐ ๋ฑ ๋ค์ํ ํํ๋ ๊ฐ์ง๊ณ ์์ด์ ์ด๋ป๊ฒ ์ฒ๋ฆฌํ ์ง ๊ณ ๋ฏผ์ ๋ง์ด ํ๋ค. ์ผ๋จ CSS ๊ด๋ จ๋ ๋ถ๋ถ์ ํผ๋ธ๋ฆฌ์ฑ์ด ๋์ค๋ฉด ์ ์ฉํ๋ค๊ณ ์๊ฐํ๊ณ ๊ฐ๊ฐ์ ์์น๋ฅผ ๋จผ์ ์ก์๋ค. Prop๋ก๋ ๊ฐ๋จํ๊ฒ value, setValue, classNam..

๊ธ์์ผ์ ํ๋ก์ ํธ ๊ธฐ๋ณธ ๊ตฌ์กฐ์ ์ฌ์ฉํ๋ ์คํ์ ๋ํ ์ค๋ช ์ ๋ฃ๊ณ css๊ด๋ จ๋ ๋ถ๋ถ์์๋ ํ ๋ฒ๋ ์จ๋ณธ ์ ์๋ ๋ฐฉ๋ฒ์ผ๋ก ์ฌ์ฉํ๋ค๊ณ ํด์ ๋ธ๋ก๊ทธ ํผ๋๋ฅผ ์์ฑํ๊ฒ ๋๋ค. CSS์ ์ฉํ๋ ๋ฐฉ๋ฒ ์ค ์ค๋์ CSS-in-JS ๊ด๋ จ๋ ๋ถ๋ถ์ด๋ค. CSS-in-JS์์ ๋ด๊ฐ ์๋ ๋ฐฉ๋ฒ์ styled-component๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ด๋ค. ( ์ปดํฌ๋ํธ๋ณ css๋ฅผ ์์ฑํด์ ๊ด๋ฆฌํ๋ ๋ฐฉ์) styled-jsxs styled-jsxs๋ nextjs ๊ณต์๋ฌธ์์์๋ ๊ธฐ๋ณธ์ ์ผ๋ก ํฌํจํ๊ณ ์๋ ๋ฐฉ๋ฒ์ด๋ผ๊ณ ํ๋ค. 'use client'; import classNames from 'classnames'; import { useRouter } from 'next/navigation'; import css from 'styled-jsx/cs..

๋ค์ ์์ํ๋ ํ๋ก์ ํธ์์๋ Next.js 13 ๋ฒ์ ์์ ์ฌ์ฉํ๋ App Router ๋ฐฉ์์ ์ฌ์ฉํ๋ค๊ณ ํ๋ค... (๊ถ๊ณ ์ฌํญ์ด๋ผ๊ณ ํด์ ์ฌ์ฉํ๋ค๊ณ ํจ) ์ฌ์ค ๋ง์ ์๋ฃ๋ ์ฐธ๊ณ ํ ๋งํ ๋ ํผ๋ฐ์ค๊ฐ ๋ถ์กฑํด์ ์์ง๊น์ง ๊ฑฑ์ ์ด ๋๊ธด ํ๋ค. ๊ธฐ์กด์ Page Router ๋ฐฉ์์ด ๋ ์ต์ํด์ ๊ทธ๋ฐ ๊ฑธ๊น?.. 13 ๋ฒ์ ์์๋ ์ผ๋จ Page ํด๋ ์์์ ์ํ๋ ____. tsx๋ฅผ ๋ง๋ค์ด์ ๋ผ์ฐํ ํ๋ค๋ฉด App Router๋ ํด๋๋ฅผ ๋ง๋ค๊ณ ๊ทธ ์์ page.tsx๋ฅผ ๋ง๋ค์ด์ผ์ง ๊ฒฝ๋ก๊ฐ ์๊ธด๋ค๊ณ ํ๋ค. ์ฌ์ค ๋ผ์ฐํ ์ ๋์ผ ๊ธ๋ฐฉ ์ต์ํด์ง๋๊น.... ๊ทธ๋ฆฌ๊ณ ๊ฐ๋ณ ํด๋๋ง๋ค ์๋ ์ด๋ฏธ์ง์ฒ๋ผ File Convention์ด ์กด์ฌํ๋ค. (๊ณต์๋ฌธ์ ์ฐธ๊ณ !!) https://nextjs.org/docs/app/api-reference/file-c..

์๋กญ๊ฒ ๋ค์ ์งํํ๋ ํ๋ก์ ํธ์์๋ Moment.js๋ฅผ ๋ฒ๋ฆฌ๊ณ Day.js๋ก ๋ณ๊ฒฝํ๋ฉด ์ข๊ฒ ๋ค๊ณ ํ๋ค. ๋ ์ด์ ์ ๋ฐ์ดํธ๊ฐ ์งํ๋์ง ์๊ธฐ ๋๋ฌธ์ด๋ค... (์ด ๋ถ๋ถ์ ๋งค์ฐ ๋ถ์๐ฅ) Moment.js ํํ์ด์ง์๋ง ๊ฐ๋ ๋ฉ์ธ ๋ฐฐ๋์์ ์ด๋ฐ ๊ธ์ด ์ ํ์๋ค. (๋ค๋ฅธ ๊ถ์ฅ ์ฌํญ๋ค์ ์๋ด) Moment์์ ์ถ์ฒํด ์ค ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ค์ด๋ก๋ ํํฉ์ด๋ค. ๊ทธ์ค์์ Day.js๋ฅผ ์ ํํ ๊ฑด ์ฌ์ฉ๋ฐฉ๋ฒ์ด Moment.js์ ๋์ผํ๊ณ ๊ฐ๋ฒผ์ด ์ฉ๋ ๋๋ฌธ์ด๋ค. ์ผ๋จ ๋ณ๊ฒฝํ๋ ๋ถ๋ถ์์ ๊ต์ฅํ ํธ๋ฆฌํ๋ค. ์ค์น๋ฐฉ๋ฒ npm install dayjs --save ์ฌ์ฉ๋ฐฉ๋ฒ (๊ฐ๋จํ ์ฌ์ฉ๋ฒ๋ง ์๊ฐ) /** 1. ๋ ์ง ๊ฐ์ฒด ์์ฑํ๊ธฐ */ //ํ์ฌ ๋ ์ง ๊ฐ์ฒด ์์ฑ dayjs(); // ์ํ๋ ๋ ์ง ๊ฐ์ฒด ์์ฑํ๋ ๋ฐฉ๋ฒ dayjs('2023-07-24');..

Atomic Design Pattern์ ๋ํด์ ๊ณต๋ถํ๊ณ ์ง๊ธ ํ๊ณ ์๋ ํ๋ก์ ํธ์์ Storybook์ ์ ์ฉํด์ ์ปดํฌ๋ํธ๋ฅผ ๊ด๋ฆฌํ๋ฉด ์ข์ ๊ฒ ๊ฐ๋ค๋ ์๊ฐ์ด ๋ค์๋ค. 2023.07.20 - [โจ๏ธ Web Front-End/NextJs] - [Design Pattern] : Atomic Design (์ํ ๋ฏน ๋์์ธ) ์ฌ์ค ์ฒ์ ๋ฆฌ์กํธ๋ฅผ ๋ฐฐ์ ์ Storybook์ ๋ํด์ ๋ค์์ง๋ง ๊ทธ๋๋ ๋ฆฌ์กํธ์กฐ์ฐจ ์ดํดํ์ง ๋ชปํ ์ํ๋ผ์ ๊ทธ๋ฅ ๋ฃ๊ณ ๋๊ฒผ๋๋ฐ ๊ฐ์๊ธฐ ๋ ์ฌ๋๋ค. ์๋์ด๋ถ์๊ฒ ์ ์ฉํ๋ฉด ์ข์ ๊ฒ ๊ฐ๋ค๊ณ ๋ง์์ ๋๋ ธ๋๋ฐ... ์ฌ์ค ๋ญ ํ ์ค ์์์ผ ์ ์ฉํ ํ ๋ฐ.. ๊ทธ๋์ ๋ฉฐ์น ์ ๋ถํฐ ์๊ฐ ๋ ๋๋ง๋ค ๊ณต์๋ฌธ์์ ๋ธ๋ก๊ทธ๋ค์ ์ฐธ๊ณ ํด์ ๊ธฐ๋ณธ ์ธํ ๊ณผ ๋ฒํผ ์ ๋ ๊ตฌ๋ถํ๋ ๊ฒ๊น์ง ํด๋ณด์๋ค. 1. StoryBook์ด๋? StoryB..

๐คฆ๐ปโโ๏ธ ๋ชจ๋ฅด๋ ๊ฒ ๋๋ฌด๋๋ ๋ง๋ค... ์ค๋์ ์์นจ Front๊ฐ๋ฐ์ ํ์๋ฅผ ํ๋ค. ๋ฐฑ์ค๋ ์๋์ด๋ถ๊ป์ input์ ํ์ดํ๋ง ํด๋ ๋ชจ๋ ํ๋ฉด์์ ๋๋๋ง์ด ๋๋ค๊ณ ํด์ ์ด๋ป๊ฒ ์ฒ๋ฆฌํ๋ฉด ์ข์์ง ํ๋ก ํธ ์๋์ด๋ถ๊ป ์ง๋ฌธ์ ํ์ จ๋ค. ๊ทธ๋ ํ์ ๋ง์์ด lodash - Debouncing์ ์ฌ์ฉํ๋ฉด ์ข ์ค์ด๋ค ๊ฑฐ๋ผ๊ณ ํ์ จ๋๋ฐ ๋ ๋ฌด์จ ๋ง์ธ์ง ๋ชฐ๋ผ์ ใ ใ ๋ฉ๋ชจ์ฅ์ ๊ฐ๋ ๋ง ์จ๋์๋ค. ์ ๋ง ๋ชจ๋ฅด๋ ๊ฒ ๋๋ฌด๋๋ ๋ง๋ค... (๊ฐ๋ ์ ๊ฐ๋ณ๊ฒ ์ตํ๊ณ ์ค์ ๋ก ์ ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ ์์ฑํด๋ณผ๊น ํ๋ค.) - lodash ์ฌ์ฉ ์์ 1. Debouncing(๋๋ฐ์ด์ฑ) ๋๋ฐ์ด์ฑ์ด๋? ์ ์ ๊ฐ ์์ฒญ์ ๋ณด๋ผ ๋ ์ผ์ ํ ์๊ฐ๊ฒฉ์ฐจ๋ฅผ ๋๊ณ , ์ฐ์์์ ๋ฐ์ํ ์ด๋ฒคํธ๋ฅผ ํ๋๋ก ๋ฌถ์ด์, ์ฒ์์ด๋ ๋ง์ง๋ง ํ ๋ฒ์ ํด๋น ์์ฒญ(์ด๋ฒคํธ)์ ์คํํ๋ ๋ฐฉ์์ ๋งํ๋ค. ..

ํ๋ก์ ํธ๋ฅผ ์์ํ๋ฉด์ ๊ธฐ์กด์ React๋ฅผ ์ ์ฌ์ฉํ๋์ง๋ฅผ ๋ชจ๋ฅผ ๋งํผ ์์ฑ๋ ์ฝ๋์๋ React์ ์ฅ์ ? ๊ฐ์ ? ์ ์ ํ ์ฐพ์๋ณผ ์๊ฐ ์์๋ค... ๐ญ ๐ญ ๐ญ ๐ญ ํ ํ์ด์ง์ ๊ธธ๋ฉด 10000๋ผ์ธ์ด ๋๋ ์ฝ๋๋ค์ด ์๊ณ , ๋๊ตฐ๊ฐ ์์ ์ ํ๋ ค๊ณ ๊ทธ ํ์ด์ง ์ฝ๋๋ฅผ ๋ณด๋ฉด ๋ซ๊ณ ์ถ์ ๋ง์์ด๋๊น... (์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ๋ถ๋ถ์ด ์ ํ ์์... ๋จ์ํ ์ปดํฌ๋ํธ ๋ช ๊ฐ๋ฅผ ์ ์ธํ๋ฉด...) ์ง๋์ฃผ ์๋ก ์ค์ ์๋์ด ํ๋ฐํธ๋ถ์ด ์ฝ๋๋ฅผ ๋ณด๊ณ ๋ถ์ํ๊ณ , ์๋ก์ด ํ๋ก์ ํธ๋ฅผ ์์ํจ์ ์์ผ์ ์ฐ๋ฆฌ๊ฐ ์๋กญ๊ฒ ์ ์ฉํด์ผ ํ ๋ฐฉํฅ์ฑ์ ์ ์ํด ์ฃผ์ จ๋ค. ( ๋ฌผ๋ก ์ ํ๋ ๋ฐฉํฅ์ ๊ฒฐ๊ณผ๋ง ๋ฃ๊ฒ ๋์์ง๋ง... ์ ํํ ์ด์ ๋ฅผ ๋ฌผ์ด๋ณผ ์์ ๐ฅฒ) ๊ทธ์ค์์ ์ค๋์ ์ฐ๋ฆฌ๊ฐ ์ฌ์ฉํ๋ NextJs์์ ์ฌ์ฉํ ๋์์ธ ํจํด Atomic Design์ ๋ํด์ ๊ฐ๋จํ๊ฒ ์ ์ด๋ณด๊ณ ..