substring(${startIndex} , ${endIndex})시작 인덱스 ~ 마지막 인덱스까지의 값을 가져옵니다 원래 substr이라는 메소드도 있었지만 @deprecated A legacy feature for browser compatibility로 인해사용하지 않기로 되었다
📝trim
let spaceDesc = " hello!! ";
console.log(spaceDesc.trim()); // hello!!
좌우 공백을 자릅니다
📝repeat
let hello = "Hello!";
console.log(hello.repeat(3)); // Hello!Hello!Hello!
let margin = '10px';
let redColor = 'f3';
console.log(parseInt(margin)); // 10
console.log(parseInt(margin)); // NaN
console.log(parseInt(redColor)); // NaN
console.log(parseInt(redColor, 16)); // 243
console.log(parseInt('11', 2)); // 3
let padding = '18.5%';
console.log(parseInt(padding)); // 18
console.log(parseFloat(padding)); // 18.5
console.log(Number(padding)); // NaN
parseInt는 문자를 정수형으로 바꾸고 소수점이 있는 경우 버린다.
parseFloat의 경우 문자를 실수형으로 바꾼다
Number의 경우 문자를 숫자로 바꾼다
parseInt, parseFloat와 Number의 다른점은 뒤에 문자가 있어도 앞에 숫자만 있으면 거기까지만 인식한다 개인적인 생각으로 알아서 처리해서 없애주는 건 내가 원하는 대로 프로그램이 안 굴러갈 수도 있다는 걸 의미하기 때문에 Number를 쓰는게 어떤가 싶다
📝Math.random
console.log(Math.random()); // 0.2068236122613274 [0 ~ 1 사이 무작위 숫자]
let random = Math.floor(Math.random() * 100) + 1
console.log(random) // 1 ~ 100 랜덤한 숫자
Math.random()만 사용하는 경우 0 ~ 1의 무작위 숫자가 나오는데 정수형으로 바꾸기 위해 Math.random * 100을 통해 사이값의 기준을 정하고 +1을 통해 초기값을 설정한다 이렇게 되어서 초기값이 1이고 사이값이 100이기 때문에 1 ~ 100의 랜덤한 숫자가 나오게 되는 것이다
XMLHttpRequest(XHR) 객체는 서버와 상호작용하기 위하여 사용 즉, 비동기 통신을 위해 필요한 객체
📝 Ajax
Asynchronous JavaScript And XML의 약자로 JavaScript를 이용해 비동기 HTTP 통신 라이브러리입니다. XMLHttpRequest(XHR) 객체를 이용해 필요한 데이터만 불러올 수 있습니다. jQuery가 있어야 Ajax가 사용한게 아닙니다. 순수 Ajax를 이용해서 구현이 가능한데 너무 복잡하기 때문에 일반적으로 jQuery를 사용합니다.
💗장점
jQuery를 통해 쉽게 구현 가능 성공, 실패 등 Event에 따른 Handle 가능
⚠️단점
jQuery를 이용해야 사용이 편하다 Promise 기반이 아니다.
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() { // 요청에 대한 처리
if (xhr.readyState === xhr.DONE) { // 요청 완료시
if (xhr.status === 200 || xhr.status === 201) { // 200 또는 201 서버 상태 코드(성공)
console.log(xhr.responseText);
} else { // 실패
console.error(xhr.responseText);
}
}
};
xhr.open('GET', 'https://localhost:3000'); // 통신방식, 통신 할 EndPoint
xhr.send(); // xhr 기반으로 요청
// xhr.abort(); // xhr 기반 요청 취소
XHR 기반으로 통신 (jQuery 사용 X)
$.ajax({
url: https://localhost:3000, // 통신할 EndPoint
type: 'GET', // 통신 방식
success: function onData (data) { // 성공 시
console.log(data);
},
error: function onError (error) { // 실패 시
console.error(error);
}
});
ajax를 이용한 통신 (jQuery 사용 O)
📝 Axios
Node.js와 비동기 통신을 목적으로 만들어진 Promise 기반 HTTP 통신 라이브러리입니다. return을 Promise로 하기 때문에 비동기를 좀 더 효율적으로 할 수 있습니다.
웹페이지 구동 순서는 JAVA(Controller) > JSTL > HTML > JavaScript 순이기 때문에
ajax로 받아온다한들 JSTL부분이 앞에 있어서 화면에 받아온 데이터를 다시 그려주질 못한다.
그래서 내가 생각하기에는 SPA를 구현할거면 ajax만 이용하고 MPA의 경우는 JSTL만 사용하는게 올바르다.
MPA를 SPA로 다 뜯어고치기 힘든 경우라면 이런 방법을 추천한다.
1. ajax로 다시 그려줄 부분을 jsp로 뺀다.
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<title>Home</title>
</head>
<body>
<h1>
Hello world! My Name is ${name}
</h1>
<P> The time on the server is ${serverTime}. </P>
<button> 현재 시각을 동적으로 가져옵니다. </button>
</body>
</html>
원본 JSP
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<title>Home</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.2.js" integrity="sha256-pkn2CUZmheSeyssYw3vMp1+xyub4m+e+QK4sQskvuo4=" crossorigin="anonymous"></script>
<h1>
Hello world! My Name is ${name}
</h1>
<div id='ajaxRendering'>
<P> The time on the server is ${serverTime}. </P>
</div>
<button onClick=getTime()> 현재 시각을 동적으로 가져옵니다. </button>
</body>
<script>
function getTime() {
$.ajax({
url: "/ajax",
type: 'GET',
success: function(result){
$("#ajaxRendering").html(result);
}
}); //ajax end
}
</script>
</html>
원본 수정한 페이지 (button으로 ajax 렌더링하는 부분 및 그려줄 부분을 뺐다.)
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<P> The time on the server is ${serverTime}. </P>
</body>
</html>
ajax로 그려주는 페이지
2. Controller에서 다시 그려줄 부분을 뺀 jsp를 호출한다.
package com.lsj.spring_study;
import java.text.SimpleDateFormat;
import java.util.Date;
import org.apache.logging.log4j.LogManager;
import org.apache.logging.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
/**
* Handles requests for the application home page.
*/
@Controller
public class AjaxController {
/** ajax로 호출할 페이지 **/
@RequestMapping(value = "/ajax", method = RequestMethod.GET)
public String ajaxPage(Model model) {
Date now = new Date();
SimpleDateFormat sdf1 = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String nowTime = sdf1.format(now);
model.addAttribute("serverTime", nowTime);
return "ajax";
}
/** 원본 페이지 **/
@RequestMapping(value = "/origin", method = RequestMethod.GET)
public String originPage(Model model) {
Date now = new Date();
SimpleDateFormat sdf1 = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String nowTime = sdf1.format(now);
model.addAttribute("name", "마이클");
model.addAttribute("serverTime", nowTime);
return "origin";
}
}
3. 본 페이지에서 해당 버튼을 클릭시 ajax를 호출한다.
origin이라는 URL 호출시 나오는 화면 (JSTL로 현재시각을 받아오려면 해당 URL을 호출해야함 → 새로고침)
