min

나는 오늘 바닐라 js로 SPA(single page application)을 구현하였다. 오늘은 이를 구현하면서 내가 느꼈던 어려움들 중에 event.preventDefault() vs event.stopPropagation() 정리를 할까 생각중이다. 1. event.preventDefault() event.preventDefault()는 현재의 동작을 중단 시킨다. 이를 구체적으로 말하자면 예를 들어 a태그 form태그 등은 이벤트 처리시 다른 화면을 이동하는 경우가 빈번하다. 이때 event.preventDefault()는 다른 페이지로 이동하는 것을 막는 역할을 하게 된다. 따라서 event.preventDefault()는 해당 이벤트가 발생하는 것을 막고 싶을 때 사용된다. 이를 이벤트 버블링..

오늘은 이벤트 버블링에 대해서 다룰려고 한다. 여기서 의문이 1가지 정도 들 수 있다. 바로 왜 이벤트 버블링에 대해서 조사하느냐다. 나는 이벤트 버블링을 조사하는 이유는 2가지가 있다. 1. 면접에 자주 나오는 개념이기에 2. 개발하면서 왜 이렇게 동작하는 지를 찾고 싶어서 그럼 이번에는 2가지 이유를 토대로 한번 이벤트 버블링에 대해서 설명하겠다. 1. 이벤트 버블링 도대체 왜 면접에서 많이 물어보는가? 이 이유를 알기 위해서는 먼저 이벤트 버블링이 무엇인지 부터 확인해야 한다. 이벤트 버블링은 말 그대로 이벤트가 점차 버블링한다는 것을 의미한다. 하지만 이렇게 집고 넘어가면 나중에 실전에서 이벤트 버블링을 사용하기가 매우 곤란해진다. 그래서 이 개념에 대해서 구체적으로 집고 넘어가겠다. EM을 클릭..

오늘 나는 다른 분에게 실행 컨택스트와 이벤트 루프가 어떤 관련성이 있는지 실행 컨택스트는 어떤 내용인지 궁금해하셔서 나에게 찾아왔는데 나도 정확한 개념을 생각하지 못해서 한번 이 글을 통해 정리를 해볼려고 한다. 1. 실행 컨택스트 컨택스트는 영어로 context 즉 문맥을 의미한다. 즉 실행 컨택스트는 말 그대로 실행 문맥으로 볼 수 있다. 하지만 이렇게 집고 넘어가면 머리속에서는 구체화 되지 않는 문제가 발생한다. 그래서 이 개념을 구체화 한다면 실행 컨택스트는 자바스크립트 코드 실행과 관련된 정보들을 담고 있는 객체라고 볼 수 있다. 즉 실행 컨택스트란 객체를 의미하며 이때 실행과 관련된 정보란 1. 렉시컬 환경 2. 변수 환경 3. this 바인딩 등이 있다. 즉 실행 컨택스트란 이런 정보들이 ..

1. 얕은 복사 얕은 복사는 말 그대로 얕게 비교하는 것을 말한다. 이대 "얕게"라는 말이 추상적으로 들릴 수 있다. 이를 구체화 하자면 뎁스의 차이다. 즉 내가 복사 할려고 하는 깊이가 어디까지 되는 지에 따라서 얕은 복사와 깊은 복사로 나뉜다. 얕은 복사는 1depth까지만 완전히 복사가 가능하다는 뜻으로 대표적인 예시로는 스프레드 연산자, 대입 연산자가 있다. arr = [1,2,3,4] // 얕은 복사 arr2 = [...arr] console.log(arr2) 이때 많은 사람들이 착각하는 경우가 스프레드 연산자는 깊은 복사라고 생각하는 경우다. (작성자도 그랬다... ㅠㅠ) 하지만 스프레드 연산자는 얕은 복사다. 그 이유를 설명하는 코드를 보여주겠다. arr = [[1], 2, 3, 4, 5];..

원시타입과 참조 타입 자바 스크립트의 변수 타입에는 크게 원시 타입과 참조 타입으로 나누어져 있다. 1. 원시타입 : 메모리 공간을 확보하여 독자적인 값을 저장한다. 원시타입의 종류로는 string , number, bigint , boolean, undefined, symbol 이 있다. 따라서 원시타입은 불변성을 가지게 된다. 예를 들어 다음과 같은 코드가 있다고 하자 /////////////// let a = 10 a = 5 console.log(a) /////////////// 위 코드를 실행하게 되면 5가 출력되게 된다. 위 코드를 메모리 공간에서 어떻게 작용하는 지 살펴보자 (1) let a = 10 메모리에 Number라는 타입의 10이란 값이 생성되고 식별자 a는 메모리 100의 주소를 가..