Mong dev blog

1. 들어가며…얼마 전, 특정 라이브러리의 버그를 수정하던 중 특이한 현상을 발견했다. 이 현상은 Vue의 slot을 핸들링하는 과정에서 발생했는데, 우선, 의도된 동작은 다음과 같다:부모 요소()에 클릭 이벤트가 등록된 상태일 때, 부모 영역 클릭 시, 부모 요소의 속성 값(data-selectable-row-id)을 emit으로 전송해야한다. 안녕! 난 요소가 없는 단순 글자야! +의도대로 동작한 경우 - 요소 클릭시 rowId를 출력함하지만, 부모 요소에 slot으로 자식 요소를 주입했을 때 의도와 다른 현상이 발생했다.바로 사용자가 slot으로 주입된 요소를 클릭할 시 부모의 속성 값(data-selectable-row-id)이 null로 반환되는 것이었다. 나..

💡 placeholder(자리표시자)는 입력창(input, textarea)에 글을 입력하지 않았을 때, 보이는 글자이다. placeholder 관련 CSS 가상 선택자, 요소에는 여러가지가 있는데, 이번시간에는 그 중 ::placeholder와 :placeholder-shown에 대해 알아보았다! 1. ::placeholder란? 1) ::placeholder은 무엇인가요? ::placeholder는 placeholder 글자의 가상 요소이다. 가상 요소란, HTML에는 존재하지 않지만 스타일링을 위해 만든 요소를 말한다. ::placeholder를 사용하면, placeholder 글자의 스타일을 변경할 수 있다. /* 사용 방법 */ input::placeholder { ... } 2) 사용 예시 (..

🙂 이번 시간에는 브라우저 렌더링 과정 그리고 리플로우, 리페인트에 대해 알아보았다! 1. 브라우저 렌더링 과정 1) 브라우저는 어떻게 화면을 그릴까? 우리는 주소를 이용해 사이트에 접속한다. 사이트 주소는 대게 'http://www.xxxx.com' 형식이며, 이를 도메인 주소라고 부른다. ❓ 그런데 브라우저는 IP 주소를 사용한다고 들었는데, 도메인 주소를 어떻게 IP 주소로 바꾸는 걸까? 방법은 아래와 같다. 사용자가 www.google.com(도메인 주소)에 접속한다. 이때 브라우저는 도메인 주소로 네트워크 요청을 보낸다. 네트워크에서는 DNS서버를 사용해, 도메인 주소에 해당하는 IP주소를 찾는다. 찾은 IP주소로 요청을 전송하여 도메인 주소에 해당하는 리소스(html)를 응답으로 받는다. ❓ ..

이번 시간에는 이벤트가 발생한 요소를 알 수 있는 event.target, event.currentTarget에 대해 알아보았다! 1. 이벤트 발생 요소에 접근하는 법 우리는 js에서 dom.addEventListener(이벤트, 핸들러)로 요소에 이벤트를 걸거나 html에서 onEvent(ex. onClick)를 사용해 이벤트를 적용할 수도 있다. 만약 버튼에 클릭이 발생할 때마다 특정 로직을 실행하고 싶다면 두가지 방법을 쓸 수 있다. 나는 버튼이야 const btn = document.querySelector('.btn'); btn.addEventListener('click', (event) => { // click발생시 실행할 로직 } ) 나는 버튼이야 function..

🙂 이번시간에는 객체의 변경을 막는 Object.freeze, Object.seal의 차이점에 대해 알아보았다. 0. 왜 두 함수가 필요할까? 우리는 let, var, const를 사용해 변수를 선언할 수 있다. 그리고 그 중 const로 선언된 변수는 값을 재할당할 수 없다. const name = "susan"; name = "lala"; // TypeError: Assignment to constant variable. 🤔 그렇다면 const로 선언된 객체도 값의 재할당이 불가할까? 답은 아니다. 객체에 데이터를 할당하면, 데이터 자체를 저장하는 게 아닌 데이터를 저장한 메모리의 주소값을 참조한다. 결국 객체가 참조하는 주소가 변하지 않는 한, const로 선언해도 값을 변경할 수 있다. const..

💡 JS에서는 객체에 특정 속성이 있는지 체크할 수 있는 방법이 in, hasOwn, hasOwnProperty가 있다. 그런데, 이 메소드는 어떤 차이가 있길래 여러 개가 존재하는걸까? 이번시간에는 이 세 메소드의 차이에 대해 알아보았다.(차이점만 보고 싶다면, 바로 2.메소드 간 차이보기로 넘어가자) 1. 각 메소드 알아보기 1) in 연산자 in연산자는 특정 속성이 해당 객체에 있는지 여부를 boolean으로 리턴해준다. 속성 in 객체 (1) array의 경우 array에서 in연산자를 사용하면, 인덱스에 대해서만 체크할 수 있다. const arr = ['apple', 'orange', 'banana']; console.log(0 in arr); // ..

이 포스팅은 call(), apply(), bind()에 대해 소개하고 있습니다. js에서는 함수 호출 방식과 상관없이 this에 접근할 수 있다. 그렇다면 this를 우리가 원하는 객체로 지정할 수는 없을까? 이번시간에는 커스텀 this를 지정할 수 있는 세 함수에 대해 알아보자! 1. call(), this를 맘대로 지정할 수 있지 call()은 모든 함수에서 사용가능하며, this를 특정 객체로 지정할 수 있다. 아래 예시는 printDogAge()에서 dog의 age값을 출력하려고 한다. const dog = { age: 12 } function printDogAge() { console.log(this.age) } 그런데 printDogAge()를 호출해보면, 기대한 값은 나오지 않고 undef..