개발자 노트

이번에 작성할 라이브러리는 채팅 UI를 간편하게 구성할 수 있게 해주는 라이브러리이다.몇가지 종류가 있지만 이번에 사용해볼 chat ui는 @chatscope/chat-ui-kit-react 이다. 1. 라이브러리 설치우선 라이브러리를 설치해준다.npm install @chatscope/chat-ui-kit-reactoryarn add @chatscope/chat-ui-kit-react 2. 기본 사용법기본적인 사용법은 어렵지 않다.import React from 'react';import ReactDOM from 'react-dom';import { MainContainer, ChatContainer, MessageList, Message, MessageInput} from '@chatscop..

React 2024. 6. 12. 11:01

어쩌다보니, 채팅 프로그램 비슷하게 만들일이 생겨서 웹소켓을 공부하게 되어, 간단하게 React에서 연결하는 걸 보여주려고 한다. react에서 사용하는 라이브러리중 socket.io-client 를 사용하였다. npm install socket.io-clientoryarn add socket.io-client 방식으로 설치할 수 있다. 우선 웹소켓을 연결할 준비가 되어있다는 전제로import { useEffect } from 'react';import io from 'socket.io-client';export default function WebSocket() { const socket = io('ws://localhost:8000'); useEffect(() => { sock..

React 2024. 5. 8. 16:40

웹 어플리케이션에서 양식 작성 중이거나 중요한 작업 수행 중에 실수로 페이지를 새로고침하여 진행 현황을 잃는 경우가 있다. 스마트폰으로 사용 시 위로 올리다가 새로고침 되는 경우도 다반사이다. 이러한 문제에 대한 해결책으로 usePreventRefresh라는 커스텀 훅을 생성하여 새로고침을 방지해보려고 한다. const usePreventRefresh = () => { const preventClose = (e: any) => { e.preventDefault(); e.returnValue = ''; }; // 브라우저에 렌더링 시 한 번만 실행하는 코드 useEffect(() => { (() => { window.addEventListener('beforeunload', preventClose); })..

React 2024. 3. 5. 11:23

이번 검색에서는 react가 아닌 nextjs에서 사용을 했었는데, react에서 사용하는 라이브러리인 react-kakao-maps-sdk를 처음에 사용했었다. 하지만 nextjs에서 맵을 좌표로 띄울때는 편했지만, 검색 기능 사용법을 몰라서 기본적인 API로 검색하게 되었다. 방식은 카카오톡에 나와있는 방식 그대로 사용하였다. kakaoMap 컴포넌트를 따로 만들었고, import React, { useEffect, useState } from "react"; // 카카오 api에서 받아온 token값을 입력해주고, 뒤의 libraries=services를 입력해줘야지 검색 기능을 사용할 수 있다. const KAKAO_SDK_URL = `//dapi.kakao.com/v2/maps/sdk.js?ap..

React 2024. 1. 31. 10:25

이번에 프로젝트를 하면서 QR코드 생성과 스캔할 일이 있어서 여러 라이브러리를 찾아보고 테스트를 해보았다. QR 생성 QR코드 생성은 매우 편하다. qrcode.react 라이브러리를 사용하면 매우 편하게 qr코드를 생성할수 있다. yarn add qrcode.react import { Container } from "@mui/material"; import QRCode from "qrcode.react"; export default function Register() { const [value,setValue] = useState({ name: '홍길동', age: '26' }) return ( ); } 위의 코드처럼 QRCode 위치만 정해준 후 JSON.stringify에 value값만 넣으면 자동..

React 2023. 12. 7. 11:08

이번에는 간단하게 내가 사용해본 React에서 사용할 수 있는 그래프/차트 라이브러리 중 2 종류를 간단하게 비교해볼려고 한다. React에서 사용할 수 있는 그래프/차트 라이브러리는 많지만 그 중에서도 자주 사용하는 종류를 사용해보았다. 1. React-chartjs 처음으로 사용해본 라이브러리는 React-chartjs-2 였다. 유명하기도 하고, 다른 라이브러리에 비하여 가볍다고 해서 사용을 했었다. 설치는 아래의 방식으로 설치할수 있다. npm install --save chart.js react-chartjs-2 아래의 페이지에서 예시를 확인할 수 있다. https://react-chartjs-2.js.org/examples/ Examples | react-chartjs-2 List of rea..

React 2023. 11. 30. 10:08

React 웹앱을 만들다 보면 카메라 기능을 넣고 싶은 경우가 생긴다. 이럴때 사용할 수 있는 webRTC API 사용을 간단하게 설명해 볼려고 한다. PWA를 사용하여 앱형태로도 카메라를 사용할 수 있기에 여러 방식으로 사용할 수 있다. const videoRef = useRef(null); const [isCameraOn, setIsCameraOn] = useState(false); useEffect(() => { const initCamera = async () => { try { const stream = await navigator.mediaDevices.getUserMedia({ video: true }); if (videoRef.current) { videoRef.current.srcObje..

React 2023. 11. 15. 10:10

이번 글에서는 react에서 excel을 생성하는 방법을 쓸 예정입니다. 우선 사용할 라이브러리는 xlsx와 fileSaver 2개를 같이 사용할 예정이다. yarn add xlsx file-saver 터미널에 입력하여 xlsx와 file-saver를 먼저 받아주고, import * as FileSaver from 'file-saver'; import * as XLSX from 'xlsx'; const excelFileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'; const excelFileExtension = '.xlsx'; const excelFileName = `파일명`; 파일명과 파일..

React 2023. 11. 14. 14:23