[TIL] 220406 - web api๋Š” ๋ฌด์—‡์ธ๊ฐ€!

2022. 4. 7. 00:37ใ†Today I Learned

๐Ÿซ€ 2022 04 06 ์ˆ˜ ๐Ÿซ€
โ˜‘๏ธ ๋ฆฌ๋ˆ…์Šค ๋ช…๋ น์–ด ๋‹ค์‹œ ์ •๋ฆฌ !!!!!
โ˜‘๏ธ ํ•ด์‹œ ๋‘ ๋ฌธ์ œ ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค
โ˜‘๏ธ javascript quick review - ๊ตฟ๋…ธํŠธ ์ •๋ฆฌ ๋‹ค์‹œ ๋ณด๊ธฐ (~events 1/2)

 

unfamiliar ≠ difficult


โœ”๏ธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊ณต๋ถ€ํ•˜๋ฉด์„œ web api๋ผ๋Š” ๊ฒƒ์ด ๊ถ๊ธˆํ•ด์กŒ๋‹ค.

๋Œ€๊ฐ• api๊ฐ€ ๋ญ”์ง€๋Š” ๊ฐ์œผ๋กœ๋งŒ ์•Œ๊ฒ ์–ด์„œ, ๋‹ค์‹œ ์ฐพ์•„๋ณด์•˜๋‹ค.

https://www.redhat.com/ko/topics/api/what-are-application-programming-interfaces

 

API(์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์ธํ„ฐํŽ˜์ด์Šค)๋ž€ - ๊ฐœ๋…, ๊ธฐ๋Šฅ, ์žฅ์ 

API(์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์ธํ„ฐํŽ˜์ด์Šค)๋ž€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์†Œํ”„ํŠธ์›จ์–ด์˜ ๊ฐœ๋ฐœ ๋ฐ ํ†ตํ•ฉ์— ์‚ฌ์šฉ๋˜๋Š” ์ •์˜ ๋ฐ ํ”„๋กœํ† ์ฝœ ์„ธํŠธ๋ฅผ ๋œปํ•˜๋ฉฐ, ๊ฐœ๋ฐœ ๋ฏผ์ฒฉ์„ฑ๊ณผ ๊ฐ„์†Œํ™”๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

www.redhat.com

๊ทธ๋Ÿฌ๋‹ˆ๊นŒ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ํŠน์ • ๊ธฐ๋Šฅ์ด๋‚˜ ๋ฐ์ดํ„ฐ์˜ ์ง‘ํ•ฉ์œผ๋กœ, ์‚ฌ์šฉ์ž๋Š” api๋ฅผ ํ†ตํ•ด ์ด๋“ค์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ณ ,

๋”ฐ๋ผ์„œ ๊ฐœ๋ฐœ์„ ๊ฐ„์†Œํ™”ํ•  ์ˆ˜ ์žˆ๊ณ  ์‹œ๊ฐ„๊ณผ ๋น„์šฉ์„ ์ ˆ์•ฝํ•  ์ˆ˜ ์žˆ๋‹ค.

๊ทธ๋Ÿผ web api๋Š”?

๋˜‘๊ฐ™์ด api์ธ๋ฐ ๊ทธ ์ค‘์—์„œ๋„ ์›น๊ณผ ๊ด€๋ จํ•œ api

์˜ˆ๋ฅผ ๋“ค์–ด twitter api๋ฅผ ๊ฐ€์ ธ์˜ค๋ฉด ํŠธ์œ„ํ„ฐ๊ฐ€ ์ œ๊ณตํ•˜๋Š” ๋ช‡๋ช‡ ๊ธฐ๋Šฅ๋“ค์„ ๋‚ด๊ฐ€ ๊ฐœ๋ฐœํ•˜๊ณ  ์žˆ๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ํ•ฉ์น  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ.

https://www.tutorialsteacher.com/webapi/what-is-web-api

 

What is Web API?

What is Web API? Before we understand what is Web API, let's see what is an API (Application Programing Interface). As per Wikipedia's Definition of API: In computer programming, an application programming interface (API) is a set of subroutine definitions

www.tutorialsteacher.com

 

โœ”๏ธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ html element ์†์„ฑ, ์ด๋ฒคํŠธ ํ™•์ธํ•˜๋Š” ๋ฒ•:

1. <html element ์ด๋ฆ„> html element mdn ๊ฒ€์ƒ‰

์„ ๊ฒ€์ƒ‰ํ•˜๋ฉด ๊ผญ ์˜†์— - Web APIs ๊ฐ€ ๋œจ๋Š” (๊ทธ๋ž˜์•ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ด€๋ จ) mdn ์‚ฌ์ดํŠธ์— ๋“ค์–ด๊ฐ€๋ฉด

javascript๊ฐ€ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•œ ๋ชจ๋“  ํ•ด๋‹น element์˜ ์†์„ฑ๋“ค๊ณผ event๊ฐ€ ๋‚˜์™€์žˆ๋‹ค.

2. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์— console.dir(element์ด๋ฆ„/๋ฐ˜ํ™˜๋œ๋ณ€์ˆ˜) ๋กœ element๋‚ด๋ถ€ ์†์„ฑ๋“ค์„ ์ „๋ถ€ ๋ณผ ์ˆ˜ ์žˆ์Œ (์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์˜ค๋ธŒ์ ํŠธ ํ˜•ํƒœ๋กœ)

๊ทธ ์†์„ฑ๋“ค ์ค‘์— on~ ์œผ๋กœ ์‹œ์ž‘ํ•˜๋Š” ์†์„ฑ๋“ค์€ ์ „๋ถ€ Event๋“ค์ด๋‹ค.