반응형

Front/JavaScript 7

css/js 파일 캐시 방지

css, js 파일을 수정 후 반영을 하면 브라우저에서 css,js파일은 캐시로 저장하기 때문에 참조하는 파일 url이 동일 하다면 수정 되기 전 앞서 저장되어 있는 파일을 사용하기 때문에 수정된 부분이 작동하지 않게 된다 이를 일시적으로 해결하기 위해 브라우저 캐시 비우기 및 강력 새로고침 작업을 진행 하게 되면 해결 된다. 하지만 이는 일회성 해결 방법이고, css, js파일 경로 끝에 버전정보, 날짜정보와 같이 반영할때마다 해당 파일이 변경되었다는 점을 알 수 있게 파라미터로 넘겨주는 방법이 있다 아래와 같이, importDate라는 변수로 화면이 로딩 될 때마다 날짜데이터를 넘겨주는 형태 이다.

Front/JavaScript 2021.01.22

for await of

for await of 구문은 반복문 내부에서 실행되는 비동기 서비스들에 대한 순서를 보장해준다. 예를들어, 아래의 상황에서의 결과는 const names = ['a', 'b', 'c', 'd']; names.forEach(async (name) => { const result = await service.asyncTest(name); console.log(result.json()); }); console.log('서비스 종료'); 맨 마지막에 찍혀 있는 '서비스 종료' 라는 로그가 처음 찍히게 된다 모든 api 통신 완료 {"a":"end"} {"b":"end"} {"c":"end"} {"d":"end"} * forEach에서의 모든 비동기 작업에 대한 순서를 보장 하지 않는다. 때문에 for awai..

Front/JavaScript 2020.11.12

특정일로 부터 날짜 계산 (JavaScript)

/* 특정일로부터 일 계산 1) date - 기준 날짜 2) calDay - 계산 일 */ function getCalculateDay(date, calDay) { var d = new Date() if(date != null && date != ''){ var d = new Date(date); } var dayOfMonth = d.getDate() d.setDate(dayOfMonth - calDay) return getDateStr(d) } /* 특정일로부터 월 계산 1) date - 기준 날짜 2) calDay - 계산 월 */ function getCalculateMonth(date, calMonth) { var d = new Date() if(date != null && date != ''){..

Front/JavaScript 2020.07.28

Web Storage(local, session)

* Web Storage HTML5 에서 추가된 내용으로, 데이터를 클라이언트에 저장하는 저장소입니다. 키와 값을 저장(key-value Storage)할 수 있고, Web Storage를 상속받아 구현된 localStorage와 sessionStorage가 존재합니다. 1. LocalStorage - localStorage는 일부러 지우지 않는다면 브라우저를 닫고 열어도 계속 남아있음. (만료기간이 없음) - 도메인마다 별도로 로컬스토리지 생성 - 접근 : window.localStorage - 사용 예 : 지속적으로 필요한 데이터(자동 로그인 등) //로컬스토리지 저장 localStorage.loginId = value; localStorage.setItem("key", value); //특정 로컬스..

Front/JavaScript 2019.11.19

자바스크립트 뒤로가기(백스페이스) BFCache 이슈 / onpageshow

Safari, Firefox 브라우저에서는 동일 세션에서 이전 페이지를 빠르게 보다 로딩하기 위하여 BFCache 기능을 이용하여 이전에 저장한(캐싱) 데이터를 바로 로드하고 있는 형태입니다. 이때 Javascript 상태값까지 모두 저장된 값으로 재사용하게 되는데 서버단(jsp,asp)에서 데이터 처리 및 화면 구성이 끝나는 페이지 구성일 경우에는 이러한 데이터 재사용이 문제가 되지 않지만 window.onload 나 Jquery의 $(document).ready() 단계 에서 Ajax를 통하여 로그인이나 주요 화면처리하는 로직이 들어있는 구성인 경우에는 BFCache를 통해 이전 데이터를 불러오는 것은 이슈가 될 수 있습니다. 예를들어 페이지 구성 로직을 서버단에서 모두 처리하여 세팅하는 것이 아니라..

Front/JavaScript 2019.07.16
반응형