[부스트코스] Web UI 개발 - FE
* 이 글은 부스트코스의 강좌를 듣고 작성되었습니다.
https://www.edwith.org/boostcourse-web/lecture/16698/
[LECTURE] 1) window 객체(setTimeout) : edwith
들어가기 전에 전역객체(window)에 속한 메서드에는 경고창을 띄워주는 alert 그리고 setTimeout이라는 메서드등이 있습니다. 이를 어떻게 사용하는지 그리고 다른 함수와... - 부스트코스
www.edwith.org
1. window 객체 (setTimeout 과 비동기)
window 는 전역객체라 생략도 가능하다.
디버깅시 자주 쓰는 alert이나 setTimeout 등의 메서드 들이 window 객체에 있다.
setTimeout 은 비동기적으로 동작되는 메서드다. 두번째 인자로 지정된 ms 뒤에 해당 함수를 수행시킨다.
인자로 함수를 받고있으며, 즉시 실행되지 않고 나중에 실행되는 함수를 콜백함수라고 한다.
function run() {
setTimeout(function() {
var msg = "hello codesquad";
console.log(msg);
}, 1000);
}
run();위와같이 코드를 작성하면 setTimeout 이 1초뒤에 실행된다.
스택에 쌓여있는 코드들이 다 수행되고 나서, 비동기는 마지막에 실행이 된다.
콜백함수는 이벤트 큐 라는 곳에 보관되어 있다가 나중에 실행이 된다.
위의 코드에서 setTimeout 함수가 2초뒤에 실행이 된다고 하지만, run 함수는 이미 그 전에 리턴된 것이다.
2. DOM 과 querySelector
- DOM : Document Orient Model
브라우저에서 HTML 코드를 DOM 이라는 객체 형태의 모델로 저장한다.
그렇게 저장된 정보를 DOM Tree 라고 한다. 결국 HTML Element 는 Tree 형태로 저장이 된다.
=> Why? 웹페이지가 자주 변경이 되기 때문에, 추가/변경 등을 할 때에 어떤 구조체를 가지고 있어야 변경이 쉽다.
따라서 브라우저는 DOM 이라는 모델을 도입해 어떤 트리구조로 저장을 하고 화면에 표현한다.
복잡한 DOM Tree 를 탐색하기 위해 JavaScript 로 탐색알고리즘을 구현하면 힘들다.
따라서 브라우저에서는 DOM 이라는 개념을 통해 DOM Tree를 찾고 조작하는 것을 쉽게 도와주는 여러가지 다양한 DOM API( 메서드들)를 제공하고 있다.
- getElementById() : 엘리먼트 속성 중 인자로 id 를 가진 것을 찾아준다.
document 는 HTML 을 모두 포함하고 있는 최상단 루트 객체다.
document.getElementById("nav-cart-count");
- querySelector : CSS 스타일을 결정할때 사용하던 Selector 문법으로 DOM 에 접근이 가능하다.
//인자 그냥쓰면 태그로 인식. # 붙이면 id . 붙이면 class 로 인식한다.
document.querySelector("div"); // html document 에서 첫번째 div 를 찾아준다.
document.querySelector("#nav-cart-count"); // nav-cart-count 라는 id 를 가진 것을 찾아준다.
document.querySelector(".nav-line-2 > .nav-arrow"); // css selector 를 이용해 요소를 찾을수도 있다.querySelectorAll 은 모든 엘리먼트가 노드 리스트로 나온다(배열 x) 따라서 for 문을 돌려서 확인이 가능하다.
*갑자기 자바스크립트 자료구조엔 리스트가 없나 하고 찾아보다가 안 사실은, 자바스크립트에는 배열에 리스트 기능이 포함되어 있다고 한다. ( 참고자료 : https://wayhome25.github.io/cs/2017/04/17/cs-18-1/)
이벤트
이벤트 관련해서는 전에 블로그글에 이벤트 선언 문법들에 대해 정리해놓은 적이 있다.
간단히 정리면, 이벤트를 등록하고싶은 dom 객체를 찾아 addEventListener 의 두번째 인자로 콜백함수를 등록해주면, 이벤트가 발생했을때, Evenet Handler (Event Listener) 가 실행된다.
var el =document.getElementById("outside");
el.addEventListener("click", function() {
//do something..
}, false);
Ajax (XMLHTTPRequest 통신)
웹에 데이터를 갱신할 때, 브라우저 새로고침 없이(=비동기) 서버로부터 데이터를 가져오는 것이다.
더 나은 UX 를 제공 가능하다. 동적으로 필요한 시점에 컨텐츠를 받아와서 표현할 수 있다.
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();
}XMLHttpReuest 객체를 생성하고, open메서드로 요청 준비하고, send 메서드로 서버를 보낸다.
완료되면 load 이벤트가 발생하면서 콜백함수가 실행된다. 이 때는 이미 ajax 는 반환되고 open 과 send 메서드가 콜스택에서 사라진 후다.
=> 참고 링크
POST 방식으로 서버에 데이터를 요청하고 싶다면 다음과 같이 setRequestHeader 를 추가해준다.
function ajax(data) {
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", function() {
console.log(this.responseText);
});
oReq.open("POST", "http://www.example.org/getData?data=data", true);
oReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
oReq.send(data);
}
나는 간단하게 vscode node.js express 서버에 올려서 실습해보았다.
node.js express 서버를 구축하는 방법은 다른 블로그들에도 많이 올라와있다.
나는 json.txt , text.html 파일을 public 이라는 static file 들을 위한 폴더를 따로 만들어 넣어줬다.
그럼 우선 app.js 파일의 코드는 다음과 같다.
app.js
const express = require('express');
const app = express();
var serveStatic = require('serve-static');
var path = require('path');
app.use(serveStatic(path.join(__dirname, 'public')));
function handleListen(){
//...
}
function handleHome(req, res){
res.sendFile(__dirname+"/public/test.html");
}
app.get('/', handleHome);
app.listen(3000, handleListen);public/test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
</head>
<body>
<script src="./test.js"></script>
</body>
</html>public/json.txt
{
"name":"나다",
"favorites":["apple", "banana", "strawberry"]
}public/test.js
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", function() {
console.log(this.responseText);
});
oReq.open('GET', "http://localhost:3000/json.txt");//parameter를 붙여서 보낼수있음.
oReq.send();
이렇게 작성하고, node app.js 명령어를 실행하면, 브라우저 콘솔창에 json.txt 를 잘 불러오는것을 확인할 수 있다
이번엔 POST 방식으로 요청하는 것에 대해서 보자.
우선, Ajax 요청을 보내는 함수를 만든다.
function send () {
var oReq = new XMLHttpRequest();
var number = {
value: document.getElementById('num').value
}
oReq.onreadystatechange = function(e) {
if(oReq.readyState !== XMLHttpRequest.DONE) return;
if(oReq.status === 200) {
console.log(oReq.responseText);
} else{
console.log('Error!');
}
oReq.open('POST', "/num", true); //parameter를 붙여서 보낼수있음.
oReq.setRequestHeader('Content-Type', "application/json;charset=UTF-8");
oReq.send(JSON.stringify(number));
}onreadystatechange 는 요청에 대한 응답을 받는 이벤트 리스너다. Ajax 요청 시 XHR 객체는 각 상태별로 readyState 가 바뀐다. 바뀔때마다 onreadystatechange 에 설정해뒀던 콜백함수가 호출되고, xhr.DONE 이 되었을 때, 요청이 완료된것이다. xhr.status 로 HTTP 상태를 확인할 수 있다. 요청만 잡아낼 때에는 onload 를 사용해도 된다.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<script>
// send()
</script>
</head>
<body>
<form action="/num" method="POST">
<input type="text" id="num"></input>
<input type="button" value="확인" onclick='send()'></button>
</form>
</body>
</html>
서버쪽 코드
app.js
const express = require('express');
const app = express();
var serveStatic = require('serve-static');
var path = require('path');
var bodyParser = require('body-parser');
app.use(serveStatic(path.join(__dirname, 'public')));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:true}))
function handleListen(){
}
function handleHome(req, res){
console.log("Hi");
res.sendFile(__dirname+"/public/index.html");
}
app.get('/', handleHome);
app.post('/num', function (req, res){
var num = req.body;
console.log(num);
return res.end('done');
});
app.listen(3000, handleListen);
값을 넣고, 확인 버튼을 누르면,
이렇게 콘솔창에 결과값을 잘 가져오는것을 확인할 수 있다.
Javascript Debugging
자바스크립트는 런타임에서 실행되는 언어이기 때문에(물론 Nodejs dptjeh tlfgodehlf tn dlTwlaks) , 브라우저에서
디버깅을 보통 많이 한다.
이 버튼들을 활용해서 해당 함수 안의 코드를 한 라인씩 실행시키거나,
코드를 한줄씩 실행시키거나, 함수 밖으로 벗어나는 등의 일을 할 수 있다.
watch에 어떤 값을 만들어 놓으면, 브레이크포인트가 실행될 때마다 결과가 나온다.