[부스트코스]2_2 WEB UI 개발

1. window 객체(setTimeout)

window라는 객체가 있습니다. window에는 많은 메서드들이 존재하며, 

• window.setTimeout()
• setTimeout()

위와같이 사용할 수 있습니다. window는 디폴트의 개념임으로 생략할 수 있습니다.

 

setTimeout 활용

setTimeout은 낯설게 동작합니다. 

이 코드를 실행해 보면, 2초후에 콘솔창에 msg가 출력됩니다.

 

이런식으로 인자로 함수를 받고 있으며, 보통 나중에 실행되는 함수를 콜백(callback)함수라고 합니다.

callback함수는 보통 함수 호출즉시 실행되지 않고, 나중에 필요한 시점에 실행되거나, 실행이 안 될 수도 있습니다.

 

*자바스크립트는 함수를 인자로 받을 수 있고, 함수를 반활할 수도 있는 특징이 있습니다.

그렇다면, 이 코드를 실행시키면 어떤 순서로 출력될까요?????

run end가 출력되고 2초후에 msg가 출력되는 것을 확인할 수 있습니다.

이를 통해 setTimeout함수는 비동기(astnchronous)로 실행되어서, 동기적인 다른 실행이 끝난 후에 실행된다는 것을 알 수 있습니다.

그렇다면 이 두 코드의 실행 결과는 어떻게 될까요???

 

 

 

 

 

 

 

 

 

 

2. DOM과 querySelector

우리가 받은 이메일의 개수가 증가하는 것을 바로 화면에서 볼 수 있고, 댓글을 입력할 때 댓글이 바로 화면에 추가되는 것을 볼 수 있죠??

새로운 html파일을 불러온 것도 아닌데 어떻게 이게 가능할까요??

자바스크립트는 html내의 구조를 변경시킬 수 있습니다.

먼저 DOM을 이해하면 됩니다!!

 

DOM

브라우저에서는 HTML코드를 DOM이라는 객체 형태의 모델로 저장합니다. 그렇게 저장된 정보를 DOM Tree라고 합니다. (저번 포스팅 참고!!)

결국, HTML element는 Tree형태로 저장됩니다.

브라우저는 자바스크립트에서 HTML 요소를 쉽게 찾고, 가져올 수 있게하기 위해 다양한 DOM API를 제공하고 있습니다.

 

예시로 getElementById()를 들수 있습니다. id를 통해서 element를 찾는 메서드입니다.

또한, querySelector()메서드도 있습니다.

querySelector에서 파라미터는 css Selector문법을 사용합니다.

 

3) Browser Event, Event object, Event handler

우리가 웹사이트의 어떤 영역을 마우스 클릭하거나, 화면 스크롤 등의 작업을 하느냐에 따라 브라우저는 반응합니다.

이런 것들은 모두 브라우저가 Event기반으로 동작되게 만들어졌기 때문입니다.

 

Event

브라우저엔 많은 이벤트가 있습니다. 브라우저 화면의 크기를 조절하기, 마우스 클릭, 스크롤등을 할때에도 이벤트가 발생합니다. 

이벤트는 브라우저가 발생시켜줍니다. 우리는 이벤트 발생이 되었을때 어떤 일을 하라고 등록하면 됩니다.

이를 자바스크립트로 구현할 수 있습니다.

 

이벤트 등록

이벤트 등록은 addEventListener함수를 사용하는 방법이 표준입니다.

querySelector로 선택한 element의 값에 클릭 이벤트가 일어났을때!! function을 실행해라 라는 코드입니다.

 

addEventListener함수의 두번째 인자에 있는 함수. 즉, 이벤트 발생시 실행되는 함수를 Event Handler 또는 Event Listner이라고 합니다.

 

이벤트 객체

브라우저는 이벤트 리스너를 호출할 때, 사용자로부터 어떤 이벤트가 발생했는지에 대한 정보를 담은 이벤트 객체를 생성해, 리스너 함수에 전달합니다.

이벤트 객체를 활용해서 추가적인 작업을 할 수 있게됩니다.

 

가장 많이 쓰이는 것을 event.target입니다. 이는 이벤트가 발생한 element를 가리킵니다.

element도 객체이므로 안에 nodeName이나 classname같은 속성을 확인할 수 있습니다.!!!!

 

4. Ajax통신의 이해

Ajax가 뭘까요???

Ajax는 비동기적으로 서버로부터 데이터를 가져오는 통신을 일컫습니다. 이게 무슨말냐고요??

저도 이해하는데 조금 시간이 걸렸어요ㅠㅠ

 

예를 하나 들어보겠습니다. 

만약 쇼핑몰 사이트에서 카테고리 정보를 클릭한다고 가정해봅시다.

상의 카테고리를 클릭할 때는 상의 정보에 해당하는 데이터들을 불러와서 페이지를 보여주어야 합니다. 

다음으로 하의 카테고리를 클릭하면 다시 새로운 컨텐츠를 담은 페이지를 보여주어야 합니다.

이때마다 브라우저가 새로운 html파일을 보여준다면 로딩속도나 여러가지 측면에서 비효율적입니다. 카테고리를 바꿀때 마다 새로고침을 하는 셈이니까요!

 

새로고침 없이 동적으로 필요한 시점에 컨텐츠를 받아와서 표현하면 훨씬 효율적이지 않을까요? 

이 대표적인 기술이 Ajax입니다.

 

그렇다면, Ajax를 사용할 때, 클라이언트와 서버간의 데이터는 어떤 형식일까요??

JSON(JavaScript Object Notation)포멧을 사용합니다. 

Json은 데이터를 딕셔너리 형태로 저장하는 포멧입니다.

제가 얼마전 Django 프로젝트를 진행할 때 사용한 Json의 일부입니다. 

key와 value로 이루어진 데이터 표현 형식입니다.

 

Ajax 실행코드

 

5. 자바스크립트 디버깅

자바스크립트는 실행(runtime) 과정에서 버그가 발생합니다. 그래서 브라우저에서 디버깅을 합니다.

 

디버깅 컨트롤

• 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 : 자바스크립트 예외가 발생하면 해당 위치에 브레이크포인트를 잡아줍니다.