Web_DAY4

이정찬·2023년 2월 2일
web
0

Web

목록 보기
4/5

DAY3 추가

  • callback 지옥을 해결하기 위해 Promise가 등장했다.

Promise

// callback -> Promise 객체 리턴
function test(a, callback) {
  // setTimeout(() => {
  //     callback(a + 5); // 0.1초 후에 콜하도록 변경
  // }, 100)

  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(a + 5);
    }, 100);
  });
}

console.log(test(10)); // Promise 객체 반환, PromiseResult에 15가 들어간다.

test(10)
  .then((res) => {
  console.log(res); // 15
});

test(10)
  .then(test)
  .then((res) => {
  console.log(res); // 20
});

test(10)
  .then((res) => {
  throw 'Error';
  console.log('after throw', res); // 출력X
})
  .catch((err) => {
  console.log(err);
});
  • 함수 체이닝 기법을 이용한 Promise 사용

async/await

function test(a, callback) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(a + 5);
    }, 100);
  });
}

const fn1 = async () => { // async function fn1 () {}
  const a = await test(10); 
  console.log(a); // 15
  const b = await test(a); // 15 들어감
  console.log(b); // 20
}
fn1();

const fn2 = async () => {
  const a = await test(10).then(res => res + 15); 
  console.log(a); // 30
  const b = await test(a).catch(err => console.log(err)); // 30 들어감
  console.log(b); // 35
}
fn2();

// Promise, async/await등은 모두 멀티쓰레드 즉, 비동기통신을 구현하기 위한 키워드 들이다.
// Non-blocking을 처리하는 것과 같은 말이다.
// 출력결과: 15 20(fn2) 20(fn1) 25

AJAX

function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    // this.responseText는 응답 텍스트
    let member = JSON.parse(this.responseText); // json to object
    let text = `
      <h3>${member.num}</h3>
      <h3>${member.id}</h3>
      <h3>${member.pw}</h3>
      <h3>${member.name}</h3>
      <h3>${member.tel}</h3>
    `;
    document.getElementById("demo").innerHTML = text;
  }
  // xhttp.open("GET", "ajax_info.txt");
  xhttp.open("GET", "./ajax_member.txt");  // open이 먼저 실행되고, onload가 실행된다.
  xhttp.send();
}
  • AJAX 이용하여 실제 값 호출
// selectAll.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% response.setHeader("Access-Control-Allow-Origin", "*"); %> // cors
[{ "num": 11, "id": "admin", "pw": "hi1212", "name": "kim", "tel": "010" },
{ "num": 22, "id": "admin2", "pw": "hi2222","name": "lee","tel": "02" },
{ "num": 33, "id": "admin33", "pw": "hi3333", "name": "park", "tel": "031"}]
// selectAll.html의 script 부분
window.addEventListener('load', () => {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    console.log(this.responseText)
    let members = JSON.parse(this.responseText); // json to object

    let rows = ``;
    for (const member of members) {
      rows += `
        <tr>
        <td><a href="./js17_ajax_selectOne.html?num=${member.num}">${member.num}</a></td>
        <td>${member.id}</td> 
        <td>${member.pw}</td> 
        <td>${member.name}</td> 
        <td>${member.tel}</td> 
        </tr>
       `;
    }

    document.getElementById('table').innerHTML = rows; // 응답 텍스트
  }
  xhttp.open("GET", "http://localhost:8090/web02hello/selectAll.jsp"); // open이 먼저 실행되고, onload가 실행된다.
  xhttp.send();
});
String id = request.getParameter("id"); // url Parameter 받을 때

Java Servlet

// TestController.java
package test.com;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class TestController
 */
@WebServlet({ "/selectAll.do", "/selectOne.do", "/idCheck.do" }) // URL
public class TestController extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public TestController() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setHeader("Access-Control-Allow-Origin", "*");
		
		String sPath = request.getServletPath();
		System.out.println(sPath);
		
		if (sPath.equals("/selectAll.do")) { // router와 비슷
			String vos = "[{\"num\":11,\"id\":\"admin\",\"pw\":\"hi1212\",\"name\":\"kim\",\"tel\":\"010\"},{\"num\":22,\"id\":\"admin2\",\"pw\":\"hi2222\",\"name\":\"lee\",\"tel\":\"02\"},{\"num\":33,\"id\":\"admin33\",\"pw\":\"hi3333\",\"name\":\"park\",\"tel\":\"031\"}]";
			response.getWriter().append(vos);
		}
		else if (sPath.equals("/selectOne.do")) {
			String vo = "";
			String num = request.getParameter("num");
			
			if (num.equals("11"))
				vo = "{\"num\":11,\"id\":\"admin11\",\"pw\":\"hi1212\",\"name\":\"kim\",\"tel\":\"010\"}";
			else if (num.equals("22"))
				vo = "{\"num\":22,\"id\":\"admin22\",\"pw\":\"hi1212\",\"name\":\"kim\",\"tel\":\"010\"}";
			else
				vo = "{\"num\":33,\"id\":\"admin33\",\"pw\":\"hi1212\",\"name\":\"kim\",\"tel\":\"010\"}";

			response.getWriter().append(vo);
		}
		else if (sPath.equals("/idCheck.do")) {
			String id = request.getParameter("id");
			String result = "";
			
			if (id.equals("admin"))
				result = "{\"result\":\"사용가능한 아이디 입니다.\"}";
			else
				result = "{\"result\":\"사용중인 아이디 입니다.\"}";

			response.getWriter().append(result);
		}
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
}

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

필수로 써야 한다.

<!DOCTYPE html>
<html lang="ko">
<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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <!-- <script src="jquery.min.js"></script> 다운로드 되어 있기 때문에, 이것도 가능 -->
    <script>
        $(() => { // window.onload와 같다.
            console.log('onload...');
            
            // 아이디의 #이나 클래스의 .을 선택자라고 부른다.
            $('#title').text('Hello jQuery'); // 텍스트가 바뀜
            $('#content').html('<h1 id="title">jQuery</h1>'); // html 요소 삽입 가능        
            $('.words').text('Hello everyone'); // words 클래스 전부가 바뀜
            $('.words').css('background', 'blue'); // words 클래스 전부에 css 속성 부여
            // console.log($('.words')); // 이렇게 출력해볼수도 있다. querySelector, querySelectorAll과 동일.

            $('span').css('background', 'red'); // 태그 바로 선택 가능. 이럴 시 선택자 없음
        });
    </script>
</head>
<body>
    <h1 id="title">jQuery</h1>
    <div id="content"></div>
    <p class="words">a</p>
    <p class="words">b</p>
    <p class="words">c</p>
    <span>Hello1</span>
    <span>Hello2</span>
    <span>Hello3</span>
    <span>Hello4</span>
</body>
</html>
profile
이정찬
개발자를 꿈꾸는 사람
이전 포스트

Web_DAY3

다음 포스트

Web_DAY5 (final)

0개의 댓글