// C47FE8 E4D217

자바스크립트와 웹 프론트엔드 강의와 구글링을 통해서 정리한 글입니다.

Event + JS

1. Callback function

Callback function
조건을 등록해 두고 그 조건을 만족한 경우, 나중에 호출되는 함수

강의 만으로는 이해가 잘 되지 않아서 다른 정의도 찾아보았다.

• Javascript callback - 생활코딩 Youtube
  지금 사용되지는 않지만, 다른 함수의 argument로 사용되어 나중에 호출되는 함수

• 콜백함수가 뭔지 한국어로 쉽게 설명하는 영상 - 코딩애플 Youtube
  함수에 파라미터로 들어가는 함수, 순차적으로 실행하고 싶을때 사용.

시간을 기반으로 콜백함수를 호출하는 명령

setTimeout( function, time )

• time 시간이 지난 경우 function 함수를 콜백하는 함수
• time 은 millisecond (1/1000초) 단위
• timerId를 반환함

clearTimeout( timerId )

• setTimeout 함수 호출의 결과로 반환된 timerId를 인자로 받아 예약되어 있던 function호출을 취소
  • 이미 function이 호출된 경우(시간이 지나 이벤트가 발생한 경우)에는 효과 없음

setInterval( function, time )

• time 시간이 경과할 때마다 function 함수를 콜백하는 함수
• timerId를 반환함

clearInterval( intervalId )

• setInterval 함수 호출의 결과로 반환된 intervalId를 인자로 받아 주기적으로 호출되던 function 호출을 취소

나의 정리 : 비동기적으로 동작하는 setTimeout(), timeInterval() 는 실행시 고유한 timerId를 가지게 되고, 1부터 timerId를 반환한다. clearTimeout() 또는 clearInterval()에 timerId를 인자로 넘겨주면 함수를 종료할 수 있다.

따라서 timeId를 변수에 저장해두면 나중에 종료하기 편하다.
https://github.com/mauserne/Stopwatch-for-BOJ/blob/6a1a131ef521608b76650323bf23ef59bb9a190c/background.js#L13

---

2. HTML Tag 속성에 EventHandler 추가하기

브라우저에서 발생하는 Event 종류

• form event : HTML 문서의 form element에 변화가 생기거나 submit버튼을 누르는 경우 등의 상황에서 발생
  • change : form 엘리먼트의 내용이 변경된 경우 발생
  • submit : form 태그의 submit 이벤트
    • EventHandler에서 콜백함수가 false를 리턴할 시 브라우저 자체 기능 (페이지 이동) 비활성
• window event : 페이지가 모두 로드되었을 때 발생하는 onload event 등이 있음
• mouse event : 사용자가 마우스를 조작했을 때 발생
  • click : HTML element를 마우스로 클릭한 경우 발생
• key event : 사용자가 키보드를 조작했을 때 발생
  • keydown : key가 눌린 경우 발생
    • EventHandler에서 콜백함수가 false를 리턴할 시 키 입력을 막을 수 있음
    • 실제로는 keydown event -> keypress event -> keyup event 순으로 이벤트가 발생하며 keypress event 발생시에 키가 입력됨. keydown event 에서 return false를 한 경우 keypress event가 이어서 발생하지 않음.

HTML Tag의 속성으로 Event Handler 추가

Tag 의 속성에 event handler 코드를 추가

• onEvent 속성 사용 ( onclick, onchange, onkeydown, ... )

 <h1 onclick="console.log('clicked');">..</h1>
 <input type="text" onchange="console.log('changed');" onkeydown="console.log('typed');">

---

3. JS에서 EventHandler 설정

property에 직접 Handler설정

• Element의 "on"+"이벤트" 의 속성에 메소드를 직접 지정

document.getElementById("form1").onsubmit = function eventHandler(){
    console.log("from property");
    return false; // 브라우저의 submit 처리 비활성
}

addEventListner 메소드

• element의 addEventListener(이벤트, 함수) 메소드를 호출해, eventHandler 등록
  • 여러개의 이벤트 핸들러를 등록할 수 있음

document.getElementById("form1").addEventListener(
    "submit", 
    function eventHandler(){
        console.log("from addEventListener");
        return false;
    }
);

removeEventListener 메소드

• element의 removeEventListener(이벤트, 함수) 메소드를 호출해, eventHandler 삭제

---

Networking

본 강의에서는 옛날 AJAX 방식을 사용하는 듯 하다.
현재는 fetch 문법 또는 axios 라이브러리를 통해 간단하게 구현한다는 듯

• Ajax가 무엇인지 설명하는 영상 - 코딩애플 Youtube
• WEB3 - Ajax-1.수업소개 - 생활코딩 Youtube

AJAX : Asynchronous Javascript And Xml

서버와 비동기적으로 데이터를 주고 받는 자바스크립트 기술

• 브라우저에서 페이지를 이동하지 않고 자바스크립트를 통해 HTTP Request를 보내고 받아 JS에서 처리할 수 있음
• 사용자에게 더 나은 사용 경험 제공, 대부분의 웹사이트에서 사용되고 있는 기술

비동기적으로 동작하기 때문에, 페이지 새로고침 없이 원하는 데이터를 요청해서 나타낼 수 있음

1. AJAX - Request 보내기

1-1.AJAX를 위한 객체 생성

var req = new XMLHttpRequest(); // HTTP 요청을 만들 수 있는 새로운 객체를 생성하는 명령

1-2. 요청의 방식과 URL 설정

req.open("GET", "./data.txt"); // http request method와 URL 설정
req.open("GET", "https://www.google.com");

어떤 서버에 요청을 보낼지 설정

1-3. 요청 전송

req.send();

send 메소드를 통해 HttpRequest를 전송함

• 받아온 값은 req.response에 저장됨
• 비동기 방식으로 요청하기 때문에 send 메소드 호출 후, 바로 코드에서 접근하면 데이터가 비어 있음
• AJAX의 진행에 따라 호출되는 callback함수를 활용해야 함.

---

비고 : HTTP Request Method

클라이언트가 웹 서버에게 사용자 요청의 목적/종류를 알리는 수단이다.

HTTP 요청 메소드 정리 - zorba91.tistory.com

HTTP Request 메소드의 종류는 위와 같다.

근데 GET이랑 POST만 쓰이는 것 같다.
GET과 POST 용도 - 생활코딩 Youtube

---

2. AJAX - Response 받아서 처리하기

readyState 속성

• AJAX 요청에 따라 0~4까지 변화함

readyState	의미
0	open 메소드 호출 전
1	open 메소드 호출 후, send 메소드 호출 전
2	보낸 요청에 대해 응답 헤더가 수신된 후
3	응답의 바디 부분이 수신중일 때
4	모든 응답이 수신되었을 때

onreadystatechange 속성

• readyState가 변할 때마다 호출되는 콜백 함수

status 속성

HTTP response의 응답 헤더에 기록된 코드

Response Code	의미
200	OK
404	Not Found
500	Internal Error
...	...

응답을 정상적으로 수신한 경우

• readyState : 4
• status : 200

기타 callback function 활용 가능한 속성

• onloadstart
• onprogress
• onabort
• onerror
• onload
• ontimeout
• onloadend

---

3. JSON : Javascript Object Notification

자바스크립트의 객체를 문자열로 표현하는 방법

• 프로그램간에 전달하기 편리 (서버 -> 브라우저)

JSON API

• JSON.stringify( object )
  인자로 받은 객체를 JSON 문자열로 반환함
• JSON.parse( sring )
  인자로 받은 문자열을 Javascript Object로 변경해 반환함

var original_obj = { pi:3.14, str:"string" };

var json_str = JSON.stringify( original_obj );
// 반환 문자열 : {"pi":3.14,"str":"string"}

var parsed_obj = JSON.parse( json_str );

console.log( original_obj ); // {pi: 3.14, str: "string"}
console.log( parsed_obj ); // {pi: 3.14, str: "string"}

undefined, function 은 변환되지 않고 누락된다.

---

4. AJAX + JSON

AJAX를 통해 JSON 데이터를 받아오고 콘솔에 찍는 과정

var req = new XMLHttpRequest();

req.onreadystatechange = function(){
    if( this.readyState == 4 ){
        data = JSON.parse(this.response); 	// 받아온 JSON 문자열 데이터를 Javascript 객체로 변환
        for( var i = 0 ; i < data.length ; i++ ){ 	// 데이터가 여러개인 경우 (배열 형태로 값을 받은 경우) 반복문으로 각각의 데이터에 대해 처리
    		console.log(data[i].id, data[i].msg);
		}  
    }
}

req.open("GET", JSON_DATA_URL);
req.send();