프론트엔드 공부 블로그 프론트엔드 공부 블로그

proxy를 사용하면 기존 이벤트를 가로채 다른 함수를 실행할 수 있다. 간단한 예를 보면, 다음과 같다. const target = { a: "a_word", b: "b_word", } const handler = { get(target, prop, receiver) { switch(prop){ case 'a': return "A"; case 'b': return "B"; } } } const proxy = new Proxy(target, handler); console.log(proxy.a, proxy.b); 기존의 객체를 가로채어 다른 값을 return하게 만든다. handler가 기존의 실행을 가로채어 실행되는 함수로, switch나 if문 등을 사용하여 특정 key값의 객체값만 다른 값으로 re..

사용자의 브라우저에 보이는 HTML을 스크린샷 찍을 수 있는 방법을 기록하기로 하였다. html2canvas 라는 라이브러리를 사용하여 이를 간단히 구현할 수 있다. npm install html2canvas 함수를 작성하여 기능을 구현해보자면 다음과 같이 작성할 수 있다. import html2canvas from 'html2canvas' ... const copyElement = () => { const root = document.querySelector('#copy-image-div') as HTMLElement if (root) { html2canvas(root, { allowTaint: true }).then((canvas) => { document.querySelector('#copy-roo..

모달창을 구현하는데 있어서 뒤에 화면을 뿌옇게 하고, 모달창의 바깥을 클릭 시 모달창이 꺼지는 기능을 구현하였다. 기본적인 구현 아이디어는, 기존의 화면을 전부 덮어버리는 투명한 요소를 만들고, 이 요소 위에 Modal을 구현하는 것이다. 바깥의 투명한 화면을 클릭하면, 모달창이 꺼지게 만들며 Modal 내부에 닫기 버튼을 만들 수도 있다. Tailwindcss를 사용한 구현 import React from 'react'; export default function Modal({ setIsShow }: { setIsShow: () => void }) { return ( Modal Context close ) } Css를 이용한 기본 구현 가장 기본적인 css를 사용해서도 구현하였다. 역시 미래에 참고하기..

이벤트 버블링 이벤트 버블링은 한 요소에서 이벤트가 발생하였을 때, 해당 요소와 그 요소는 물론이고 그 요소의 모든 조상들에 연결된 이벤트가 모두 실행되는 것을 의미한다. 다음과 같은 예가 있다고 생각해보자. Hello 🫐 World 위의 HTML은 div 내부에 span이 들어있는 구조이다. #container { background: blue; color: white; } .emoji { background: red; } 구분하기 쉽게 div요소는 파랑, 내부의 span은 빨간색의 배경을 가지게 한다. const divContainer = document.querySelector('#container'); divContainer.addEventListener('click', () => { window..

요즈음 웹 사이트들은 스크롤을 통한 이벤트 발생을 많이 일으키는 것 같다. 그리고 그 기본은 스크롤의 변화를 탐지하여 현재 사용자가 보고있는 페이지를 확인하는 것이다. 모바일 웹에서 흔히 사용되는 무한 스크롤 역시, 컴포넌트의 위치와 현재 사용자가 보고 있는 스크롤 위치를 파악하여 마지막에 도달하였을 때 자동으로 서버로 요청을 보내어 새로운 데이터를 가져오는 것 이다. 현재까지 사용자가 스크롤해온 값은 window.pageYOffset이나 window.scrollY로 확인할 수 있다. window.pageYOffset은 deprecated 되었다고 알려졌지만, IE 환경을 고려한다면 이를 사용해야 한다. window.scrollY는 window.pageYOffset와 같은 값을 가지므로, window.p..

자바스크립트에서 자주 접하게 되는 개념인 이벤트 루프에 대해서 알아보고 블로그에 기록을 남기기로 하였다. 자바스크립트가 싱글 스레드인 이유는 콜 스택이 단 하나뿐이기 때문이다. 하지만, 실제 자바스크립트는 비동기적으로 코드가 실행된다. 🍌 하나의 작업이 끝나지 않았어도 다른 작업을 호출할 수 있다. 이렇게 자바스크립트가 작동될 수 있는 이유는 이벤트 루프에 있다. 🥕 자바스크립트 엔진 내부에 Memory Heap과 Call Stack이 존재한다. 자바스크립트에서 실행이 되야할 함수는 모두 콜 스택에 쌓이게 된다. 메모리 힙은 객체가 저장되는 공간으로, 실행 컨텍스트는 힙에 저장된 객체를 참조한다. 🥦 브라우저에 존재하는 Web API는 AJAX나 setTimeout, setInterval 등의 타이머 함..

Ajax(Asynchronous JavaScript and XML)를 사용한 웹페이지를 방문했을 때, 웹페이지가 새로운 데이터로 갱신되었다면 필요한 부분에 필요한 데이터만 비동기적으로 받아와 렌더링 된다. Ajax는 자바스크립트와 DOM, 그리고 Fetch라는 핵심 기술로 구성된다. 과거 웹페이지는 form 태그를 통해 서버에 데이터를 전달하고 서버는 요청에 대한 응답으로 새로운 웹페이지를 제공해야 했다. (즉, 매번 새로운 웹페이지(HTML)를 제공했다.) 하지만, 자바스크립트를 통해 DOM을 제어할 수 있고, Fetch를 통해서 사용자가 웹페이지에서 작업하는 동안 서버와 통신할 수 있게 됨으로써, 필요한 부분만 변경할 수 있게 되었다. Ajax 기술의 발전으로, 서버와 데이터 통신을 원활하게 할 수 ..

즉시 실행 함수는 말 그대로 선언과 동시에 즉시 실행되는 함수이다. 과거에는 이것이 무슨 의미가 있는가, 생각했지만 지나고보니 자바스크립트에서 유용하게 쓰이는 문법이었다. 웹팩에서도 즉시 실행 함수를 통해서 js의 스코프 이슈를 해결했다고 하니, 알아두는 편이 좋다. 기본적인 사용법은 다음과 같다. (function(){ let i = 0; console.log(`변수i는 ${i}이다.`); })(); 이 js 파일을 실행하면 바로 콘솔창에 '변수i는 0이다'가 찍힐 것이다. (() => { let i = 0; console.log(`변수i는 ${i}이다.`); })(); 화살표 함수로도 표현할 수 있다. 즉시 실행될 함수이기에, 익명함수로 작성하여도 문제없다. 기본적인 형태는 말 그대로 () => {}..