๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ“ŒDevelopment/JavaScript

[JS] UI vs API & ๋งˆ๋ฌด๋ฆฌ

by geumsong 2023. 3. 6.

*UI
:  User Interface
:   ์‚ฌ์šฉ์ž๊ฐ€ ์‹œ์Šคํ…œ์„ ์ œ์–ดํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ์กฐ์ž‘์žฅ์น˜


*API
:  Application Programmming Interface

:  ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค๊ธฐ์œ„ํ•ด ํ”„๋กœ๊ทธ๋ž˜๋ฐํ• ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์กฐ์ž‘์žฅ์น˜ (ex.alert) 
:  ๋ชจ๋“  ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์— ๊ณตํ†ต์ ์œผ๋กœ ์ ์šฉ๋จ. ๋ชจ๋“  ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๋“ค์€ API๋ฅผ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ชฝ์œผ๋กœ, ์ˆœ์„œ๋Œ€๋กœ ์‹คํ–‰ํ•˜๋Š” ๊ฒƒ์„ ํ†ตํ•ด ๋งŒ๋“ค์–ด์ง„๋‹ค.API์™€ ์ˆœ์„œ๋Š” ๋—„๋ ˆ์•ผ ๋—„ ์ˆ˜ ์—†๋Š” ๊ด€๊ณ„.
:  java script๋กœ api๋ฅผ ์‘์šฉํ•ด์„œ ํ”„๋กœ๊ทธ๋žจ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค.

 


JS๋ฅผ ๋งˆ๋ฌด๋ฆฌํ•˜๋ฉฐ

 

 

๊ณต๋ถ€ ๋ณด๋‹จ ์‹ค์Šต์„ ์ถ”์ฒœํ•œ๋‹ค.

์‹ค์Šต๋ณด๋‹ค๋Š” ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•˜๋Š”๊ฒƒ์ด ์ข‹๋‹ค.

๊ณต๋ถ€๋ฅผ ๋งŽ์ด ํ•  ์ˆ˜๋ก ๋จธ๋ฆฌ๊ฐ€ ๋ณต์žกํ•ด์ง€๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

 

 

์ž์‹ ์˜ ํ”„๋กœ์ ํŠธ ์‹œ์ž‘ํ•  ๋•Œ, ๋ชจ๋“  ๊ฐœ๋…์„ ์ด๋™์› ํ•˜๋ ค๊ณ  ํ•˜์ง€ ๋ง์•„๋ผ.

์ตœ์†Œํ•œ์˜ ๋„๊ตฌ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

์—ฌ๊ธฐ์„œ ์ตœ์†Œํ•œ์˜ ๋„๊ตฌ๋Š” ์ˆœ์„œ์— ๋”ฐ๋ผ ์‹คํ–‰๋˜์–ด์•ผ ํ•˜๋Š” ๋ช…๋ น๋“ค์ด ์‹คํ–‰๋˜๋„๋ก ํ•˜๋Š”๊ฒƒ. 

๊ฐ์ฒด, ํ•จ์ˆ˜, ์กฐ๊ฑด๋ฌธ, ๋ฐ˜๋ณต๋ฌธ๋„ ํ•„์š”x. ์ˆœ์„œ๋Œ€๋กœ ์‹คํ–‰๋œ๋‹ค๋Š” ๊ฒƒ๋งŒ์œผ๋กœ๋„ ํ”„๋กœ๊ทธ๋žจ์€ ์ถฉ๋ถ„ํžˆ ํ˜๋ช…์ ์ด๋‹ค.

 

 

์ตœ์†Œํ•œ์œผ๋กœ ํ˜„์‹ค์˜ ๋ฌธ์ œ ํ•ด๊ฒฐํ•˜๋‹ค๋ณด๋ฉด ๋„์ €ํžˆ ํ•ด๊ฒฐํ•  ์ˆ˜์—†๋Š” ์ˆœ๊ฐ„์ด ์˜ค๊ฒŒ๋œ๋‹ค.
๊ทธ๋•Œ ๊ฐ์ฒด, ํ•จ์ˆ˜,์กฐ๊ฑด๋ฌธ,๋ฐ˜๋ณต๋ฌธ์„ ์‹ ์ค‘ํ•˜๊ฒŒ ๋„์ž…ํ•˜๋ฉด์„œ ๊ฐ๊ฐ์˜ ๊ฐœ๋…๋“ค์— ์ต์ˆ™ํ•ด์ง€๊ฒŒ ๋œ๋‹ค.
๋˜ ํ•œ๊ณ„๊ฐ€ ์ฐพ์•„์˜ค๋ฉด, ์‹ค์Šต์„ ๋ฉˆ์ถ”๊ณ  ๋‹ค์‹œ ๊ณต๋ถ€๋ฅผ ์‹œ์ž‘ํ•ด์•ผํ•œ๋‹ค.



์•ž์œผ๋กœ ๋ถ€๋”ชํžˆ๊ฒŒ ๋ ๋งŒํ•œ ํ•œ๊ณ„, ๊ฒ€์ƒ‰์–ด ์ถ”์ฒœ์„ ๋์œผ๋กœ ๋งˆ๋ฌด๋ฆฌํ•  ๊ฒƒ์ด๋‹ค.

 

 

document -ํŽ˜์ด์ง€ ํƒœ๊ทธ ์‚ญ์ œ, ์–ด๋–ค ํƒœ๊ทธ์˜ ์ž์‹ํƒœ๊ทธ๋ฅผ ์‚ญ์ œ. ์šฐ๋ฆฌ๊ฐ€ ํ•„์š”ํ•œ ๋ฉ”์†Œ๋“œ๊ฐ€ ํฌํ•จ๋˜์–ด์žˆ์„๊ฒƒ์ด๋‹ค.
DOM(Document Object Model)๊ฐ์ฒด -document์—์„œ ์ฐพ์•˜๋Š”๋ฐ๋„ ๋ชป์ฐผ์•˜๋‹ค๋ฉด DOM์œผ๋กœ ์ˆ˜์ƒ‰๋ฒ”์œ„ ๋Š˜๋ ค๋ผ.
window -์›น๋ธŒ๋ผ์šฐ์ € ์ž์ฒด๋ฅผ ์ œ์–ด.
-ํ˜„์žฌ ์—ด๋ ค์žˆ๋Š” ์›นํŽ˜์ด์ง€์˜ ์ฃผ์†Œ๊ฐ€ ๋ญ”์ง€ ์•Œ์•„๋‚ด์•ผ ํ•  ์ˆ˜๋„ ์žˆ๊ณ , ์ƒˆ ์ฐฝ์„ ์—ด์–ด์•ผ ํ•  ์ˆ˜๋„ ์žˆ๊ณ , ์›น๋ธŒ๋ผ์šฐ์ €์˜ ํ™”๋ฉด ํฌ๊ธฐ๋ฅผ java script๋ฅผ ํ†ตํ•ด ์•Œ์•„์•ผํ•œ๋‹ค๋ฉดwindow๊ฐ์ฒด์— ์†ํ•ด์žˆ๋Š” ๊ฒƒ๋“ค์ด ๋„์›€์„ ์ค„ ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค.
ajax -์›นํŽ˜์ด์ง€๊ฐ€ ๋ฆฌ๋กœ๋“œํ•˜์ง€ ์•Š๊ณ  ์ •๋ณด๋ฅผ ๋ณ€๊ฒฝ
-ํ˜„๋Œ€์ ์ธ ์›น์•ฑ์„ ๋งŒ๋“œ๋Š” ๋ฐ ํ•„์ˆ˜.
cookie๋ฐฐ์šฐ๊ธฐ -์›นํŽ˜์ด์ง€๊ฐ€ ๋ฆฌ๋กœ๋“œ๋˜์–ด๋„ ํ˜„์žฌ์ƒํƒœ๋กœ ์œ ์ง€
-์‚ฌ์šฉ์ž๋ฅผ ์œ„ํ•œ ๊ฐœ์ธํ™”๋œ ์„œ๋น„์Šค๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋‹ค.
offline web application ์ธํ„ฐ๋„ท์ด ๋Š๊ฒจ๋„ ๋™์ž‘
webRTC. ํ™”์ƒํ†ต์‹  ์›น์•ฑ
speech๋กœ ์‹œ์ž‘ํ•˜๋Š” API์ฐพ์•„๋ณด๊ธฐ ์‚ฌ์šฉ์ž์˜ ์Œ์„ฑ์ธ์‹, ์Œ์„ฑ์œผ๋กœ ์ •๋ณด์ „๋‹ฌ
webGL  3์ฐจ์› ๊ทธ๋ž˜ํ”ฝ์œผ๋กœ ๊ฒŒ์ž„๋งŒ๋“ค๊ธฐ




์ด์ œ๋Š” ์šฐ๋ฆฌ๊ฐ€ ํ•ด๋ณด์ž. 

728x90

์ตœ๊ทผ๋Œ“๊ธ€

์ตœ๊ทผ๊ธ€

skin by ยฉ 2024 ttutta