JavaScript는 html을 제어하며, 사용자와 상호작용하는 언어이다.
웹브라우저는 한 번 출력되면 자기 자신을 바꿀 수 없다. 하지만 JS를 활용하면 변화를 줄 수 있게 된다.
script 태그
html 문서에 JS 코드를 작성하면 웹브라우저에게 JS 코드가 시작된다는 것을 알려줘야 한다. 이 역할을 하는 것이 script 태그이다.
script 태그 안에는 JS 코드가 작성되도록 약속되어 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
document.write(1+1); /* JS 코드 */
</script>
<h1>1+1</h1>
</body>
</html>아래 코드의 결과는 완전히 다르다.
document.write(1+1);
<h1>1+1</h1>
JS는 동적이기 때문에 1+1의 연산결과를 출력한다.
input tag
input 태그로 사용자와 상호작용하는 버튼, 텍스트 필드, 체크박스 등을 만들 수 있다.
input 태그의 속성 type에 어떤 속성값을 부여하느냐에 따라 여러가지를 만들 수 있다.
input tag - button
type의 속성값을 button으로 설정하면 사용자가 누를 수 있는 버튼이 만들어진다.
<input type="button" value="hi">
value 속성은 input 태그 요소의 초깃값을 명시한다. type의 속성값에 따라 다른 용도로 사용되는데 button의 경우 버튼 내에 출력되는 텍스트이다.
input tag - text
type의 속성값을 text로 설정하면 사용자가 입력할 수 있는 텍스트 필드가 만들어진다.
<input type="text" value="hi">
event
위에서 작성한 코드만으로는 사용자와 상호작용할 수 없다.
사용자가 버튼을 클릭하거나 텍스트 필드에 입력하는 등 웹브라우저 위에서 일어나는 사건을 뜻하는 것이 event이다.
웹브라우저는 event를 감지하고 이를 통해 사용자와 상호작용이 가능해진다.
event - onclick, onchange, onkeydown,...
사용자가 마우스를 통해 클릭 -> click event라고 하는데 이 event를 활용하면 사용자가 버튼을 클릭했을 때 데이터를 받거나 경고창을 뜨게 하거나 여러가지 상호작용을 할 수 있게 된다.
<input type="button" value="hi" onclick="alert('click!')">위 코드는 사용자가 버튼을 클릭하면 click!이라는 경고창을 뜨게 한다.
onclick event가 발생하면 onclick의 속성값이 실행되는 구조이다.
onclick의 속성값으로는 반드시 JS가 와야 한다.
onclick event 말고도 많은 event가 존재한다.
<input type="text" onchange="alert('changed')">위 코드는 텍스트 필드에 입력된 값이 변경되면 changed라는 경고창을 뜨게 한다.
<input type="text" onkeydown="alert('key down')">위 코드는 사용자가 키보드의 키를 눌렀을 때 key down이라는 경고창을 뜨게 한다. 다만 키보드의 키를 눌러 텍스트가 입력되기 전에 경고창이 먼저 뜨고 텍스트가 입력된다.
웹페이지에서 검사 활용
웹페이지에서 우클릭 -> 검사 -> console에서 JS 코드를 작성하고 실행해 볼 수 있다.
우클릭을 해서 검사를 연 웹페이지를 대상으로 실행되며 페이스북 게시물에 댓글을 작성한 사람들을 무작위로 추첨하는 등 여러가지에 활용할 수 있다.
variable 변수
변수를 선언하고 값을 할당할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var x = 2;
var y = 3;
document.write(x+y);
</script>
</body>
</html>웹페이지에는 x+y의 연산 결과인 5가 출력된다.
document.querySelector(selectors)
버튼을 클릭했을 때 body 태그의 style 속성을 변경하려고 한다.
웹브라우저에게 body 태그를 선택하도록 해야 하는데 이때 document.querySelector(selectors)가 등장한다.
매개변수로 css의 선택자를 이용한다.
element = document.querySelector(selectors);아래 코드는 모든 태그 중 클래스명이 myclass이고 처음으로 등장하는 태그를 변수 el에 반환한다. 일치하는 요소가 없으면 null을 반환한다.
var el = document.querySelector(".myclass");선택자에 해당하는 첫번째 등장 태그만 반환하기 때문에 선택자에 해당하는 모든 태그를 가져올 때는 querySelectorAll()을 사용한다. 이는 나중에 설명한다.
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
">
<input type="button" value="day" onclick="
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
">night 클릭
day 클릭
HTML vs JavaScript
HTML은 시간의 순서에 따라 실행되는 기능을 가지고 있지 않고 단순 페이지 묘사를 위해 사용한다. 프로그래밍 언어라고 하지 않는다.
JavaScript는 사용자와 상호작용, 시간의 순서에 따라 웹브라우저의 여러 기능이 실행되어야 하기 때문에 프로그래밍 언어이다.
Toggle
Toggle이란 스위치 같은 개념으로 불이 켜지고 꺼지는 2가지 상태만 있는 상황에서 누르면 값이 변하고 또 누르면 다른 값으로 변하는 것이다.
== vs ===
조건문을 배우면서 === 비교 연산자를 처음으로 접했다. 지금까지 배운 언어에서는 모두 == 비교 연산자를 사용했는데 어떤 차이점이 있는지 찾아봤다.
== : Equal Operator
=== : Strict Equal Operator
a == b : a와 b의 값만 같으면 true, 다르면 false
a === b : a와 b의 값과 자료형까지 같으면 true, 다르면 false
콘솔에서 얻은 결과는 다음과 같다.
조건문
조건문을 사용하면 2개의 버튼을 toggle로 만들어서 night, day 변환이 가능해진다.
<input id="night_day" type="button" value="night" onclick="
if(document.querySelector('#night_day').value === 'night'){
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
document.querySelector('#night_day').value = 'day';
} else {
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
document.querySelector('#night_day').value = 'night';
}
">클릭을 한 시점에서 button의 value가 night이면 night 모드로 전환되고 value를 day로 바꿔줘야 한다.
반대로 클릭을 한 시점에서 button의 value가 day이면 day 모드로 전환되고 value를 night로 바꿔줘야 한다.
night 클릭
day 클릭
Refactoring(리팩토링)
리팩토링이란 외부 동작은 그대로 두고 코드를 효율적으로 개선해서 가독성을 높이고 중복을 없애는 방법이다. 한마디로 내부 구조를 개선하는 것이다.
리팩토링의 필요성은 항상 학교 과제나 프로젝트를 하면서 절실히 깨닫는다. 제출한 과제 코드를 다시 보면 한숨이 나오고 수정도 쉽지 않을 정도로 처참한 구조에다 읽기 쉽지 않음을 항상 느낀다... 그만큼 리팩토링이 정말 중요하면서도 어려운 것 같다.
Refactoring을 통한 코드 개선
<input type="button" value="night" onclick="
var target = document.querySelector('body');
if(this.value === 'night'){
target.style.backgroundColor='black';
target.style.color='white';
this.value = 'day';
} else {
target.style.backgroundColor='white';
target.style.color='black';
this.value = 'night';
}
">반복적으로 등장하는 document.querySelector('body')를 변수 target에 담아 사용한다.
document.querySelector('#night_day')는 input 태그, 자기자신이다. onclick event가 속해있는 태그 자신이므로 this로 변경이 가능하다.
document.querySelectorAll(selectors)
document.querySelector(selectors)는 선택자에 해당하는 첫번째 등장 태그만 반환하기 때문에 선택자에 해당하는 모든 태그를 가져올 때는 querySelectorAll()을 사용한다.
배열에 모든 a 태그 담기
웹페이지 내에 있는 모든 a 태그를 선택하고 해당 태그의 폰트색을 변경하려고 한다.
querySelectorAll('a')를 사용해 모든 a 태그를 배열에 담으면 된다.
var links = document.querySelectorAll('a');위 코드의 결과는 아래와 같다. 웹페이지 내에 있는 a 태그 5개가 links 변수에 담긴다.
반복문을 사용해 배열에 담긴 a 태그의 폰트색 변경
반복문을 사용해 links 배열에 담긴 모든 a 태그의 폰트색을 변경한다. for문을 사용해도 되고 while문을 사용해도 된다.
while문
var i = 0;
while(i < links.length) {
links[i].style.color = 'powderblue';
i++;
}for문
var i;
for(i = 0; i < links.length; i++) {
links[i].style.color = 'powderblue';
}결과는 아래와 같다. night 모드는 powderblue, day 모드는 blue로 a 태그의 폰트색을 변경한 결과이다.
Refactoring을 위한 함수 생성
지금까지는 input 태그의 onclick 속성에 JS를 작성하는 방법이었다.
이제부터는 가독성을 높이고 유지보수를 용이하게 하기 위해서 nightDayHandler 함수를 작성하는 방법을 사용한다.
<script>
function nightDayHandler(self){
var target = document.querySelector('body');
var links = document.querySelectorAll('a');
if(self.value === 'night'){
target.style.backgroundColor='black';
target.style.color='white';
self.value = 'day';
var i = 0;
while(i < links.length){
links[i].style.color = 'powderblue';
i++;
}
} else {
target.style.backgroundColor='white';
target.style.color='black';
self.value = 'night';
var i = 0;
while(i < links.length){
links[i].style.color = 'blue';
i++;
}
}
}
</script>
<input type="button" value="night" onclick="
nightDayHandler(this);
">nightDayHandler 함수로 분리하게 되면 바깥쪽의 this를 참조하기 위해 self를 사용한다.
onclick 속성에 직접 JS를 작성하던 방법에서는 this가 input 태그 자기자신이었지만 이제는 함수를 사용하기 때문에 인자값으로 this를 사용해 input 태그를 self에 넘겨주면 된다.
만약 1억 개의 button이 존재하고 각 button의 onclick 속성에 JS를 작성하면 수정사항이 생겼을 때 1억 개의 button을 모두 수정해야 한다. 하지만 함수를 만들어 사용하면 button에 적용된 함수를 찾아 한 번만 고치면 일괄적으로 1억 개의 button에 적용된다.
또 1억 개의 button에 같은 로직이 적용되었다는 것을 함수명을 보고 한 눈에 확인할 수 있게 된다.
Refactoring을 위한 함수 안에서의 중복 제거
<script>
function nightDayHandler(self){
var target = document.querySelector('body');
var links = document.querySelectorAll('a');
if(self.value === 'night'){
target.style.backgroundColor='black';
target.style.color='white';
self.value = 'day';
var i = 0;
while(i < links.length){
links[i].style.color = 'powderblue';
i++;
}
} else {
target.style.backgroundColor='white';
target.style.color='black';
self.value = 'night';
var i = 0;
while(i < links.length){
links[i].style.color = 'blue';
i++;
}
}
}
</script>위 코드에서 중복을 찾아보자.
target.style.backgroundColor='white';
target.style.color='black';
self.value = 'night';
var i = 0;
while(i < links.length){
links[i].style.color = 'blue';
i++;
}위와 같은 로직이 if, else 안에서 중복되고 있다. 또 코드의 각 줄이 어떤 역할인 지 명확하지 않다. target, links가 어떤 태그를 담고 있는지, 만약 코드가 1억 줄이고 복잡한 웹페이지라면 파악하기 쉽지 않을 것이다. 따라서 코드의 각 줄이 하는 역할이 무엇인지 함수명을 통해 나타내준다.
function setBodyBackgroundColor(color){
document.querySelector('body').style.backgroundColor = color;
}
function setBodyColor(color){
document.querySelector('body').style.color = color;
}위 함수를 작성해 아래처럼 수정한다.
target.style.backgroundColor='black'; -> setBodyBackgroundColor('black');
target.style.color='white'; -> setBodyColor('white');function setLinksColor(color){
var links = document.querySelectorAll('a');
var i = 0;
while(i < links.length){
links[i].style.color = color;
i++;
}
}위 함수를 사용하면 아래처럼 한 줄의 코드로 모든 a 태그의 폰트색을 변경할 수 있게 된다.
setLinksColor('blue');새로 작성한 함수를 사용하면 nightDayHandler 함수는 아래처럼 바뀐다.
function nightDayHandler(self) {
if (self.value === 'night') {
setBodyBackgroundColor('black');
setBodyColor('white');
self.value = 'day';
setLinksColor('powderblue');
} else {
setBodyBackgroundColor('white');
setBodyColor('black');
self.value = 'night';
setLinksColor('blue');
}
}객체
클래스와 객체, 학교에서의 java 수업에서 귀 아프게 들었던 개념들이다. 하지만 java와 javascript는 전혀 다른 언어이기 때문에 정말 다르다. 개념적으로는 익숙해서 이해하기는 쉬웠다.
객체 생성
var coworkers = {
"programmer":"usagi",
"designer":"rei"
};객체를 생성할 때는 중괄호를 사용한다. 객체는 배열과는 달리 순서없이 정보를 저장한다.
Property
객체의 property는 key와 value로 구성되어 있다.
coworkers 객체의 예에서 key는 "programmer", value는 "usagi"이다.
Property 접근
만약 coworkers의 특정 property key의 value를 알고 싶다면 아래와 같은 방법을 사용한다.
document.write("programmer : " + coworkers.programmer + "<br>");
document.write("designer : " + coworkers.designer + "<br>");
Property 추가
coworkers.bookkeeper = "ami";
coworkers["data scientist"] = "kino";공백이 있는 경우 []를 사용하면 된다.
Iterate (for-in문)
coworkers의 모든 property를 출력하고 싶을 때는 for-in을 사용한다.
for(var key in coworkers){
document.write(key + " : " + coworkers[key] + "<br>");
}
Method
property value가 함수일 때, 일반적인 함수와 구분하기 위해서 Method라 부른다. 한 객체에 제한되어 있는 함수이다.
coworkers.showAll = function() {
for(var key in this) {
document.write(key + " : " + this[key] + "<br>");
}
}
coworkers.showAll();this를 써서 property에 접근할 수 있다.
method가 같이 출력되는 이유는 method도 coworkers의 property value이기 때문이다.
생성자 함수
생활코딩에서는 다루지 않았지만 java에서 객체를 생성할 때 생성자를 이용하는 것처럼 javascript에서도 생성자를 작성하는 방법을 공부했다.
Person p1 = new Person("usagi", 14);
Person p2 = new Person("ami", 14);위 코드는 java에서 Person 객체를 생성하는 코드이다. javascript도 비슷한 방식이다.
function Person(name, age) {
this.name = name;
this.age = age;
this.showInfo = function() {
document.write("Name : " + this.name + " / Age : " + this.age + "<br>");
};
}
var p1 = new Person("usagi", 14);
var p2 = new Person("ami", 14);
p1.showInfo();
p2.showInfo();위 코드에서 this는 생성자 함수가 생성할 instance를 가리킨다.
생성자 함수의 접근제어자
생성자 함수로 생성한 객체의 property와 method의 접근제어자를 알아보자.
document.write("Name : " + p1.name + " / Age : " + p1.age + "<br>");
document.write(p1.showInfo);
위 코드의 결과로 this에 바인딩되어 있는 property와 method는 외부에서 참조 가능한 public이다.
만약 생성자 함수에 선언된 일반 변수가 있다면 접근제어자는 어떻게 될까?
function Person(name, age) {
var HP = 100;
this.name = name;
this.age = age;
this.showInfo = function() {
document.write("Name : " + this.name + " / Age : " + this.age + "<br>");
};
}
var p1 = new Person("usagi", 14);
document.write("HP : " + p1.hp);아래 결과처럼 일반 변수는 외부에서 참조 불가능한 private이다.
this로 바인딩되어 있는 property, method : public
생성자 함수에 선언된 일반 변수 : private
Java, JavaScript의 생성자 차이점
Java에서의 (constructor)생성자와 JavaScript의 생성자는 다르다. JS의 생성자 함수는 말 그대로 객체를 생성하는 함수이다. 형식이 정해져 있지 않고 일반 함수와 똑같다.
일반 함수에 new를 붙여 호출하면 생성자 함수와 동일하게 동작한다. 혼란을 막기 위해 보통 생성자 함수명은 대문자로 시작한다.
Refactoring을 위한 객체 생성
위에서 배운 객체를 지금까지 작성한 코드에 적용해보겠다.
var Body = {
setColor: function(color){
document.querySelector('body').style.color = color;
},
setBackgroundColor: function(color){
document.querySelector('body').style.backgroundColor = color;
}
}
var Links = {
setColor: function(color){
var links = document.querySelectorAll('a');
var i = 0;
while(i < links.length){
links[i].style.color = color;
i++;
}
}
function nightDayHandler(self){
if(self.value === 'night'){
Body.setBackgroundColor('black');
Body.setColor('white');
self.value = 'day';
Links.setColor('powderblue');
} else {
Body.setBackgroundColor('white');
Body.setColor('black');
self.value = 'night';
Links.setColor('blue');
}
}코드 각 줄의 역할을 더 명확하게 나타내는 것을 확인할 수 있다.
JavaScript 분리
지금까지는 html 안 script 태그에 JS 코드를 작성했다면 js 파일을 만들어 JS 코드를 분리한다.
colors.js 파일을 생성하고 script 태그를 제외한 JS 코드를 모두 붙여넣기 해준다.
js 파일 연결
js 파일을 연결하기 위해서는 아래 코드 1줄만 있으면 된다.
<head>
<script src="colors.js"></script>
</head>JavaScript 코드 분리의 이점
CSS에서의 이점과 같다. js 파일을 컴퓨터에 저장해서 네트워크를 통하지 않게 해 웹페이지를 열 때마다 js 파일을 계속 다운받지 않아도 된다.
서버 비용 절감, 트래픽 절감의 효과가 있으며 빠르게 웹페이지를 표시할 수 있게 된다.
라이브러리와 프레임워크
라이브러리란 내가 만들고자 하는 프로그램에 필요한 부품이 되는 소프트웨어를 정리정돈 해놓은, 재사용하기 쉽도록 되어있는 소프트웨어이다.
프레임워크란 만들고자 하는 것이 무엇이냐에 따라 언제나 필요한 공통적인 것은 프레임워크가 만들어 놓는다. 반제품과 같은 것이다.
집을 만든다고 하면
라이브러리는 자재와 가구 등 집에 필요한 재료.
프레임워크는 이미 집의 수도처리나 뼈대같은 기본적인 구조들이 있어서 입맛대로 꾸미기만 하면 된다.
jQuery
jQuery는 JS의 대표적인 라이브러리이다. jQuery를 사용하면 생산성이 높아진다. 그러나 JS의 기본 개념과 지식을 가지고 있어야 jQuery를 잘 사용할 수 있다. 무턱대고 jQuery를 쓸 게 아니라 JS의 기본을 잘 익히는 것이 먼저이다.
Google의 jQuery 라이브러리 가져오기
jQuery를 사용하기 위해 구글에서 제공하는 jQuery 라이브러리를 사용할 것이다.
https://jquery.com/ 에 접속해 Download 페이지로 들어간다.
아래로 스크롤하다 보면 아래 사진처럼 Other CDNs를 찾을 수 있다.
Google CDN으로 들어가면 나오는 코드를 html에 추가하기만 하면 된다.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>jQuery로 코드 수정하기
jQuery를 사용하면 반복문을 쓰지 않아도 된다.
지금까지 웹페이지의 모든 a 태그 폰트색을 바꾸기 위해 배열에 담고 반복문을 돌렸다면 이제는 단 한 줄만으로 모든 a 태그의 폰트색을 바꿀 수 있다.
$라는 이름의 함수를 사용하는 것이다.
기본 구조는 다음과 같다.
$(제어대상).method1().method2();아래 코드는 "이 웹페이지의 모든 a 태그를 jQuery로 제어하겠다."를 뜻한다.
$('a')우리는 css의 style 속성과 속성값을 변경시켜야 하므로 아래 구조를 사용한다.
$(제어대상).css("속성", "속성값"); 위 구조를 사용하면
var Links = {
setColor: function (color) {
$('a').css('color', color);
}
}코드의 양이 획기적으로 줄었다. 복잡하게 반복문을 작성할 필요없이 단 1줄로 모든 a 태그의 폰트색을 바꿀 수 있게 된 것이다. 진짜 놀랍다..
var Body = {
setColor: function (color) {
$('body').css('color', color);
},
setBackgroundColor: function (color) {
$('body').css('backgroundColor', color);
}
}Body 객체의 method에도 jQuery를 적용해준다.
UI
UI란 User Interface로 사용자가 시스템을 제어하기 위해서 사용하는 조작 장치, 버튼이다.
API
API란 Application Programming Interface로 한 프로그램에서 다른 프로그램으로 데이터를 주고받기 위한 방법이다. 이렇게만 들으면 이해가 잘 안 되는데 유튜브에서 도움을 받은 영상이 있다.
https://www.youtube.com/watch?v=ckSdPNKM2pY
API는 메뉴판으로 사용자가 메뉴판에서 A를 골라 규칙대로 요청한다.
실제 네이버가 만들어둔 웹툰 API 예시는 아래와 같다.
(GET 요청) comic.naver.com/webtoon/detail?titled=318995
(GET 요청) : 요청 방식, method
comic.naver.com/webtoon/detail : 어떤 자료를 요청하는지, endpoint
titled=318995 : 요청에 필요한 추가정보, 아이디 정보나 이름 등
사용자도 원하는 웹툰을 요청하는 코드를 작성해야 한다. 코드 작성 방법을 모르는 사람도 사실은 매일 요청 코드를 작성하고 있다.
바로 주소창이 API 요청 코드를 작성하는 곳이다. 하지만 웹툰을 보려고 주소창에 직접 입력하지 않듯이 웹툰 페이지에서 이미지나 텍스트를 클릭하면 자동으로 API를 요청하고 웹툰을 볼 수 있게 되는 것이다.
라이브러리와 프레임워크를 더 깊게
위 2개의 개념이 헷갈려서 확실히 해두기 위해 따로 공부했다.
라이브러리
단순히 말하자면 클래스 정의의 모음집이라고 할 수 있다. 잘 정의된 특정 작업을 수행한다. 다른 사람이 전에 작성해놓은 코드를 가져다 쓰기 때문에 라이브러리의 목적은 코드 재사용이다.
예를 들어 자바에서 제곱근을 구할 때 java.lang 패키지에 포함되어 있는 Math 클래스의 sqrt 함수를 사용한다.
Math.sqrt(4);sqrt라는 함수를 내가 직접 구현하지 않고 누군가가 정의해놓은 sqrt 함수를 가져다 쓰는 것이다.
Java에서는 자주 사용되고 유용한 기능을 하는 클래스들을 분류해 패키지로 묶어 관리하는데 이 패키지 파일을 라이브러리라고 한다.
직접 알고리즘을 구현할 필요없이 그냥 클래스 안 함수만 호출해서 쓸 수 있게 해주는 것이 라이브러리의 역할인 것이다.
프레임워크
프레임워크는 뼈대, 틀이다.
자동차 제작 프레임워크를 사용해서 SUV 자동차를 만들려고 한다. 사용하려고 하는 프레임워크에는 이미 SUV 뼈대가 만들어져 있다.
뼈대가 이미 있으니 나는 핸들을 붙이고 바퀴를 붙이는 등 꾸미는 일에만 집중하면 된다.
또 뼈대를 보면 바퀴가 들어갈 자리가 4개인 것을 바로 알 수 있듯이 이미 규칙, 표준이 정해져있다. 따라서 바퀴를 3개로 만든다는 등 틀에서 벗어나는 일은 할 수 없다.
프레임워크는 많은 라이브러리를 포함하고 있어서 제작을 쉽게 만들어준다.
SUV 자동차 제작 중 바퀴를 만들 자신이 없으면 다른 사람이 만들어놓은 SUV용 울트라 바퀴를 가져다 장착하기만 하면 된다.
여기서 다른 사람이 만들어놓은 SUV용 울트라 바퀴가 바로 라이브러리이다.
라이브러리와 프레임워크의 차이점
라이브러리와 프레임워크의 차이점은 바로 Inversion of Control이다. 제어의 역전?이라고 하면 감이 잘 오지 않는다.
라이브러리의 함수를 호출해서 사용하는 내가 흐름을 주도한다. 내 주도 아래에서 필요한 함수를 가져다 사용하는 것이다.
하지만 프레임워크는 내가 틀 안에 들어가서 제작하는 느낌으로 프레임워크가 흐름을 주도한다.
쉽게 말하면 제어 흐름을 주도하는 주체가 반대라는 것이다.
나는 라이브러리를 호출하고 반대로 프레임워크는 나를 호출한다.
그림으로 정리하면 아래와 같다.
아래 링크에서 도움을 많이 받았다.
https://www.c-sharpcorner.com/uploadfile/a85b23/framework-vs-library/
만약 필요하다면
어떤 태그 삭제, 자식 태그 추가 -> document 객체(DOM의 일부) -> DOM
현재 열려있는 웹페이지 등 웹브라우저 자체 제어 -> window 객체
리로드 없이 정보 변경 -> ajax
리로드 되어도 현재 상태 유지 -> cookie
인터넷 없이도 동작 -> offline web application
