728x90
728x90
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를 사용해서도 구현하였다. 역시 미래에 참고하기..