๐ Front End Developer ์ Back End ๋์ ๊ธฐ ! ๐
์ด ๊ธ์ PROJECT LION : ํธ์ฝ์น ๊ฐ์ฌ๋์ ๊ฐ์๋ฅผ ๋ค์ผ๋ฉฐ ์ฐธ๊ณ ํ ๊ธ์ ๋๋ค.
์์ ์ค, ๊ฐ๋ฐ๊ณผ์ ์ ๋ฆฌ ๋ฐ issue๊ฐ ๋์๋ ๋ถ๋ถ๋ค์ ๊ณต์ ๋ฐ ๊ธฐ๋กํ๊ณ ์ ์์ฑํ๊ฒ ๋์์ต๋๋ค.
โ ์ง๋ ์๊ฐ์๋ form์ ์์ฑํ๊ณ , ์์ฑํ form์ ๊ณ ์ id๊ฐ์ด ๋์ด์ค๋ ๊ฒ ๊น์ง ํ์ธ ํด ๋ณด์๋ค.
์ด๋ฒ์๊ฐ์๋, iamport๋ฅผ ํ์ฉํ์ฌ pg์ฌ๋ฅผ ์ฐ๋์์ผ ์ค์ ๊ธ์ก์ด ๋น ์ ธ๋๊ฐ๊ณ , ์ทจ์ํ์ ๋ ํ๋ถ์ฒ๋ฆฌ ๋๋ ๊ฒ ๊น์ง ๊ตฌํํด ๋ณด๋ ค๊ณ ํ๋ค.
๊ธฐ์กด์ ์ ๋ง ํด๋ณด๊ณ ์ถ์๋ ์์ ์ด๊ณ , ๊น๋ค๋ก์ด ์์๋ค๋ ๋ง์ง๋ง ์ฐจ๊ทผ์ฐจ๊ทผ ์์ ํด ๋ณด๊ฒ ๋ค!
- iamport script import
= library ์ฌ์ฉ์ ์ํด์๋ ์ง์ํ๊ณ ์๋ script file์ import ์ํจ ํ ์์ ์ ์์ํ๋ค.
{SDK-์ต์ ๋ฒ์ } ๋ถ๋ถ์ ํ์ฌ ์ต์ ๋ฒ์ ์ ๋ฌธ์์์ ์์นญํ์ฌ ํ๊ธฐํด ์ฃผ๋ฉด ๋๋ค.
= iamport.payment-1.1.8.js
- ๊ฒฐ์ ์ค๋น ์ฝ๋ ์์ฑ
= ๊ฐ๋งน์ ์๋ณ์ฝ๋๋ iamport ๊ด๋ฆฌ์์ฝ์ -> ์์ /๊ณ์ ๊ด๋ฆฌ -> ๋ด ์๋ณ์ฝ๋ Appkeys ์์ ํ์ธ๊ฐ๋ฅํ๋ค.
= ํ์ธํ ์๋ณ์ฝ๋๋ฅผ Imp.Init ๋ค ์๋ณ ์ฝ๋์ ๋ถ์ฌ๋ฃ์ด์ค๋ค.
- ๊ฒฐ์ ์์ฒญ ์ฝ๋ ์์ฑ
= ํด๋น ์ฝ๋๋ฅผ ์ ๋ ฅ ์ ์ ๋ณด๊ฐ ๊ธฐ์ ๋์ด ์๋ pg์ฌ ๊ฒฐ์ ์ฐฝ(์ด์ ์์ ์์ ๋ค๋ ๋ก ํ ์คํธpg์ฌ๋ฅผ ์ถ๊ฐํด ๋ )์ด ๋ํ๋ ๊ฒ์ด๊ณ , ์ค์ง์ ์ผ๋ก ๊ฒฐ์ ๊ฐ ๊ฐ๋ฅํ ๊ฒ์ด๋ค.
= ์ฐ์ ์์ ํ ๊ฒฐ๊ณผ ์ฝ๋์ธ๋ฐ, ํ๋์ฉ ์์ฐจ์ ์ผ๋ก ์ค๋ช ํด ๋ณด๊ฒ ๋ค.DOM์ด ๋ก๋ ๋ ํ, requestPay ํจ์๋ฅผ ํธ์ถ์์ผ ์ ์์ ์ผ๋ก pg์ฌ popup์ ๋์ฐ๋ฉด ์ฑ๊ณต์ด๋ค.
๊ทธ๋ ๊ฒ ๋์ผํ๋ค...์์๋๋ก๋ผ๋ฉด ๋ฌธ์ ์์ด PG์ฌ ๊ฒฐ์ ์ฐฝ์ด popup์ผ๋ก ๋ฐํ ๋ฐ ๊ฒฐ์ ์คํจ์ ๋ก์ง์ด ๋ ๋ฒ๋ ธ๋ค. ์ฆ, reqeustPay ํจ์๊ฐ ์ ์์ ์ผ๋ก ์คํ๋์ง ์๊ณ , else๋ก ํ๊ฒผ๋ค๋ ๊ฒ์ด๋ค ๐
์ฐ์ ๋ก์ง์ ๋ฐ๋ผ ์ฐจ๊ทผ์ฐจ๊ทผ ํ๋์ฉ ์ฝ์ด๋ณด์๋ค.
๊ตฌ๋ฌธ์ ๋ฌธ์ ๋ ์์ด๋ณด์๊ณ , ํจ์ ์์ ๋ด์ฉ๋ ํ๋์ฉ ์ดํด๋ณด์๋ค.
๊ตฌ๋ฌธ์ ๋ช๋ฒ์ด๊ณ ๋ค์ ์ฝ์ด๋ณด๊ณ , ์์นญ์ ํด๋ณด์๋ ๋ต์ด ์์๋๋ฐ, ํ๋ ์ด์ํ ์ ์ด ์์๋ค.๋๋ pg์ฌ๋ฅผ ๋ค๋ ๋ก ์ธํ ํ๋๋ฐ, ํ์ฌ ์ฝ๋ ์์ผ๋ก๋ inis๊ฐ ์ ๋ ฅ๋์๋ค(?)
= ์ด ๊ตฌ๋ฌธ์ danal_tpay๋ก ์ ๋ ฅํ๋ ๊ฒฐ์ ์ฐฝ์ด ์ ๋์จ๋ค ํํํ ^___^๋ณ๊ฑฐ ์๋๊ฑฐ ๊ฐ๋จ ๋๋์ด ๋ค์๊ณ ์์์ ํ๋๋ฐ ์ด ๋ฌธ์ ๋ก 40๋ถ์ด๋ ๋ฐฐ์์ ์๊ฐ์ด ํ๋ณด๋์๋ค ..๐ตโ๐ซ๐ตโ๐ซ
- ์ค ๋ฐ์ดํฐ ์ถ๊ฐ
= ์ค์ ๋ก ๊ฒฐ์ ๊ฐ ์งํ๋๋ pg ์ฌ ๊ฒฐ์ ์ฐฝ์ด ๋ํ๋ฌ๋ค.
์ ํpay๋ก ์ง์ ๊ฒฐ์ ํ ๋ํ๋๋ ํ๋ฉด๋ค์ ๊ตฌํํด ๋ณด๊ฒ ๋ค.
- ์ค๊ฒฐ์ ํ ์คํธ
= ์ ํpay๋ก ๊ฒฐ์ ํ ์ ์์ ์ผ๋ก ๊ฒฐ์ ๊ฐ ๋๋ค๋ฉด ๊ฒฐ์ ๋ฅผ ๊ธฐ๋ค๋ฆฌ๋ popup ์ฐฝ์ด ํ๋ ๋ํ๋๋ค. ์ฌ๊ธฐ์ ๊ฒฐ์ ๋ฅผ ํด๋ฆญํ๊ฒ ๋๋ค๋ฉด ์ค์ ๋์ด ๋น ์ง๊ฒ ๋๋ฉฐ, ์ ์์ ์ผ๋ก ๊ตฌ๋งค๊ฐ ์๋ฃ๋๋ค.๊ฒฐ์ ๋ด์ญ ํ์ธ ๋ถ๋ถ์์๋ ์๋จ, ๊ฐ์์, ๊ตฌ๋งค์ ๋ฐ ์ด๋ฉ์ผ, ์ํ๋ช , ์ํ๊ธ์ก, ๊ฒฐ์ ๊ธ์ก ๋ฑ์ด db์ ์ค์ data๊ฐ ์ ์์ ์ผ๋ก ์ถ๋ ฅ๋๊ณ ์๋ค.
= ๊ฒฐ์ ๋ฒํผ ํด๋ฆญ ์ console์ ์ฐํ ๊ฒฐ์ ์ฑ๊ณต text๊ฐ ์ถ๋ ฅ๋๋ค.
์์ง ๊ฒฐ์ ํ ์ดํ ๊ณผ์ ์ ์์ ํ์ง ์์๊ธฐ์ console ๋ง ๋จ๋๊ฒ์ด ์ ์์ด๋ค.
= ๊ทธ ํ, ์ํ์ ๊ธ์ก์ด ์ ์์ ์ผ๋ก ์ถ๊ธ๋๋ ๊ฒ์ด ํ์ธ๋๋ค.
- ๊ฒฐ์ ์น์ธ ๋ด์ญ ํ์ธ
= ์ฌ๋ฌ๋ฒ ํ ์คํธ๋ฅผ ํ์๋๋ฐ, ๋ฏธ๊ฒฐ์ ๋ด์ญ ๋ฐ ๊ตฌ๋งคํ ๋ด์ญ์ด ์ ์์ ์ผ๋ก ์ถ๋ ฅ๋๋ค.๐ ๋ง์ฝ, ๊ตฌ๋งค๊ฐ ์๋ฃ๋ ์ํ์ ํ๋งค์์ ์ฌ์ ์ผ๋ก ํ๋ถ์ฒ๋ฆฌ๋ฅผ ํ๊ฑฐ๋, ๊ตฌ๋งค์์ ์ฌ์ ์ผ๋ก ๊ตฌ๋งค๋ฅผ ์ทจ์ ํ ์๋ ์๋ค. ๊ทธ๋ฌ๋ฏ๋ก ํ์ฌ ๊ด๋ฆฌ์ ์ฝ์์์ ์ํ์ ์ทจ์ํ ์ ์ ์์ ์ผ๋ก ํ๋ถ์ฒ๋ฆฌ๊ฐ ๋๋ ๊ฒ๋ ํ์ธํ์๋ค.
๊ฒฐ์ ์ฑ๊ณต ์ ๊ฒฐ์ ์ ๋ณด์ ๋ฌ
= ๊ฒฐ์ ์์ฒญ์ด ๋๋ ํ ์๋ฃ๊ฐ ๋์์ ๋ flask์ ์ ๋ฌํด ์ฃผ์ด์ผ ํ๋ค.
= payment/complete ์ฃผ์ ๋ฐ post๋ฐฉ์์ผ๋ก ์ ๋ฌํด ์ฃผ์๋ค.
์ค์ง์ ์ผ๋ก ๊ตฌ๋งคํ ๊ธ์ก์ด ์ ์์ ์ผ๋ก ์ถ๊ธ๋๊ณ , ์ทจ์ํ ์ํ์ ๋ํด์ ์ฆ์ ํ๋ถ์ฒ๋ฆฌ ๋๋ ๋ก์ง์ ๊ตฌํํด ๋ณด์๋ค!
์ํํ๊ฒ ์์ ์ด ์งํ๋๋ฉด ์ข๊ฒ ์ง๋ง, ์ค๋ฅ๊ฐ ์๊ธฐ๊ณ ๊ทธ ์ค๋ฅ๋ฅผ ํด๊ฒฐํ๋ ๊ณผ์ ์ ์์ด์ ๋ ๋ง์ ๊ฒ๋ค์ ์ฐพ๊ฒ ๋๊ณ ๋ถ๊ฐ์ ์ผ๋ก ๋์ด ๋๋ ๊ฒ๋ค์ด ๋ ๋ง์ ๊ฒ ๊ฐ์๋ค. ๐๐
๋ค์ ์๊ฐ์๋ ๊ฒฐ์ ์ฑ๊ณต API๋ฅผ ์์ฑํด ๋ณด๊ฒ ๋ค.