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

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

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

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

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

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

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

1. ๊ฒฐ์ œ ์š”์ฒญ

โœ ์ง€๋‚œ ์‹œ๊ฐ„์—๋Š” form์„ ์ž‘์„ฑํ•˜๊ณ , ์ž‘์„ฑํ•œ form์˜ ๊ณ ์œ  id๊ฐ’์ด ๋„˜์–ด์˜ค๋Š” ๊ฒƒ ๊นŒ์ง€ ํ™•์ธ ํ•ด ๋ณด์•˜๋‹ค.

์ด๋ฒˆ์‹œ๊ฐ„์—๋Š”, iamport๋ฅผ ํ™œ์šฉํ•˜์—ฌ pg์‚ฌ๋ฅผ ์—ฐ๋™์‹œ์ผœ ์‹ค์ œ ๊ธˆ์•ก์ด ๋น ์ ธ๋‚˜๊ฐ€๊ณ , ์ทจ์†Œํ–ˆ์„ ๋•Œ ํ™˜๋ถˆ์ฒ˜๋ฆฌ ๋˜๋Š” ๊ฒƒ ๊นŒ์ง€ ๊ตฌํ˜„ํ•ด ๋ณด๋ ค๊ณ  ํ•œ๋‹ค.

๊ธฐ์กด์— ์ •๋ง ํ•ด๋ณด๊ณ  ์‹ถ์—ˆ๋˜ ์ž‘์—…์ด๊ณ , ๊นŒ๋‹ค๋กœ์šด ์š”์†Œ๋“ค๋„ ๋งŽ์ง€๋งŒ ์ฐจ๊ทผ์ฐจ๊ทผ ์ž‘์—… ํ•ด ๋ณด๊ฒ ๋‹ค!

  1. iamport script import
    = library ์‚ฌ์šฉ์„ ์œ„ํ•ด์„œ๋Š” ์ง€์›ํ•˜๊ณ  ์žˆ๋Š” script file์„ import ์‹œํ‚จ ํ›„ ์ž‘์—…์„ ์‹œ์ž‘ํ•œ๋‹ค.
    {SDK-์ตœ์‹ ๋ฒ„์ „} ๋ถ€๋ถ„์€ ํ˜„์žฌ ์ตœ์‹ ๋ฒ„์ „์„ ๋ฌธ์„œ์—์„œ ์„œ์นญํ•˜์—ฌ ํ‘œ๊ธฐํ•ด ์ฃผ๋ฉด ๋œ๋‹ค.
    = iamport.payment-1.1.8.js

  1. ๊ฒฐ์ œ ์ค€๋น„ ์ฝ”๋“œ ์ž‘์„ฑ
    = ๊ฐ€๋งน์  ์‹๋ณ„์ฝ”๋“œ๋Š” iamport ๊ด€๋ฆฌ์ž์ฝ˜์†” -> ์ƒ์ /๊ณ„์ •๊ด€๋ฆฌ -> ๋‚ด ์‹๋ณ„์ฝ”๋“œ Appkeys ์—์„œ ํ™•์ธ๊ฐ€๋Šฅํ•˜๋‹ค.
    = ํ™•์ธํ•œ ์‹๋ณ„์ฝ”๋“œ๋ฅผ Imp.Init ๋’ค ์‹๋ณ„ ์ฝ”๋“œ์— ๋ถ™์—ฌ๋„ฃ์–ด์ค€๋‹ค.

  1. ๊ฒฐ์ œ ์š”์ฒญ ์ฝ”๋“œ ์ž‘์„ฑ
    = ํ•ด๋‹น ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅ ์‹œ ์ •๋ณด๊ฐ€ ๊ธฐ์ž…๋˜์–ด ์žˆ๋Š” pg์‚ฌ ๊ฒฐ์ œ์ฐฝ(์ด์ „ ์ž‘์—…์—์„œ ๋‹ค๋‚  ๋กœ ํ…Œ์ŠคํŠธpg์‚ฌ๋ฅผ ์ถ”๊ฐ€ํ•ด ๋‘ )์ด ๋‚˜ํƒ€๋‚  ๊ฒƒ์ด๊ณ , ์‹ค์งˆ์ ์œผ๋กœ ๊ฒฐ์ œ๊ฐ€ ๊ฐ€๋Šฅํ•  ๊ฒƒ์ด๋‹ค.
    = ์šฐ์„  ์ž‘์—… ํ›„ ๊ฒฐ๊ณผ ์ฝ”๋“œ์ธ๋ฐ, ํ•˜๋‚˜์”ฉ ์ˆœ์ฐจ์ ์œผ๋กœ ์„ค๋ช…ํ•ด ๋ณด๊ฒ ๋‹ค.

DOM์ด ๋กœ๋“œ ๋œ ํ›„, requestPay ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœ์‹œ์ผœ ์ •์ƒ์ ์œผ๋กœ pg์‚ฌ popup์„ ๋„์šฐ๋ฉด ์„ฑ๊ณต์ด๋‹ค. ๊ทธ๋ ‡๊ฒŒ ๋˜์•ผํ•œ๋‹ค...

์˜ˆ์ƒ๋Œ€๋กœ๋ผ๋ฉด ๋ฌธ์ œ์—†์ด PG์‚ฌ ๊ฒฐ์ œ์ฐฝ์ด popup์œผ๋กœ ๋œฐํ…๋ฐ ๊ฒฐ์ œ ์‹คํŒจ์‹œ ๋กœ์ง์ด ๋– ๋ฒ„๋ ธ๋‹ค. ์ฆ‰, reqeustPay ํ•จ์ˆ˜๊ฐ€ ์ •์ƒ์ ์œผ๋กœ ์‹คํ–‰๋˜์ง€ ์•Š๊ณ , else๋กœ ํŠ•๊ฒผ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค ๐Ÿ˜‚

์šฐ์„  ๋กœ์ง์„ ๋”ฐ๋ผ ์ฐจ๊ทผ์ฐจ๊ทผ ํ•˜๋‚˜์”ฉ ์ฝ์–ด๋ณด์•˜๋‹ค.

๊ตฌ๋ฌธ์ƒ ๋ฌธ์ œ๋Š” ์—†์–ด๋ณด์˜€๊ณ , ํ•จ์ˆ˜ ์•ˆ์˜ ๋‚ด์šฉ๋„ ํ•˜๋‚˜์”ฉ ์‚ดํŽด๋ณด์•˜๋‹ค.
๊ตฌ๋ฌธ์„ ๋ช‡๋ฒˆ์ด๊ณ  ๋‹ค์‹œ ์ฝ์–ด๋ณด๊ณ , ์„œ์นญ์„ ํ•ด๋ณด์•„๋„ ๋‹ต์ด ์—†์—ˆ๋Š”๋ฐ, ํ•˜๋‚˜ ์ด์ƒํ•œ ์ ์ด ์žˆ์—ˆ๋‹ค.

๋‚˜๋Š” pg์‚ฌ๋ฅผ ๋‹ค๋‚ ๋กœ ์„ธํŒ…ํ–ˆ๋Š”๋ฐ, ํ˜„์žฌ ์ฝ”๋“œ ์ƒ์œผ๋กœ๋Š” inis๊ฐ€ ์ž…๋ ฅ๋˜์žˆ๋‹ค(?)
= ์ด ๊ตฌ๋ฌธ์„ danal_tpay๋กœ ์ž…๋ ฅํ•˜๋‹ˆ ๊ฒฐ์ œ์ฐฝ์ด ์ž˜ ๋‚˜์˜จ๋‹ค ํ•˜ํ•˜ํ•˜ ^___^

๋ณ„๊ฑฐ ์•„๋‹๊ฑฐ ๊ฐ™๋‹จ ๋Š๋‚Œ์ด ๋“ค์—ˆ๊ณ  ์˜ˆ์ƒ์€ ํ–ˆ๋Š”๋ฐ ์ด ๋ฌธ์ œ๋กœ 40๋ถ„์ด๋‚˜ ๋ฐฐ์›€์˜ ์‹œ๊ฐ„์ด ํ™•๋ณด๋˜์—ˆ๋‹ค ..๐Ÿ˜ตโ€๐Ÿ’ซ๐Ÿ˜ตโ€๐Ÿ’ซ


  1. ์‹ค ๋ฐ์ดํ„ฐ ์ถ”๊ฐ€
    = ์‹ค์ œ๋กœ ๊ฒฐ์ œ๊ฐ€ ์ง„ํ–‰๋˜๋Š” pg ์‚ฌ ๊ฒฐ์ œ์ฐฝ์ด ๋‚˜ํƒ€๋‚ฌ๋‹ค.
    ์‹ ํ•œpay๋กœ ์ง์ ‘ ๊ฒฐ์ œ ํ›„ ๋‚˜ํƒ€๋‚˜๋Š” ํ™”๋ฉด๋“ค์„ ๊ตฌํ˜„ํ•ด ๋ณด๊ฒ ๋‹ค.

  1. ์‹ค๊ฒฐ์ œํ…Œ์ŠคํŠธ
    = ์‹ ํ•œpay๋กœ ๊ฒฐ์ œ ํ›„ ์ •์ƒ์ ์œผ๋กœ ๊ฒฐ์ œ๊ฐ€ ๋œ๋‹ค๋ฉด ๊ฒฐ์ œ๋ฅผ ๊ธฐ๋‹ค๋ฆฌ๋Š” popup ์ฐฝ์ด ํ•˜๋‚˜ ๋‚˜ํƒ€๋‚œ๋‹ค. ์—ฌ๊ธฐ์„œ ๊ฒฐ์ œ๋ฅผ ํด๋ฆญํ•˜๊ฒŒ ๋œ๋‹ค๋ฉด ์‹ค์ œ ๋ˆ์ด ๋น ์ง€๊ฒŒ ๋˜๋ฉฐ, ์ •์ƒ์ ์œผ๋กœ ๊ตฌ๋งค๊ฐ€ ์™„๋ฃŒ๋œ๋‹ค.

๊ฒฐ์ œ๋‚ด์—ญ ํ™•์ธ ๋ถ€๋ถ„์—์„œ๋Š” ์ˆ˜๋‹จ, ๊ฐœ์›”์ˆ˜, ๊ตฌ๋งค์ž ๋ฐ ์ด๋ฉ”์ผ, ์ƒํ’ˆ๋ช…, ์ƒํ’ˆ๊ธˆ์•ก, ๊ฒฐ์ œ๊ธˆ์•ก ๋“ฑ์ด db์˜ ์‹ค์ œ data๊ฐ€ ์ •์ƒ์ ์œผ๋กœ ์ถœ๋ ฅ๋˜๊ณ  ์žˆ๋‹ค.
= ๊ฒฐ์ œ ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ console์— ์ฐํžŒ ๊ฒฐ์ œ ์„ฑ๊ณต text๊ฐ€ ์ถœ๋ ฅ๋œ๋‹ค.
์•„์ง ๊ฒฐ์ œ ํ›„ ์ดํ›„ ๊ณผ์ •์„ ์ž‘์—…ํ•˜์ง€ ์•Š์•˜๊ธฐ์— console ๋งŒ ๋œจ๋Š”๊ฒƒ์ด ์ •์ƒ์ด๋‹ค.
= ๊ทธ ํ›„, ์ƒํ’ˆ์˜ ๊ธˆ์•ก์ด ์ •์ƒ์ ์œผ๋กœ ์ถœ๊ธˆ๋˜๋Š” ๊ฒƒ์ด ํ™•์ธ๋œ๋‹ค.


  1. ๊ฒฐ์ œ ์Šน์ธ ๋‚ด์—ญ ํ™•์ธ
    = ์—ฌ๋Ÿฌ๋ฒˆ ํ…Œ์ŠคํŠธ๋ฅผ ํ•˜์˜€๋Š”๋ฐ, ๋ฏธ๊ฒฐ์ œ ๋‚ด์—ญ ๋ฐ ๊ตฌ๋งคํ•œ ๋‚ด์—ญ์ด ์ •์ƒ์ ์œผ๋กœ ์ถœ๋ ฅ๋œ๋‹ค.

๐Ÿ”– ๋งŒ์•ฝ, ๊ตฌ๋งค๊ฐ€ ์™„๋ฃŒ๋œ ์ƒํ’ˆ์„ ํŒ๋งค์ž์˜ ์‚ฌ์ •์œผ๋กœ ํ™˜๋ถˆ์ฒ˜๋ฆฌ๋ฅผ ํ•˜๊ฑฐ๋‚˜, ๊ตฌ๋งค์ž์˜ ์‚ฌ์ •์œผ๋กœ ๊ตฌ๋งค๋ฅผ ์ทจ์†Œ ํ•  ์ˆ˜๋„ ์žˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฏ€๋กœ ํ˜„์žฌ ๊ด€๋ฆฌ์ž ์ฝ˜์†”์—์„œ ์ƒํ’ˆ์„ ์ทจ์†Œํ•  ์‹œ ์ •์ƒ์ ์œผ๋กœ ํ™˜๋ถˆ์ฒ˜๋ฆฌ๊ฐ€ ๋˜๋Š” ๊ฒƒ๋„ ํ™•์ธํ•˜์˜€๋‹ค.


  1. ๊ฒฐ์ œ ์„ฑ๊ณต ์‹œ ๊ฒฐ์ œ์ •๋ณด์ „๋‹ฌ
    = ๊ฒฐ์ œ ์š”์ฒญ์ด ๋๋‚œ ํ›„ ์™„๋ฃŒ๊ฐ€ ๋˜์—ˆ์„ ๋•Œ flask์— ์ „๋‹ฌํ•ด ์ฃผ์–ด์•ผ ํ•œ๋‹ค.

    = payment/complete ์ฃผ์†Œ ๋ฐ post๋ฐฉ์‹์œผ๋กœ ์ „๋‹ฌํ•ด ์ฃผ์—ˆ๋‹ค.

์‹ค์งˆ์ ์œผ๋กœ ๊ตฌ๋งคํ•œ ๊ธˆ์•ก์ด ์ •์ƒ์ ์œผ๋กœ ์ถœ๊ธˆ๋˜๊ณ , ์ทจ์†Œํ•œ ์ƒํ’ˆ์— ๋Œ€ํ•ด์„œ ์ฆ‰์‹œ ํ™˜๋ถˆ์ฒ˜๋ฆฌ ๋˜๋Š” ๋กœ์ง์„ ๊ตฌํ˜„ํ•ด ๋ณด์•˜๋‹ค!

์ˆœํƒ„ํ•˜๊ฒŒ ์ž‘์—…์ด ์ง„ํ–‰๋˜๋ฉด ์ข‹๊ฒ ์ง€๋งŒ, ์˜ค๋ฅ˜๊ฐ€ ์ƒ๊ธฐ๊ณ  ๊ทธ ์˜ค๋ฅ˜๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๊ณผ์ •์— ์žˆ์–ด์„œ ๋” ๋งŽ์€ ๊ฒƒ๋“ค์„ ์ฐพ๊ฒŒ ๋˜๊ณ  ๋ถ€๊ฐ€์ ์œผ๋กœ ๋“์ด ๋˜๋Š” ๊ฒƒ๋“ค์ด ๋” ๋งŽ์€ ๊ฒƒ ๊ฐ™์•˜๋‹ค. ๐Ÿ˜Ž๐ŸŽ‰

๋‹ค์Œ ์‹œ๊ฐ„์—๋Š” ๊ฒฐ์ œ ์„ฑ๊ณต API๋ฅผ ์ž‘์„ฑํ•ด ๋ณด๊ฒ ๋‹ค.

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

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