http://localhost:8080/lang/variable/exam4/test1.html
서버에 요청하는 순간 URL 주소가 바뀐다.
생략가능함
<form action="http://localhost:8080/lang/variable/exam4/test1">
http://localhost:8080 생략 가능함
<form action="lang/variable/exam4/test1">
lang 앞에 / 빼면 상대 경로가 되어 버린다. 현재 경로를 기준으로 한다.
서버에서 받아 온 최초 소스를 보고 싶으면 "페이지 소스 보기"
현재 웹 페이지 태그 상태를 보고 싶으면 "개발자 도구 - Elements 탭"
html의 위치는 exam4 방에 들어있다. 현재 위치는 exam4
↑ 현재 위치를 기준으로 되어 버림
<form action="/lang/variable/exam4/test1">
lang 앞에 / 붙이기
절대 경로
서버 루트 = http://localhost:8080
서버에서 바뀐 걸 다시 받아오려면 새로고침
서버 렌더링(rendering)과 클라이언트 렌더링
1) 서버 렌더링 : 서버에서 HTML을 만들어 웹 브라우저에게 보내주는 것
스프링 부트가 Exam4 호출
Exam4 test1() 작업을 수행한 다음 웹 브라우저가 출력할 HTML을 생성
HTML을 리턴
스프링 부트가 HTML을 웹 브라우저에게 응답
⑥ 웹 브라우저는 서버가 보내준 HTML을 출력
현업에 가면 서버 렌더링 방식이 90%
// 변수 활용
package com.eomcs.study.lang.variable;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController("lang.variable.exam4") // 클래스 이름이 같은 경우 충돌 방지
@RequestMapping("/lang/variable/exam4")
public class Exam4 {
@GetMapping("/test1")
public String test1(int v1, int v2, String op) {
int result = 0;
switch (op) {
case "+": result = v1 + v2; break;
case "-": result = v1 - v2; break;
case "*": result = v1 * v2; break;
case "/": result = v1 / v2; break;
case "%": result = v1 % v2; break;
default: return "해당 연산을 수행할 수 없습니다.";
}
// 이렇게 서버에서 웹 브라우저가 출력할 화면을
// HTML로 만들어 클라이언트로 보내는 것을
// "서버측 렌더링(server-side rendering)"이라 부른다.
String html = "<!DOCTYPE html>"
+ "<html>"
+ "<head>"
+ "<meta charset=\"UTF-8\">"
+ "<title>변수 활용</title>"
+ "</head>"
+ "<body>"
+ "<h1>계산 결과</h1>"
+ "<p>" + v1 + " " + op + " " + v2 + " = " + result + "</p>"
+ "</body>"
+ "</html>";
return html;
}
}
너무 불편한데요...
UI 템플릿
뷰 템블릿
Thymeleaf, JSP
클라이언트 렌더링 방식 (client-side rendering)
2) 클라이언트 측 렌더링
① 웹 브라우저에서 test2 요청
② Spring Boot에서 test2() 호출
③ 작업 수행
④ 결과값을 리턴
⑤ 결과값 응답
⑥ 서버가 보낸 결과값을 가지고 HTML을 생성/변경/삭제해서 화면 출력
클라이언트측 렌더링
wrapper class
하나의 function으로 묶는다.
다시 이 function을 class로 묶는다.
다시 이 class를 package에 둔다.
⟹ 코드 관리가 쉽도록 코드를 묶고 분류한다.
메서드의 UML 표기법
자바에서는 method라고 부른다.
java.lang.Integer.
java 라는 패키지 밑에 lang이라는 패키지 밑에 Integer
int 값을 주면 String
toString = 기능명 = function = method
기능을 수행하는 데 필요한 값을 받을 변수 = 파라미터(parameter)
넘겨주는 값 = argument
기능을 수행한 후 리턴하는 값의 타입 = 리턴 타입
UML 표기법에
UML(Unified Modeling Language) : 통합된 표기법
분석/설계에 대한 내용을 글과 그림으로 표현한 것
// 자바 코드
String toString(int i) {...}
리턴 타입 파라미터 // UML 표기법
toString(i : int) : String// 이클립스 : UML에 흡사하게 표현. 완벽한 UML 아님.
toString(int i) : String
파라미터 리턴 타입 변수
int i → i: int (UML 표기법)
java.lang 패키지에 소속된 클래스를 사용할 때는 패키지명 생략 가능
java.lang 패키지 한정!!!
원래는 다 적어야 됨. 다른 건 안 됨!!!
http://localhost:8080/lang/variable/exam4/test2.html
↓ 서버에서 보낸 건 300이라는 문자열 밖에 없음
웹 브라우저가 최소 기본 틀을 만들어서 출력
웹 브라우저가 알아서 html 최소 세팅을 한 거
클라이언트 측 렌더링은 서버가 보낸 결과값을 가지고 HTML을 생성, 변경, 삭제해서 화면 출력! 자바스크립트가 동원되어야 함.
test2.html
웹 브라우저 할 일이 아니다. 별도로 자바스크립트로 제어할 거다.
test2.html에서는 script 태그 필요함
<script>
// 버튼을 클릭하면 웹 브라우저에서 별도의 요청을 수행한다.
// 1) 버튼을 클릭했을 때 수행할 작업을 등록한다.
var xBtn = document.querySelector("#x-btn");
버튼.onclick = function() {
};
</script>자바는 이름 지을 때 firstName
자바스크립트에서 id를 지정할 때 단어와 단어 사이를 -로 연결
자바스크립트도 변수 이름에는 - 못 적음. 자바처럼 firstName 형식으로 함
버튼에 id 주기
id="x=btn"
<button type="button" id="x=btn">=</button>button의 type이 기본이 submit임
<button type="submit"></button>
버튼을 클릭하면 액션을 수행하게 되어 있음
우리는 지금 액션은 자바스크립트에서 따로 할 거니까
일반 버튼으로 가만히 있어
누르면 함수나 호출해
type을 따로 지정해주지 않으면 submit 버튼이 기본이 됨
submit 버튼을 누르면 form에 등록된 action URL을 요청한다.
action을 지정하지 않았는데요?
action을 지정하지 않으면 서버에 현재 URL을 요청한다.
주소창 보면 주소 바뀌어 있음
test2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변수 활용</title>
</head>
<body>
<h1>계산기 : client-side rendering</h1>
<form>
<input type="text" name="v1">
<select name="op">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
<option>%</option>
</select>
<input type="text" name="v2">
<button type="button" id="x-btn">=</button>
</form>
<script>
// 버튼을 클릭하면 웹 브라우저에서 별도의 요청을 수행한다.
// 1) 버튼을 클릭했을 때 수행할 작업을 등록한다.
var xBtn = document.querySelector("#x-btn");
xBtn.onclick = function() {
console.log("okok!");
};
</script>
</body>
</html>
type="submit" 클릭하면 서버에 요청해서 html을 받아옴
type="button"의 경우는 서버에 요청하지 않음. 등록된 함수가 호출되고 Console에 결과가 찍힘.
버튼을 누르면 onclick으로 등록된 함수가 호출이 되는 거
호출될 함수를 onclick이라는 이름으로 버튼에 등록하는 거
함수 호출되는 거 확인했음!
XMLHttpRequest
https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest
XMLHttpRequest(XHR) 객체는 서버와 상호작용하기 위하여 사용됩니다.
전체 페이지의 새로고침 없이도 URL로부터 데이터를 받아올 수 있습니다.
이는 웹 페이지가 사용자가 하고 있는 것을 방해하지 않으면서 페이지의 일부를 업데이트할 수 있도록 해줍니다. XMLHttpRequest는 AJAX 프로그래밍에 주로 사용됩니다.
서버에 요청할 때 사용할 도구를 준비한다.
// 서버에 요청할 때 사용할 도구를 준비한다.
var xhr = new XMLHttpRequest();서버에서 응답을 받았을 때(load 이벤트) 호출될 함수를 등록한다.
xhr.addEventListener(이벤트명, 호출될 함수);
xhr.addEventListener("load", function() {});
// 서버에서 응답을 받았을 때(load 이벤트 발생) 호출될 함수를 등록한다.
xhr.addEventListener("load", function() {
console.log("서버에서 응답 받았음!");
});XMLHttpRequest(XHR) : 서버에 요청할 때 사용할 도구
서버와 연결한다.
XMLHttpRequest.open()
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open
// 서버 요청에 필요한 URL 정보를 설정한다.
xhr.open(
"get", // HTTP 요청 방식
"/lang/variable/exam4/test2?v1=100&v2=200&op=-", // 요청 URL
true); // 비동기 여부 지정비동기 여부
이 값이 false이면 send() 응답을 받을 때까지 메서드가 반환되지 않습니다.
서버에 요청 정보를 보낸다.
// 서버에 요청 정보를 보낸다.
xhr.send();서버에 요청 정보를 보내고 서버에서 응답이 오면
xhr.addEventListener("load", function() {});가 호출된다.
@GetMapping("/test2")
public Object test2(int v1, int v2, String op) {
int result = 0;
switch (op) {
case "+": result = v1 + v2; break;
case "-": result = v1 - v2; break;
case "*": result = v1 * v2; break;
case "/": result = v1 / v2; break;
case "%": result = v1 % v2; break;
default: return "해당 연산을 수행할 수 없습니다.";
}
return result;addEventListener : 어떤 이벤트가 발생했을 때 호출할 함수를 브라우저에게 등록하는 거
"load" 라는 이벤트는 서버에서 응답이 왔을 때 발생
https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest
무조건 주고 받는 건 문자열
// 서버에서 응답을 받았을 때(load 이벤트 발생) 호출될 함수를 등록한다.
xhr.addEventListener("load", function() {
console.log(xhr.responseText);
});// 입력폼의 각 태그를 찾는다.
var xV1 = document.querySelector("input[name='v1']");
var xV2 = document.querySelector("input[name='v2']");
var xOp = document.querySelector("select[name='op']");태그를 찾을 때 사용하는 문법 selector 선택자 스타일을 지정할 선택자
태그 용어
<시작 태그>콘텐트<끝 태그>
태그명
속성(attribute)
속성명
속성값
<input readonly>
속성 중에 값을 생략할 수 있는 속성이 있다.
이 경우 속성의 존재 유무에 따라 동작이 제어된다.
값을 설정하더라도 아무런 의미가 없다.
var xV1 = document.querySelector("input[name='v1']");
var xV2 = document.querySelector("input[name='v2']");
var xOp = document.querySelector("select[name='op']");
console.log(xV1);
console.log(xV2);
console.log(xOp);
xhr.open(
"GET", // HTTP 요청 방식
"/lang/variable/exam4/test2?v1=" + xV1.value + "&v2=" + xV2.value + "&op=" + xOp.value, // 요청 URL
true); // 비동기 여부 지정input 태그와 입력값
var xV1 = document.querySelector("input[name='v1']");
xV1.value // name이 'v1'인 input 태그의 입력값을 가져온다.URL 인코딩과 파라미터 값
주의!
// - 웹 브라우저에서 직접 요청할 때는 'URL 인코딩'을 따로 처리하지 않아도 된다.
// 왜? 웹 브라우저가 알아서 URL 인코딩을 해준다.
// - 자바스크립트를 이용해서 요청할 때는 개발자가 직접 'URL 인코딩'을 처리해야 한다.
// 즉 URL 인코딩을 하지 않았을 때 문제가 발생할 문자에 대해 반드시 URL 인코딩을 처리해야 한다.
//
// encodeURIComponent(문자열)
// ==> 한글뿐만 아니라 URL에서 특별한 의미로 사용되는 문자(?, +, # 등)도 인코딩을 처리해야 한다.URL에서 '+' 문자는 space 1개를 의미
http://localhost:8080/lang/variable/exam4/test1.html
server-side rendering
test1.html을 실행시켜보면 op=%2B 라고 뜨는 걸 볼 수 있다.
RFC 3986
영어, 숫자, 특수문자를 제외한 나머지 문자는 변환한다.
퍼센트 인코딩 (URL 인코딩)
7 bit 네트워크 장비를 거쳐갈 때 데이터가 잘리지 않도록 조치하기 위함
문자 → url 인코딩 → 문자
클라이언트에서 서버로 문자를 보낼 때,
'A'를 보낼 때는 url 인코딩을 하지 않고 그대로 보낸다.
'가'를 보낼 때는 url 인코딩해서 보내고 서버에 도착했을 때는 원래 문자인 '가'로 바뀐다.
'+'를 url 인코딩 하지 않고 보내면 공백문자가 된다.
"%2B"로 인코딩해서 보내야 서버에 '+'로 제대로 도착한다.
@GetMapping("/test2")
public Object test2(int v1, int v2, String op) {
System.out.println(">" + v1 + "<");
System.out.println(">" + v2 + "<");
System.out.println(">" + op + "<");
int result = 0;
switch (op) {
case "+": result = v1 + v2; break;
case "-": result = v1 - v2; break;
case "*": result = v1 * v2; break;
case "/": result = v1 / v2; break;
case "%": result = v1 % v2; break;
default: return "해당 연산을 수행할 수 없습니다.";
}
return result;
}
공백으로 나온다
일부 문자의 경우 따로 URL 인코딩 하지 않으면 다른 의미로 사용된다.
+ : 공백문자
? : 쿼리 스트링 시작 명령
알파벳, 숫자, 일부 특수 문자는 URL 인코딩 하지 않아도 그대로 전달된다.
한글은 URL 인코딩 필요
자바스크립트에서 요청할 때는 URL 인코딩
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/encodeURI
encodeURIComponent
xhr.open(
"GET", // HTTP 요청 방식
"/lang/variable/exam4/test2?v1=" + xV1.value + "&v2=" + xV2.value + "&op=" + encodeURIComponent(xOp.value), // 요청 URL
true); // 비동기 여부 지정
%2B로 들어감
자바스크립트로 태그를 바로 찾고 싶을 때 부여
Front-end 핵심 API
① DOM API(Document Object Model)
태그를 찾고, 태그의 속성/값을 변경, 태그를 제거 등
document.getElementById(태그아이디) → 태그 객체 1개
document.getElementsByTagName(태그명) → 여러 개의 태그
document.getElementsByClassName(클래스명) → 여러 개의 태그
document.querySelector(CSS-selector) → 한 개의 태그 객체
document.querySelectorAll(CSS-selector) → 여러 개의 태그 객체
태그 생성
document.createElement(태그명) → 태그 객체 1개
document.createTextNode(내용) → 여러 개의 태그 객체
자식 태그 추가/삭제
Node.appendChild() → 다른 태그 아래에 자식 태그 추가
Node.removeChild() → 자식 태그 제거
태그의 콘텐트 설정
Node.textContent = 내용 → 태그의 콘텐트 설정. 내용 안에 태그가 있다면 무시한다.
Element.innerHTML = 내용 → 태그의 콘텐트 설정. 내용 안에 태그가 있다면 자식 태그로 처리한다.
폼 입력 태그의 값 설정
HTMLInputElement.value = input 태그의 입력값
HTMLSelectElement.value = select 태그의 선택한 옵션 값
② 태그의 이벤트 처리
태그에 대해 특정 이벤트가 발생 했을 때 호출될 함수를 등록
웹 브라우저가 함수를 호출한다
개발자 → 함수 ← 웹 브라우저
'callback 함수'라고 부른다.
callback 함수 = event listener = event handler
특정 이벤트에 귀기울인다.
이벤트를 다루는 자
태그.onclick = function() {...};
onclick ← 이벤트 핸들러의 이름
이미 태그에 대해 이름이 정해져 있다.
on으로 시작
function() ← 이벤트가 발생하면 호출된다.
https://developer.mozilla.org/ko/docs/Web/API/GlobalEventHandlers/onclick
태그.addEventListener("click", function() {...});
"click" ←이벤트명
<태그>
onclick ← 이벤트 핸들러
이벤트가 발생하면 설정된 코드가 실행된다.
태그에 자바스크립트 코드 때려 박는 코드는 잘 안 씀
③ Ajax(Asynchronous JavaScript and XML) API
⟹ 별도의 서버 요청 작업을 수행할 때 사용
비동기적인
숟가락은 들고 나서, 밥을 푸는 작업 ⟹ 동기 작업 (synchronous)
어떤 작업이 끝나면 이어서 작업하고
TV 시청 & 치맥을 먹는 작업 ⟹ 비동기 작업 (asynchronous)
얘는 얘대로 진행하고
얘도 얘대로 진행함
같이 병행하는 게 asynchronous
서버에 요청할 때 사용할 도구를 준비한다.
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", function() {...});
"load" ← 서버에서 응답을 받았을 때 응답이 오면 발생하는 이벤트
function() {...} ← 응답이 왔을 때 호출될 함수
⟹ 서버가 보낸 실행결과를 처리!
신규 프로젝트사용
xhr.onreadystatechange = function() {...}
예전 프로젝트에서 사용
xhr.open("GET", URL, 비동기 여부); ← 서버에 연결
xhr.send(쿼리 스트링 or null); ← 서버에 요청
어느 태그에 함수를 등록할 건지 태그를 찾는다.
필요하면 태그를 생성하고
태그 아래에 자식 태그 추가
어떤 이벤트가 발생할 때 작업하도록 이벤트 리스너(콜백 함수)를 등록
사용자가 서버에 요청하는 버튼을 눌
Ajax 객체를 가지고
서버가 응답을 하면 데이터를 어떻게 다룰지는
onclick은 함수 1개
addEventListener는 함수 여러 개 가능
li ← list item
http://localhost:8080/lang/variable/exam4/test3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변수 활용</title>
</head>
<body>
<h1>배열 다루기</h1>
<button type="button" id="x-btn">배열 가져오기</button>
<ul>
<li>홍길동</li>
<li>임꺽정</li>
<li>유관순</li>
</ul>
</body>
</html>버튼을 눌렀을 때 배열 데이터를 가져오는 거
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변수 활용</title>
</head>
<body>
<h1>배열 다루기</h1>
<button type="button" id="x-btn" onclick="console.log('눌렀음!')">배열 가져오기</button>
<ul>
<li>홍길동</li>
<li>임꺽정</li>
<li>유관순</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변수 활용</title>
</head>
<body>
<h1>배열 다루기</h1>
<button type="button" id="x-btn" onclick="console.log('눌렀음!1')">배열 가져오기</button>
<ul>
<li>홍길동</li>
<li>임꺽정</li>
<li>유관순</li>
</ul>
<script>
var xBtn = document.getElementById("x-btn");
xBtn.onclick = function() {
console.log('눌렀음!2')
};
</script>
</body>
</html>뒤에거가 덮어쓰기 돼서 2가 나옴
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변수 활용</title>
</head>
<body>
<h1>배열 다루기</h1>
<button type="button" id="x-btn">배열 가져오기</button>
<ul>
<li>홍길동</li>
<li>임꺽정</li>
<li>유관순</li>
</ul>
<script>
var xBtns = document.getElementsByTagName("button");
xBtns[0].onclick = function() {
console.log('눌렀음!')
};
</script>
</body>
</html>getElementsByTagName() 찾은 게 1개여도 무조건 배열로 반환
CSS Selector
태그를 가리키는 명령 (≒파일 경로)
<h1 id='x-title' class='t1 t2'> ... </h1>
<h1 id='x-name' class='t1 t3'> ... </h1>
<h1 id='x-tel' class='t2'> ... </h1>#x-title ← 태그 id
h1 ← 태그명
.t2 ← class명
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변수 활용</title>
</head>
<body>
<h1>배열 다루기</h1>
<button type="button" id="x-btn">배열 가져오기</button>
<ul>
<li>홍길동</li>
<li>임꺽정</li>
<li>유관순</li>
</ul>
<script>
var xBtn = document.querySelector("#x-btn");
xBtn.onclick = function() {
console.log('눌렀음!4')
};
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변수 활용</title>
</head>
<body>
<h1>배열 다루기</h1>
<button type="button" id="x-btn">배열 가져오기</button>
<ul>
<li>홍길동</li>
<li>임꺽정</li>
<li>유관순</li>
</ul>
<script>
var xBtn = document.querySelector("#x-btn");
xBtn.onclick = function() {
console.log('눌렀음!4')
};
xBtn.onclick = function() {
console.log('눌렀음!5')
};
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변수 활용</title>
</head>
<body>
<h1>배열 다루기</h1>
<button type="button" id="x-btn">배열 가져오기</button>
<ul>
<li>홍길동</li>
<li>임꺽정</li>
<li>유관순</li>
</ul>
<script>
var xBtn = document.querySelector("#x-btn");
xBtn.addEventListener("click", function() {
console.log('눌렀음!6')
});
xBtn.addEventListener("click" ,function() {
console.log('눌렀음!66')
});
</script>
</body>
</html>
http://localhost:8080/lang/variable/exam4/test3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변수 활용</title>
</head>
<body>
<h1>배열 다루기</h1>
<button type="button" id="x-btn">배열 가져오기</button>
<ul>
<li>홍길동</li>
<li>임꺽정</li>
<li>유관순</li>
</ul>
<script>
var xBtn = document.querySelector("#x-btn");
xBtn.addEventListener("click", function() {
// 서버에 요청할 때 사용할 도구를 준비한다.
var xhr = new XMLHttpRequest();
// 서버에서 응답을 받았을 때(load 이벤트 발생) 호출될 함수를 등록한다.
xhr.onload = function() {
console.log(xhr.responseText);
};
// 서버와 연결한다.
// 서버 요청에 필요한 URL 정보를 설정한다.
xhr.open(
"GET", // HTTP 요청 방식
"/lang/variable/exam4/test3", // 요청 URL
true); // 비동기 여부 지정
// 서버에 요청 정보를 보낸다.
xhr.send();
});
</script>
</body>
</html> @GetMapping("/test3")
public Object test3() {
String[] names = {"홍길동", "임꺽정", "유관순", "안중근", "윤봉길"};
return names;
}
스프링 부트에서 결과 리턴
① 웹 브라우저에서 요청
② test3() 호출
request handler : 요청이 들어왔을 때 호출되는 메서드
요청 처리기
클라이언트 요청을 처리 하는 자
③ 실행
페이지 컨트롤러(Page Controller) : request handler를 갖고 있는 클래스
⟹ 요청을 처리하는 역할을 수행
RestController
request handler를 갖고 있는 클래스
④ 리턴
⑤ 리턴값
⑥ 리턴 값을 가공한다.
Message Converter
- 기본 : Jackson Json Converter
- 응답할 데이터 가공
- 요청으로 받은 데이터 가공
• 문자열, 자바 원시 타입 데이터 → 문자열
• 배열, 객체 → JSON 형식의 문자열
스프링 부트가 Message Converter를 통해서 가공한 값을 받아서 응답
⑦ 가공한 값 리턴
@GetMapping("/test3")
public Object test3() {
String[] names = {"홍길동", "임꺽정", "유관순", "안중근", "윤봉길"};
return names; // 스프링부트는 이 메서드가 리턴한 배열을 JSON 형식의 문자열로 바꿔 응답한다.
}스프링 부트는 이 메서드가 리턴한 배열을 JSON 형식의 문자열로 바꿔 응답한다.
http://localhost:8080/lang/variable/exam4/test3.html
JSON 형식의 문자열
JSON(JavaScript Object Notation) : App 간에 데이터를 주고 받을 때 사용하는 데이터 형식
JavaScript의 객체 초기화 문법(object initializer)을 모방해서 만든 데이터 형식 (json.org 사이트 참고)
JSON은 Javascript 객체 리터럴 문법을 따르는 문자열입니다.
Object initializer
배열
const arr = [요소, 요소, 요소, ..., 요소]객체
const object = {
프로퍼티명: '값',
프로퍼티명: '값',
프로퍼티명: '값',
...
}객체와 메서드
객체(object) : 데이터 덩어리
객체 = 인스턴스
메소드(method) : 객체를 다루는 함수
클래스와 객체
클래스 : 객체를 만드는 설계도
메소드를 통해서 그 객체를 다루는 거
이거를 어떻게 꺼내쓸 거냐
자바스크립트 객체를 문자열로 바꾸는 방법 : JSON.stringify()
문자열을 자바스크립트 객체로 바꾸는 방법 : JSON.parse()
JSON.parse() 사용하여 자바스크립트 배열로 바꾼다.
// 서버에서 응답을 받았을 때(load 이벤트 발생) 호출될 함수를 등록한다.
// 서버에서 받은 JSON 형식의 배열을 자바스크립트 배열로 변환한다.
xhr.onload = function() {
var names = JSON.parse(xhr.responseText);
console.log(names);
};
배열로 바꿈
배열로 바꿨으니까 반복문을 쓸 수 있음
xhr.onload = function() {
// 서버에서 받은 JSON 형식의 배열을 자바스크립트 배열로 변환한다.
var names = JSON.parse(xhr.responseText);
for (var name of names) {
console.log(name);
}
};
xhr.onload = function() {
// 서버에서 받은 JSON 형식의 배열을 자바스크립트 배열로 변환한다.
var names = JSON.parse(xhr.responseText);
for (var name of names) {
var li = document.createElement("li"); // <li><li>
li.innerHTML = name; // <li>홍길동<li>
console.log(li);
}
};
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변수 활용</title>
</head>
<body>
<h1>배열 다루기</h1>
<button type="button" id="x-btn">배열 가져오기</button>
<ul id="x-namelist">
</ul>
<script>
var xNamelist = document.querySelector("#x-namelist");
var xBtn = document.querySelector("#x-btn");
xBtn.addEventListener("click", function() {
// 서버에 요청할 때 사용할 도구를 준비한다.
var xhr = new XMLHttpRequest();
// 서버에서 응답을 받았을 때(load 이벤트 발생) 호출될 함수를 등록한다.
xhr.onload = function() {
// 서버에서 받은 JSON 형식의 배열을 자바스크립트 배열로 변환한다.
var names = JSON.parse(xhr.responseText);
for (var name of names) {
var li = document.createElement("li"); // <li><li>
li.innerHTML = name; // <li>홍길동<li>
xNamelist.appendChild(li);
}
};
// 서버와 연결한다.
// 서버 요청에 필요한 URL 정보를 설정한다.
xhr.open(
"GET", // HTTP 요청 방식
"/lang/variable/exam4/test3", // 요청 URL
true); // 비동기 여부 지정
// 서버에 요청 정보를 보낸다.
xhr.send();
});
</script>
</body>
</html>
