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

webpack은 대표적인 자바스크립트 번들러이다. 이 번들러는 js 파일들을 최적화하고 하나의 파일로 만들어주는 역할을 하는데, 거기에 더해서 자바스크립트에서 번들링이 필요한 이유를 이해할 필요가 있다. webpack의 필요성 기본적으로 js파일은 script 태그를 통해서 html에 연결된다. 일반적인 html 파일 이 경우, js 파일이 하나라면 문제가 없지만 대부분의 경우 프로젝트가 조금만 커져도 js 파일은 여러개가 될 것이다. 위의 예에서 html에 사용된 js 파일은 각각 다음과 같다. // index.js let zombie = "one"; // hi.js zombie = 777; // bye.js window.alert(zombie); html 파일을 열어보면, 777 이라는 값을 보여주는..

브라우저에서 this는 Window 객체를 가르킨다.그리고 Node에서 this는 global 객체를 가르킨다. (정확히는 최상위에서 호출 시 module.exports / exports를 가르키고, 함수 내부에서 호출 시 global 객체를 가르킨다) 이렇게 this는 환경에 따라서 다른 객체를 가르킨다. 선언식 함수이는 function 선언식에서도 다르지 않는데,this는 함수의 호출, 실행 단계에서 동적으로 결정된다.// 브라우저function test1() { return function consoleA() { console.log(this); }}const test3 = test1();test3(); // Window 객체function test2() { consol..

일단 yarn을 설치해야 하는데, corepack을 통해서 패키지 관리자의 버전을 관리할 수 있다. npm i -g corepack corepack prepare yarn@stable --activate yarn 설치 yarn -v yarn set version berry yarn version 설정 yarn init yarn 프로젝트 시작 (npm init과 같다) https://nodejs.org/api/corepack.html#corepack Corepack | Node.js v20.0.0 Documentation Corepack# Added in: v16.9.0, v14.19.0 Corepack is an experimental tool to help with managing versions of..

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