공부 및 일상기록

이벤트 버블링이란? 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 상위의 부모 요소들로 전달되어 가는 특성을 의미한다. 위처럼 div안에 div안에 div를 만들고 세개의 태그에 모두 클릭 이벤트를 만들었을때 타겟의 클래스명을 콘솔에 찍히도록 설정한 뒤, 클래스 three인 div를 클릭하면 three, two, one 순서로 console이 찍히게 된다. 이는 브라우저가 특정 요소에서 이벤트가 발생했을 때, 이벤트를 최상위에 있는 요소까지 이벤트를 전파시켜서 읽는 특징때문에 생기는 현상이다. 반대로 이벤트리스너 함수의 세번째 파라미터에 true값을 주게 되면 버블링의 반대방향인 캡쳐링이 발생한다. 이벤트 위임이란 무엇인가? 말 그대로 자신에게 발생한 이벤트를 다른 요소에서 처리..

호이스팅이란 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어올려진것 같은 현상을 말합니다. 호이스팅이 발생하는 이유는 자바스크립트 엔진은 코드를 실행하기전 실행컨텍스트가 생성되는데 이 실행컨텍스트는 코드를 원활하게 실행될 수 있도록 환경을 만들어주는 역할입니다. 실행 컨텍스트는 생성단계와 실행단계 두가지로 나눠볼수있습니다. 생성단계 선언문만 실행해서 환경레코드에 기록하는 단계입니다. 실행단계 선언문 외 나머지 코드를 순차적으로 실행하는 단계입니다. 생성단계에서 선언문을 환경레코드에 기록하여 콜스택에 담아두게 되는데 이 현상때문에 호이스팅이 발생하게 됩니다. var의 경우 선언과 동시에 undefined로 초기화 되기 때문에 선언 전에 사용하면 undefined가 환경레코드에 기록되어..

변수 선언방식 var var는 중복 선언과 재할당이 가능하고 중복 선언한 경우 마지막에 할당된 값이 변수에 저장된다. let let은 중복 선언이 불가능하고 재할당은 가능하다. const const는 중복선언과 재할당 모두 불가능 하다. 스코프 var var는 함수레벨 스코프를 갖는다. 따라서 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 함수 외부에서 선언한 변수는 모두 전역변수로 취급된다. let, const let과 const는 블록레벨 스코프를 갖는다. 따라서 if문, for문 등등 모든 코드 블록 내부에서 선언된 변수는 코드 블록 내에서만 유효하며 코드블록 외부에서는 참조할 수 없다. 코드 블록 내부에서 선언한 변수는 지역변수로 취급된다. 호이스팅 var, ..

동기와 비동기 동기 (synchronous) 동기는 데이터의 요청과 결과가 한 자리에서 동시에 일어나는것을 말한다. 요청을 하면 시간이 얼마나 걸리던지 요청한 자리에서 결과가 주어져야 한다. 비동기 (asynchronous) 비동기는 동시에 일어나지 않는다는 의미이다. 요청한 결과는 동시에 일어나지 않고 다른 일을 수행이 가능하다. 동기와 비동기의 장단점 동기의 장점 설계가 매우 간단하고 직관적이다. 동기의 단점 결과가 주어질 때까지 아무것도 못하고 대기해야 한다. 비동기의 장점 요청에 따른 결과가 반환되는 시간 동안 다른 작업을 수행할 수 있습니다. 비동기의 단점 동기보다 설계가 복잡하다.

콜백함수와 프로미스의 차이점 콜백함수는 비동기 로직의 결과값을 처리하기 위해서 callback 안에서만 처리를 해야한다. 콜백 밖에서는 비동기에서 온 값을 알 수가 없다. 프로미스를 사용하면 비동기에서 온 값이 프로미스 객체에 저장되기 때문에 코드 작성이 용이해진다. 콜백함수란 무엇인가? 콜백함수는 함수를 활용하는 방법 중 하나이다. 정확하게는 콜백함수는 파라미터로 전달받은 함수를 의미한다. 파라미터로 콜백함수를 받고 함수 내부에서 필요할 때 콜백함수를 호출할 수 있다. 콜백함수의 장점 함수를 인자로 받기 때문에 필요에 따라 함수의 정의를 달리해 전달할 수 있다. 함수를 굳이 정의하지 않고 익명함수로 전달 가능하다. 비동기 처리방식의 문제점을 해결할 수 있다. 콜백함수의 단점 콜백함수를 너무 남용하면 코..

async와 await는 새로운것이 추가된것이 아닌 기존에 있는 프로미스를 간결하고 간단하게 사용할 수 있게 해주는 코드이다. 이처럼 기능이 추가된것이 아닌 기존에 존재하는것 위에 감싸진 api를 제공하는 것을 syntactic sugar 라고 한다. 사용방법 async와 await는 절차적 언어에서 작성하는 코드와 같이 사용법도 간단하고 이해하기도 쉽다. function 키워드 앞에 async만 붙여주면 되고 비동기로 처리되는 부분 앞에 await만 붙여주면 된다. async가 붙은 함수는 프로미스를 반환하고 프로미스가 아닌것은 프로미스로 감싸서 반환한다. await 키워드를 만나면 프로미스가 처리(settled)될 때까지 기다린다. 그리고 프로미스 처리가 완료되면 resolve 되면 값만 따로 추출해..

프로미스는 자바스크립트 비동기처리에 사용되는 객체이다. 자바스크립트에서 비동기 처리를 하려면 콜백함수를 사용해야 한다. 하지만 이를 너무 남용하게 되면 콜백지옥에 빠지게 되고 이는 가독성이 나쁠 뿐 아니라 코드를 수정하기도 매우 힘들다. 이러한 단점을 보완하여 비동기처리에 사용되는 객체 Promise가 탄생하게 되었다. 프로미스는 상황에 따른 상태 정보가 다르다. 처음 비동기 처리가 수행중일때 pending 상태이며 비동기 처리가 완료되면 결과에 따라 fulfilled 혹은 rejected가 된다. 프로미스는 생성하는 생성자와 소비하는 소비자로 나눠 볼 수 있다. 1.Producer 생성자 const promise = new Promise((resolve,reject)=>{ //무거운 일을 처리하는 함수..

프로젝트를 진행하면서 방탈출을 진행하고 해당 테마에 대한 리뷰를 남기는 부분을 만들면서 언제 진행 하였는지 input을 이용하여 날짜값을 받았다. 그런데 우리는 사용자가 후기를 남기는 것이므로 미래 날짜를 선택되면 안되도록 설정을 바꿔야 했다. 의 특성으로 max와 min을 이용하여 허용하는 가장 늦은 날짜와 허용하는 가장 이른 날짜를 지정할 수 있다. max : 허용하는 가장 늦은 날짜 → yyyy-mm-dd 형태로 써야한다. min : 허용하는 가장 이른 날짜 → yyyy-mm-dd 형태로 써야한다. 따라서 나는 미래 날짜가 선택되면 안되기 때문에 max속성을 이용하였다. 이렇게 쓰면 되는 것이다. 오늘 날짜는 말 그대로 오늘 날짜 이므로 Date() 생성자를 이용해서 날짜를 가져왔다. //오늘 날짜..