Front/Javascript (13) 썸네일형 리스트형 [스프링, 자바스크립트] Thymeleaf를 활용한 브라우저 캐싱 처리 방지 기법 프론트를 수정하여 배포하였을 경우 기존의 캐싱된 문서가 호출되어 수정사항이 반영되지 않는 경우가 있다. 웹브라우저의 캐시를 지우고 시도하면 해결되지만 고객들에게 매번 캐시를 지워달라고 할 수 없기에 개발자가 브라우저의 캐싱되는 것을 방지해야할 경우가 생긴다. 기존 js 호출 방식 위와 같은 js를 호출한다고 할 때 캐싱 방지처리 아래와 같이 파일명 뒤에 쿼리스트링을 붙여주면 캐싱된 js를 호출하지 않고 서버에서 새로 받게된다. 하지만 실제 프로젝트에서는 이렇게 일일이 쿼리스트링을 작성하면 관리에 여러모로 많은 문제점이 있어 한번에 적용하고자 했다. 타임리프를 이용한 캐싱방지처리 타임리프를 이용하면 스프링의 설정파일인 application.properties 파일에 정의된 key값을 가져와 사용할 수 있다.. [JavaScript] AES256 암호화 처리 function aes256Encrypt(text){ var key = CryptoJS.enc.Utf8.parse(encryptKey); //암호화키 (32자리) 할당 var iv = CryptoJS.enc.Hex.parse(ivVal);// IV값할당 return CryptoJS.AES.encrypt(text, key, {iv:iv}).toString(); } encryptKey(비밀키) - 16바이트 (16자리)를 입력시 AES-128 출력 - 24바이트 입력 시 AES-192, 32바이트 입력 시 AES-256으로 출력한다. Iv - 배열 값은 16바이트 고정 - ivVal 파라미터에 값을 넣어준다. [JavaScript] Promise 개념 [JavaScript] Promise Promise란 자바스크립트에서 비동기 처리를 이용한 패턴이다. 기존 비동기 처리에 이용하는 콜백 함수는 콜백헬 발생 시 가독성이 나쁘고, 예외처리가 힘든 단점이 있어 프로미스가 등장했다. 프로미스에 대해 구글의 설명을 보거나 강의 영상을 보면 설명이 꽤 난해하게 느껴진다. 그렇기에 쉽게 이해할 수 있도록 공부해보았다. 프로미스의 사용 프로미스는 일단 선언과 실행부로 나누어 사용한다. 각 부분의 구조를 살펴보면 선언부 // Promise 객체의 생성 const promise = new Promise((resolve, reject) => { // 비동기 작업을 수행한다. if (/* 비동기 작업 수행 성공 */) { resolve('result'); } else { /.. [JavaScript] 스크립트 로딩 제어 (defer, async, onload, DOMContentLoaded) 백엔드를 지망하지만 프로젝트를 하다 보니 비교적 덜 다뤘던 JavaScript를 더 많이 공부하게 되는거 같다. 내가 헷갈렸던것은 가 와야할 위치와 defer/async, DOMContentLoaded 와 onload의 차이점이였고, 이번 시간에 그에 대해 공부해보았다. 의 위치는 body 최하단이 제일 좋은 이유 웹 소스는 위에서 아래로 실행되기 때문에 Display가 모두 표시되고 나서 가 실행되서 자연스러운 흐름을 만들 수 있다. 중간에 동적으로 변화하는 DOM 구조가 있을 경우 그 노드의 조작을 시도할 수 있다. 만약 script 태그를 맨 밑에 놓지 못하는 상황이라면? defer를 사용한다. // html 중간에 스크립트를 만나도 바로 실행시키지 않고 지연시켜서 가 일어나며 이를 지연 시켜서 맨.. [JavaScript] JQuery-UI 드래그앤 드랍으로 요소 정렬하기 JQuery-UI/Sortable JQuery-UI란 CSS, JavaScript로 구현할 수 있는 UI를 쉽게 다룰 수 있도록 만들어진 API이다. JQuery-UI의 Sortable를 사용하면 아이템의 순서를 바꿀 수 있다. CDN jQuery는 3.x 버전까지 있지만 구버전 브라우저와 호환을 위해 제일 안정적인 1.12.4버전을 사용을 권장한다고 한다. 사용방법 가 나 다 라 마 리스트 개체를 선택자로 .sortable() 메소드를 선언해주면 드래그앤 드랍을 사용할 수 있다. items 만약 리스트가 아닌 개체나 원하는 요소를 지정해서 사용하고 싶으면 items 속성을 사용한다. 가 나 다 라 마 이렇게 사용하게 되면 sort를 선언해준 가, 나, 다 아이템만 sortable속성이 적용 된다. 간단.. [JavaScript] Ajax에 대해 (JQuery) Ajax(Asynchronous Javascript And Xml) Ajax를 이용하면 전체 페이지를 새로고침하지 않고도 페이지의 데이터를 서버와 클라이언트 간 통신할 수 있다. 이를 비동기 처리라고 하며 예를들면 우리가 사용하는 댓글 기능도 비동기 처리 방식이다. Ajax는 JavaScript의 라이브러리이며 그중 JQuery는 Ajax에 관련된 여러 편리한 기능들을 제공해주는 프레임워크이다. 그래서 보통 Ajax는 JQuery와 함께 사용하게된다. 예시 - JQuery를 사용하지 않는 Ajax 구문 (순수 자바스크립트) // This function gets invoked when server sends the response function reqListener (e) { console.log(e... [JavaScript] 객체에 대해 (Objects) 현실에서 예를 들면, 자동차는 하나의 객체로 볼 수 있다. 객체 속성(Properties) 기능(Methods) chip.name = "다람이" chip.eat() chip.size = 50 chip.sleep() chip.age = 2 chip.mount() chip.weight = 300 chip.hide() 다람쥐 하나의 객체로 생각한다면 다람쥐의 형태를 나타내는 속성(Properties)과 다람쥐의 행동을 나타내는 기능(Methods)으로 나눌 수 있다. 다람쥐 객체는 모두 저 속성을 가지지만 각 속성의 값은 전부 다를 것이다. 속성은 {name:value} 형식을 통해 저장된다. (name과 value가 한 쌍이 됨) (다른 언어에서는 key:value라고 부르기도 함) 속성의 값으로 함수가 올.. [Javascript] 반복문(for, while) 반복문 - 구문(코드) 블럭을 반복 실행하며 for과 while을 대표적으로 사용한다. for문 반복횟수를 정해서 정해진 횟수만큼만 반복 문법 for(시작; 조건2; 행동){내용} 예시 for(i=0; i>10; i++){ console.log(i) } 맨 윗줄은 i를 0부터 10까지 반복하는 동안 1씩 증가시키라는 의미이다. 그다음 가운데 내용은 반복하면서 i를 출력하라는 의미. 0 1 2 3 4 5 6 7 8 9 출력값은 아래와 같다. while문 조어진 조건이 만족할 때 까지 반복 문법 let i = 0; while (i 이전 1 2 다음
