Web/Javascript

[Javascript] 라이브러리와 프레임워크, 제이쿼리, UI, API

kimbangul 2020. 5. 16. 04:57

라이브러리와 프레임워크

 

라이브러리: 무엇인가 정리정돈돼 있는 곳. 내가 만들고자 하는 프로그램에 필요한 부품들이 되는 소프트웨어들을 잘 정리정돈해놓은, 재사용하기 쉽게 돼 있는 소프트웨어

 

프레임워크: 우리가 만들고자 하는 것이 있을 때 그것이 무엇이냐에 따라(게임이냐 웹 사이트나 채팅 프로그램이냐에 따라) 언제나 필요한 공통적인 것이 있고, 기획 의도에 따라 달라지는 부분이 있음. 그 중에 공통적인 부분은 프레임워크로 만들어 놓고, 만들고자 하는 기능이나 특성에 따라 달라지는 부분만 살짝살짝 수정하는 방법으로 거의 반제품과 같은 것

 

jQuery: 자바스크립트 라이브러리 중에서 가장 유명한 것. 제이쿼리 라이브러리를 내려받아 내려받은 파일을 프로젝트 디렉터리로

 

cdn: content delivery network의 약자, 직접 라이브러리를 내려받아 프로젝트에 포함시키고 업로드해서 서비스하면 돈이 들기 때문에 많은 라이브러리들이 cdn을 통해 자신들의 서버에 파일을 보관해 놓고, 사용자는 <script> 태그의 src 속성을 통해 가져가는 방식을 취하고 있음.

ex) 구글 cdn 제이쿼리

 

1. jQuery 라이브러리 불러오기

  <head>

    <title>김방울 - 방울위키</title>

    <meta charset="utf-8">

    <link rel="stylesheet" href="style.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script src="color.js"></script>

 

제이쿼리를 이용하면 반복문을 쓰지 않아도 한줄 짜리 코드로 같은 일을 할 수 있음.

 

 

2. jQuery를 이용해 기존 코드 수정

var Links = {

  setColor: function(color){

    $('a').css('color',color);

  }

}

 

ctrl + /을 입력하면 주석을 만들어 줌.

$('a')는 이 웹 페이지에 있는 <a> 태그를 jQuery로 제어하겠다는 뜻. css("color", "red");와 같은 식으로 지정하면 됨.

제이쿼리는 새로운 언어가 아니고, 자바스크립트를 통해 우리 대신 css() 라는 함수를 제이쿼리가 만들어 둔 것.

 

 

 

UI vs API

 

1. 버튼을 누르면 나오는 경고창

<input type="button" value="click me" onclick="alert('hello world')" />

 

이 버튼은 웹앱을 이용하는 사용자가 이런 버튼과 같은 조작장치를 이용해 웹 애플리케이션을 사용하고 있는 것. 사용자가 시스템을 제어하기 위해 사용하는 조작장치를 UI라고 함.

한 줄 짜리 코드에는 경고창의 모양이나 기능이 일절 설명되어 있지 않음. 이것은 웹 브라우저를 만든 사람들이 우리 대신 경고창의 기능을 미리 만들어 놓았다가 우리가 alert()를 실행하면 경고창을 띄워주겠다고 자바스크립트의 사용 설명서를 통해 약속한 것.

alert() 함수는 경고창을 실행하는 조작장치.

 

우리가 애플리케이션을 만들기 위해 프로그래밍할 때 사용하는 조작장치를 애플리케이션 프로그래밍 인터페이스(API) 라고 함. alert() 같은 것.

프로그래머가 되기 전까지 우리는 UI만 사용했으나 자바스크립트로 api를 결합하여 사용할 수 있게 됨.

 

 

 

어떤 웹 페이지의 태그를 삭제하고 싶거나 어떤 태그의 자식 태그를 추가하고 싶다면 > 'document' 객체

만약 document 객체에도 포함되어 있지 않다면 'dom' 객체. document 객체는 dom 객체의 일부이기 때문

웹 페이지가 아니라 웹 브라우저 자체를 제어해야 한다면 window 객체( 현재 열려있는 웹 페이지의 주소가 무엇인지 알아내거나, 새 창을 열어야 하거나, 웹 브라우저의 화면 크기를 자바스크립트를 통해 알아야 할 때)

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

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

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

화상 통신 웹 앱 webRTC

사용자의 음성을 인식하고 음성으로 정보를 전달하고 싶다면 speech로 시작하는 API 살펴보기

3차원 그래픽으로 게임을 만들고 싶다면 webGL

가상현실에 관심이 있다면 WebVR

 

 

www.evernote.com/l/AlckmasLkyNMiaxCthdHDBspwZHnA1BlObU/

 

라이브러리와 프레임워크, 제이쿼리, UI, API

라이브러리와 프레임워크 라이브러리: 무엇인가 정리정돈돼 있는 곳. 내가 만들고자 하는 프로그램에 필요한 부품들이 되는 소프트웨어들을 잘 정리정돈해놓은, 재사용하기 쉽게 돼 있는 소프�

www.evernote.com