전체 글

⭐️ 데이터 유형을 확인하기 위한 여러 가지 유틸리티 함수export const typeOf = (data) => { return Object.prototype.toString.call(data).slice(8, -1).toLowerCase(); }; export const isNull = (data) => typeOf(data) === "null"; export const isUndefined = (data) => typeOf(data) === "undefined"; export const isNumber = (data) => typeOf(data) === "number" && !isNaN(data); export const isBigInt = (data) => typeOf(data) === "bigi..

[ Recommend.tsx ] import axios from 'axios'; import { Banner } from '@/components'; import { useEffect, useState } from 'react'; import classes from './Recommend.module.scss'; import { FoodList } from '@/components/FoodList/FoodList'; import { useDocumentTitle } from '@/hooks/useDocumentTitle'; import { Pagination } from '@/components/Pagination/Pagination'; import { ScrollButton } from '@/compo..

React를 사용한 채팅 애플리케이션에서 메시지 입력과 이미지 업로드를 처리하는 컴포넌트의 코드입니다. export function SendMessage() { .... const handleKeyDown = (e: KeyboardEvent) => { if (e.key === 'Enter') { const fileInput = document.getElementById('file') as HTMLInputElement; fileInput.click(); } }; return ( 메세지 입력 setInput(e.target.value)} required /> setImg(e.target.files[0])} aria-label="이미지 업로드 버튼" tabIndex={-1} /> ⌲ ); } 이미지 업로드 ..

kakao map 연결할때 발생한 오류 에러는 현재 카카오 map api를 불러오는 과정에서 문제가 생긴것같습니다. // MapContainer.tsx /* eslint-disable react-hooks/exhaustive-deps */ import { useEffect } from 'react'; import { useRecoilValue } from 'recoil'; import { useSetRecoilState } from 'recoil'; import { mapState } from '@/@recoil/mapState'; import classes from './MapContainer.module.scss'; import { readingMap } from '@/@recoil/readingMa..

📌 개요​ Recoil을 사용하면 atoms (공유 상태)에서 selectors (순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있다. Atoms는 컴포넌트가 구독할 수 있는 상태의 단위다. Selectors는 atoms 상태값을 동기 또는 비동기 방식을 통해 변환한다. 아톰 (Atoms) 셀렉터 (Selectors) 공유 상태 (Shared State) 순수 함수 (Pure Function) 컴포넌트가 구독할 수 있는 상태 단위 아톰 상태 값을 동기 또는 비동기 방식으로 변환 📌 Atoms​ Atoms는 상태의 단위이며, 업데이트와 구독이 가능하다. atom이 업데이트되면 각각의 구독된 컴포넌트는 새로운 값을 반영하여 다시 렌더링 된다. atoms는 런타임에서..

React 상태 관리 라이브러리 Recoil은 Facebook에서 개발한 오픈 소스 라이브러리로, React 앱에서 상태 관리를 간단하고 유연하게 처리할 수 있게 해주는 라이브러리입니다. 이를 통해 상태 관리 코드의 가독성과 유지보수성을 향상시키고, 상태 변경에 따른 리렌더링 최적화를 제공하여 앱의 성능을 개선할 수 있습니다. 또한 비동기 처리 및 상태 파생 기능도 제공합니다. 📌 리코일 특징 Recoil의 특징은 크게 세 가지입니다. 첫째, "상태 공유의 유연함"이라는 점입니다. React 트리 구조에서 앱 상태를 끌어올렸을 때(Prop Drilling 또는 Context API) 하위에 종속된 컴포넌트가 업데이트 요구될 경우, 앱이 모두 리-렌더링 되는 문제가 있습니다. 하지만 Recoil은 Reac..

vite 로 빌드시 svg 이미지가 깨지는 이슈 발생 public 디렉토리는 정적 파일을 저장하는 데 사용되며, Vite가 처리하지 않고 빌드 시 자동으로 복사됩니다. 따라서 이미지 파일 경로를 설정할 때 public 디렉토리를 제외해야 합니다. 해결방법: import search from '/public/assets/search.svg'; import search from '/public/assets/search.svg'; 와 같은 방법으로 SVG 이미지를 모듈로 가져와서 사용하는 것도 가능합니다. 이 방법을 사용하면 이미지 파일 경로를 직접 입력하는 대신 모듈로 가져와서 사용할 수 있으므로, 경로 오류가 발생하지 않을 가능성이 높습니다. // vite.config.ts import { defineCo..

⭐️ 채팅 기능 메세지와 이미지 업로드 구현 해당 코드는 Firebase를 사용하여 실시간 채팅 애플리케이션의 메시지 전송 기능을 구현하는데 사용되는 React 컴포넌트입니다. import { getDownloadURL, ref, uploadBytesResumable, UploadTaskSnapshot, } from '@firebase/storage'; import { db } from '@/firebase/app'; import { storage } from '@/firebase/storage'; import { BsFillSendFill } from 'react-icons/bs'; import classes from './SendMessage.module.scss'; import { AuthConte..