React.js (5) 썸네일형 리스트형 [React] 웹 페이지 복귀, 이탈 탐지 (가시성) 웹 페이지 복귀와 이탈 이벤트 설정 방법 배경 React 프로젝트를 하던 중 웹 페이지 이탈과 복귀 시점에 특정 작업을 수행해야하는 상황이 있었다. 해결 방법 웹 페이지 이탈, 복귀에 대한 이벤트는 `window`객체에 내장된 `visibilityState`를 활용하여 구현할 수 있다. React 프로젝트에서는 `useEffect` Hook을 사용해서 컴포넌트 생명 주기에 따른 이벤트 처리가 필요하다. 자세한 방법은 다음과 같다. useEffect(() => { function handleVisibilityChange() { // 페이지 복귀 if (document.visibilityState === 'visible') { console.log('복귀'); } // 페이지 이탈 if (document.v.. React 앱을 Vite + gh-pages로 빌드 및 배포하기 요즘 속도가 빠르고 가벼운 느낌이 드는 Vite를 프로젝트에 자주 활용한다. 그러던 중 간단한 프로젝트를 gh-pages를 이용하여 배포하려고 했는데 여러 난관이 있었다. 이번 일을 계기로 Vite로 생성한 react.js 프로젝트를 gh-pages 위에 배포하는 방법을 정리하였다. 배포 환경 yarn, react, vite, gh-pages 배포 방법 1. gh-pages 라이브러리 설치 yarn add gh-pages 2. 파일 설정 vite.config.js base 추가 import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ base: '/repo-name',.. [React] ReferenceError: Buffer is not defined Web(React)에서 MQTT 개발 시 발생하는 Buffer 레퍼런스 에러 해결 방법 문제 발생 React 웹 앱에서 MQTT 통신을 구현하기 위해 mqtt 라이브러리를 사용하였다. 그런데 다음과 같은 레퍼런스 에러가 발생했다. 해결 방법 다음과 같이 mqtt 라이브러리를 import하는 코드를 수정한다. // Before import mqtt from "mqtt"; // After import mqtt from "mqtt/dist/mqtt" 만약 TypeScript 환경에서 프로젝트를 개발 중이라면 다음과 같은 내용의 mqtt.d.ts 파일을 생성한다. // mqtt.d.ts declare module "mqtt/dist/mqtt" { import MQTT from "mqtt" export = MQT.. [React] div 스크롤 맨 밑으로 내리기 / 스크롤 위치 조작하기 - useRef 실시간 채팅창을 구현하다가 마주한 문제였다. 따로 설정을 해두지 않으면 채팅방을 처음 열었을 때 스크롤이 맨 위에서부터 시작되어 최근 메세지를 보려면 직접 사용자가 스크롤을 내려야했다. 물론 이렇게 구현할 수 없으니 리액트에서 스크롤을 어떻게 조작 할 수 있을까? 우선 JavaScript를 기준으로 생각해보면 컨트롤 하고 싶은 영역의 id나 class로 div를 선택해야한다. 그리고 선택한 요소의 스크롤 위치를 제어할 수 있어야하며, 이 과정들은 유저가 채팅방을 오픈했을 때 한번만 실행되도록 해야한다. 이렇게 3가지를 리액트 환경에서 하나씩 해결해보자. 1. useRef로 DOM 선택하기 / target 설정 우선 스크롤을 조작하고 싶은 DOM을 강제로 가져와야한다. 즉 Real DOM을 직접 선택해야하.. [React] 절대경로 설정하기 (create-react-app) create-react-app을 사용하면서 코드를 좀 더 깔끔하게 보이도록 하기 위해 절대 경로로 import가 필요할 때가 있다. 공식 문서는 여기에서 볼 수 있다. 1. jsconfig.json 파일 생성 jsconfig.json 파일을 프로젝트 root 폴더에 생성해준다. 만약 TypeScript를 사용한다면 tsconfig.json로 생성하면 된다. 2. 내용 작성 앞서 생성한 jsconfig.json파일을 열고 다음과 같이 작성해준다. { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } 이제 src 폴더를 기준으로 절대경로를 사용할 수 있게 된다. //기존 상대 경로 방식 import "./components/somthing"; //.. 이전 1 다음
