36. UI vs API

UI : user Interface

API : Application Programming Interface

이런 버튼 처럼 사용자가 시스템을 제어하기 위해서 사용하는 조작장치를 UI라고 부름

<input type="button" value="Click" onclick="alert('Hello world')">

반면  이런 코드는? 우리가 만들기도 했지만 우리가 전부 만든건 또 아님. 우리가 일부 만든건 맞지만 웹 브라우저를 만든 사람들이 경고창 기능을 미리 만들어 두었다가 우리가 alert함수를 실행시키면 경고창을 호출해 주겠다고 약속해 준것.

함수 alert은 경고창을 실행하는 조작장치인 것. 이 조작장치는 일반인이 사용하지는 않음.

 

버튼을 클릭하면 경고창이 뜨는 애플리케이션이 웹브라우저가 가지고 있는 경고창 기능을 alert이라고 하는 javaScript의 문법에 따라서 문법의 코드를 이용해서 사용하고 있는 것.

이렇게 애플리케이션을 만들기 위해서 프로그래밍 할 때 사용하는 조작 장치들을 Application Programming Interface, API라고 부름.

 

여기 예제에서는 alert이 API

 

이건 자바스크립트만 있는게 아니라 모든 프로그래밍 언어에 적용됨. 모든 애플리케이션들은 API를 프로그래밍적(순서대로 실행하는 것)을 통해 만들어짐. API가 없다면 순서가 소용이 없고, 순서가 없으면 API도 소용이 없음.

 

지금까지는 UI만을 사용하는 유저였지만 이제는 API를 사용하는 프로그래머가 될 차례.

---

이제는 내 프로젝트를 시작할 때.

헤헤...

공부를 많이 할 수록 내 코드를 긍정하기 어려워짐...

 

내 프로젝트를 시작할 때 모든 개념을 총동원하려 하지 마라. 최소한의 도구를 가지고 기릿.

최소한의 도구는? 순서에 따라 실행되어야 하는 명령이 실행되게 하는 것.

객체, 함수, 조건문, 반복문? 노필요. 순서대로 실행되는 것이 최고!

 

그러다보면 그것만으로 더이상 안될때! 그럴 때 반복문, 조건문, 함수, 객체들을 차례차례 도입하면서 개념을 충분히 익히고 다시 즐겁게 실습. 그러다 막히면? 다시 공부할 때.

 

어떤 공부를 해야 할끼?

그것은 검색

중요한 키워드

 

웹페이지에 있는 어떤 태그 삭제 or 자식태그 추가

- document 객체 자세히 보기. 내가 필요한 메소드가 이 안에 있을 것.

 

만약 여기도 없다면 DOM(Document Object Model)객체에서 찾아보기.

*document객체는 DOM의 일부

 

웹페이지가 아니라 웹브라우저를 제어해야 한다면

-window객체 조사(ex.현재 열려있는 웹페이지 주소 알아내기, 새 창 열기, 웹브라우저 화면크기를 자바스크립트로 알아내기)

 

웹페이지를 리로드하지 않고 정보를 변경하고 싶다면

-ajax. 현대적인 웹앱을 만드는데 필수적인 테크닉.

 

웹페이지가 리로드되어도 현재 상태를 유지하고 싶다면

-cooki. 사용자를 위한 개안화된 서비스 제공 가능

 

인터넷이 끊겨도 동작하는 웹페이지를 만들고 싶다면

-offine web application. 

 

화상통신 웹 앱 만들기

-webRTC

 

사용자 음성 인식하고 음성으로 정보 전달

-speech로 시작하는 API 찾아보기

 

3차원 그래픽으로 게임같은 것 만들기

-webGL

 

가상현실

-webVR

 

GOOD LUCK!