Yung_Developer

webpack의 dev server를 이용해 localhost로 개발을 진행하다보면 https로 인해 스트레스를 받는 상황이 생깁니다. (웹 서버가 http를 이용한 접근을 제한하거나 쿠키의 Secure 옵션이 설정되어 있는 경우 등) 이는 localhost가 http로 동작하기 때문입니다. 이러한 문제가 발생했을 때 서버의 설정을 바꾸기 보다는 localhost의 설정을 바꿔 문제를 간단하게 해결할 수 있습니다! 바로 mkcert를 이용하면 localhost를 https로 동작시킬 수 있습니다 👍 GitHub - FiloSottile/mkcert: A simple zero-config tool to make locally trusted development certificates with any nam..

contentEditable은 HTML 요소를 수정 가능하게 만들어주는 속성이다. 예를 들어, div에 contenteditable 속성을 true로 설정해주면 div 요소도 input처럼 입력을 할 수 있게 된다. contentEditable을 사용하는 이유는 웹 에디터를 쉽게 만들기 위함이다. contentEditable을 사용하면 브라우저가 자체적으로 클립보드, 드래그&드롭, 실행 취소, 서식과 같은 기능을 전부 제공해준다. 또한, 특정 내용을 편집 모드로 수정하기 쉽다는 장점이 있다. 편집 모드 변경 시 input이나 textarea로 수정할 필요없이 간단하게 contentEditable=true 속성만 추가해줘도 편집 모드로 변경할 수 있다. 때문에 div를 input으로 바꿨을 때 발생할 수 ..

{ if (!type) return; if (type === POST_MESSAGE_TYPE.SCROLL_HEIGHT) { resizeElementHeight({ element: $replyModuleIframe, height: data }); return; } }); // reply-module (content window = iframe에 그려지는 페이지) // 부모 window에 컨텐츠의 높이를 보내는 함수 const postScrollHeightToParentWindow = () => { window.parent.postMessage( { type: POST_MESSAGE_TYPE.SCROLL_HEIGHT, data: document.querySelector("#root")?.scrollHeigh..

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..

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

안녕하세요 :) 이번에는 querySelectorAll나 getElementsByClassName과 같이 여러 개의 요소 노드 객체를 반환할 때 사용되는 객체인 HTMLCollection과 NodeList의 차이에 대해 알아보도록 하겠습니다. 먼저, HTMLCollection과 NodeList는 모두 유사 배열 객체이면서 이터러블입니다. 따라서 둘 다 length 프로퍼티를 가지므로 객체를 배열처럼 접근할 수 있고 반복문을 돌 수 있습니다. 그러나 유사 배열 객체이기 때문에 자바스크립트에서 제공하는 배열 객체의 메소드는 사용할 수 없습니다. (ex. map, forEach, reduce 등등) 다음으로는 HTMLCollection과 NodeList에 대해 하나씩 살펴보도록 하겠습니다. HTMLCollec..

이번 주제는 우리가 작성한 코드 혹은 서버에 요청한 코드가 어떻게 화면에 표시되는지에 대해 알아보겠습니다. 사용자가 볼 수 있는 화면을 구성하기 위해 브라우저는 HTML, CSS, Javascript로 작성된 텍스트 문서를 파싱하여 브라우저에 렌더링을 합니다. 벌써부터 낯선 단어가 두 개나 등장했습니다. 하나씩 차근차근 알아보도록 할게요. 먼저, 파싱(구문 분석)은 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료 구조인 파스 트리를 생성하는 일련의 과정을 말합니다. 여기서 토큰은 문법적인 의미를 가지며, 문법적으로 나눌 수 없는 코드의 기본 요소를 의미합니다. 쉽게 설명해서 파싱은..

1. DOM은 왜 필요할까? 웹 사이트는 크게 세가지의 요소로 구성됩니다. 먼저, HTML은 웹 페이지의 제목, 이미지, 표 등을 정의하고 그 구조와 의미를 부여하는 정적 언어로 웹의 전체적인 구조를 담당하고 있습니다. 두번째로, CSS는 HTML이 실제 표시되는 방법 (색상, 레이아웃, 크기, 폰트 등)을 지정하여 콘텐츠를 꾸미는 정적 언어이며 웹의 시각적인 표현을 담당합니다. 마지막으로 Javascript는 HTML의 정적이고 단조로운 한계를 극복하기 위해 만들어진 언어로 웹 문서를 더욱 동적으로 처리할 수 있도록 도와줍니다. 여기까지는 웹을 조금이라도 공부하셨던 분이라면 대부분 알고 있는 내용이라고 생각됩니다. 그러나 혹시 이런 생각을 해보신 적 있나요? 자바스크립트에서 어떻게 확장자가 다른 HTM..