๐Ÿฆ Python Online Store ๋งŒ๋“ค๊ธฐ 11ํŽธ - ์ƒํ’ˆ ์ˆ˜์ •

yohan-record[web]ยท2022๋…„ 8์›” 4์ผ
0

python onlinestore ๊ฐœ๋ฐœ์ผ์ง€

๋ชฉ๋ก ๋ณด๊ธฐ
11/25
post-thumbnail

๐ŸŽˆ Front End Developer ์˜ Back End ๋„์ „๊ธฐ ! ๐ŸŽˆ

์ด ๊ธ€์€ PROJECT LION : ํ˜ธ์ฝ”์น˜ ๊ฐ•์‚ฌ๋‹˜์˜ ๊ฐ•์˜๋ฅผ ๋“ค์œผ๋ฉฐ ์ฐธ๊ณ ํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค.

์ž‘์—… ์ค‘, ๊ฐœ๋ฐœ๊ณผ์ • ์ •๋ฆฌ ๋ฐ issue๊ฐ€ ๋˜์—ˆ๋˜ ๋ถ€๋ถ„๋“ค์„ ๊ณต์œ  ๋ฐ ๊ธฐ๋กํ•˜๊ณ ์ž ์ž‘์„ฑํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

1. ์ƒํ’ˆ ์ˆ˜์ •

โœ ์ƒํ’ˆ ์ˆ˜์ •์€ ๋“ฑ๋ก๊ณผ ๋งค์šฐ ์œ ์‚ฌํ•˜๋‹ค. ๋ณ€๊ฒฝํ•˜๊ณ ์‹ถ์€ ํŠน์ • ์ƒํ’ˆ์˜ ๊ณ ์œ ๋ฒˆํ˜ธ๋ฅผ ์ฃผ์†Œ๊ฐ’์— ๋‹ด๊ณ  update ์ฃผ์†Œ๋ฅผ ์ •์˜ํ•œ๋‹ค. flask๊ฐ€ ์ฃผ์†Œ๋ฅผ ์š”์ฒญ๋ฐ›์œผ๋ฉด API ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๊ณ , ํŠน์ •์ƒํ’ˆ์˜ ๊ณ ์œ ๋ฒˆํ˜ธ๋ฅผ ๊ฐ€์ง„ product document ์ƒํ’ˆ์„ ์ฐพ์•„ ์ˆ˜์ •์‹œ์ผœ ์ฃผ๋Š” ๊ฒƒ์ด๋‹ค.

  1. ์ƒํ’ˆ ์ˆ˜์ • API ์ƒ์„ฑ
    = route๋ฅผ product_id/update ์ฃผ์†Œ๋กœ ์š”์ฒญํ•˜๋ฉฐ, update ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•จ๊ณผ ๋™์‹œ์— product_id๊ฐ’์„ ๋ฐ›์•„์ค€๋‹ค.

= ์ƒํ’ˆ ๋“ฑ๋ก๊ณผ ์œ ์‚ฌํ•˜๊ฒŒ ๋™์ผํ•œ data ๊ฐ’์„ ๋ฐ›์•„์˜จ๋‹ค.
ํ•˜์ง€๋งŒ ๋“ฑ๋ก๊ณผ๋Š” ๋‹ค๋ฅธ ์ ์ด ์žˆ๋‹ค. ์ˆ˜์ •์„ ํ•˜๋Š” ๊ฒฝ์šฐ์—๋Š” img file์„ ์ˆ˜์ •ํ•˜์ง€ ์•Š์„ ์ˆ˜๋„ ์žˆ์„ ๊ฒƒ์ด๋‹ค.

์ˆ˜์ •์„ ํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ์—๋Š” upload๋ฅผ ํ•˜์ง€ ์•Š์„ ๊ฒƒ์ด๊ณ , thumbnail ๋ฐ detail img๊ฐ€ ์•„๋ฌด๊ฒƒ๋„ ์กด์žฌํ•˜์ง€ ์•Š์„ ๊ฒƒ์ด๋‹ค.

๊ทธ๋Ÿฌ๋ฏ€๋กœ, if๋ฌธ์œผ๋กœ ์กด์žฌ์—ฌ๋ถ€๋ฅผ ํŒŒ์•…ํ•˜์—ฌ ์žˆ๋‹ค๋ฉด upload ์‹œํ‚ค๋„๋ก ์ž‘์—…์„ ํ•ด์ฃผ์—ˆ๋‹ค.
๐Ÿ”– ๋“ฑ๋ก๋„ ๋™์ผํ•˜๊ฒŒ if๋ฌธ์œผ๋กœ ์ฒ˜๋ฆฌํ•ด์ค€๋‹ค.


ํ•˜์ง€๋งŒ, ์ˆ˜์ •์„ ํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ์—๋Š” if๋ฌธ์ด ๋™์ž‘ํ•˜์ง€ ์•Š๊ณ , ์ตœ์ข…์ ์œผ๋กœ update_one ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋  ๋•Œ thumbnail_img_url ๋ฐ detail_img_url ์„ ์ •์˜ํ•  ์ˆ˜ ์—†์–ด ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•  ๊ฒƒ์ด๋‹ค.


์ด๋Ÿฌํ•œ ์ƒํ™ฉ์„ ์˜ˆ๋ฐฉํ•˜๊ธฐ ์œ„ํ•ด ๊ธฐ๋ณธ์ ์œผ๋กœ ์ •์˜๋ฅผ ํ•ด๋‘์–ด์„œ undefined ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š๋„๋ก ๋ณ€์ˆ˜๋ฅผ ์ •์˜ํ•ด ๋‘์—ˆ๋‹ค.


๊ทธ ํ›„, ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์™€์„œ ์ €์žฅํ•ด์•ผ ํ•˜๋ฏ€๋กœ update_one ์ด๋ผ๋Š” ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค์–ด ์ €์žฅํ•˜๊ฒ ๋‹ค.
ํ•„์š”ํ•œ data๋Š” ์–ด๋–ค ์ƒํ’ˆ์„ ์‚ญ์ œํ•  ์ง€ ํŒŒ์•…ํ•ด์•ผ ํ•˜๋ฏ€๋กœ ๊ณ ์œ  id๊ฐ’๊ณผ(product_id), form_data, thumbnail_img_url ๊ณผ detail_img_url ๊ฐ’์„ ๋ฐ›์•„์˜ค๊ฒ ๋‹ค.


  1. update_one ํ•จ์ˆ˜ ์ƒ์„ฑ (models > product.py)

๐Ÿ“ update_one ํ•จ์ˆ˜ ์ƒ์„ฑ(์š”์ฒญํ•œ data๊ฐ’ ๋ฐ›์•„์˜ด) ๋ฐ mongodb connect


๐Ÿ“ ์ƒ์„ฑ์˜ ๊ฒฝ์šฐ insert_one์œผ๋กœ ์ •๋ณด๋“ค์„ ์ €์žฅํ•˜์˜€์œผ๋‚˜, update_one ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ $set ๋ถ€๋ถ„์— ์ •๋ณด๋ฅผ ์ „๋‹ฌํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•œ๋‹ค.


๐Ÿ“ ์–ด๋–ค document(์ƒํ’ˆ)์„ ์ˆ˜์ •ํ•  ๊ฒƒ์ธ์ง€ ๊ตฌ๋ถ„์ด ํ•„์š”ํ•˜๋ฏ€๋กœ, ์ „๋‹ฌ๋ฐ›์€ ObjectId ๊ฐ’์œผ๋กœ product id๋ฅผ ์ฐพ๋Š”๋‹ค.


๐Ÿ“ ๊ธฐ์กด์˜ ์ •๋ณด์™€ ์ƒˆ๋กœ ๋“ค์–ด์˜จ ์ •๋ณด๋“ค์ด ๊ตฌ๋ณ„๋˜์–ด ์ €์žฅ๋˜์–ด์•ผ ํ•œ๋‹ค.
(์ˆ˜์ •ํ•˜๋Š” ์‚ฌ๋žŒ์˜ ์ž…์žฅ์—์„œ๋Š” data๋ฅผ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š์„ ์ˆ˜๋„ ์žˆ์œผ๋ฏ€๋กœ ๋นˆ๊ฐ’์œผ๋กœ update ๋˜์ง€ ์•Š๋„๋ก ํ•ด์ค€๋‹ค.)


๐Ÿ“ img ์ฒ˜๋ฆฌ
์ด๋ฏธ์ง€๊ฐ€ ์กด์žฌํ•œ๋‹ค๋ฉด, new_product ์— img๋ฅผ url ๋กœ ์ˆ˜์ •ํ•ด์ค€๋‹ค. ์ฆ‰, ์ƒˆ๋กœ์šด ์ˆ˜์ •๋œ img ์˜ url๊ฐ’์„ ๋„ฃ์–ด์ค€๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค.


๐Ÿ“ return ๊ฐ’ ์ƒ์„ฑ


  1. ์ƒํ’ˆ page ์ƒ์„ฑ

    ๐Ÿ“ ์ƒํ’ˆ ์ •๋ณด ์ˆ˜์ • ํŽ˜์ด์ง€ API ์ƒ์„ฑ = ์–ด๋–ค ์ƒํ’ˆ์„ ์ˆ˜์ •ํ•  ์ง€ ํŒŒ์•…ํ•ด์•ผ ํ•˜๋ฏ€๋กœ ๊ณ ์œ  id๊ฐ’/edit ์œผ๋กœ ์ฃผ์†Œ๋ฅผ ์ •์˜ํ•˜์˜€๋‹ค.
    find_one ์ด๋ž€ ์ˆ˜์ • page์— ์ ‘์†ํ–ˆ์„ ๋•Œ ์–ด๋–ค ์ •๋ณด๊ฐ€ ๊ธฐ์กด์— ์ž‘์„ฑ์ด ๋˜์–ด์žˆ๋Š”์ง€ ํ™•์ธ ํ›„ ์ˆ˜์ •์„ ๊ฑฐ์ณ์•ผํ•˜๋ฏ€๋กœ id๊ฐ’์„ ๋„˜๊ฒจ์„œ document๋ฅผ ๊ฐ€์ ธ์˜ฌ ๊ฒƒ์ด๋‹ค.


๐Ÿ“ models > product.py -> find_one ์ƒ์„ฑ
= id๊ฐ’ ๋ฐ db ์‚ฌ์šฉํ•˜๊ฒ ๋‹ค๊ณ  ์„ ์–ธํ•˜์˜€๋‹ค. ์ฆ‰, _id๊ฐ€ ๋„˜๊ฒจ์ค€ id๊ณผ ๊ฐ™์€ document๋ฅผ ์ฐพ์•„์„œ ๊ฐ€์ ธ์˜จ๋‹ค.
๊ทธ ํ›„, product document๋ฅผ return ์‹œ (controllers > product.py)
return ๋ฐ›์€ document๋กœ html file๊ณผ ํ•จ๊ป˜ web browser์— ๋ณด์—ฌ์งˆ ๊ฒƒ์ด๋‹ค.


๐Ÿ“ Compass ์ ‘์† ๋ฐ product document id๊ฐ’ ์ฃผ์†Œ์ฐฝ ์ž…๋ ฅ
= html file์— ์ถœ๋ ฅ๊ตฌ๋ฌธ์„ ์ž‘์„ฑํ•˜์˜€๋‹ค๋ฉด, ํ•ด๋‹น product document์˜ ์ •๋ณด๊ฐ’์ด ์ถœ๋ ฅ ๋  ๊ฒƒ์ด๋‹ค.


๐Ÿ“ product_edit.html file ์ปค์Šคํ…€
= ๋“ฑ๋กํผ๊ณผ ์œ ์‚ฌํ•œ ๊ตฌ์กฐ ๋ฐ ์Šคํƒ€์ผ์ด๋ฉฐ, ๋“ฑ๋ก๊ณผ ๋‹ค๋ฅธ ๋ถ€๋ถ„์€ input์— data๊ฐ€ ํฌํ•จ๋œ ์ƒํƒœ์ธ ๊ฒƒ์ด๋‹ค.

data๋ฅผ ์ถ”๊ฐ€ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” name์œผ๋กœ ์˜ˆ์‹œ๋ฅผ ๋“ค์ž๋ฉด value="{{product['name']}}" ๊ฐ’์„ ์ถ”๊ฐ€์‹œ์ผœ์ฃผ๋ฉด ๊ฐ€์ ธ์˜จ data๊ฐ’์ด ๋ฟŒ๋ ค์ง„๋‹ค.

update ๋ฅผ ํด๋ฆญ ์‹œ action ๊ฐ’์€ /products/{{product['_id']}}/update ์ฃผ์†Œ๋กœ ์ „๋‹ฌ๋˜๊ณ  controllers > product.py -> ์ƒํ’ˆ ์ •๋ณด ์ˆ˜์ • API๊ฐ€ ํ˜ธ์ถœ์ด ๋˜๋ฉด์„œ return ๊ฐ’ ๋˜ํ•œ ์ถœ๋ ฅ ๋  ๊ฒƒ์ด๋‹ค.


๐Ÿ“update ํ›„ list page ์ด๋™ ๋ฐ import
= redirect๋ฅผ product ์•ˆ์— ์žˆ๋Š” get_products ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœ์‹œ์ผœ์ค€๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค.
์ฆ‰, ์ˆ˜์ •์ด ๋˜๋ฉด ์ƒํ’ˆ ๋ฆฌ์ŠคํŠธ ์กฐํšŒ page ๋กœ ์ด๋™์‹œ์ผœ์ค€๋‹ค๋Š” ์ฝ”๋“œ์ด๋‹ค.

= ์ด์™€ ๊ฐ™์ด ์ •์ƒ์ ์œผ๋กœ list page๋กœ redirect๋จ๊ณผ ๋™์‹œ์— data๊ฐ€ ์ˆ˜์ •๋œ ๋ถ€๋ถ„์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ”– list_page์˜ edit ๋ฒ„ํŠผ์—๋„ /products/{{product['_id']}}/edit edit ํŽ˜์ด์ง€๋กœ ์ด๋™์‹œ์ผœ์ฃผ๋Š” ๋งํฌ๋ฅผ ์ถ”๊ฐ€์‹œ์ผฐ๋‹ค.

์˜ค๋Š˜๋”ฐ๋ผ ์ง‘์ค‘์ด ์ž˜ ๋˜์ง€์•Š์•„ ๋“ฑ๋ก๊ณผ ๊ฑฐ์˜ ์œ ์‚ฌํ•œ ๋ถ€๋ถ„์ด ๋งŽ์•˜์Œ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ๋ช‡๋ฒˆ์ด๊ณ  ๋ฐ˜๋ณตํ•ด์„œ ๋“ค์—ˆ๋˜ ๊ฒƒ ๊ฐ™๋‹ค ๐Ÿ˜ตโ€๐Ÿ’ซ

๊ทธ๋ž˜๋„ ํ™•์‹คํžˆ ์ดํ•ด๋ฅผ ํ•˜๊ณ  ๋„˜์–ด๊ฐˆ ์ˆ˜ ์žˆ์–ด ๋‹คํ–‰์ธ ๊ฒƒ ๊ฐ™๋‹ค ^^...........

๋‹ค์Œ ์‹œ๊ฐ„์—๋Š” ์ƒํ’ˆ detail page๋ฅผ ์ž‘์—…ํ•ด ๋ณด๊ฒ ๋‹ค.

profile
๐Ÿฑโ€๐Ÿ Front End Developer

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