๋ชฉ๋กโŒจ๏ธ Web Front-End (7)

๐Ÿ˜† My name is Ez : ์‰ฝ๋‹ค ์‰ฌ์›Œ ๊ฐœ๋ฐœlife

[ETC] : ๊ณตํ†ต์ปดํฌ๋„ŒํŠธ? ์•„?

์ด๋ฒˆ ํ”„๋กœ์ ํŠธ๋Š” ๊ฐ€์žฅ ์ž‘์€ ์•„ํ†ฐํ˜•์‹์˜ ์ปดํฌ๋„ŒํŠธ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•œ๋‹ค. ๊ทธ๋ž˜์„œ ๊ฐ ๊ฐ™์€ ๊ณตํ†ต์ปดํฌ๋„ŒํŠธ๋ฅผ ๋จผ์ € ํ•˜๋‚˜ ๋งŒ๋“ค์–ด๋ณด๊ณ  ๋ฆฌ๋ทฐํ•˜๊ธฐ๋กœ ํ–ˆ๋‹ค. ์˜ค๋Š˜๊นŒ์ง€ ์ž‘์—…์€ ํ–ˆ๊ณ  ๋‚ด์ผ ๊ฐ™์ด ๋ชจ์—ฌ์„œ ๋ฆฌ๋ทฐ๋ฅผ ํ•˜๊ธฐ๋กœ ํ–ˆ๋‹ค. ์šฐ๋ฆฌ ํ”„๋กœ์ ํŠธ์—์„œ ์•„์ฃผ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” Input์„ ๋จผ์ € ๋งŒ๋“ค๊ธฐ๋กœ ํ–ˆ๋Š”๋ฐ, InputBasic์ด๋ผ๊ณ  ์ •ํ–ˆ๋‹ค. ๋‹จ์ˆœ ํ…์ŠคํŠธ๋ฟ ์•„๋‹ˆ๋ผ , ์ˆซ์ž, ์Œ์ˆ˜, ์†Œ์ˆ˜์ , ๊ณ„์ขŒ๋ฒˆํ˜ธ, ์˜จ๋„, ์ „ํ™”๋ฒˆํ˜ธ ๋“ฑ.. ๋‹ค์–‘ํ•œ ํ˜•ํƒœ์˜ ํ…์ŠคํŠธ๋ฅผ ์ž…๋ ฅ๋ฐ›๊ณ  ์ปจํŠธ๋กคํ•ด์•ผ ํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ธํ’‹ ๋‚ด๋ถ€ ๋ผ๋ฒจ(๋‹จ์œ„ ํ‘œ๊ธฐ), ๊ฒ€์ƒ‰์ฐฝ์˜ ๋‹๋ณด๊ธฐ ๋“ฑ ๋‹ค์–‘ํ•œ ํ˜•ํƒœ๋„ ๊ฐ€์ง€๊ณ  ์žˆ์–ด์„œ ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌํ• ์ง€ ๊ณ ๋ฏผ์„ ๋งŽ์ด ํ–ˆ๋‹ค. ์ผ๋‹จ CSS ๊ด€๋ จ๋œ ๋ถ€๋ถ„์€ ํผ๋ธ”๋ฆฌ์‹ฑ์ด ๋‚˜์˜ค๋ฉด ์ ์šฉํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๊ณ  ๊ฐ๊ฐ์˜ ์œ„์น˜๋ฅผ ๋จผ์ € ์žก์•˜๋‹ค. Prop๋กœ๋Š” ๊ฐ„๋‹จํ•˜๊ฒŒ value, setValue, classNam..

[styled-jsx] : styled-jsx ์‚ฌ์šฉ๋ฒ•? ์ผ๋‹จ ๋ณด์ž

๊ธˆ์š”์ผ์— ํ”„๋กœ์ ํŠธ ๊ธฐ๋ณธ ๊ตฌ์กฐ์™€ ์‚ฌ์šฉํ•˜๋Š” ์Šคํƒ์— ๋Œ€ํ•œ ์„ค๋ช…์„ ๋“ฃ๊ณ  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..

[NextJs] : App Router ? Server Component?

๋‹ค์‹œ ์‹œ์ž‘ํ•˜๋Š” ํ”„๋กœ์ ํŠธ์—์„œ๋Š” 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..

[Day.js] : Moment.js (Day.js๋กœ ๋ณ€๊ฒฝ)

์ƒˆ๋กญ๊ฒŒ ๋‹ค์‹œ ์ง„ํ–‰ํ•˜๋Š” ํ”„๋กœ์ ํŠธ์—์„œ๋Š” Moment.js๋ฅผ ๋ฒ„๋ฆฌ๊ณ  Day.js๋กœ ๋ณ€๊ฒฝํ•˜๋ฉด ์ข‹๊ฒ ๋‹ค๊ณ  ํ–ˆ๋‹ค. ๋” ์ด์ƒ ์—…๋ฐ์ดํŠธ๊ฐ€ ์ง„ํ–‰๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค... (์ด ๋ถ€๋ถ„์€ ๋งค์šฐ ๋ถˆ์•ˆ๐Ÿ˜ฅ) Moment.js ํ™ˆํŽ˜์ด์ง€์—๋งŒ ๊ฐ€๋„ ๋ฉ”์ธ ๋ฐฐ๋„ˆ์˜†์— ์ด๋Ÿฐ ๊ธ€์ด ์ ํ˜€์žˆ๋‹ค. (๋‹ค๋ฅธ ๊ถŒ์žฅ ์‚ฌํ•ญ๋“ค์„ ์•ˆ๋‚ด) Moment์—์„œ ์ถ”์ฒœํ•ด ์ค€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋‹ค์šด๋กœ๋“œ ํ˜„ํ™ฉ์ด๋‹ค. ๊ทธ์ค‘์—์„œ Day.js๋ฅผ ์„ ํƒํ•œ ๊ฑด ์‚ฌ์šฉ๋ฐฉ๋ฒ•์ด Moment.js์™€ ๋™์ผํ•˜๊ณ  ๊ฐ€๋ฒผ์šด ์šฉ๋Ÿ‰ ๋•Œ๋ฌธ์ด๋‹ค. ์ผ๋‹จ ๋ณ€๊ฒฝํ•˜๋Š” ๋ถ€๋ถ„์—์„œ ๊ต‰์žฅํžˆ ํŽธ๋ฆฌํ•˜๋‹ค. ์„ค์น˜๋ฐฉ๋ฒ• npm install dayjs --save ์‚ฌ์šฉ๋ฐฉ๋ฒ• (๊ฐ„๋‹จํ•œ ์‚ฌ์šฉ๋ฒ•๋งŒ ์†Œ๊ฐœ) /** 1. ๋‚ ์งœ ๊ฐ์ฒด ์ƒ์„ฑํ•˜๊ธฐ */ //ํ˜„์žฌ ๋‚ ์งœ ๊ฐ์ฒด ์ƒ์„ฑ dayjs(); // ์›ํ•˜๋Š” ๋‚ ์งœ ๊ฐ์ฒด ์ƒ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ• dayjs('2023-07-24');..

[StoryBook] : ์Šคํ† ๋ฆฌ๋ถ์ด ๋ญ์ง€?

Atomic Design Pattern์— ๋Œ€ํ•ด์„œ ๊ณต๋ถ€ํ•˜๊ณ  ์ง€๊ธˆ ํ•˜๊ณ  ์žˆ๋Š” ํ”„๋กœ์ ํŠธ์—์„œ Storybook์„ ์ ์šฉํ•ด์„œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ด€๋ฆฌํ•˜๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค. 2023.07.20 - [โŒจ๏ธ Web Front-End/NextJs] - [Design Pattern] : Atomic Design (์•„ํ† ๋ฏน ๋””์ž์ธ) ์‚ฌ์‹ค ์ฒ˜์Œ ๋ฆฌ์•กํŠธ๋ฅผ ๋ฐฐ์› ์„ Storybook์— ๋Œ€ํ•ด์„œ ๋“ค์—ˆ์ง€๋งŒ ๊ทธ๋•Œ๋Š” ๋ฆฌ์•กํŠธ์กฐ์ฐจ ์ดํ•ดํ•˜์ง€ ๋ชปํ•œ ์ƒํƒœ๋ผ์„œ ๊ทธ๋ƒฅ ๋“ฃ๊ณ  ๋„˜๊ฒผ๋Š”๋ฐ ๊ฐ‘์ž๊ธฐ ๋– ์˜ฌ๋ž๋‹ค. ์‹œ๋‹ˆ์–ด๋ถ„์—๊ฒŒ ์ ์šฉํ•˜๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค๊ณ  ๋ง์”€์„ ๋“œ๋ ธ๋Š”๋ฐ... ์‚ฌ์‹ค ๋ญ˜ ํ•  ์ค„ ์•Œ์•„์•ผ ์ ์šฉํ•  ํ…๋ฐ.. ๊ทธ๋ž˜์„œ ๋ฉฐ์น  ์ „๋ถ€ํ„ฐ ์‹œ๊ฐ„ ๋  ๋•Œ๋งˆ๋‹ค ๊ณต์‹๋ฌธ์„œ์™€ ๋ธ”๋กœ๊ทธ๋“ค์„ ์ฐธ๊ณ ํ•ด์„œ ๊ธฐ๋ณธ ์„ธํŒ…๊ณผ ๋ฒ„ํŠผ ์ •๋„ ๊ตฌ๋ถ„ํ•˜๋Š” ๊ฒƒ๊นŒ์ง€ ํ•ด๋ณด์•˜๋‹ค. 1. StoryBook์ด๋ž€? StoryB..

[Performance] : Debouncing(๋””๋ฐ”์šด์‹ฑ),Throttling(์“ฐ๋กœํ‹€๋ง)

๐Ÿคฆ๐Ÿปโ€โ™‚๏ธ ๋ชจ๋ฅด๋Š” ๊ฒŒ ๋„ˆ๋ฌด๋‚˜๋„ ๋งŽ๋‹ค... ์˜ค๋Š˜์€ ์•„์นจ Front๊ฐœ๋ฐœ์ž ํšŒ์˜๋ฅผ ํ•˜๋‹ค. ๋ฐฑ์•ค๋“œ ์‹œ๋‹ˆ์–ด๋ถ„๊ป˜์„œ input์— ํƒ€์ดํ•‘๋งŒ ํ•ด๋„ ๋ชจ๋“  ํ™”๋ฉด์—์„œ ๋žœ๋”๋ง์ด ๋œ๋‹ค๊ณ  ํ•ด์„œ ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌํ•˜๋ฉด ์ข‹์„์ง€ ํ”„๋ก ํŠธ ์‹œ๋‹ˆ์–ด๋ถ„๊ป˜ ์งˆ๋ฌธ์„ ํ•˜์…จ๋‹ค. ๊ทธ๋•Œ ํ•˜์‹  ๋ง์”€์ด lodash - Debouncing์„ ์‚ฌ์šฉํ•˜๋ฉด ์ข€ ์ค„์–ด๋“ค ๊ฑฐ๋ผ๊ณ  ํ•˜์…จ๋Š”๋ฐ ๋‚œ ๋ฌด์Šจ ๋ง์ธ์ง€ ๋ชฐ๋ผ์„œ ใ…Žใ…Ž ๋ฉ”๋ชจ์žฅ์— ๊ฐœ๋…๋งŒ ์จ๋‘์—ˆ๋‹ค. ์ •๋ง ๋ชจ๋ฅด๋Š” ๊ฒŒ ๋„ˆ๋ฌด๋‚˜๋„ ๋งŽ๋‹ค... (๊ฐœ๋…์€ ๊ฐ€๋ณ๊ฒŒ ์ตํžˆ๊ณ  ์‹ค์ œ๋กœ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ •๋„ ์ž‘์„ฑํ•ด๋ณผ๊นŒ ํ•œ๋‹ค.) - lodash ์‚ฌ์šฉ ์˜ˆ์ • 1. Debouncing(๋””๋ฐ”์šด์‹ฑ) ๋””๋ฐ”์šด์‹ฑ์ด๋ž€? ์œ ์ €๊ฐ€ ์š”์ฒญ์„ ๋ณด๋‚ผ ๋•Œ ์ผ์ •ํ•œ ์‹œ๊ฐ„๊ฒฉ์ฐจ๋ฅผ ๋‘๊ณ , ์—ฐ์†์—์„œ ๋ฐœ์ƒํ•œ ์ด๋ฒคํŠธ๋ฅผ ํ•˜๋‚˜๋กœ ๋ฌถ์–ด์„œ, ์ฒ˜์Œ์ด๋‚˜ ๋งˆ์ง€๋ง‰ ํ•œ ๋ฒˆ์— ํ•ด๋‹น ์š”์ฒญ(์ด๋ฒคํŠธ)์„ ์‹คํ–‰ํ•˜๋Š” ๋ฐฉ์‹์„ ๋งํ•œ๋‹ค. ..

[Design Pattern] : Atomic Design (์•„ํ† ๋ฏน ๋””์ž์ธ)

ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•˜๋ฉด์„œ ๊ธฐ์กด์— React๋ฅผ ์™œ ์‚ฌ์šฉํ–ˆ๋Š”์ง€๋ฅผ ๋ชจ๋ฅผ ๋งŒํผ ์ž‘์„ฑ๋œ ์ฝ”๋“œ์—๋Š” React์˜ ์žฅ์ ? ๊ฐ•์ ? ์„ ์ „ํ˜€ ์ฐพ์•„๋ณผ ์ˆ˜๊ฐ€ ์—†์—ˆ๋‹ค... ๐Ÿ˜ญ ๐Ÿ˜ญ ๐Ÿ˜ญ ๐Ÿ˜ญ ํ•œ ํŽ˜์ด์ง€์— ๊ธธ๋ฉด 10000๋ผ์ธ์ด ๋„˜๋Š” ์ฝ”๋“œ๋“ค์ด ์žˆ๊ณ , ๋ˆ„๊ตฐ๊ฐ€ ์ˆ˜์ •์„ ํ•˜๋ ค๊ณ  ๊ทธ ํŽ˜์ด์ง€ ์ฝ”๋“œ๋ฅผ ๋ณด๋ฉด ๋‹ซ๊ณ  ์‹ถ์€ ๋งˆ์Œ์ด๋‹ˆ๊น... (์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ถ€๋ถ„์ด ์ „ํ˜€ ์—†์Œ... ๋‹จ์ˆœํ•œ ์ปดํฌ๋„ŒํŠธ ๋ช‡ ๊ฐœ๋ฅผ ์ œ์™ธํ•˜๋ฉด...) ์ง€๋‚œ์ฃผ ์ƒˆ๋กœ ์˜ค์‹  ์‹œ๋‹ˆ์–ด ํ”„๋ŸฐํŠธ๋ถ„์ด ์ฝ”๋“œ๋ฅผ ๋ณด๊ณ  ๋ถ„์„ํ•˜๊ณ , ์ƒˆ๋กœ์šด ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•จ์— ์•ž์œผ์„œ ์šฐ๋ฆฌ๊ฐ€ ์ƒˆ๋กญ๊ฒŒ ์ ์šฉํ•ด์•ผ ํ•  ๋ฐฉํ–ฅ์„ฑ์„ ์ œ์‹œํ•ด ์ฃผ์…จ๋‹ค. ( ๋ฌผ๋ก  ์„ ํƒ๋œ ๋ฐฉํ–ฅ์˜ ๊ฒฐ๊ณผ๋งŒ ๋“ฃ๊ฒŒ ๋˜์—ˆ์ง€๋งŒ... ์„ ํƒํ•œ ์ด์œ ๋ฅผ ๋ฌผ์–ด๋ณผ ์˜ˆ์ • ๐Ÿฅฒ) ๊ทธ์ค‘์—์„œ ์˜ค๋Š˜์€ ์šฐ๋ฆฌ๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” NextJs์—์„œ ์‚ฌ์šฉํ•  ๋””์ž์ธ ํŒจํ„ด Atomic Design์— ๋Œ€ํ•ด์„œ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ ์–ด๋ณด๊ณ ..