๐Ÿฆ Python Online Store ๋งŒ๋“ค๊ธฐ 22ํŽธ - ์ƒํ’ˆ ๊ฒฐ์ œ(3)

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

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

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

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

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

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

1. ๊ฒฐ์ œ ์„ฑ๊ณต ์‹œ flask ์ฒ˜๋ฆฌ API

โœ ๊ฒฐ์ œ๊ฐ€ ์™„๋ฃŒ๋œ๋‹ค๋ฉด, ์™„๋ฃŒ์˜ ๋‹จ๋ฉด์ ์ธ ๋ถ€๋ถ„์ด ์•„๋‹Œ ์—ฌ๋Ÿฌ ์ ˆ์ฐจ๋ฅผ ์ƒ๊ฐํ•ด ๋ณด์•„์•ผ ํ•œ๋‹ค. ์šฐ์„ , ๊ฐ„๋‹จํ•œ ๋กœ์ง์„ ์ƒ๊ฐํ•ด๋ณด๋ฉด
(1) ๊ฒฐ์ œ๊ฐ€ ์™„๋ฃŒ๋˜๊ณ 
(2) ๊ฒฐ์ œ๊ฐ€ ์‹ค์ œ๋กœ ์ •์ƒ์ ์œผ๋กœ ์™„๋ฃŒ๋˜์—ˆ๋Š”์ง€ ํ™•์ธํ•˜๋Š” ์ ˆ์ฐจ๊ฐ€ ํ•„์š”ํ•˜๋ฉฐ
(3) ๊ฒฐ์ œ์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ์ €์žฅํ•˜๊ณ 
(4) ์ฃผ๋ฌธ document status๋ฅผ ์™„๋ฃŒ ์ƒํƒœ๋กœ ์—…๋ฐ์ดํŠธ ์‹œํ‚ค๋Š” API๊ฐ€ ํ•„์š”ํ•˜๋‹ค.

๊ฐ ์ˆœ์„œ๋ณ„๋กœ ์ฝ”๋“œ๋ฅผ ์งœ์„œ API๋ฅผ ์ถ”๊ฐ€์‹œ์ผœ ๋ณด๊ฒ ๋‹ค.

  1. route ๋ฐ ํ•จ์ˆ˜ ์ƒ์„ฑ
    = complete ์ฃผ์†Œ๋กœ ๋ฐ›๊ณ , ํ•จ์ˆ˜๋ฅผ ์ƒ์„ฑํ–ˆ์œผ๋ฉฐ ๊ฒฐ์ œ ์„ฑ๊ณต ๋˜ํ•œ ๋กœ๊ทธ์ธ์ด ๋˜์–ด์žˆ๋‹ค๋Š” ์ „์ œ ํ•˜์— ์ง„ํ–‰๋˜๋ฏ€๋กœ ๋กœ๊ทธ์ธ ์—ฌ๋ถ€๋ฅผ ์ฒดํฌํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ์ถ”๊ฐ€์‹œ์ผฐ๋‹ค.

  1. request data ๋ฐ ๊ฒฐ์ œ๊ด€๋ จ id๊ฐ’ ๋ฐ›์•„์˜ค๊ธฐ
    = request_data์˜ ๊ฒฝ์šฐ์—๋Š” payment.html file ๋‚ด๋ถ€์˜ ajax๊ฐ’ ์•ˆ์˜ data๋ฅผ ๋œปํ•˜๊ณ , ๊ทธ data ์•ˆ์—๋Š” imp_uid๋ฐ merchant_uid์˜(๊ฒฐ์ œ์— ํ•„์š”ํ•œ data๊ฐ’๋“ค)์„ ๋‹ด์•„๋‘” ๊ฒƒ์ด๋‹ค. ์ด ๊ฐ’๋“ค์„ ๋ฐ›์•„์™€์„œ ์ €์žฅํ•ด์•ผ ํ•˜๋ฏ€๋กœ ๊ฐ€์ ธ์˜จ๋‹ค.

๐Ÿ”– payment.html ์ฐธ๊ณ 


  1. ๊ฒฐ์ œ๊ฐ€ ์ •์ƒ์ ์œผ๋กœ ์™„๋ฃŒ๋˜์—ˆ๋Š”์ง€ ํ™•์ธ
    = ํ™•์ธ์„ ์œ„ํ•ด์„œ๋Š” iamport API๋ฅผ ์ด์šฉํ•ด์„œ ํ™•์ธํ•ด์•ผ ํ•˜๋Š”๋ฐ, API site์—์„œ๋Š” node๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ž‘์—…์„ ํ•ด๋‘์—ˆ๋‹ค.๐Ÿ˜ตโ€๐Ÿ’ซ
    ๊ทธ๋Ÿฌ๋ฏ€๋กœ, node ์ฝ”๋“œ๋ฅผ ํ™•์ธํ•˜์—ฌ python code ๋กœ ์•Œ๋งž๊ฒŒ ์ž‘์—…์„ ํ•ด ๋ณด๊ฒ ๋‹ค.

(1) ์šฐ์„ , API ์ƒ์˜ url์„ ์‚ฌ์šฉํ•œ๋‹ค.
(2) data key(iamport ๊ด€๋ฆฌ์ž ํ™ˆํŽ˜์ด์ง€ ์ฐธ์กฐ)
(3) headers ์ •์˜ headers = {'Content-Type': 'application/json'}
= application/json type์œผ๋กœ ๋ณด๋‚ด๊ฒ ๋‹ค๊ณ  ์„ ์–ธ

(4) ์š”์ฒญ ๋ณด๋‚ด๊ธฐ = ๋„ˆ๋ฌด ์ •์‹ ์ด ์—†๋‹ค. ํ•˜์ง€๋งŒ ์ดํ•ด๋ฅผ ์œ„ํ•ด์„œ๋Š” ์–ด์ฉ” ์ˆ˜ ์—†์—ˆ๋‹ค(?)
๊ฐ’์„ ๋ณ€์ˆ˜์— ๋‹ด๊ณ , ๊ทธ ๋ณ€์ˆ˜๊ฐ€ ์–ด๋””์— ์ €์žฅ๋˜๊ณ  ์–ด๋””์— ๋ฟŒ๋ ค์ง€๋Š”์ง€ ์ •ํ™•ํžˆ ์ดํ•ดํ•˜๊ณ  ๋„˜์–ด๊ฐ€์•ผ ํ˜ผ๋™์„ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค.

์šฐ์„  url, headers, data ๊ฐ’์„ res ๋ณ€์ˆ˜์— ๋‹ด์•˜๋‹ค.
= request ๋ฐ json์ด import ๋˜์–ด ์žˆ์ง€ ์•Š์œผ๋ฏ€๋กœ, ์‚ฌ์šฉ์„ ์œ„ํ•ด์„œ import ์‹œ์ผœ์ค€๋‹ค.

res = res.json()
๊ทธ ํ›„, response๋ฅผ json์œผ๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ ๋‹ค์‹œ res ๋ณ€์ˆ˜์— ๋‹ด์•„์ค€๋‹ค.
= API๋ฅผ ์‚ดํŽด๋ณด๋ฉด, data๋ฅผ ๊ฐ์‹ผ getToken์„ data.response์˜ access token ์œผ๋กœ ๋ฐ›์•„์˜ค๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.
์ด ์ฝ”๋“œ๋ฅผ ๋™์ผํ•˜๊ฒŒ ์ž‘์—…ํ•˜๋˜, python์œผ๋กœ ๋ณ€๊ฒฝํ•˜๋ฉด
= response๋กœ ์ ‘๊ทผํ•˜์—ฌ access_token์„ ๊ฐ€์ ธ์˜จ๋‹ค.

= ๊ฒฐ์ œ์ •๋ณด๋ฅผ ์กฐํšŒํ•  ์ˆ˜ ์žˆ๋Š” API๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ token์„ ๋ฐœ๊ธ‰๋ฐ›์•˜๊ณ , ๊ทธ ๋ฐœ๊ธ‰๋ฐ›์€ token์„ ์ด์šฉํ•˜์—ฌ ์กฐํšŒํ•  ์ˆ˜ ์žˆ๊ฒŒ๋” ์ž‘์—…ํ•ด ์ค€ ์ฝ”๋“œ์ด๋‹ค.

๋ฌผ๋ก  API ์ƒ์—์„œ ํ•ด๋‹น ์ฝ”๋“œ๊ฐ€ node๋กœ ์ž‘์—…๋˜์–ด ์žˆ๊ณ , python ํ˜•์‹์— ๋งž๊ฒŒ ๋ณ€ํ™˜์‹œ์ผœ ์ฃผ์—ˆ๋‹ค.

๐Ÿ”– ์ฐธ๊ณ )


= ๊ทธ ํ›„, request๋ฅผ get๋ฐฉ์‹์œผ๋กœ ์‹คํ–‰ํ•˜์—ฌ json์œผ๋กœ ๋ถˆ๋Ÿฌ์˜จ๋‹ค. ( url ๋ฐ headers)
๊ฐ€์ ธ์˜จ ํ›„ response key๊ฐ’์œผ๋กœ payment_data๋ฅผ ๊บผ๋‚ด์˜จ๋‹ค.


= payment data์™€ payment_data ๋‚ด๋ถ€์˜ ์‹ค์ œ ๊ฒฐ์ œํ•œ ๊ฐ’(amount) ์™€ ์ƒํ’ˆ๊ฐ€๊ฒฉ(product > price) ๊ฐ€ ๊ฐ™๋‹ค๋ฉด -> ์ •์ƒ์ ์œผ๋กœ ๊ฒฐ์ œ๊ฐ€ ์™„๋ฃŒ๋œ ๊ฒƒ์ด๋‹ค.
(status ๊ฐ’์€ success๋กœ ์„ธํŒ…ํ•ด์ค€๋‹ค.)

= ๊ทธ ๊ฐ€๊ฒฉ์€ order์—์„œ ์ฐพ์•„์ค€๋‹ค. order ๊ฐ€ ์—†๋‹ค๋ฉด return ๊ฐ’์„ ๋„์›Œ์ค€๋‹ค.


= ๊ฒฐ์ œ์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ์ €์žฅํ•˜๊ธฐ ์œ„ํ•ด insert_one์„ ์ด์šฉํ•˜์—ฌ ์ฃผ๋ฌธ ์ •๋ณด์™€, ๊ฒฐ์ œ์ •๋ณด์™€, ์ƒํƒœ๋ฅผ ์ €์žฅํ•ด ์ค€๋‹ค.
payment class๋Š” ํ˜„์žฌ ์กด์žฌํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ, ์ƒ์„ฑํ•ด ์ฃผ์–ด์•ผ ํ•œ๋‹ค.


(5) models > payment.py ์ƒ์„ฑ
= ์ฃผ๋ฌธ์ •๋ณด, ๊ฒฐ์ œ์ •๋ณด, ์ƒํƒœ๋ฅผ ๋ฐ›์•„์˜จ๋‹ค.


(6) payment ์ƒ์„ฑ ํ›„ import


(7) ๋น„ ์ •์ƒ์ ์ธ ๊ฒฐ์ œ์ผ ๊ฒฝ์šฐ
= ์ด๋ ‡๊ฒŒ ๊ฒฐ์ œ์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ์ €์žฅํ•˜๋Š” ๋‹จ๊ณ„๋ฅผ ๊ฑฐ์นœ ํ›„, ์ฃผ๋ฌธ document status ์ƒํƒœ๋กœ update ์‹œ์ผœ์ฃผ์–ด์•ผ ํ•œ๋‹ค.


(8) ์ฃผ๋ฌธ document status ์ƒํƒœ๋กœ update
= status ๊ฐ’์€ complete๋กœ ์ง€์ •ํ•ด์ฃผ๊ณ , status ๊ฐ’๊ณผ merchant_uid ๊ฐ’์„ update ์‹œ์ผœ์ค€๋‹ค.
๋‹ค ์™„๋ฃŒ๊ฐ€ ๋˜์—ˆ๋‹ค๋ฉด, order_id๋Š” merchant_uid ๊ฐ’์œผ๋กœ, message๋Š” success ๊ฐ’์œผ๋กœ return ์‹œํ‚จ๋‹ค.


(9) order update_one ( models > order.py )
= ์–ด๋–ค ์ฃผ๋ฌธ์ •๋ณด๋ฅผ update ํ•  ๊ฒƒ์ธ์ง€ ํ™•์ธ

payment.html ajax ๋‚ด๋ถ€์—์„œ ๊ฒฐ์ œ๊ฐ€ ์„ฑ๊ณต๋  ๊ฒฝ์šฐ ์š”์ฒญ ์‹œ ์ƒ์„ฑํ•œ API๋กœ ๋“ค์–ด์™€์„œ ๊ฒฐ์ œ ํ™•์ธ ๋ฐ ๊ฒฐ์ œ ์ •๋ณด๋ฅผ ์ €์žฅํ•˜๊ณ  ์ฃผ๋ฌธ์ƒํƒœ๋ฅผ update ํ•ด์ฃผ๊ฒŒ๋” ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ–ˆ๋‹ค ๐ŸŽ‰

๊ธฐ์กด API๋ฅผ ํ™œ์šฉํ•˜์—ฌ python ํ˜•์‹์— ๋งž๊ฒŒ ์ž‘์—…ํ•˜๋‹ค๋ณด๋‹ˆ ์‹œ๊ฐ„๋„ ๋ฐฐ๋กœ ๊ฑธ๋ฆฌ๊ณ  ๊ตฌ๋ฌธ์ด ์•„์ง ์ต์ˆ™์น˜ ์•Š๋‹ค.

์ด๋ฒˆ ์ž‘์—…์ด ๋งˆ๋ฌด๋ฆฌ๋˜๋ฉด, ์—ฌ๋Ÿฌ type์˜ ์‡ผํ•‘๋ชฐ๋„ ์ƒ์„ฑํ•˜๊ณ  ๊ฐ„๋‹จํ•˜์ง€๋งŒ ๋‹ค๋ฅธ ์กฐ๊ฑด๋ถ€๋“ค์„ ์ฃผ์–ด ์„ ํƒ์ง€๋ฅผ ๋‹ค์–‘ํ•˜๊ฒŒ ์ƒ์„ฑํ•ด ๋ณด๋ ค๋Š” ๊ณ„ํš์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค!

๋‹ค์Œ ์‹œ๊ฐ„์—๋Š” API๊ฐ€ ์„ฑ๊ณต์ด ๋˜๋ฉด ์ •๋ณด๋ฅผ ajax ๋‚ด๋ถ€ done data์— ์ „๋‹ฌํ•˜๋Š” ์ž‘์—…์„ ํ•ด ๋ณด๊ฒ ๋‹ค.

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

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