심심한잉여의 잡동사니

옵션을 선택하면 해당 값을 가지고 페이지를 리로드하는 페이지를 구축했으나 옵션 선택한 스크롤이 아닌 맨위로 가지는 불편함이 있었다. 이를 해결하는 방법으론 가장 이상적인 것은 AJAX를 이용하는 것이지만 처음 설계를 잘못하여 납품 기한에 걸려 힘든 상황이 되었다. 여건이 된다면 AJAX로 아예 새로고침 되야하는 부분만 바뀌게 하면 더 사용자가 만족하는 페이지를 구축할 수 있지만 여건이 안되었기 때문에 옵션 선택 시 페이지를 이동하되 스크롤 위치를 옵션 선택 당시의 위치로 만들어주게끔 기능을 넣었다. 먼저 사용할 JS 기능은 window.scrollY 를 통해 스크롤 위치를 기억하고 window.scrollTo(x,y) 를 통해 이동시킬 예정이다. 해당 스크롤 위치를 기억하기 위해 sessionStoreg..

.scrollLock { overflow: hidden; touch-action: none; } 해당 CSS를 추가 하여 스크롤 혹은 터치를 막는 클래스를 만든다. $('body').toggleClass('scrollLock') 제이쿼리를 통해 toggleClass를 활용 할 것이다. 해당 메소드를 사용하게 되면 클래스가 있다면 없애고 없다면 만드는 유용한 기능이다. 이를 통해 scrollLock 클래스를 제어하면 된다. 필자는 body에 해당 toggle클래스를 적용하여 본문의 스크롤을 잠가 팝업 시 밖에 있는 화면만 스크롤 안되게 막았었다.

//특수문자가 속해있는지 확인하는 정규식 let reg = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+@\#$%&\\\=\(\'\"]/g; //영어,한글,숫자를 제외한 다른 문자가 들어있는지 확인하는 정규식 let reg2 = /[^\w\sㄱ-힣()0-9 ]/g; 특수문자가 들어간 문자열을 체크하는 정규식 if(reg.test(obj)){ console.log('특수문자가 들어있습니다.'); } if(reg2.test(obj)){ console.log('특수문자가 들어있습니다.'); } 위 예시와 같이 사용 가능

let reg = /[^0-9]/gi 숫자가 아닌 경우 true 반환 if(reg.test(obj)){ console.log('숫자가 아닙니다.') } 숫자인 경우 true반환을 원하면 ^를 지우면 된다.

JavaScript는 싱글 쓰레드 기반 언어이다. 하지만 JavaScript가 사용되는 환경을 생각해보면 많은 작업이 동시에 처리되고 있는 것을 알 수 있다. 예를 들면, Node.js기반의 웹 서버에서는 동시에 여러개의 http요청을 처리하는 것을 볼 수 있다. 위 그림은 이벤트 루프를 설명할 때 자주 쓰이는 그림이다. JavaScript는 이벤트 루프를 이용해서 비동기 방식으로, 동시성을 지원한다. 이벤트 루프에서는 이벤트가 발생 시 호출되는 콜백 함수들을 태스크 큐에 전달하고 태스크 큐에 담겨있는 콜백 함수들을 콜스택에 넘겨준다. 이벤트 루프가 태스크 큐에서 콜스택으로 콜백 함수를 넘겨주는 작업은 콜스택에 쌓여있는 함수가 없을 때만 수행된다. 태스크 큐에서는 web api에서 비동기 작업들이 실행된..

자바스크립트로 숫자인지 확인 방법 isNaN() isNaN(value) 여기서 말하는 NaN 은 Not a Number 의 약자이다. 따라서 value값이 숫자일 경우 false를 반환하고 value값이 숫자가 아닐 경우 true를 반환한다. 여기서 신기한 점은 '123', '-123' 과 같이 문자열일 경우에도 숫자만 있는 경우 false가 반환된다. 하지만 '123-234' 와 같이 - 과 같은 기호 혹은 문자가 있을 경우엔 true를 반환한다.

a.includes(b) 문자열에 사용 시 a문자열에 b가 포함되었는지 boolean으로 반환 배열에 사용시 a배열에 b가 포함되어있는지 boolean으로 반환

Promise란? 프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다. 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용하며 일반적으로 웹 어플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 주로 사용합니다. function getData(callback){ retrurn new Promise(function(resolve, reject)){ $.get('test.com/products/1',function(response) resolve(response); )}; )}; } getData().then(function(tableData){ console.log(tableData); }); 콜백 함수로 처리하던 구조에서 Promise와 resolve, ..