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

CS기초/웹 2020. 3. 20. 23:49

728x90

* 이 글은 부스트코스의 강좌를 듣고 작성되었습니다.

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에 어떤 값을 만들어 놓으면, 브레이크포인트가 실행될 때마다 결과가 나온다.

728x90

'CS기초 > 웹' 카테고리의 다른 글

React 와 Spring boot 서버 (0)	2022.03.31
[부스트 코스] JSP - BE (0)	2020.06.07
[부스트 코스] CSS 기초 문법 (우선순위, 선택자, 레이아웃 구성) (0)	2020.02.13
[부스트 코스] HTML - FE (0)	2020.02.06
[부스트 코스] 웹 개발의 이해 - FE/BE (0)	2020.02.06

ABOUT ME

개발자를 꿈꾸는 공대생 개발자를 꿈꾸는 공대생

1. window 객체 (setTimeout 과 비동기)

2. DOM 과 querySelector

이벤트

Ajax (XMLHTTPRequest 통신)

app.js

public/test.html

public/json.txt

public/test.js

index.html

app.js

Javascript Debugging

'CS기초 > 웹' 카테고리의 다른 글

티스토리툴바

ABOUT ME

1. window 객체 (setTimeout 과 비동기)

2. DOM 과 querySelector

이벤트

Ajax (XMLHTTPRequest 통신)

app.js

public/test.html

public/json.txt

public/test.js

index.html

app.js

Javascript Debugging

'CS기초 > 웹' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바