다른생각 - 개발 로그

Ajax 의 관심도가 증가하고, Server Side 에서 Client Side 로 변화하면서, 현재의 자바스크립트의 고도화 필요성이 생김. ES6 는 무엇인가 현재 우리가 사용하고 있는 것은 ES5 이고, 2009년에 제정됨. 이후 2015년 ES6 (ECMASCRIPT 2015) 제정되어 현재는 컴파일 과정을 거쳐서 ES5 변환 후 브라우저에서 인식하는 것이 현대의 흐름이다. 컴파일을 위한 TASK RUNNER Grunt Gulp WEBPACK 그 외에 브라우저가 채택하고 있는 표준 BOM (Browser Object Model) DOM (Document Object Model) 주요 변경 사항 let, const let. 블록단위에 scope (수정 가능) 루프문 안에서는 매번 새로 생성됨 (for..

@참조 : https://www.devbridge.com/articles/javascript-best-practices/ 해당글은 의역 되었고, 오역이 있을 수 있습니다. 다음은 깨끗한 JavaScript 코드 작성을 위한 권장 사항 및 일반적인 지침이 담긴 글이다. 이러한 권고 사항은 앞으로 더 정교한 개발 도구 라던지, 새로운 언어 기능 으로 인해, 변경 될 수 있지만, 결코 변하지 않는 것들이 있다. 그것은 당신이 이해하기 쉬운 코드를 작성 해야 한다는 것이다. 다음은 Start 예제로 좋은글 이다. - http://javascript.crockford.com/code.html 전역 변수 사용의 최소화 코드에 네임 스페이스를 사용하여 모듈로 구성 하고 코드 충돌을 피하라. 소개되는 글로벌 변수의 최..

@refer: 자바스크립트 프라미스: 소개 MDN Promise 개요 일반적으로 프로그래밍은 하나의 실행업무가 종료되기 전까지 다른 업무를 하지 않는다. 예를 들어, 글쓰기폼 에서 글쓰기를 전송하기 위해 Form 전송을 하면, 서버통신이 완료되기 전까지 다른 업무를 하지 않는다. (강제로 페이지를 이동하기 전에는) 대부분의 프로그래밍이 이런 동기방식 으로 작동한다. 하지만 자바스크립트의 ajax 통신같은 비동기방식 은 결과가 나올때 까지 모든것을 중지하지 않는다. 선행된 비동기방식 업무 가 완료됐을때 완료됐다는 callback 을 주게 되면 반응하는 구조로 되어 있다. 사용자가 페이지에 접속해서 우측상단에 있는 로그인박스에 계정정보를 넣고 로그인버튼을 누른 후에, 사용자는 로그인이 완료될 때까지 현재페이..

키보드 입력 시의 `keycode` 를 활용해서 숫자값일 경우만 체크 ```javascript function onlyNumberKey(keyCode) { return /[0-9]|\./.test(String.fromCharCode(keyCode)) } document.getElementById(selector).addEventListener('keydown', function(e) { var isNumberKey = onlyNumberKey(e.keyCode); console.log(isNumberKey); }); ```

비밀번호 최소 하나의 문자 + 하나의 숫자 + 하나의 특수 문자 포함, 최소 6자리 function validatePassword(character) { return /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{6,}$/.test(character) } if(validatePassword('ra3a$9')) { console.log('success'); } else { console.log('fail'); }

특수문자, 한글, 영문 검사 패턴 function onlyNumber(str) { var pattern_special = /[~!@\#$%^&*\()\-=+_\’]/gi, pattern_kor = /[ㄱ-ㅎ가-힣]/g, pattern_eng = /[A-za-z]/g; if (pattern_special.test(str) || pattern_kor.test(str) || pattern_eng.test(str)) { return str.replace(/[^0-9]/g, ""); } else { return false; } }```

hashchange 이벤트를 이용해서, hash url 을 관리함. 용도 팝업 이라던지, 사이드메뉴 등의 현재 페이지에서 유일한 URL을 구현할 수 있는 방법중에 하나로 사용 url hash를 이용하면 레이어가 동작한 후에 back 키를 눌렀을 경우, 페이지 리로딩을 하지 않기 때문에, 페이지의 URL을 고유하게 유지할 수 있다. 사용법 const sideNavHandler = { open() { console.log('open'); }, close() { console.log('close'); } } // Action : 해당 URL 진입시 동작 // Leave : 해당 URL 이탈시 동작 window['observeHash'].register({string: hashURL},{function: Act..