day10. Javascript Ajax

아는벌·2023년 2월 7일

자바스크립트

web (1)

목록 보기

12/16

DOM(Document Object Model)

DOM 개념

HTML DOM을 사용하여 자바스크립트는 HTML 문서의 모든 요소에 액세스 및 변경 가능
HTML DOM - HTML 요소를 가져오고 변경/추가/삭제하는 방법에 대한 표준
Tree 구조
- 최상위 root로부터 분화되어 내려가는 형태 (최상위 객체 = window)
- 연결된 노드들간에 부모-자식 관계 형상
- DOM은 계층적인 Tree 구조

Web Storage

웹스토리지 개념

localStorage.setItem(key, value);	// 저장소에 데이터 저장
localStorage.getItem(key);	// 저장소에서 데이터 항목을 검사

브라우저에서 데이터를 저장하고 검색하기 위한 구문

localStorage 객체

특정 웹 사이트의 로컬 저장소에 대한 액세스 제공
해당 도메인에 대한 데이터 항목을 저장, 읽기, 추가, 수정, 삭제 가능
데이터는 만료없이 저장되어 브라우저를 닫아도 삭제 되지 않음

sessionStorage 객체

localStorage 객체와 동일
한 세션에 대한 데이터를 저장하여 브라우저를 닫으면 데이터가 삭제됨

sessionStorage.getItem("name");

저장소 개체 속성 및 메소드

Web Strage API 관련 메소드

예제

var arr = ["a", "b", "c", "d", "e"]
// window.localStorage.setItem(key, value);
localStorage.setItem("user","Hong");
localStorage.setItem("array",arr);

브라우저의 local storage에 setItem한 데이터들이 들어가있다.

JSON

JSON 데이터 형식의 개념

자바스크립트에서 사용하는 객체 형태로 데이터를 표현
가독성이 좋고, 파일 용량이 작은 편
Ajax에서 주로 사용하는 데이터 표현 방식
객체, 배열, 문자열, 숫자, boolean, null만 사용 가능
데이터 양이 많아질 경우 데이터의 추출 속도가 떨어짐

사용방법

JSON 자체는 문자열
데이터는 이름-값의 쌍
데이터는 쉼표로 구분함
중괄호{}는 객체를 보유
대괄호[]는 배열을 포함함

 // js의 object 형식
const myObj = {name:'John', age:31, city:'newyork'};
// console.log(myObj);
const jsonStr = JSON.stringify(myObj);
// console.log(jsonStr);
const myJSON = '{ "name": "John", "age": 31, "city": "newyork"}';
const jsonObj = JSON.parse(myJSON);
console.log(jsonObj);

Node.js express 서버

Node.js

구축 플랫폼
크롬의 자바 런타임 빠르고 쉽게 확장 가능한 네트워크 응용 프로그램을 구축
분산 장치에서 실행하는 데이터 집약적인 실시간 애플리케이션에 가볍고 효율적으로 완젹하게 이벤트 중심, 논 블로킹(Non-blocking) I/O 모델을 사용
expree : node.js 프레임워크

Node.js express 서버 구축하기

const http = require('http');
const express = require('express');
const app = express();

app.use(express.static('public'));

app.set("view engine", "ejs");
app.set("views", "./template");

app.get('/', (req, res)=>{
    res.write(`<h1>Hello world</h1>`);
    res.end();
});

const server = http.createServer(app);
server.listen(3000, () => {
    console.log("서버 실행 중 : localhost:3000");

});

ejs

ejs(Embedeed Javascript)

Node.js 서버로부터 가져온 데이터를 html을 생성할 때 바로 사용할 수 있다.
즉, Node.js에서 보낸 데이터를 보여주거나 html에서 반복문을 사용할 때 쉽게 구현이 가능하다.

ejs 모듈 설치

npm i -S ejs
nodejs와 express가 설치된 프로젝트에서 위 명령문을 통해 ejs를 설치해준다.

ejs 사용방법

// app.js
app.set("view engine", "ejs");
app.set("views", "./template");

app.set("view engine", "ejs"); view engine으로 ejs을 사용하겠다고 선언한다.
app.set("views", "./template"); Template가 있는 디렉토리 경로를 나타낸다.
app.js에 위 코드를 추가하여 ejs 설정을 해준다.

//app.js
app.get('/home', (req, res)=>{
    var testArr = [
        {no:1,name:'홍길동',age:20},
        {no:2,name:'박길동',age:23},
        {no:3,name:'김길동',age:24},
        {no:4,name:'이길동',age:22},
        {no:5,name:'최길동',age:27},
    ]
    req.app.render('home', {testArr}, (err, html)=>{
        if(err != null){
            console.log('오류 발생');
            res.end();
        }
        else{
            res.end(html);
        }
    });
    res.end();
});

req.app.render 메소드의 첫 번째 인자는 ejs 파일명, 두 번째 인자는 전달하는 데이터 객체, 세 번째 인자는 콜백함수이다. 여기서 콜백함수의 첫 번째는 에러 객체이다. 즉, req.app.render(ejs 파일명, 데이터객체, 콜백함수)의 형태이다.
'/home' 요청 시, testArr라는 JSON 데이터를 선언하고 이 데이터를 render 메소드의 두번째 인자로 전달하여 ./template/home.ejs 파일에서 데이터를 사용 가능하게 되었다.

./template/home.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>Homepage</h2>
    <table border="1" width:'100%''>
        <tr>
            <th>번호</th>
            <th>이름</th>
            <th>나이</th>
        </tr>
    <%
        for(var row of testArr){ 
    %>
        <tr>
            <td><%=row.no%></td>
            <td><%=row.name%></td>
            <td><%=row.age%></td>
        </tr>
    <% } // end of for %>
    </table>
</body>
</html>

<% %> - 자바스크립트 실행
<%=%> - 변수 값 내장

testArr 데이터를 home.ejs내에 따로 선언 없이 for문을 통해 데이터를 하나씩 no, name, age를 바로 출력하였다.

http: //localhost:3000/home 실행결과이다.

Ajax

AJAX (Asynchronous JavaScript And XML)

Ajax를 사용하면 백에서 웹 서버와 데이터를 교환하여 웹 페이지를 비동기적으로 업데이트 가능하다.
즉, Ajax를 사용하면 전체 페이지를 다시 로드하지 않고 웹 페이지의 일부를 업데이트 할 수 있음!!

작동방식

 <button type="button" onclick="loadDoc()">Change Content</button>

1) 웹 페이지에서 이벤트 발생 (페이지 로드되고, 버튼이 클릭되는 이벤트 발생)

function loadDoc() {
	// XMLHttpRequest 객체 생성
    const xhttp = new XMLHttpRequest();
    // 콜백 함수 정의
    xhttp.onload = function () {
    	document.getElementById("demo").innerHTML = this.responseText;
    }
    // 서버에 요청 보내기
    xhttp.open("GET", "/js/ajax_info.txt", true);
    xhttp.send();
}

2) XMLHttpRequest 객체 생성
3) XMLHttpRequest 객체는 웹 서버에 요청을 보냄
4) 서버가 요청 처리
5) 서버는 웹 페이지에 응답을 다시 보냄
6) 자바스크립트로 응답을 읽음
7) 적잘한 반응(ex: 페이지 업데이트)는 자바스크립트에 의해 수행