[부스트코스] 웹 프로그래밍 FE: WEB UI 개발

이전까지 JavaScript 기본문법에 대하여 알아보았고 이번포스팅에서는 WEB UI개발에 대하여 알아보도록 하겠습니다.

학습 목표

1. JavaScript의 기본문법을 이해한다.
2. DOM, Browser Event, Ajax이 각각 무엇인지 이해하고, 이를 활용해 웹화면을 제어할 수 있다.
3. JSP의 라이프사이클을 이해하고 redirect & forward 와 scope를 이해하고 사용할 수 있다. 
4. JSTL과 EL을 사용할 수 있다. 
5. 데이터베이스를 설치하고 간단한 SQL을 사용할 수 있다. 
6. Maven을 이해하고 Maven을 이용한 웹 어플리케이션을 작성할 수 있다. 
7. JDBC 프로그래밍을 할 수 있다. 
8. Web API를 이해한다. 

목차

1. window 객체(setTimeout)
2. DOM과 querySelector
3. Browser Event, Event object, Event handler
4. Ajax통신의 이해
5. JavaScript Debugging

 

1) window 객체(setTimeout)

[LECTURE] 1) window 객체(setTimeout) : edwith

핵심 개념

• setTimeout
• 비동기

window 객체

브라우저 개발을 하다 보면, window라는 객체가 있습니다. window에는 많은 메서드들이 존재하며, 아래처럼 사용할 수 있습니다. window는 디폴트의 개념이므로 생략할 수 있습니다.

window.setTimeout()
setTimeout() //window는 전역객체라서 생략 가능하다.

 

setTimeout 활용

setTimeout은 낯설게 동작합니다. 인자로 함수를 받고 있으며, 보통 나중에 실행되는 함수를 콜백함수라고도 합니다. 자바스크립트는 함수를 인자로 받을 수 있는 특징이 있습니다. 참고로 함수를 반환할 수도 있고요.

setTimeout의 실행은 비동기(asynchronous)로 실행되어 동기적인 다른 실행이 끝나야 실행됩니다.

function run() {
    console.log("start");
    setTimeout(function() {
        var msg = "hello codesquad";
        console.log(msg);  //이 메시지는 즉시 실행되지 않습니다.
    }, 1000);
    console.log("end");
}
 
run();

출력결과는 아래와 같습니다.

1. start
2. end
3. hello codesquad

즉 setTimeout 안의 함수(콜백함수)는 run함수의 실행이 끝나고 나서, (정확히는 stack에 쌓여있는 함수의 실행이 끝나고 나서 실행됨) 실행됩니다.

이 외에도 setInterval과 같은 함수도 있습니다.

• setInterval은 일정한 시간간격으로 작업을 수행하기 위해서 사용된다. → 반복수행.
• setTimeout은 지정된 시간을 기다린 후 작업을 수행하고, 지정된 시간 사이에 작업시간이 추가된다. → 1번수행

2) DOM과 querySelector

[LECTURE] 2) DOM과 querySelector : edwith

 

핵심 개념

• DOM Tree
• DOM API
• querySelector

DOM 예시

DOM

브라우저에서는 HTML코드를 DOM(Document Object Model)이라는 객체형태의 모델로 저장합니다. 그렇게 저장된 정보를 DOM Tree라고 합니다. 결국 HTML element는 Tree 형태로 저장됩니다.

DOM Tree

복잡한 DOM Tree를 탐색하기 위해 JavaScript로 탐색알고리즘을 구현하면 너무 힘듭니다. 그래서 브라우저에서는 DOM(document object model)이라는 개념을 통해서, 다양한 DOM API(함수 묶음정도)를 제공하고 있습니다. 브라우저는 DOM Tree찾고 조작하는 걸 쉽게 도와주는 여러 가지 메서드를(DOM API)를 제공합니다.

 

● getElementById()

document.getElementById(id);

주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환합니다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용합니다.

매개변수는 id로 찾으려는 요소 ID입니다. ID는 대소문자를 구분하는 문자열로, 문서 내에서 유일해야 합니다. 즉, 하나의 값은 하나의 요소만 사용할 수 있습니다.

반환값은 주어진 ID와 일치하는 DOM 요소를 나타내는 Element 객체. 문서 내에 주어진 ID가 없으면 null.

ID가 없는 요소에 접근하려면 Document.querySelector()를 사용하세요. 모든 선택자를 사용할 수 있습니다.

 

● querySelector()

document.querySelector(selectors);

DOM을 찾는데 특히 유용한 querySelector 메서드입니다. 

매개변수는 하나 이상의 선택자를 포함한 DOMString 이며 유효현 CSS 선택자여야만 한다.

반환값은 제공한 CSS 선택자를 만족하는 첫 번째 Element 객체를 반환하고, 결과가 없다면 null을 반환한다.

 

● css selector

selector문법은 querySelector와 querySelectorAll메서드에서 사용할 수 있으며, css 스타일을 부여했을 때 익혔던

selector문법과 동일하다고 생각하고 사용할 수 있습니다.

 

이외의 다른 함수들...

• removeChild(child) : 삭제
• replaceChild(newChild, oldChild) : 대체
• appendChild(child) : 노드의 마지막 자식으로 주어진 엘리먼트 추가한다.
• document.createElement(tagname) : tagname 엘리먼트 노드를 추가한다.
• document.createTextNode(data) : 텍스트 노드를 추가한다.

 

3) Browser Event, Event object, Event handler

[LECTURE] 3) Browser Event, Event object, Event handler : edwith

Event

브라우저에는 많은 이벤트가 발생합니다. 브라우저 화면의 크기를 마우스로 조절할 때도, 스크롤을 할 때도, 마우스로 이동하거나 무언가를 선택할 때도 이벤트가 발생합니다.

이벤트를 브라우저가 발생시켜주니, 우리는 그때 어떤 일을 하라고 할 일을 등록할 수가 있습니다.

다시 말해, HTML엘리먼트별로 어떤 이벤트(주로 키보드나 마우스 관련)가 발생했을 때 특정 행위를(어떤 일) 하고 싶다면, 대상엘리먼트를 찾고 어떤 일을 등록하면 된다.

그것을 자바스크립트로 구현할 수 있습니다.

 

이벤트 등록

이벤트 등록 표준방법입니다. addEventListener 함수를 사용할 수 있습니다.

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

addEventListener 함수의 두 번째 인자는 함수입니다. 

이 함수는 나중에 이벤트가 발생할 때 실행되는 함수로 이벤트핸들러(Event Handler) 또는 이벤트리스너(Event Listener)라고 합니다. 

콜백함수는 이벤트가 발생할 때 실행됩니다. 

 

이벤트 객체

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

따라서 이벤트리스너 안에서는 이벤트객체를 활용해서 추가적인 작업을 할 수 있게 됩니다. 

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

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

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

 

이외에 수많은 eventType

키보드 이벤트

이벤트명	발생하는 시점
keydown	키가 눌렸을 때
keypress	쉬프트, Fn, CapsLock 을 제외한 키가 눌린 상태일 때(연속적으로 실행됨.).
keyup	키 누름이 해제될 때

 

마우스 이벤트

이벤트명	발생하는 시점
mousedown	포인팅 장치 버튼이 엘리먼트 위에서 눌렸을 때.
mouseup	포인팅 장치 버튼이 엘리먼트 위에서 놓였을 때.
click	포인팅 장치 버튼(모든 버튼; 주 버튼만 해당될 예정)이 엘리먼트에서 눌렸다가 놓였을 때.
wheel	포인팅 장치의 휠 버튼이 어떤 방향이든 회전되었을 때.

 

이벤트 참조

 

4) Ajax통신의 이해

[LECTURE] 4) Ajax통신의 이해 : edwith

핵심 개념

• XMLHTTPRequest
• Ajax

브라우저의 새로고침 없이 데이터를 얻어오는 방법이 있습니다.

이는 사용자가 더 빠르게 변경된 데이터를 화면의 새로고침 없이 확인할 수 있는 방법으로 더 좋은 UX(User Experience)에 해당하는 방법입니다. (새로고침 없이 일부분만 데이터를 서버에서 가져온다.)

어떻게 구현하는지 알아보겠습니다.

1. Ajax (XMLHTTPRequest 통신)

이 기술은 웹에 데이터를 갱신할 때, 브라우저 새로고침 없이 서버로부터 데이터를 받는 것이 좋겠다는 생각에서 출발했습니다. 더 좋은 UX를 제공할 수 있는 기술입니다.

탭을 누를때마다 컨텐츠가 달라지는 서비스를 생각했을 때 누르지도 않은 탭의 컨텐츠까지 초기로딩시점에 모두 불러온다면 초기로딩속도에 영향을 줄 것입니다. 따라서 동적으로 필요한 시점에 컨텐츠를 받아와서 표현하면 더 좋습니다.

이 경우가 Ajax기술을 활용할 수 있는 대표적인 경우입니다.

Ajax통신의 이해

Ajax 통신으로는 XML, Plain Text, JSON 등 다양한 포맷의 데이터를 주고받을 수 있지만, 일반적으로 사용이 편리한 JSON포맷으로 데이터를 주고 받습니다 

• Ajax : 비동기 통신 (새로고침 없이 서버에서 데이터를 동적으로 받아오는 통신법)
  
  -Ajax를 실행하기 위해서는 XMLHTTPRequest() 객체를 사용해 받아오고 open(서버를 연다) send(요청을 보낸다) 메소드 등을 사용할 수 있다.
  
  
• Json : Ajax를 사용하기 위한 포맷 중 하나.
  
  (Ajax는 다양한 포맷의 데이터를 주고받는데, 보통은 사용이 편리한 Json 포맷을 사용한다. 사람도 읽기 편하고 기계도 읽기 편해서.)
  
  

2. AJAX 실행코드

AJAX 실행 코드는 아래와 같습니다.

아래 방법은 XMLHTTPRequest 객체를 사용하는 표준방법입니다.

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");//parameter를 붙여서 보낼수있음. 
 oReq.send();
}

XMLHttpRequest객체를 생성해서, open메서드로 요청을 준비하고, send메서드로 서버로 보냅니다. 요청처리가 완료되면(서버에서 응답이 오면) load이벤트가 발생하고, 콜백함수가 실행됩니다.

콜백함수가 실행될 때는 이미 ajax함수는 반환하고 콜스택에서 사라진 상태입니다. 이는 setTimeout함수의 콜백함수의 실행과 유사하게 동작하는 '비동기'로직 입니다.

참고 자료 링크↓

Using XMLHttpRequest

 

5) JavaScript Debugging

[LECTURE] 5) JavaScript Debugging : edwith

핵심 개념

• chrome developer tools
• debugging

자바스크립트는 실행단계(런타임)에서 버그가 발견됩니다. 그 타이밍에 어디가 문제인지 바로 확인하는 것을 버그를 잡는다하여 디버깅이라하고, 디버깅을 할 때 크롬 개발자도구를 이용하여 디버깅해볼 수 있습니다.

디버깅 컨트롤

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

 

 

이렇게 많은 내용을 간략하게 정리하려고 노력해봤습니다! 도움되셨음 좋겠고 저도 프론트엔드에 대해서 더 공부해봐야겠습니다. 긴 글 봐주셔서 감사합니다!