[생활코딩] JavaScript 문법 - UI /API/문서 보는법. 나만의 쉬운정리

자바스크립트의 교양 수업. 나름 쉽게 이해되도록 정리를 했다. 이렇게 생각해보자.

API 와 UI 의 'I'는 'interface'를 말하는데 이것은 '사용 방법' 이라고 해석하면 이해가 더 잘 될 것이다. 개발자들은 Java, JavaScript, Python 등의 언어를 사용한다. 그리고 이 언어안에는 우리가 배웠던 alert, Math, push 등의 명령어가 내장되어있다.

우리는 이것을 사용해서 'web' 같은 'application'을 개발'programming'한다. 그래서 application + programming + interface. API를 사용한다는 것은 '각각의 명령어를 사용한다'고 생각하면 편할 것 같다.

UI는 쉽다. 이미 만들어져있는 것들로 사용자 입장에서는 그냥 버튼 같은 것을 누르면 사용이 가능한 것.  

---

UI / API / 문서 보는법

자바스크립트를 스스로 프로그래밍을 하는 핵심은 자신이 원하는 명령어 API를 찾아내는 것이다.

API란?

• 'Application Programming Interface'의 약자
• 프로그램이 동작하는 환경을 제어하기 위해서 그 환경에서 제공되는 조작 장치이다.
• 이 조작 장치는 프로그래밍 언어를 통해서 조작할 수 있다 = 프로그래밍 언어에 내장된 명령어를 뜻함.
• 사용자가 사용하는 인터페이스와 구분하기 위해 / 웹브라우저라고 하는 기반이 되는 시스템이 / 우리에게 제공한 alert 같은 / 인터페이스이다.
• 프로그래머는 자신에 제어하고자 하는 환경(웹 브라우저, Node.js, Google Apps Script 등)을 / 그 환경이 제공하는 조작장치인 각각의 API를 통해서 소프트웨어를 제어한다.
• 우리가 제어하고자 하는 환경이 제공하는 API가 무엇이고, 어떤 특성이있고, 어떻게 사용하는가를 알아야한다.
• 자신이 필요한 것을 주체적으로 찾아낼 수 있는 능력을 기르는 것이 핵심이다. (검색을 많이하라는 뜻)

E.G.)▼

기계어를 기반으로 어셈블리어를 만듬 => 어셈블리어를 기반으로 C, C++을 만듬 => C, C++을 기반으로 운영체제를 만듬 => 운영체제를 기반으로 웹 브라우저를 만듬 => 웹 브라우저를 기반으로 웹 개발어를 만듬 => 사용자가 씀

역삼각형▼ 계층화를 생각해보자.

사용자 => 일반인 컴퓨터 사용자들. 블로그 버튼 같은 UI를 통해서 시스템을 제어함

웹 개발자 => 생활코딩에서 웹 개발을 배우고 있는 우리들로, 밑에 처럼 만들어진 alert을 호출해서 이리저리 조합

웹 브라우저 개발자 => alert를 실행하면 경고창이 뜨는데 이 경고창의 디테일(X, 박스 위치, 아이콘 등)은 이들이 만든 것

운영체제

C, C++

어셈블리어(assembly language)

기계어(2진법 0101010101...)

• 학문으로 따지자면 전산공학(소프트웨어)⊂전자공학⊂전기공학⊂물리학 이런식
• 밑으로 내려갈수록 더 적은 사람들이 종사하고 있게 되는 것이다. 
• 브라우저가 운영체제에 대해서 응용 프로그램(application)이 되는 것이다.
• 계층적인 관계의 위에층과 아래층 사이의 접점이 되는 부분을 '인터페이스(interface)'라고 부른다.
• 운영체제(IE, Chrome, safari 등)는 웹 브라우저에 대한 일종의 플랫폼이 되는 것이다.
• 개발자는 API라는 것을 이용해서 웹브라우저와 같은 플랫폼을 제어한다. 
• 아래층에 있는 계층들이 윗 계층에게 동작하게 하는 인프라를 제공하는 것이다.
• 위에 있는 것은 아래층에 있는 것들을 응용해서 사용하는 Application이 되는 것이다.
• 앱 프로그래밍을 만든다하면 우리가 사용할 인터페이스는 API가 된다.
• 프로그래밍 언어를 사용해서 만든 웹은 application이 된다.

UI란?

• 'User Interface'의 약자.
• 사용자를 대면하는 접점이 되는 지점.
• 노트북에 있는 전원버튼(물리적인 기계 조작 장치가 있는 하드웨어적인 UI).
• 핸드폰에 있는 홈버튼, 전원버튼.
• 블로그에 있는 메뉴 버튼 같은 것들은 소프트웨어 적으로 구현된 것.
• 사용자의 의중을 시스템에게 전달하고 시스템의 상태를 사용자에게 보여준다.

레퍼런스(사전)와 튜토리얼(문법 안내서=수업, 책)

• 튜토리얼을 통해서 '그 환경이 어떠한 기능을 제공하는 가'를 공부해야한다.
• 그 지식을 기반으로 해서 그 환경이 제공하는 명령들을 우리가 찾아야 한다.
• 레퍼런스라고 하는 카테고리로 분류되는 형태의 정보들이 그런 역할을 한다. API사전.
• 우리가 보고있는 수업과 서점에서 판매되고 있는 책들은 튜토리얼(안내서)이다. 

자바스크립트의 API

• 웹 브라우저 / Node.js / Google Apps Script 에는 각각의 API 가 있다.
• 자바스크립트 API에는 날짜 알아내기,  Math 라는 것을 통해서 수학적인 계산을 하는 API 등이 있다.
• 프로그래밍 언어를 배움에 있어서 우리의 목표는 이것을 공부하고 익숙해지는 것이다.
• 그 다음, 우리는 자신이 제어하고자 하는 대상이 무엇이냐에 따라, 호스트 환경 API를 공부하고 익혀야 한다.
• 호스트 환경을 제어할 수 있도록 제공해주는 조작 장치가 호스트 환경 API이다.
• LiveScript = JavaScript. 이름이 바뀐것 
• ECMAscirpt가 자바스크립트에 새로운 기능을 추가하거나 없앤다. 자바스크립트가 동작하는 환경을 만드는 브라우저 개발자들을 위한 문서를 찾아볼 수 있다. 하지만 이것은 고수들의 영역이다. 

자바스크립트의 API (JS가 기본적으로 제공. 내장되어있음)

• ECMAScript (표준문서)
• 자바스크립트 사전 (생활코딩)
• 자바스크립트 레퍼런스 (MDN)
• jscript 레퍼런스 (MSDN)

호스트 환경의 API 문서

• 웹브라우저 API
• Node.js API
• Google Apps Script API

---

JAVASCRIPT 기본 문법 시리즈

[생활코딩] JavaScript 기본문법 정리 (숫자와 문자, 변수, 주석, 줄바꿈과 여백, 비교)

[생활코딩] JavaScript 기본문법 정리 (숫자와 문자, 변수, 주석, 줄바꿈과 여백, 비교)

[생활코딩] JavaScript 문법 - 조건문

[생활코딩] JavaScript 문법 - 조건문

[생활코딩] JavaScript 문법 - 반복문

[생활코딩] JavaScript 문법 - 반복문

[생활코딩] JavaScript 문법 - 함수

[생활코딩] JavaScript 문법 - 함수

[생활코딩] JavaScript 문법 - 배열

[생활코딩] JavaScript 문법 - 배열

[생활코딩] JavaScript 문법 - 객체

[생활코딩] JavaScript 문법 - 모듈