MOMO - ๐Ÿ› ์˜จ๋ผ์ธ ํŒจ์…˜ E-commerce ์‡ผํ•‘๋ชฐ

bbio3oยท2021๋…„ 1์›” 20์ผ
10

โœจ Projects

๋ชฉ๋ก ๋ณด๊ธฐ
2/4
post-thumbnail

๐Ÿ” Project Overview

๋Œ€ํ•™์ƒ ์ฝ”๋”ฉ ์—ฐํ•ฉ ๋™์•„๋ฆฌ '๋ฉ‹์Ÿ์ด ์‚ฌ์ž์ฒ˜๋Ÿผ'์—์„œ ์ง„ํ–‰ํ•œ ํ”„๋กœ์ ํŠธ๋กœ,
E-commerceํ˜•ํƒœ์˜ ์›น ์„œ๋น„์Šค๋ฅผ ๊ตฌํ˜„ํ•ด๋ณด๋Š” ์Šคํ„ฐ๋””๊ฐ€ ์ง„ํ–‰๋˜์–ด ์‹œ์ž‘ํ•˜๊ฒŒ ๋œ ํ”„๋กœ์ ํŠธ์ž…๋‹ˆ๋‹ค.

โœจ ์•„๋ž˜ ๋งํฌ์—์„œ ํ”„๋กœ์ ํŠธ ๋ฐ๋ชจ ํ™•์ธ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
MOMO Demo

์ƒํ’ˆ ๋ฆฌ์ŠคํŠธ์— ์‚ฌ์šฉ๋œ ์ด๋ฏธ์ง€ ์ถœ์ฒ˜๋Š” COS ์Šคํ† ์–ด์ด๋ฉฐ, COS์— ๋ฌธ์˜ ํ›„ ์ƒ์—…์  ๋ชฉ์ ์ด ์•„๋‹Œ ๊ฒฝ์šฐ, ์ด๋ฏธ์ง€ ์‚ฌ์šฉ์— ๋ฌธ์ œ๊ฐ€ ๋˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๋‹ต๋ณ€์„ ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค. ๐Ÿ˜ƒ


์‚ฌ์šฉ๊ธฐ์ˆ 

  • HTML5 / CSS3
  • JavaScript(ES6+)
  • React
  • Redux, Redux-thunk
  • MongoDB, Mongoose
  • Node.js
  • Express
  • SCSS(BEM ํ™œ์šฉ)
  • Gsap

๊ตฌํ˜„๊ธฐ๋Šฅ์‚ฌํ•ญ

  • ํšŒ์›๊ฐ€์ž…/๋กœ๊ทธ์ธ/๋กœ๊ทธ์•„์›ƒ
  • ํ”„๋กœ๋•ํŠธ ํŽ˜์ด์ง€๋„ค์ด์…˜
  • ์ƒํ’ˆ ๊ฒ€์ƒ‰
  • ์นดํ…Œ๊ณ ๋ฆฌ ๊ฒ€์ƒ‰
  • ์ œํ’ˆ ์ƒ์„ธ ํŽ˜์ด์ง€
  • ์ƒํ’ˆ ๋ฆฌ๋ทฐ
  • ์ฃผ๋ฌธํ™•์ธ์šฉ ์‚ฌ์šฉ์ž ๋งˆ์ด ํŽ˜์ด์ง€ , ํ”„๋กœํ•„
  • ์ฃผ๋ฌธ Checkout ํ”„๋กœ์„ธ์Šค (shipping -> payment method -> order)
  • ์žฅ๋ฐ”๊ตฌ๋‹ˆ
  • ํŽ˜์ดํŒ”/์‹ ์šฉ์นด๋“œ ๊ฒฐ์ œ๊ธฐ๋Šฅ
  • Admin ์œ ์ €, ์ œํ’ˆ, ์ฃผ๋ฌธ ๊ด€๋ฆฌ ํŽ˜์ด์ง€
  • ๋ฐ˜์‘ํ˜• ์›น

โœจ ๋žœ๋”ฉํŽ˜์ด์ง€

GSAP์„ ์ด์šฉํ•œ ์Šคํฌ๋กค ์• ๋‹ˆ๋ฉ”์ด์…˜, Landing page ๋‚ด์—์„œ view๋ฅผ ๋ˆ„๋ฅด๋ฉด ํ”„๋กœ๋•ํŠธ ํŽ˜์ด์ง€(/shop)์œผ๋กœ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค.


โœจ Shop ์ œํ’ˆ๋ฆฌ์ŠคํŠธ[์นดํ…Œ๊ณ ๋ฆฌ ๊ฒ€์ƒ‰, ํŽ˜์ด์ง€๋„ค์ด์…˜ ํ•จ๊ป˜ ๊ตฌํ˜„]

์นดํ…Œ๊ณ ๋ฆฌ๋ณ„๋กœ ์ƒํ’ˆ ๊ฒ€์ƒ‰์„ ํ•  ์ˆ˜ ์žˆ๋Š” ์นดํ…Œ๊ณ ๋ฆฌ ํ•„ํ„ฐ ๊ธฐ๋Šฅ๊ณผ ํŽ˜์ด์ง€๋„ค์ด์…˜ ๊ตฌํ˜„


โœจ ํšŒ์›๊ฐ€์ž… / ๋กœ๊ทธ์ธ / ๋กœ๊ทธ์•„์›ƒ

๋กœ๊ทธ์ธ์„ ํ•˜๋ฉด ๋žœ๋”ฉํŽ˜์ด์ง€('/')๋กœ ์ด๋™ํ•˜๊ณ  ๋กœ๊ทธ์•„์›ƒ์„ ํ•˜๋ฉด '/login'ํŽ˜์ด์ง€๋กœ ๋ฆฌ๋‹ค์ด๋ ‰ํŠธ ๋ฉ๋‹ˆ๋‹ค.
jwt๋ฅผ ์ด์šฉํ•˜์—ฌ ํ† ํฐ์„ ์ƒ์„ฑํ•˜๊ณ  ๋น„์›Œ์ฃผ๊ณ (๋กœ๊ทธ์•„์›ƒ), authMiddleware๋ฅผ ํ†ตํ•ด ํ† ํฐ์„ ๋น„๊ตํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ๋กœ๊ทธ์ธ authorization์„ ๊ตฌํ˜„ํ•˜์˜€์œผ๋ฉฐ, user๊ฐ€ admin์ธ ํ™•์ธํ•ด์ฃผ๋Š” ๋ฏธ๋“ค์›จ์–ด ๋˜ํ•œ ๊ตฌํ˜„ํ•˜์˜€์Šต๋‹ˆ๋‹ค.


โœจ ์ œํ’ˆ ์ƒ์„ธํŽ˜์ด์ง€ / ๋ฆฌ๋ทฐ


์ œํ’ˆ ์ƒ์„ธํŽ˜์ด์ง€์—์„œ ์žฌ๊ณ ํ™•์ธ๊ณผ ์ƒํ’ˆ ๋ฆฌ๋ทฐ๋ฅผ ๋‚จ๊ธธ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์žฅ๋ฐ”๊ตฌ๋‹ˆ์— ๋‹ด์„ ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜์˜€์Šต๋‹ˆ๋‹ค.


โœจ ๊ฒ€์ƒ‰๊ธฐ๋Šฅ


navbar์˜ ๋‹๋ณด๊ธฐ ์•„์ด์ฝ˜์„ ํด๋ฆญํ•˜๋ฉด, ๊ฒ€์ƒ‰์ด ๊ฐ€๋Šฅํ•œ ํŽ˜์ด์ง€๋กœ ์ด๋™๋˜๊ณ ('/shop/search')
ํ‚ค์›Œ๋“œ๋ฅผ ์ž…๋ ฅํ•˜๋ฉด ํ•ด๋‹นํ•˜๋Š” ์•„์ดํ…œ์„ ๋ณผ ์ˆ˜ ์žˆ๋„๋ก ๊ตฌํ˜„ํ•˜์˜€์Šต๋‹ˆ๋‹ค.


โœจ ์žฅ๋ฐ”๊ตฌ๋‹ˆ


์ œํ’ˆ ์ƒ์„ธํŽ˜์ด์ง€์—์„œ ๋งˆ์Œ์— ๋“œ๋Š” ์ƒํ’ˆ์„ ์žฅ๋ฐ”๊ตฌ๋‹ˆ์— ์ถ”๊ฐ€๊ฐ€ ๊ฐ€๋Šฅํ•˜๋ฉฐ, Cart ํŽ˜์ด์ง€์—์„œ ์‚ญ์ œ์™€ ์ˆ˜๋Ÿ‰ ๋ณ€๊ฒฝ, ์ฃผ๋ฌธํ•˜๊ธฐ ๋“ฑ์˜ ๊ธฐ๋Šฅ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.


โœจ ์ฃผ๋ฌธ ํ”„๋กœ์„ธ์Šค


์œ ์ €๊ฐ€ ์žฅ๋ฐ”๊ตฌ๋‹ˆ์—์„œ ์ฃผ๋ฌธํ•˜๊ธฐ๋ฅผ ๋ˆ„๋ฅด๋ฉด Checkout process ํŽ˜์ด์ง€๋กœ ๋„˜์–ด๊ฐ€ ๋ฐฐ์†ก์ง€๋ฅผ ์ž…๋ ฅํ•˜๊ณ , ๊ฒฐ์ œ ๋ฐฉ์‹์„ ์„ ํƒ, ์ฃผ๋ฌธ ํ™•์ธ์„ ํ•˜๋ฉด ๊ฒฐ์ œ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.


โœจ ๊ฒฐ์ œ


ํŽ˜์ดํŒ” ๊ฒฐ์ œ ๋ชจ๋“ˆ์„ ํ†ตํ•ด ํŽ˜์ดํŒ”์ด๋‚˜ ์‹ ์šฉ์นด๋“œ๋กœ ๊ฒฐ์ œ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋„๋ก ๊ตฌํ˜„ํ•˜์˜€์Šต๋‹ˆ๋‹ค.


โœจ ๋งˆ์ดํŽ˜์ด์ง€


์œ ์ €๋Š” ํ”„๋กœํ•„์—์„œ ์œ ์ € ์ •๋ณด์™€ ์ฃผ๋ฌธ ์ •๋ณด, ๋ฐฐ์†ก ์ƒํƒœ ๋“ฑ์ด ํ™•์ธ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.


โœจ ๊ด€๋ฆฌ์ž ํŽ˜์ด์ง€


Admin ํŽ˜์ด์ง€์—์„œ admin ์œ ์ €๋Š” ์ „์ฒด ์œ ์ €์˜ ๋ชฉ๋กํ™•์ธ, ์œ ์ € ์ •๋ณด ์ˆ˜์ •, ์‚ญ์ œ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋ฉฐ
์ „์ฒด ์ œํ’ˆ ํ™•์ธ, ๋“ฑ๋ก, ์‚ญ์ œ, ์—…๋ฐ์ดํŠธ(์ˆ˜์ •) ํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ฐ๊ฐ CRUD ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

order ํŽ˜์ด์ง€ ์ฃผ๋ฌธ ๋ชฉ๋ก ๋ฆฌ์ŠคํŠธ๊ฐ€ ํ™•์ธ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ๋ฐฐ์†ก์ด ์™„๋ฃŒ๋˜๋ฉด admin์œ ์ €๋Š” ๋ฐฐ์†ก์™„๋ฃŒ๋ฅผ ํด๋ฆญํ•˜์—ฌ ์œ ์ €์—๊ฒŒ ๋ฐฐ์†ก์ด ์™„๋ฃŒ๋˜์—ˆ์Œ์„ ์•Œ๋ฆฝ๋‹ˆ๋‹ค.


โœจ ๋ฐ˜์‘ํ˜• ์›น


๋ฐ์Šคํฌํƒ‘, ์•„์ดํŒจ๋“œ, ๋ชจ๋ฐ”์ผ ์ˆœ์œผ๋กœ ๋ฐ˜์‘ํ˜• ์›น์„ ๊ตฌํ˜„ํ•˜์˜€์Šต๋‹ˆ๋‹ค.




๐ŸŒฟ ํ›„๊ธฐ

๊ฐœ์ธ์ ์œผ๋กœ๋Š” ํ”„๋ก ํŠธ์—”๋“œ๋กœ ์ทจ์—…์„ ํฌ๋งํ•˜์ง€๋งŒ, ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ๊ตฌํ˜„ํ•˜๊ธฐ์œ„ํ•ด์„œ๋Š” ๋ฐฑ์—”๋“œ ๋กœ์ง๋„ ์ถฉ๋ถ„ํžˆ ์ดํ•ดํ•ด์•ผ ํ•œ๋‹ค ํŒ๋‹จํ•˜์˜€์Šต๋‹ˆ๋‹ค.
Node.js์™€ express, mongoDB๋ฅผ ์‚ฌ์šฉํ•ด ์„œ๋ฒ„์™€ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋ฅผ ๊ตฌ์„ฑํ•˜๊ณ  ์ฝ”๋“œ๋ฅผ ๊ตฌํ˜„ํ•˜๋ฉด์„œ ์˜ค๋žœ ์‹œ๊ฐ„์ด ๊ฑธ๋ ธ์ง€๋งŒ, ํ”„๋ก ํŠธ์—”๋“œ ์ชฝ์—์„œ ์š”์ฒญํ•˜๊ณ  ๋ฐ›์•„์˜ค๋Š” ๋ฐ์ดํ„ฐ๊ฐ€ ์–ด๋–ค ๊ฒƒ์ธ์ง€ ์ดํ•ดํ•˜๊ณ  ์–ด๋–ค ๋กœ์ง์œผ๋กœ ์ด๋ฃจ์–ด ์ง„ ๊ฒƒ์ธ์ง€, ์ด๊ฒƒ์„ ์–ด๋–ป๊ฒŒ ํ™œ์šฉํ•˜์—ฌ ํด๋ผ์ด์–ธํŠธ ์ƒ์—์„œ ํ™”๋ฉด์— ๋‚˜ํƒ€ ๋‚ผ ์ˆ˜ ์žˆ๋Š”์ง€์— ๋Œ€ํ•ด ๋” ๊นŠ์€ ์ดํ•ด๋ฅผ ํ•  ์ˆ˜ ์žˆ์—ˆ๋˜ ๊ธฐํšŒ์˜€๋‹ค ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

์ด๋ฒˆ ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด ์ „๋ฐ˜์ ์ธ e-commerce ํ”Œ๋žซํผ์˜ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง๊ณผ restful-api์— ๋Œ€ํ•œ ์ดํ•ด, ํ† ํฐ์„ ์ด์šฉํ•œ ํšŒ์›๊ฐ€์ž… / ๋กœ๊ทธ์ธ / ๋กœ๊ทธ์•„์›ƒ ๊ตฌํ˜„, MongoDB๋ฅผ ํ†ตํ•œ NoSQL์— ๋Œ€ํ•œ ์ดํ•ด, css ์ „์ฒ˜๋ฆฌ๊ธฐ SCSS ๋ฅผ ์ด์šฉํ•˜๊ณ  BEM์„ ๋”ฐ๋ฅธ ์Šคํƒ€์ผ๋ง, GSAP ์„ ์ด์šฉํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜ ๊ตฌํ˜„, Redux ๋ฅผ ์ด์šฉํ•œ ์ƒํƒœ๊ด€๋ฆฌ์— ๋Œ€ํ•œ ๊ณต๋ถ€๋ฅผ ํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

e-commerce ์›น ์‚ฌ์ดํŠธ๋Š” ๋‹จ์ˆœํ•œ ์ •์  ์›นํŽ˜์ด์ง€๊ฐ€ ์•„๋‹Œ, ์›น์‚ฌ์ดํŠธ ์•ˆ์—์„œ ์ •๋ง ๋งŽ์€ ๊ธฐ๋Šฅ๋“ค์ด ๊ตฌํ˜„๋˜์–ด์•ผ ํ•ด์„œ ์ปดํฌ๋„ŒํŠธ ๊ด€๊ณ„๋“ค์ด ๋งค์šฐ ๋ณต์žกํ•˜๊ณ ,
๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ์„ค๊ณ„๋ฅผ ํ•  ๋•Œ์—๋„ ๋ฐ์ดํ„ฐ ์‚ฌ์ด์˜ ๊ด€๊ณ„์— ๋Œ€ํ•ด ๊ณ ๋ฏผํ•˜๋ฉฐ ๋งŽ์€ ๊ณต๋ถ€๋ฅผ ํ•ด์•ผํ–ˆ์Šต๋‹ˆ๋‹ค.
๊ธฐ๋Šฅ์ด ๋งŽ์•„ ํž˜๋“ค๊ณ  ๋„์ „์ ์ด์˜€์ง€๋งŒ ์žฌ๋ฏธ์žˆ์—ˆ๋˜ ํ”„๋กœ์ ํŠธ์ž…๋‹ˆ๋‹ค~๐ŸŒฟ

profile
๊ทธ๋ฆผ๋„ ๊ทธ๋ฆฌ๋Š” ๊ฐœ๋ฐœ์ž ๐ŸŽจ๐Ÿ‘ฉโ€๐Ÿ’ป

0๊ฐœ์˜ ๋Œ“๊ธ€