/product_list

๐Ÿ‘š ํ† ์ด ํ”„๋กœ์ ํŠธ | ์‡ผํ•‘๋ชฐ ์ƒํ’ˆ ๋ฆฌ์ŠคํŠธ ํŽ˜์ด์ง€ ๋งŒ๋“ค๊ธฐ

Primary LanguageCSS

๐Ÿ‘š ํ† ์ดํ”„๋กœ์ ํŠธ | ์‡ผํ•‘๋ชฐ ์ƒํ’ˆ ๋ฆฌ์ŠคํŠธ ํŽ˜์ด์ง€ ๋งŒ๋“ค๊ธฐ

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

๋‚ด์šฉ

์‡ผํ•‘๋ชฐ ์ƒํ’ˆ ๋ฆฌ์ŠคํŠธ ํŽ˜์ด์ง€ ๋งŒ๋“ค๊ธฐ

  • ์™„์„ฑ ๊ธฐํ•œ์€ 10์›” 3์ผ(ํ™”) ์ด๋ฉฐ, React, JavaScript, TypeScript, Next.js ์ค‘ ์–ด๋–ค ๊ฒƒ์„ ์‚ฌ์šฉํ•ด๋„ ๊ดœ์ฐฎ์Šต๋‹ˆ๋‹ค.

1. ํ”„๋กœ์ ํŠธ์˜ ์ฃผ์š” ์š”๊ตฌ์‚ฌํ•ญ

  • UI: ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋งŒ๋“ค์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • API ์—ฐ๋™: ์ƒํ’ˆ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๊ธฐ ์œ„ํ•ด API์™€ ์—ฐ๋™ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • ํƒญ: ์ธ๊ธฐ์ˆœ๊ณผ ์ตœ์‹ ์ˆœ์œผ๋กœ ์ƒํ’ˆ์„ ์ •๋ ฌํ•  ์ˆ˜ ์žˆ๋Š” ํƒญ์„ ๋งŒ๋“ค์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • ์ตœ์‹ ์ˆœ ํƒญ ํ•„ํ„ฐ: ์ตœ์‹ ์ˆœ ํƒญ์—์„œ๋Š” ๋ฌด๋ฃŒ๋ฐฐ์†ก, ๋‹จ๋… ์ƒํ’ˆ ๋“ฑ์„ ํ•„ํ„ฐ๋งํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • ์ธ๊ธฐ์ˆœ ํƒญ ์ถ”์ฒœ์ƒํ’ˆ: ์ธ๊ธฐ์ˆœ ํƒญ์—์„œ๋Š” ์ถ”์ฒœ ์ƒํ’ˆ์„ ํ‘œ์‹œํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • ๋ฌดํ•œ์Šคํฌ๋กค: ์ƒํ’ˆ ๋ชฉ๋ก์„ ์Šคํฌ๋กคํ•˜๋ฉด ์ž๋™์œผ๋กœ ๋” ๋งŽ์€ ์ƒํ’ˆ์„ ๋กœ๋“œํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • ๊ธฐํƒ€ ์š”๊ตฌ์‚ฌํ•ญ: ์ˆซ์ž ํฌ๋งทํŒ…, ์ข‹์•„์š” ๋“ฑ๋“ฑ

2. ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • react-query, styled-components, ant design ๋“ฑ ์ž์œ ๋กญ๊ฒŒ ์‚ฌ์šฉ ๊ฐ€๋Šฅ.

3. ํ”„๋กœ์ ํŠธ ์™„๋ฃŒ ๋ฐ ๊ณต์œ 

  • ํ”„๋กœ์ ํŠธ๋ฅผ ์™„์„ฑํ•œ ํ›„์—๋Š” ๊ฐ์ž GitHub์œผ๋กœ ๊ณต์œ ํ•ด ์ฃผ์„ธ์š”.
  • ๋ฐฐํฌ๊นŒ์ง€ ํ•ด์ค€๋‹ค๋ฉด ๋” ์ข‹์•„์š”! (CI/CD)

4. ์•„๋ž˜ ๋‚ด์šฉ์„ ํฌํ•จํ•˜์—ฌ README.md๋ฅผ ์ž‘์„ฑํ•ด์ฃผ์„ธ์š”:

  • ์‚ฌ์šฉํ•œ ํ”„๋ ˆ์ž„์›Œํฌ์™€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
  • ๊ตฌํ˜„ํ•œ ๋‚ด์šฉ๊ณผ ๊ตฌํ˜„ํ•˜์ง€ ๋ชปํ•œ ๋‚ด์šฉ

๐Ÿ‘€ ์‚ฌ์šฉํ•œ ํ”„๋ ˆ์ž„์›Œํฌ์™€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

  • Next.js
  • react-query
  • emotion

๐Ÿ‘ป ๊ตฌํ˜„ํ•œ ๋‚ด์šฉ๊ณผ ๊ตฌํ˜„ํ•˜์ง€ ๋ชปํ•œ ๋‚ด์šฉ