공부 하는 겸 작성하는 블로그

# html dom 성능개선 관련 async/defer 적용하기! 조금 더 빨리 dom을 구성하고 화면을 보여주기? # 설명 참조: https://ko.javascript.info/script-async-defer 모든 내용은 아래 링크에 있습니다. 핵심 내용만 인용하여 글 씀. 1. dom 구성 프로세스 브라우저는 HTML을 읽다가 태그를 만나면 스크립트를 먼저 실행해야 하므로 DOM 생성을 멈춥니다. 이는 src 속성이 있는 외부 스크립트 를 만났을 때도 마찬가지입니다. 외부에서 스크립트를 다운받고 실행한 후에야 남은 페이지를 처리할 수 있습니다. 페이지 위쪽에 용량이 큰 스크립트가 있는 경우 스크립트가 페이지를 ‘막아버립니다’. 페이지에 접속하는 사용자들은 스크립트를 다운받고 실행할 때까지 스크립트..

# async, await를 이용한 ajax 통신 async와 await 테스트 코드를 이용하여 비동기로 처리되는 여러개의 ajax를 동기적으로 처리되도록 만들어 보기! document 와 테스트 코드 블로그. HTML 삽입 미리보기할 수 없는 소스 해당 코드는 올바른 코드라고 생각하진 않음. 따라하지 마셈. 그냥 한번 적용해보고 싶어서 하는 거임. # 환경 /** * tool: STS 4.13.0 * version: 2.7.3-SNAPSHOT * java: 1.8 * type: MAVEN * view: THYMELEAF * jQuery: 3.6.0 */ # 페이지 # HTML 동기/비동기 테스트 페이지 입니다. SYNC/ASYNC # ajax 호출 함수, sleep ajax 함수. // ajax tes..

# async, await 테스트 async 함수와 await 설정 확인 하기. 해당 예제 코드는 모던 스크립트의 async await test code를 참조했습니다. async function 앞에 async 키워드를 추가하면 두 가지 효과가 있습니다. 1. 함수는 언제나 프라미스를 반환합니다. 2. 함수 안에서 await를 사용할 수 있습니다. await 프라미스 앞에 await 키워드를 붙이면 자바스크립트는 프라미스가 처리될 때까지 대기합니다. 처리가 완료되면 조건에 따라 아래와 같은 동작이 이어집니다. 에러 발생 – 예외가 생성됨(에러가 발생한 장소에서 throw error를 호출한 것과 동일함) 에러 미발생 – 프라미스 객체의 result 값을 반환 - await는 최상위 레벨 코드에서 작동하..

# fetch - POST, application/json 주로 사용하는 ajax 대신 fetch 로 POST방식 application/json 타입으로 통신하기! # 환경 /** * tool: sts 4.13.0 * version: 2.7.3-SNAPSHOT * java: 1.8 * type: maven * view: Thymeleaf */ # test page # test page html 바닐라JS 테스트 페이지 입니다.(not use jQuery) fetch # fetch (json) javascript example code function json() { // const value = document.getElementById('reqValue').value; const params = { t..

# fetch - POST, application/x-www-form-urlencoded 주로 사용하는 ajax 대신 fetch 로 POST방식 application/x-www-form-urlencoded 타입으로 통신하기! # 환경 /** * tool: sts 4.13.0 * version: 2.7.3-SNAPSHOT * java: 1.8 * type: maven * view: Thymeleaf */ # test page # test page html 바닐라JS 테스트 페이지 입니다.(not use jQuery) fetch # fetch (post) javascript example code function post() { const params = { text: reqValue.value, numbe..

# fetch - GET, application/x-www-form-urlencoded 주로 사용하는 ajax 대신 fetch 로 GET방식 application/x-www-form-urlencoded 타입으로 통신하기! # 환경 /** * tool: sts 4.13.0 * version: 2.7.3-SNAPSHOT * java: 1.8 * type: maven * view: Thymeleaf */ # test page # test page html 바닐라JS 테스트 페이지 입니다.(not use jQuery) fetch # fetch (get) javascript example code function get() { const params = { text: reqValue.value, number: 1..

# Hoisting, var, let, const 정리 얼추 알고 있는 Hoisting, var, let, const 한번 더 정리하기! # Hoisting HTML 삽입 미리보기할 수 없는 소스 자바스크립트 및 액션스크립트 코드를 인터프리터가 로드할 때, 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되어 변수의 선언을 항상 컨텍스트 내의 최상위로 끌어올리는 것을 의미한다. 즉 호이스팅은 자바스크립트 인터프리터가 코드를 읽는 방식이다. let을 사용한다고 호이스팅이 일어나지 않는 것이 아나라, 호이스팅이 일어나 스코프 내 최상위로 끌어올려지지만, 'undefined'를 할당하지 않기 때문에 'undefined'가 출력되는 것이 아니고 참조에러가 발생하게 된다. ES6 이후로 실제 현업에서는 var ..

# ready, load, onload, beforeunload example code jQuery 를 사용하지 않고, document ready, window load, body onload, window beforeunload 예제 코드 만들어보기! # javascript excample code const body = document.querySelector('body'); // jQuery: $(window).on('load', function() {}); window.addEventListener('load', (event) => console.log("[4-1] WINDOW LOAD")); body.onload = () => console.log("[4-2] BODY ON LOAD!"); wi..

# ajax - settings example code Spring Boot Thymeleaf(html) 에서 jQuery Ajax settings option코드 예시 # 환경 /** * tool: STS 4.13.0 * version: 2.7.3-SNAPSHOT * java: 1.8 * type: MAVEN * view: THYMELEAF * jQuery: 3.6.0 */ # jQuery Load # ajax example code // Ajax Send function send(url, method, input, isAsync, type, cbSuccess, cbError, cbComplate) { const ajaxObj = $.ajax(url, // #1. settings { method : m..