태야

[AJAX] - Asynchronous JavaScript and XML

웹에 데이터를 갱신할 때, 브라우저 새로고침 없이 서버로부터 데이터를 받는 것이 좋겠다는 생각에서 시작됐으며, 더 좋은 UX를 제공할 수 있는 기술이다. 간단하게 AJAX는 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말한다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고받을 수 있습니다. 요즘 가장 많이 사용되는 데이터 포맷 형식은 JSON이다.

[특징]

1. 페이지 새로고침 없이 서버에 요청할 수 있다.

2. 서버로부터 데이터를 받고 작업을 수행한다.

[사용법]

1. XMLHttpRequest 객체를 이용한 방법

2. Fetch API를 이용한 방법 - XHR보다 간단하게 코드를 짜 서버와 통신을 쉽게 할 수 있다. 하지만 익스플로러에서는 적용이 되지 않는다고 하니, 참고해서 사용해야 한다.

[예제 - XHR(1)]

function ajax(data) {
 var xhr = new XMLHttpRequest();
 xhr.addEventListener("load", function() {
   console.log(this.responseText);
 });    
 xhr.open("GET", "http://www.example.org/getData?data=data");//parameter를 붙여서 보낼수있음. 
 xhr.send();
}

XMLHttpRequest객체를 생성해서, open메서드로 요청을 준비하고, send메서드로 서버로 보낸다.

요청처리가 완료되면(서버에서 응답이 오면) load이벤트가 발생하고, 콜백 함수가 실행된다.

콜백 함수가 실행될 때는 이미 ajax함수는 반환하고 콜 스택에서 사라진 상태다.

이는 setTimeout함수의 콜백함수의 실행과 유사하게 동작하는 '비동기'로직이다.

[XMLHttpRequest 객체의 메서드]

1. open 메서드

- 첫 번째 파라미터 

: HTTP 요구 방식(request method) ─ GET, POST, HEAD 중의 하나이거나 당신의 서버에서 지원하는 다른 방식이다.(반드시 대문자로)

- 두 번째 파라미터

: 요구하고자하는 URL 주소

- 세 번째 파라미터(옵션)

: 요구가 비동기식(Asynchronous)으로 수행될지를 결정한다. True(기본값)이면 자바스크립트 함수가 지속적으로 수행될 수 있어 서버로부터 응답을 받기 전에도 유저와 페이지의 상호작용이 계속 진행된다. 이것이 AJAX 의 첫 번째 A (Asynchronous : 비동기성)이다.

2. send 메서드

: GET방식으로 요청을 하는 경우에는 파라미터가 없다.

: send() 메소드의 파라미터는 POST 방식으로 요구한 경우 서버로 보내고 싶은 어떠한 데이터라도 가능하다. 데이터는 서버에서 쉽게 parse 할 수 있는 형식(format)이어야 한다.  JSON, XML, SOAP 등과 같은 다른 형식(format)도 가능하다.

예시) "name=value&anothername="+encodeURIComponent(myVar)+"&so=on" 

[Response 속성들]

1. readyState

• 0 (uninitialized) - (request가 초기화되지 않음)

• 1 (loading) - (서버와의 연결이 성사됨)

• 2 (loaded) - (서버가 request를 받음)

• 3 (interactive) - (request(요청)을 처리하는 중)

• 4 (complete) - (request에 대한 처리가 끝났으며 응답할 준비가 완료됨)

2. status

• 200: "OK"

• 403: "Forbidden"

• 404: "Page not found"

3. statusText

: "OK" or "Not Found" 반환

[예제 - XHR(2)]

function getFactAjax() {
        let number = numberInput.value;

        let xhr = new XMLHttpRequest();
        xhr.open("GET", "http://numbersapi.com/" + number);// url에 값을 추가

        xhr.onload = function () {
          if (this.status == 200 && number != "") {
            fact.style.display = "block";
            factText.innerText = this.responseText;
          }
        };

        xhr.send();
        }

[예제 - Fetch]

function getFactFetch() {
        let number = numberInput.value;

        fetch("http://numbersapi.com/" + number)
          .then((response) => response.text())
          .then((data) => {
            if (number != "") {
              fact.style.display = "block";
              factText.innerText = data;
            }
          })
          .catch((err) => console.log(err));
      }

JavaScript Event Listener 

Event

이벤트(event)란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다. 웹 페이지에 사용된 자바스크립트는 이렇게 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다. 따라서 클라이언트 측 자바스크립트를 비동기식 이벤트 중심(event-driven)의 프로그래밍 모델이라고 한다. 브라우저에서 많은 이벤트들이 발생하는데, 브라우저 화면의 크기를 마우스로 조절할 때도, 스크롤을 할 때도, 마우스로 이동하거나 무언가를 선택할 때도 이벤트가 발생한다. 따라서 개발자는 HTML엘리먼트 별로 어떤 이벤트(주로 키보드나 마우스 관련)가 발생했을 때 특정 행위를(어떤 일) 하고 싶다면, 대상 엘리먼트를 찾고 어떤 일을 등록하면 된다.

이벤트 등록

이벤트 리스너(event listener)

사용법

target.addEventListener(type, listener[, options])

: type은 이벤트 리스너를 등록할 이벤트 타입을 문자열로 전달한다. listener로 해당 이벤트 타입을 처리할 함수를 설정해준다. 마지막으로, options으로 이벤트를 전파할 방식을 설정해주는 것인데, 버블링 또는 캡처링 방식이 있지만 보통 default값(false)을 사용하기에 사용을 잘하지 않는다.

이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러(event handler)라고도 한다. 지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킨다.

// HTML
<table id="outside">
    <tr><td id="t1">one</td></tr>
    <tr><td id="t2">two</td></tr>
</table>

//JavaScript
// 이벤트 리스너(함수)
function modify(new_text) {
  var t2 = document.getElementById("t2");
  t2.firstChild.nodeValue = new_text;    
}
 
// 이벤트 리스너 등록
var el = document.getElementById("outside");
el.addEventListener("click", function(){modify("안녕")}, false);

// 출력
one
two // one 클릭 시, "안녕"으로 바뀜

이벤트 객체

브라우저는 이벤트 리스너를 호출할 때, 사용자로부터 어떤 이벤트가 발생했는지에 대한 정보를 담은 이벤트 객체를 생성해서 리스너 함수에 전달한다. 이벤트 객체(event object)란 특정 타입의 이벤트와 관련이 있는 객체다. 모든 이벤트 객체는 이벤트의 타입을 나타내는 type 프로퍼티와 이벤트의 대상을 나타내는 target 프로퍼티를 가진다. 이러한 이벤트 객체는 이벤트 리스너가 호출될 때 인수로 전달된다.

var el = document.getElementById("outside");
el.addEventListener("click", function(evt){
 console.log(evt.target);
 console.log(evt.target.nodeName);
}, false);

// 출력

// one 클릭 시
<td id="t1">one</td>
TD

// two 클릭 시
<td id="t2">two</td>
TD

event.target은 이벤트가 발생한 element를 가리킨다.

element도 객체이므로 안에 nodeName이나 classname과 같이 element가 가진 속성을 사용할 수 있다.

 JSON.parse, JSON.stringify 

JSON

JSON은 객체, 배열, 숫자 ,문자열, boolean, null을 '직렬화'하기 위한 구문으로, JavaScript 구문에 기반을 두고 있지만 분명한 차이가 있다. 즉 JavaScript는 JSON이 아니다.

1. 객체와 배열
속성의 이름은 반드시 '큰따옴표'로 표시한 문자열이어야 한다. 

2.숫자
선행 0은 허용하지 않는다. 소숫점 뒤에는 적어도 한 자릿수가 있어야한다. Nan과 infinity는 지원하지 않는다.

3. JSON.parse()

문자열을 JSON으로서 구문 분석하고, 선택적으로 분석 결과의 값과 속성을 변환해 반환한다.

사용법

JSON.parse(text[, reviver])

매개변수

text : JSON으로 변환할 문자열

reviver : 함수라면, 변환 결과를 반환하기 전에 이 인수에 전달해 변형함.

반환값

주어진 JSON 문자열에 대응하는 Object(객체)

예외(오류)

변환할 문자열이 유효한 JSON이 아닐 경우 SyntaxError

const json = '{"result" : true, "count" : 42}';
const obj = JSON.parse(json);

console.log(obj.count); // output : 42
console.log(obj.result); // output : true
console.log(obj); //Object { result: true, count: 42 }

JSON.parse('{}');              // {}
JSON.parse('true');            // true
JSON.parse('"bamm"');           // "bamm"
JSON.parse('[1, 3, "false"]'); // [1, 3, "false"]
JSON.parse('null');            // null

4. JSON.stringify()

주어진 값(JavaScript 값이나 객체)에 해당하는 JSON문자열을 반환한다. 선택 사항으로 특정 속성만 포함하거나 사용자 정의방식으로 속성을 대체한다.

console.log(JSON.stringify({ x: 5, y: 6 }));
// expected output: "{"x":5,"y":6}"

console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)]));
// expected output: "[3,"false",false]"

console.log(JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }));
// expected output: "{"x":[10,null,null,null]}"

console.log(JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)));
// expected output: ""2006-01-02T15:04:05.000Z""

사용법

JSON.stringify(value[, replacer[, space]])

매개변수

value : JSON 문자열로 변환할 값

replacer : 문자열화 동작 방식을 변경하는 함수, 혹은 JSON 문자열에 포함될 값 객체의 속성들을 선택하기 위한 화이트리스트(whitelist)로 쓰이는 String 과 Number 객체들의 배열. 이 값이 null 이거나 제공되지 않으면, 객체의 모든 속성들이 JSON 문자열 결과에 포함된다.

 JavaScript 함수 - 선언, 호이스팅, 표현식, arguments, call stack, arrow function

1. 함수의 선언

함수는 여러 개의 인자를 받아서, 그 결과를 출력한다. 자바스크립트는 파라미터의 개수와 인자의 개수가 일치하지 않아도 오류가 나지 않는다. 만약 , 파라미터 1개가 정의된 함수를 부를 때, 인자의 개수를 0개만 넣어 실행하면, 이미 정의된 파라미터(매개변수)는 undefined 값을 갖게 된다. 이는 변수는 초기화됐지만, 값이 할당되지 않았기 때문이다.

// 함수선언문
function printName(firstname) {
    var myname = "jisu";
    return myname + " " +  firstname;
}

// 결과
jisu undefined

2. 함수 표현식

함수는 다음과 같이도 표현할 수도 있다.

// 함수표현식
function test() { 
    console.log(printName()); 
    var printName = function() {
        return 'anonymouse';
    }
}
test(); // 타입에러가 발생한다.

함수선언문과 달리 선언과 호출 순서에 따라서 정상적으로 실행되지 않을 수 있다. 표현식보단 함수 선언문을 더 자주 사용하지만, 어떤 코딩 컨벤션에서는 표현식을 권장하기도 한다.

3. 표현식과 호이스팅

위에 표현식 예제에서 printName이 "printName이 is not defined"이라고 오류가 나오지 않고, function이 아니라고 나온 이유는 printName이 실행되는 순간 'undefined'으로 지정됐기 때문이다.

자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 미리 다 모아서 선언한다.  함수 안에 있는 변수들을 모두 끌어올려서 선언한다고 해서, 이를 hoisting이라고 한다.
(실제로 코드가 끌어올려지는 게 아니라, 자바스크립트 파서 내부적으로 그렇게 끌어올려서 처리한다는 것이다)
따라서 다음 코드 역시 함수를 값으로 가지지만 어쨌든 printName도 변수이므로 끌어올려지고, 값이 할당되기 전에 실행됐으므로 undefined가 할당된 상태이다.

printName(); //아직, printName이 undefined으로 할당된 상태다.  
var printName = function(){}

4. 반환값과 undefined

다음 함수의 반환값은 undefined이다.

function printName(firstname) {
    var myname = "jisu";
    var result = myname + " " +  firstname;
}

자바스크립트 함수는 반드시 return 값이 존재하며, 없을 때는 기본 반환값인 'undefined'가 반환된다.
자바스크립트에서는 다른 언어에서의 void타입이 없다.

5. arguments객체

함수가 실행되면 그 안에는 arguments라는 특별한 지역변수가 자동으로 생성된다.
arguments의 타입은 객체이다. 자바스크립트 함수는 선언한 파라미터보다 더 많은 인자를 보낼 수도 있다.
이때 넘어온 인자를 arguments로 배열의 형태로 하나씩 접근할 수 있다. arguments는 배열이 아니다.
따라서 배열의 메서드를 사용할 수가 없다. 

function a() {
 console.log(arguments);
}
a(1,2,3);

// 결과
[Arguments] { '0': 1, '1': 2, '2': 3 }

자바스크립트의 가변 인자를 받아서 처리하는 함수를 만들 때 등에서 arguments속성을 유용하게 사용할 수가 있다. 하지만 arguments의 무분별한 사용은 하지 않는 게 좋다.

6. Arrow function

ES2015에는 arrow function이 추가됐다. 하지만 점점 많이 사용되고 있는 syntax이므로 같이 알아두어도 좋을 것 같다.

function getName(name) { 
   return "Kim " + name ; 
} 

//위 함수는 아래 arrow함수와 같다. 
var getName = (name) => "Kim " + name;

7. 함수의 연속적 호출(call stack)

여러 함수들(functions)을 호출하는 스크립트에서 해당 위치를 추적하는 인터프리터 (웹 브라우저의 자바스크립트 인터프리터 같은)를 위한 메커니즘이다. 현재 어떤 함수가 동작하고 있는지, 그 함수 내에서 어떤 함수가 동작하는지, 다음에 어떤 함수가 호출되어야 하는지 등을 제어한다.

function printing() {
   // [1] Some codes here
   sayHi();
   // [2] Some codes here
}
function sayHi() {
   return "Hi!";
}

printing();

// [3] Some codes here

실행 순서

1) printing() 함수 호출

2) 스택 리스트에 printing() 추가

3) [1] 실행, sayHi() 함수 호출

4) 스택리스트에 sayHi() 추가

5) sayHi() 종료 후, 호출된 곳으로 돌아감

6) 스택 리스트에서 sayHi() 제거

7) printing()의 나머지 코드 실행[2]

8) printing() 종료 후, 호출된 곳으로 돌아감

9) 스택 리스트에서 printing() 제거

10) [3] 코드 실행

 Javascript 기초 문법 - 변수 , 연산자, 타입 

1. 변수

변수는 var, let, const로 선언할 수 있다.
어떤 것을 사용하는가에 의해서 scope, 즉 변수의 유효 범위가 달라진다. 변수에 무조건 하나의 값만 넣을 수 있다. 

var a = 1;
var b = '안녕';
var a = "aaa";
var a = 'aaa';
var a = true;
var a = [];
var a = {};
var a = undefined;

2. 연산자

기본적으로 모든 언어에서 사용되는 연산자랑 동일하게 사용된다. 연산자 우선순위를 표현하기 위해서는 ()를 사용하면 된다. 수학연산자는 +,-,*,/,%(나머지) 등이 있다. 그리고 논리 연산자, 관계 연산자, 삼항 연산자도 있다. 

// OR 연산자
const name = "kim";
const result = name || "exam";
console.log(result);
// "kim" 출력

var name = "";
var result = name || "exam";
console.log(result);
// "exam" 출력

삼항 연산자

간단한 비교나 조건이 있을 때 값 할당에 사용한다. ?앞의 조건식의 결과가 참이면 콜론(:) 앞의 값을 선택하고, 거짓이면 콜론 뒤의 값을 선택한다.

const data = 11;
const result = (data > 10) ? "True" : "fail";
console.log(result);
// "True" 출력

비교 연산자

좌항과 우항의 값을 비교할 때 사용하며, 비교에서는 == 보다는 ===는 사용하는 것이 좋다. ==을 자바스크립트에서 사용할 경우 여러 가지 오류가 발생하는 경우가 많기 때문에 주의가 필요하다.

==는 타입은 달라도 값이 같으면 참으로 간주하고, ===는 값과 타입 모두 같아야만 참으로 간주하는 것이 큰 차이다.

0 == "0"; // 참
0 === "0" // 거짓
"0" === "0" // 참
"0" == 0 // 참

3. 타입

자바스크립트에서 타입은 여러 가지가 존재한다. undefined, null, boolean, number, string, object, function, array, Date, RegExp 와 같이 많은 타입이 존재한다. 타입은 선언할 때가 아니고, 실행타임에 결정된다. 함수 안에서의 파라미터나 변수는 실행될 때 그 타입이 결정된다.

타입을 확인하는 방법은 여러 가지가 있다. 문자, 숫자와 같은 자바스크립트 기본 타입은 'typeof' 키워드를 사용해서 체크할 수 있다. 배열은 타입을 체크하는 isArray함수가 표준으로 생겼다.