[부스트코스] WEB UI 개발 -FE

window 객체

 

브라우저에 내장되어 있는 객체인 window 객체를 브라우저 개발 시에 사용할 수 있습니다.

window 객체는 여러가지 메서드를 제공합니다.

 

가장 기본적이고 대표적인 것이 alert()입니다.

경고창을 팝업형태로 보여주는 메서드입니다.

window.alert("message")

 

open()이라는 메서드는

새로운 창을 열 때 사용하는 메서드입니다.

window.open("new URL","창이름","창의 특성")

window.open("localhost:1234"."new page","width=300,height=200")

 

이전 화면으로 돌아가게 해주는 back() 메서드도 있습니다.

window.back()

 

일정 간격으로 함수를 호출하여 수행하는 setTimeout()이라는 메서드가 있는데

대표적으로 비동기적으로 실행되는 메서드입니다.

function run() {
    setTimeout(function() {
        var msg = "hello";
        console.log(msg);  
    }, 1000);
}

run();

이 메서드는 첫 번째 인자를 함수로 받고 있으며, 두번째 인자는 지연시간입니다.

첫번째 인자로 들어간 함수는 콜백 함수라고 불립니다.

위의 예제 같은 경우에는 run()이 실행되고 1초 후에 setTimeout 함수가 실행되어 콘솔에 hello가 찍히게 되는 것입니다.

 

여기서 비동기(asynchromous)라는 말의 의미를 알아야 할 필요가 있습니다.

비동기 함수는 stack에 쌓여있는 함수가 모두 호출된 이후에 실행되는 함수입니다.

 

console.log("1st");
console.log("2nd");
console.log("3rd");

이 경우에 결과는 1st, 2nd, 3rd로 콘솔에 찍힐 것입니다.

 

console.log("1st");
 
setTimeout(()=>{
  console.log("2nd");
}, 0)
 
console.log("3rd");

비동기 함수인 setTimeout을 이용한 코드의 결과는 어떻게 나타날까요?

바로 1st, 3rd, 2nd입니다. 

 

setTimeout의 지연시간이 0 임에도 불구하고 나중에 출력되는 것을 알 수 있습니다.

 

console.log("1st");
 
setTimeout(()=>{
  console.log("2nd");
}, 0)
 
console.log("3rd");
console.log("4th");
console.log("5th");
console.log("6th");
console.log("7th");
console.log("8th")

이렇게 실행하면 어떻게 될까요? 결과는 2nd가 가장 마지막에 찍히게 됩니다.

 

이처럼 비동기 함수는 stack에 있는 모든 함수가 실행된 이후에 실행된다는 것을 알 수 있습니다.

 

앞에 콜백 함수라는 단어가 등장했는데요.

콜백 함수는 특정 함수에 매개변수로 전달된 함수를 의미합니다.

콜백함수는 함수 내에 필요한 데이터가 다 준비된 시점에서만 원하는 동작을 수행하도록 할 수 있습니다.

 

 

[출처: https://www.edwith.org/boostcourse-web/lecture/16698/]

[참고: https://pro-self-studier.tistory.com/89]

 

 

 

DOM과 querySelector

 

브라우저가 동작하는 원리는 html문서를 파싱 한 후 이를 트리구조를 갖는 객체로 표현합니다.

이때 이 트리구조 객체를 저장한 것이 DOM입니다. 이렇게 저장된 정보를 DOM tree라고 합니다.

우리는 DOM을 이용하여 텍스트 값의 변경을 포함하여 스타일링 및 노드 구조까지 바꿀 수 있습니다.

 

DOM tree

브라우저에서 DOM API를 제공하고 있기 때문에 우리는 쉽게 DOM을 조작할 수 있습니다.

 

getElementById()

 

인자로 넘어온 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이 Element 객체를 반환하는 매서드입니다.

id는 문서 내에서 유일하기 때문에 특정 요소를 빠르게 찾을 때 유용하게 사용되는 메서드입니다.

 

id 문자열은 대소문자를 구분합니다. id 값과 일치하는 요소가 없을 땐 null을 반환합니다

document.getElementById(id);

**여기서 document는 html문서의 최상의 객체 단위입니다.

 

querySelector()

 

DOM을 찾을 때 유용한 메서드입니다.

document.querySelector("")

"문자열"을 인자로 넘겨주면 해당하는 태그 중 첫 번째 요소를 반환합니다.

"#문자열"을 인자로 넘겨주면 해당하는 id를 가진 요소를 반환합니다.

". 문자열"을 인자로 넘겨주면 해당하는 className을 가진 요소를 반환합니다.

이 문자열에서 자식 객체로도 접근할 수 있습니다. 

이때 쓰이는 문법이 CSS Selector입니다.

 

[출처: https://www.edwith.org/boostcourse-web/lecture/16699/]

 

 

 

Browser Event

 

브라우저는 사용자의 요청에 따라 이에 반응합니다. 

이때 사용자의 요청은 마우스의 클릭이나 키보드의 입력 등을 통해 알 수 있습니다.

HTML에서는 이것이 Event가 발생했다!라고 합니다.

 

이벤트 등록은 addEventListener함수를 이용할 수 있습니다.

var el = document.querySelector(".outside");
el.addEventListener("click", function(){
//do something..
}, false);

 

이 메서드의 첫 번째 인자로 이벤트 타입에 대한 정보가 옵니다.

가장 빈번하게 쓰이는 마우스 클릭에 해당하는 "click"을 포함하여 키보드 키가 눌렸을 때에 해당하는 "keydown" 등등

다양한 이벤트 타입들이 있습니다.

 

두 번째 인자로는 이벤트가 발생되었을 때 실행할 함수가 작성됩니다.

이 함수는 이벤트가 발생했을 때 실행되는 콜백 함수입니다.

 

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

위의 예제처럼 이 함수에는 이벤트 정보를 담은 이벤트 객체를 인자로 받아올 수 있습니다.

이 인자를 이용하여 이벤트가 발생한 객체의 정보와 속성을 알 수 있습니다.

 

[출처: edwith.org/boostcourse-web/lecture/16700/]

[참고: https://developer.mozilla.org/ko/docs/Web/Events]

 

 

 

Ajax 통신의 이해

 

서버로부터 받은 데이터를 웹에 적용하기 위해선 항상 새로고침을 해야 할까요?

아닙니다. 브라우저 새로고침 없이 받은 데이터를 표현할 수 있습니다. 이것이 바로 Ajax 기술입니다.

 

function ajax(data) {
 var oReq = new XMLHttpRequest();
 oReq.addEventListener("load", function() {
   console.log(this.responseText);
 });    
 oReq.open("GET", "http://www.example.org/getData?data=data");
 oReq.send();
}

Ajax 실행 코드 예시입니다. 동작 과정을 살피어보겠습니다.

1. XMLHttpRequest객체로 oReq를 생성합니다.

2. oReq의 open메서드로 해당 서버를 엽니다.

3. send메서드를 이용하여 서버에 객체를 보냅니다.

4. 이 요청 처리가 완료되어 서버에서 응답이 오면 "load"상태가 됩니다.

5. 이때 콜백 함수가 실행되어 콘솔에 responseText에 해당하는 정보가 찍히게 됩니다.

 

Ajax를 사용하여 데이터를 주고받을 때 Json 포맷을 표준처럼 사용합니다.

{
  "firstName": "You",
  "lastName": "Hyomin",
  "email": "gyals6349@gmail.com"
  "favorites":
  {
 	"fruits": ["apple", "orange"]
    "sport": "run"
  }
}

Json은 위와 같이 생겼습니다. key와 value쌍으로 표현되는데요 value로는 배열이 올 수도 있고, 또 다른 Json이 올 수도 있습니다.

 

[출처: https://www.edwith.org/boostcourse-web/lecture/16701/]

 

 

 

JavaScript Debbuging

 

개발에 항상 맞닥뜨리게 되는 것이 버그입니다. 

디버깅하는 방법에 대해 알아봅시다.

 

디버깅 컨트롤

• Pause, Continue : 첫 번째 버튼은 평소에는 Pause 버튼 상태인데 브렉포인트가 잡힌 상태에선 Continue 버튼이 됩니다. 다른 브레이크 포인트가 잡힐 때까지 코드를 진행합니다.
• Step over next function call : 스텝 오버는 코드 라인을 한 스탭 진행하는데 현재 실행 라인에 함수 실행 코드가 있다면 함수는 실행하는데 이때 함수 안의 코드로는 진입하지 않습니다. 즉 라인의 함수를 실행만 하게 됩니다.
• Step into next function call : 스텝 인투는 스텝 오버와 다르게 현재 실행 라인의 코드에 함수가 있다면 함수 안의 첫 번째 코드로 진입해 들어가 다시 하나씩 라인별로 코드를 실행할 수 있습니다.
• Step out of current function : 스텝 인투로 들어온 함수를 끝까지 실행하고 밖으로 빠져나와 해당 함수를 실행한 함수로 돌아갑니다.
• Active/Deactive breakpoint : 브레이크 포인트를 끄거나 켤 수 있습니다.
• Pause on exception : 자바스크립트 예외가 발생하면 해당 위치에 브레이크포인트를 잡아줍니다.

[출처: https://www.edwith.org/boostcourse-web/lecture/20391/]