728x90
728x90
정직인 서버를 띄우는 방법들에 대해서 알아보았다. SPA를 빌드 후 배포한다거나, 단순히 이미지나 html로 이루어진 웹페이지를 배포한다거나 할 때 복잡한 서버의 필요 없이 정적 서버를 띄워 웹 사이트에 접근하게 만들 수 있다. 이에 대한 여러가지 방법들에 대해서 알아보고, 기록하였다. serve, http-server와 같은 라이브러리 사용하기 CRA로 생성한 리액트 웹 어플리케이션의 빌드 명령어를 사용하면, 터미널에 친절하게 serve를 사용하여 정적 서버를 띄우는 방법을 알려준다. npm install -g serve serve -s build 위의 명령어로 serve를 설치하고, build 폴더 내부의 빌드된 리액트 어플리케이션을 정적 서버에 띄워준다. 이와 유사하게 http-server 라이브러..
Drag 이벤트에서는 dataTransfer라는 특수한 객체를 사용할 수 있는데, 이를 통해서 드래그 되었을 때 값을 저장하고 해당 값을 전달할 수 있게 해준다. 이를 사용해서 drag & drop으로 랜덤 숫자를 생성하는 예제를 만들어 보았다. Drag And Get Random Number Number : 위의 Drag And Get Random Number를 드래그할 수 있게 설정한다. 그리고 드래그하여 하단의 Number에 드랍하면, 랜덤 숫자를 화면에 띄울 수 있게 한다. .drag-div { padding: 10px; background-color: #ccc; width: fit-content; } .drop-div { margin-top: 50px; padding: 10px; backgrou..
브라우저가 인터넷에 연결되어 있는지는 기본적으로 navigator.onLine 변수를 확인할 수 있다. boolean값으로 인터넷에 연결되어 있는지 확인할 수 있다. 다만, 지속적으로 브라우저가 인터넷에 연결되어있는지 확인하기 위해서는 이벤트 핸들러의 연결이 필요하다. 브라우저에서 지속적으로 인터넷 연결을 확인하는 방법으로 eventListener를 사용할 수 있다. 다음과 같은 간단한 코드를 통해서 인터넷 연결을 확인할 수 있다. window.addEventListener("online", () => console.log("ONLINE! 🐥")); window.addEventListener("offline", () => console.log("OFFLINE... 😿")); 콘솔창에 위의 코드를 입력하고..
canvas 태그는 HTML5에서 도입된 요소이다. 자바스크립트를 사용하여 동적으로 그래픽을 컨트롤할 수 있게 해준다. canvas 태그를 사용하면, 자바스크립트로 선, 도형, 이미지, 텍스트를 그리고 스타일을 지정할 수 있다. 프레임 기반 애니메이션 및 인터랙티브 기능(마우스 클릭, 키보드 입력 등)을 제공한다. 기본적인 사용법은 다음과 같다. 위와 같은 HTML 파일을 아래의 자바스크립트 코드로 조작한다. const canvas = document.getElementById("test-canvas"); const ctx = canvas.getContext("2d"); ctx.fillStyle = "#ccc"; // top left width height ctx.fillRect(10, 10, 50, 1..
사용자의 브라우저에 보이는 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를 사용해서도 구현하였다. 역시 미래에 참고하기..