자바스크립트에서 비동기를 처리할 때 callback과 promise를 사용하게 되는데 이 둘의 차이점을 그저 callback을 썼을 때는 callback hell 때문에 가독성이 떨어지는 것 말고 더 명확하게 알기 위해서 정리를 합니다. 1. callback을 사용한 비동기 처리 자바스크립트에서 비동기가 처리되는 방식은 아래 영상으로 대체. https://youtu.be/8aGhZQkoFbQ function async(callback) { setTimeout(() => { callback("1초 후 실행"); }, 1000); } async(function (msg) { console.log(msg); }); async 함수는 첫번째 인자로 callback을 받고, callback이 실행 될 때 첫 번째..

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty Object.defineProperty() - JavaScript | MDN Object.defineProperty() 정적 메서드는 객체에 직접 새로운 속성을 정의하거나 이미 존재하는 속성을 수정한 후, 그 객체를 반환합니다. developer.mozilla.org Object 등의 prototype을 수정하는 것은 왠만하면 피해야하지만 만약 메소드를 추가해야 한다면 해당 메소드가 for...in 루프나 Object.keys() (en-US)에서 노출 되지 않도록 숨기는 것이 좋은 습관이다. 위 예제 처럼 String.prot..

정규식 사용하여 영문과 숫자가 아닐 경우 입력되지 않게 한다 회원가입, 로그인 시에 영어와 숫자만을 받기 위해 여러가지 방법을 찾아 보았다. style에서 ime를 사용하는 방법은 크롬에서 지원하지 않고, key값을 이용하여 false를 리턴하는 방법 또한 크롬에서 먹히지 않았다. 작은 고집으로 정규식을 사용하고 싶지 않았는데 정규식이 제일 깔끔한 방법 인 것 같다. 주의할점 함수 안에서 this를 사용하는 것은 window에서의 onlyAlphabet함수를 실행시키는 것이므로 this는 window가 된다. 따라서 element에서 this를 사용하여야 element의 onkeydown 함수의 onlyAlphabet함수가 실행되는 것이므로 이 때 this는 해당 element가 된다 참고자료 https..

쿠키 설정을 쉽게 하기 위해 npm라이브러리 js-cookie를 사용했다. 대략적인 flow는 아래와 같다1. index.html에 접속하면 pop up창이 뜬다.2-1. pop up 창에서 인풋 박스에 체크를 하면 popupCheck라는 키값과 no라는 밸류를 가진 쿠키를 브라우저에 저장한다2-2. 동시에 pop up창은 닫힌다3. index.html은 항상 popupCheck 쿠키가 있는지 확인한다. popupCheck 쿠키의 밸류가 no라면 popup을 띠우지 않는다 popUp.html 더 이상 보지 않기 closePopup 함수를 통해 인풋박스가 체크가 되면 (getElementById로 확인) 쿠키를 세팅한 후self.close() 메소드를 통해 자기 자신( popup창 )을 닫는다 index...

JavaScript Object Notation의 약자 자바스크립트에서 객체를 만들 때 사용하는 표현식을 의미 일종의 데이터 표준 JSON.parse() 문법에 맞는 문자열을 object로 바꾸어 주는 메소드 JSON.stringify() 객체를 JSON포멧으로 변경한 문자열로 바꾸어 주는 메소드 JSON에서 사용할 수 있는 데이터 타입

1. prototype //생성자를 정의한다.var Human = function(name) {this.name =name;} //생성자의 prototype에 sleep이라는 함수를 할당한다.Human.prototype.sleep = function( ) { }; var steve = new Human('steve'); function에는 기본적으로 prototype에 constructor가 생성된다.__proto__는 생성된 인스턴스가 참조하고 있는 prototype을 뜻한다.Human.prototype 으로 Human의 prototype에 접근이 가능하다.Human.Prototype.constructor 는 Human이다.-> new를 사용해서 만들 경우 생성자가 어떤 함수인지를 뜻한다. var Hu..

var array = [1, 2, 3]var a = array[0];var b = array[2]; var [c, , , d] = [1, 2, 1, 3]console.log(c) // 1console.log(d) // 3 es5에서는 배열의 인덱스를 지정해서 대입을 해야 값을 넣을 수 있지만비구조화 할당을 이용하면 아래와 같이 사용해서 대입이 가능하다 var obj = { h : 'eich',i : {j : 'jay'}}; var { h, i : { j } , k } = objconsole.log( h , j , k) // 'eich', 'jay', undefined obj의 키값을 찾아서 키값 변수에 밸류 값을 할당 해준다당연히 키값의 이름이 다르거나 없으면 undefined가 할당 된다. var de..

1. let , const , var- let과 const는 es6에 등장하는 변수 선언 방식이다- 자바스크립트의 var는 함수 레벨 스코프 방식이어서 유연하게 사용할 수 있지만 스코프가 넓기 때문에 어디에서 어떻게 사용이 됐는지 파악이 힘들다- 그에 따라서 es6에서는 let과 const라는 블록 레벨 스코프를 따르는 변수를 제공한다 - let : var는 중복으로 선언이 가능하지만, let과 const는 중복으로 선언이 불가능 하다: let도 호이스팅이 되기는 하지만 선언만 되고 초기화(메모리에 변수할당)가 되지 않아서 블록에 let을 할당하기 전에 let변수를 사용하려고 하면 레퍼런스 에러가 뜬다.let이 호이스팅으로 선언이 되어있기 때문에 let이 실행되는 곳까지 가서 초기화가 되고 할당까지 받아..

자바스크립트는 싱글 쓰레드를 기반으로 한다 따라서 원래라면 하나의 일을 처리한 후 다음 일을 처리할 수 있다 하지만 브라우저가 제공하는 WebAPI를 통해 자바스크립크에 효과적으로 스레드를 지원한다 console.log( ' hi ' ); setTimeout ( function cd( ) {console.log( ' there ' );} , 5000 ); console.log( ' JS ' ) //consolehiJSthere console.log( ' hi ' ); 와 console.log( ' JS ' ) 는 stack에 쌓이고 바로 실행이 되지만 setTimeout 은 WebAPI에 넘겨진다그 후 5초가 흐른 후 task queue로 넘어간다이 때 stack이 비어 있으면 event loop는 qu..