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

# 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는 최상위 레벨 코드에서 작동하..