2022 Web Development Bootcamp

Section 33: Using Third-Party APIs / Services - Adding Payments Via Stripe

olivia_yj 2022. 10. 6. 21:45

The goals

๐Ÿ’ช๐ŸปWhat are "Services" & "APIs"?

โœŒ๐ŸปIntroducing Stripe For Handling Payments

๐Ÿ‘๐ŸปUsing Stripe In Our Online Shop

 

What are Services & APIs?

Services are just that: Services you can use in your projects / websites

- Packages like Axios or Express

- Google Maps API

- Google Analytics

- Stripe Payments

 

Expose "Actions" or "Endpoints" you can access from inside your code

=> API (Application Programming Interface)

An API is the bridge between our code and the code / actions provided by some service.

 

Why Services / APIs?

As a (Web) developer, you can't build all features on your own

Use paid or free third-party services / APIs to add certain features to your app

Or: Build a service / API that can be consumed by others

 

 

 

 

์ถ”๊ฐ€ ์„œ๋น„์Šค: ์†Œ์…œ ๋กœ๊ทธ์ธ(๊ตฌ๊ธ€, ํŽ˜์ด์Šค๋ถ), ๊ตฌ๊ธ€ ์• ๋„๋ฆฌํ‹ฑ์Šค ๋“ฑ [93์ผ์ฐจ]

์ด ๋ชจ๋“ˆ์˜ ์‹œ์ž‘ ๋ถ€๋ถ„์—์„œ ์–ธ๊ธ‰ํ–ˆ๋“ฏ์ด ์›น์‚ฌ์ดํŠธ์— ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋Š” ์„œ๋น„์Šค์™€ ํŒจํ‚ค์ง€๊ฐ€ ๋งŽ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

์–ธ์ œ ์„œ๋น„์Šค๊ฐ€ ํ•„์š”ํ•œ์ง€(๊ทธ๋ฆฌ๊ณ  ์–ด๋–ค ์„œ๋น„์Šค๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š”์ง€) ์–ด๋–ป๊ฒŒ ์•Œ ์ˆ˜ ์žˆ์„๊นŒ์š”?

์ผ๋ฐ˜์ ์œผ๋กœ ํŠน์ • ๋ฌธ์ œ์—์„œ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.- ์˜ˆ์‹œ: "์ œ ์›น์‚ฌ์ดํŠธ์— ์ง€๋„๋ฅผ ํ‘œ์‹œํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค."

๊ทธ๋Ÿฐ ๋‹ค์Œ ๋‹ค์Œ ๋‹จ๊ณ„๋กœ "์›น ๊ฐœ๋ฐœ ์›น์‚ฌ์ดํŠธ์—์„œ ์ง€๋„ ํ‘œ์‹œ"์™€ ๊ฐ™์€ ๊ฒƒ์„ ๊ฒ€์ƒ‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ์—์„œ ๋„์›€์ด ๋  ์ˆ˜ ์žˆ๋Š” ์„œ๋น„์Šค ์›น์‚ฌ์ดํŠธ ๋˜๋Š” ํ”ผํŒ… ์„œ๋น„์Šค๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋Š” ๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๋ฌผ/ํฌ๋Ÿผ ํ† ๋ก ์„ ์ฐพ์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ผ๋ฐ˜์ ์ธ ๋ฌธ์ œ์™€ ์„œ๋น„์Šค๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

โ— ์‚ฌ์šฉ์ž์—๊ฒŒ ์ด๋ฉ”์ผ์„ ๋ณด๋‚ด๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค => ์†”๋ฃจ์…˜: Mailchimp์™€ ๊ฐ™์€ ์„œ๋น„์Šค๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค(๋‹ค๋ฅธ ์„œ๋น„์Šค๋„ ๋งŽ์ด ์žˆ์Šต๋‹ˆ๋‹ค!). "send email api"์™€ ๊ฐ™์€ ๊ฒƒ์„ ๊ฒ€์ƒ‰ํ•˜๋ฉด ํŠธ๋ฆญ์„ ์ˆ˜ํ–‰ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

โ— ์‚ฌ์šฉ์ž๊ฐ€ ๊ตฌ๊ธ€/ํŽ˜์ด์Šค๋ถ/์• ํ”Œ ๋“ฑ์„ ํ†ตํ•ด ๋กœ๊ทธ์ธํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค(์˜ˆ: "์†Œ์…œ ๋กœ๊ทธ์ธ") => ์†”๋ฃจ์…˜: "website add facebook login"๊ณผ ๊ฐ™์€ ํ•ญ๋ชฉ์„ ๊ฒ€์ƒ‰ํ•ฉ๋‹ˆ๋‹ค. => ๊ณต์‹ ๋ฌธ์„œ ์ค‘์—์„œ ๋‹ค์–‘ํ•œ ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ์–ด์š”. ํŽ˜์ด์Šค๋ถ ์ œ๊ณต ํŽ˜์ด์ง€: https://developers.facebook.com/docs/facebook-login/

โ— ์ œ ์›น์‚ฌ์ดํŠธ์— ์ง€๋„๋ฅผ ํ‘œ์‹œํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค => ์œ„ ์ฐธ์กฐ => ๋‹ค๋ฅธ ์ œ๊ณต(์˜ˆ: OpenStreetMap)๋„ ์žˆ์ง€๋งŒ ๊ตฌ๊ธ€ ๋งต API/์„œ๋น„์Šค ๋ฌธ์„œ๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

โ— ์ œ ์›น์‚ฌ์ดํŠธ์— ์• ๋„๋ฆฌ์Šคํ‹ฑ์„ ์ถ”๊ฐ€ํ•ด์„œ ์‚ฌ์šฉ์ž๊ฐ€ ์–ด๋””์—์„œ ์™”๋Š”์ง€ ๋“ฑ์„ ํ™•์ธํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. => ์†”๋ฃจ์…˜: "website add analytics"์™€ ๊ฐ™์€ ๊ฒ€์ƒ‰ => ๊ตฌ๊ธ€ ์• ๋„๋ฆฌ์Šคํ‹ฑ ์›น์‚ฌ์ดํŠธ ๋ฐ ๋ฌธ์„œ ์ค‘์—์„œ ๋‹ค์–‘ํ•œ ๊ฒฐ๊ณผ๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฌผ๋ก  ๊ฐ€๋Šฅํ•œ ์‹œ๋‚˜๋ฆฌ์˜ค, ๋ฌธ์ œ์™€ ์„œ๋น„์Šค๋Š” ๋ฌดํ•œํ•˜์ง€๋งŒ ์›น ๊ฒ€์ƒ‰์€ ์—ฌ๋Ÿฌ๋ถ„์˜ ์นœ๊ตฌ์ž…๋‹ˆ๋‹ค!

์„œ๋น„์Šค ์‚ฌ์šฉ๊ณผ ๊ด€๋ จํ•˜์—ฌ ์„œ๋น„์Šค๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์„ค๋ช…๋˜์–ด ์žˆ๋Š” ํ•ด๋‹น ๋ฌธ์„œ์— ์„œ๋น„์Šค์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ํ•ญ์ƒ ์ž์„ธํžˆ ์‚ดํŽด๋ณด์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ข…์ข… ๊ณต์‹ ๋ฌธ์„œ ํŽ˜์ด์ง€์—๋„ ์œ ์šฉํ•œ ์˜ˆ์ œ๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.