Yung_Developer

Custom DOM Library DOM API를 통해 요소 노드를 불러오는 것은 꽤나 번거로운 일이다. 이를 해결하기 위해 Lv.1-1 자동차 경주 미션에서 jQuery 스타일로 코드를 작성하는 방법을 배웠다. 그리고 강의 시간에 준이 이보다 더 개선된 형태의 custom DOM library를 만들어봐도 좋을 것 같다는 이야기를 해주었다. 페어였던 카일이 주도하여 custom DOM library를 만들었고 이후 좀 더 코드를 개선하였다. (Thanks to 카일) export const $ = (() => { const constructor = function (selector) { if (!selector) { return; } this.targets = document.querySelectorA..

[ Specificity Calculator Specificity Calculator A visual way to understand CSS specificity. Change the selectors or paste in your own. specificity.keegan.st ](https://specificity.keegan.st/) 내 질문 CSS 선택자 네이밍을 어떤 식으로 하고 계신가요? CSS의 가상 요소와 가상 선택자에 대해 설명해주세요. CSS에는 가상요소(:pseudo-element)와 가상 클래스(:pusedo-class)가 있다. 이것들을 사용해서 html 문서의 수정 없이 CSS만으로 디자인적 요소를 추가할 수 있다. HTML 문서를 읽는 화면 리더기가 무의미한 정보를 읽지 않도록..

내 질문 [Q1] addEventListener의 세번째 인자인 option에는 어떤 옵션들이 있을까요? options Optional 이벤트 리스너에 대한 특성을 지정하는 옵션 객체입니다. 사용 가능한 옵션은 다음과 같습니다 : - capture: DOM 트리의 하단에 있는 EventTarget 으로 전송하기 전에, 등록된 listener 로 이 타입의 이벤트의 전송여부를 나타내는 Boolean 입니다. - once: 리스너를 추가한 후 한 번만 호출되어야 함을 나타내는 Boolean입니다. true이면 호출할 때 listener 가 자동으로 삭제됩니다. - passive: true일 경우, listener에서 지정한 함수가 preventDefault()를 호출하지 않음을 나타내는 Boolean입니다...

오늘도 어김없이 git에서 conflict가 발생하였고 문제를 해결하는 가장 쉽지만 무시무시한 방법인 reset을 통해 문제를 해결하고 있었다. reset --hard로 이전 커밋과 파일들을 날려버리고 보니 이게 뭐람???? 왜 있어야 할 파일이 없지???? 한 순간의 부주의로 인해 잘못된 커밋 로그로 리셋 해버리고 말았다. reset을 hard 옵션으로 했기 때문에 남아있는 커밋 로그와 파일들 역시 모두 날아간 절망적인 상황... 더욱이 새벽 코딩으로 인해 몸과 마음은 이미 지칠 때로 지쳐있었다. 그냥 컴퓨터를 끄고 잠이나 자자라고 체념한 순간, '그래, 분명 나만 이런 실수를 한 건 아닐꺼야... 위대하신 git 개발자 분들께서 나같이 실수를 한 사람들을 구제할 방법을 마련해놓으시지 않았을까?'하는 ..

Netlify를 이용해 배포를 진행하던 중 build 과정에서 반복적으로 오류가 발생했다. 오류 내용은 "./login/Login.js can't resolve"였다. 처음으로 웹팩과 바벨을 사용해서 배포를 하던 터라 당연히 잘못된 웹팩 설정 때문에 문제가 발생하는 줄 알았다. 그러나, 웹팩의 설정을 아무리 변경해도 해당 문제는 계속해서 발생했다... 해당 문제의 원인은 웹팩 설정이 아니라 Git에 있었다. 리팩토링 과정에서 폴더의 이름 하나가 다른 폴더와는 다르게 Camel case로 작성되어 있어 소문자로 변경했다. 그리고 깃헙 레포에 푸쉬했다. 그러나 Git은 대소문자 변경을 인식하지 않기 때문에 깃헙 레포에 있는 폴더명은 그대로 대문자로 남아있었다. 위와 같은 문제를 해결하기 위해서는 아래의 코드..

이벤트를 바인딩한 DOM 요소가 삭제되는 경우, 바인딩 된 이벤트는 어떻게 되는지에 대해 알아보도록 하자. 우선, 이 글은 정확한 정보 전달을 위한 글이 아님을 밝힌다. 정보보다는 초짜 개발자가 어떻게 궁금증을 해소하기 위해 고군분투 했는지에 대해 쓴 글이므로 넓은 마음과 아량으로 글을 읽어주면 좋을 것 같다 😂 이 글은 Garbage Collection에 대한 기본적인 내용을 알고 있어야 이해하기 수월하므로 만약 Garbage Collection에 대한 이해가 부족하다면 아래의 글을 읽어보길 추천한다 👍👍👍 자바스크립트의 메모리관리 - JavaScript | MDN 자바스크립트의 메모리관리 C 언어같은 저수준 언어에서는 메모리 관리를 위해 malloc() 과 free()를 사용한다. 반면, 자바스크립트..

1. Custom Confirm 기본 내장 메서드인 window.confirm의 디자인이 투박하여 페어 썬과 커스텀 컨펌창을 만들었다. 최초에 만들었던 커스텀 컨펌은 콜백함수를 사용하여 코드가 비동기적으로 돌아가도록 처리하였다. 하지만 콜백함수를 넘기다 보니 커스텀 컨펌을 호출하는 함수의 코드가 지저분해졌다. 이를 해결하기 위해 크리스의 리뷰를 반영하여 커스텀 컨펌을 프로미스로 바꾸었다. 프로미스를 바꾸면 콜백함수를 넘기지 않아도 커스텀 컨펌 로직을 비동기적으로 실행할 수 있다는 장점이 있다. 단 커스텀 컨펌을 호출하는 함수에서는 async/await 키워드를 사용해야 한다. 커스텀 컨펌을 호출하는 함수 내부에서는 코드가 동기적으로 실행되야하기 때문이다. 콜백을 넘기는 방식에서 프로미스로 커스텀 컨펌을 ..

1. Custom DOM Library DOM API를 통해 요소 노드를 불러오는 것은 꽤나 번거로운 일이다. 이를 해결하기 위해 Lv.1-1 자동차 경주 미션에서 jQuery 스타일로 코드를 작성하는 방법을 익혔다. 그리고 강의 시간에 준이 이보다 더 개선된 형태의 custom DOM library를 만들어봐도 좋을 것 같다는 이야기를 해주었다. 페어였던 카일이 주도하여 custom DOM library를 만들었고 그 코드는 다음과 같다. export const $ = (() => { const constructor = function (selector) { if (!selector) { return; } this.targets = document.querySelectorAll(selector); th..