프로젝트

이와같이, 채팅을 입력했을때 수동으로 스크롤을 해줘야하는 불편함이 있었다. "use client";import { useEffect, useRef } from "react";function MessageList({ messageList }) { const scrollRef = useRef(null); useEffect(() => { if (scrollRef.current) { scrollRef.current.scrollTop = scrollRef.current.scrollHeight; } }, [messageList]); return ( {messageList.map((message) => { return ( 메시지 ); ..

채팅 입력창에 이모지 아이콘을 누르면, 이모티콘 키보드가 나와 이모지를 입력할 수 있게 구현하고 싶었다.  emoji-picker-react const [showPicker, setShowPicker] = useState(false); const [message, setMessage] = useState("");const onEmojiClick = (event, emojiObject) => { setMessage((prevMessage) => prevMessage + emojiObject.emoji); setShowPicker(false); }; return ( setMessage(e.target.value)} > ..

max-width로 반응형 CSS//tailwind.config.tsmodule.exports = { theme: { screens: { 'sm-max': { 'max': '639px' }, // 모바일 (최대 639px) 'md-max': { 'max': '767px' }, // 작은 태블릿 (최대 767px) 'lg-max': { 'max': '1023px' }, // 큰 태블릿 (최대 1023px) 'xl-max': { 'max': '1279px' }, // 데스크탑 (최대 1279px) '2xl-max': { 'max': '1535px' } // 큰 데스크탑 (최대 1535px) }, },데스크탑 first로 개..

기본 Layoutimport Footer from "@/components/Footer";import Header from "@/components/Header";function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} );}export default RootLayout; Error나 Loading 중일때, children에 해당하는 content가 없으면, 저렇게 footer가 뷰포트 중간으로 올라와버리는 문제가 발생한다.  Flex-grow 사용import Footer from "@/components/Footer";..

keyDown/keyUp 이벤트를 사용할때, 영어는 괜찮지만 한국어로 입력하면 이런 문제가 발생하는 경우가 있다. 🤔 Why? 이 문제는 한글의 조합형 입력 방식 때문이라고한다. 한글 입력은 여러 키 입력이 조합되어 하나의 글자를 완성하는 과정을 거치기 때문에, key Event가 발생하는 시점에는 입력이 완전히 완성되지 않을 수 있다고 한다.  e.nativeEvent.isComposing  이 속성은 사용자가 텍스트 입력 중에 문자 조합(예: 한글 자음과 모음 조합)이 진행 중인지 여부를 나타냅니다. 이를 사용하면 키 이벤트가 발생할 때 입력이 완성된 상태인지를 확인하여, 입력의 완성이 된 경우에만 검색처리를 실행하도록 한다. const handleKeyDown: Keyboar..

예전에 코딩알려주는누나의 채팅앱 만들기 영상을 보고 이번 프로젝트에 적용해보고 싶단 생각에,2주 배운 모자란 백엔드 실력이지만... 온전한 기능을 다하진 못해도 간단한 채팅앱 만들기에 도전을 해보았다! [BackEnd]HTTP단방향(클라이언트 요청시만)연결 지속성 ❌ 웹소켓양방향(각자대화를 원할때 요청 가능)연결 지속성⭕️ 👉🏻 웹소켓으로 지속적인 실시간 양방향 통신을 할 수 있고, 서버가 새로운 메시지가 있을때 클라이언트에게 즉시 메시지를 보낼수있다.  https://github.com/Yuiii0/chat-server GitHub - Yuiii0/chat-serverContribute to Yuiii0/chat-server development by creating an account on Git..

좋아요한 상품들을 프론트단에서 관리하기 위해, zustand 스토어에 productId를 배열로 관리하고 있다. 마이페이지에서, 좋아요한 상품 productList들을 위해서, zustand에서 관리하고있는 productId들의 배열을 순회하면서, 해당 productId로 getProduct 쿼리문을 수행해야한다.  useQueries여러개의 비동기 쿼리를 동시에 실행할 수 있게 해주는 훅으로, 각각의 쿼리를 배열 형태로 받아 각 쿼리의 결과를 배열로 반환한다. 또한 각 쿼리의 로딩 상태나 에러상태 등을 개별적으로 관리할 수 있다.  동적 병렬 쿼리 작업을 위해 사용하기에, 주로 여러 개의 비동기 쿼리를 동시에 실행해야 할 때 적합하다. const results = useQueries(..

브랜드 카테고리별로 브랜드별 상품을 브랜드페이지에서 보여주려고 하는데, brandId에 따라 조건부 쿼리를 통해 fetch가 달라진다. brandId⭕️ : 브랜드별 상품 fetch (useQueryGetBrand)❌ : 전체상품 fetch (useQueryGetProducts)  조건문과 useEffect❗️React 훅은 컴포넌트의 최상위 수준에서만 호출되어야 하며, 조건문이나 반복문 내부에서 호출할 수가 없다. 훅의 동작이 예측할 수가 없어지기 때문이다. React는 컴포넌트의 상태 변화나 props에 따라 리렌더링 되기때문에, 조건문이나 반복문 내부에서 호출하게되면, 해당 조건이나 반복에 의해 리렌더링으로 쿼리 인스턴스가 생성되고 이전 쿼리가 새로운 쿼리로 대체될수 있고, 예기치..