myinfo7091 님의 블로그

이중 탭으로 구성된 채팅방 UI가 필요하다.현재 구조에서 채팅방을 두 개의 탭으로 나누고, 각 탭에서 서로 다른 콘텐츠(채팅 메시지 + 입력창 / 채팅방 갤러리)를 표시하려면 탭 컴포넌트를 별도로 분리하는 것이 유지보수성과 재사용성을 높이는 데 유리하다.탭 컴포넌트 분리하기탭의 전환을 관리하는 상태와 UI를 캡슐화한 Tabs 컴포넌트를 생성하자. 각 탭의 콘텐츠는 props.children 또는 특정 컴포넌트를 렌더링하도록 설계할 수 있다.ChatRoomPage 컴포넌트에서는 탭 컴포넌트를 사용해 두 개의 탭을 표시할 것이다.탭 1: 채팅 메시지, 채팅 입력창탭 2: 갤러리Tabs 컴포넌트 만들기import { useState } from "react";interface TabProps { labels..

'(prev: { chatroom_id: string; content: string; created_at: string; id: string; sender_id: string; }[]) => ({ chatroom_id: string; content: string; created_at: string; id: string; sender_id: string; } | { ...; })[]' 형식의 인수는 'SetStateAction' 형식의 매개 변수에 할당될 수 없습니다. payload.new의 타입이 정확히 지정되지 않았기 때문에 에러가 발생한다. payload.new가 Supabase의 postgres_changes 이벤트로 전달된 데이터인데, 타입 추론이 제대로 이루어지지 않았다. payload.new에..

Zustand를 사용해서 모달 상태를 간단하고 효율적으로 관리할 수 있다. Zustand는 경량 상태 관리 라이브러리로, 전역 상태와 모달의 열림/닫힘 상태 관리에 적합하다.  1. Zustand 스토어를 설정해서 모달의 상태와 상태 변경 함수를 정의한다.import create from 'zustand';interface ModalState { isOpen: boolean; openModal: () => void; closeModal: () => void;}const useModalStore = create((set) => ({ isOpen: false, openModal: () => set({ isOpen: true }), closeModal: () => set({ isOpen: false..

/* eslint-disable @next/next/no-img-element */// SSG// 서버 컴포넌트에서는 fetch API를 통해 데이터를 직접 불러올 수 있다.// build 시점에 데이터를 불러오기 때문에 터미널에 console.log로 데이터를 출력해볼 수 있다.export default async function HomePage() { const response = await fetch("http://localhost:4000/products"); const data: Product[] = await response.json(); console.log(data); return ( Hello! Next.js HomePage ..

타입스크립트를 사용하는 이유 웹 사이트를 운영하는 데 있어 높은 코드 품질로 버그 없이 사용자에게 안정감 있는 경험을 제공하는 것이 중요해졌다. TypeScript는 동적 타입 언어인 JavaScript를 보완해 주면서 활용도가 늘어나고 있다. TypeScript는 JavaScript의 상위 확장자로, 원하는 변수 타입을 정의하고 JS로 변환하여 브라우저에서 실행할 수 있다. 타입스크립트를 사용하는 가장 큰 이유는 버그를 예방할 수 잇는 타입 시스템이다. 타입(자료형)은 어떠한 변수가 문자열인지, 숫자인지, boolean인지 등 값의 형태에 따라 자료의 유형을 지정해주는 것이다. 만약 컴파일 과정에서 지정한 타입에 맞지 않는 값이 들어가면 에러가 발생하는데, 이를 통해 디버깅을 좀 더 편하게 할 수 있다..

Next.js에서 주요 렌더링 방식은 4가지로 나눌 수 있다. 각 패턴별로 프로젝트의 성능이나 데이터, 사용자 경험 최적화를 위해 고려해야 할 부분들이 있는데, 자신이 진행할 프로젝트에서 요구되는 사항에 따라 적절한 방식을 선택하면 된다. 렌더링 시점속도데이터활용SSG빌드타임빠름고정형 데이터마케팅 페이지SSR요청 시느림(서버 요청)최신 데이터실시간 데이터CSR클라이언트 실행 시느림(초기에)클라이언트에서 처리검색 결과ISR빌드 타임,주기적인 재생성빠름조정 가능뉴스, 전자상거래 등  SSG(Static Site Generation)export async function getStaticProps() { const res = await fetch("https://example.com/data"); cons..

목표 _ React에서 사용자의 특정 결과값을 필터링하는 기능 구현하기공개 설정한 결과값만 리스트 페이지에 표시하기현재 로그인한 사용자의 결과값은 공개 여부와 관계없이 항상 화면에 표시하기 구현 과정 _ 테스트 결과 렌더링하기 필터링된 결과를 map 메서드로 TestResultItem 컴포넌트에 렌더링한다. visibleResults.map((result) => ( ));  구현 과정 _ 어려웠던 부분   개발자 도구에서 네트워크 탭을 확인해 보면 비공개 / 공개 전환에 대한 요청이 정상적으로 진행되고 있다. 그런데 다른 아이디로 로그인했을 때 비공개 설정이 적용되지 않거나, 현재 로그인한 사용자의 테스트 결과가 전부 표시되지 않는 문제가 있었다. 튜터링 과정에서 네트워크 헤더, 페이로드 부분을 확인하..

React에서 로그인 상태에 따라 내비게이션 바 관리하기 React에서 사용자 로그인 여부에 맞춰 다른 내비게이션을 보여주고 싶었다. 로컬 스토리지를 이용해 로그인 여부를 확인하고, 로그인/아웃 상태에 따라 내비게이션 컴포넌트를 조건부 렌더링하는 방법을 고려해볼 수 있다.  ◆ 로그인 상태에 따른 조건부 내비게이션  컴포넌트에서 로그인에 따라 LoginNav, LogoutNav 컴포넌트를 조건부로 보여주기 위해 localStorage에서 사용자 정보를 확인하고, 로그인된 상태면 LoginNav, 로그아웃된 상태면 LogoutNav를 렌더링하도록 설정하면 된다. const Header = () => { const user = JSON.parse(localStorage.getItem("user")); c..

React Toast는 사용자 알림을 간편하게 구현할 수 있는 라이브러리이다. React Toastify를 통해 손쉽게 사용자에게 피드백을 전달할 수 있다. 알림은 사용자의 경험을 강화하는 중요한 요소이기 때문에 적절한 위치와 타이밍에 사용해야 한다. ◆ 설치 및 적용 react-toastify 패키지를 추가한다.yarn add react-toastify  설치 후에는, ToastContainer 컴포넌트를 애플리케이션에 추가하고, toast 함수를 사용해 알림을 띄울 수 있다. import React from 'react';import { ToastContainer, toast } from 'react-toastify';import 'react-toastify/dist/ReactToastify.css'..

오늘의 학습내용 :  Supabase ◆ Baas 모바일, 웹 애플리케이션을 제작할 때에는 백엔드 서버 개발도 함께 진행하게 된다. 백엔드 이야기를 하자면, 서버 개발을 할 때 고려해야 할 사항들이 있다. 만약 유저가 늘어난다면 서버를 확장해야 하고, 보안도 주의해야 한다. 이러한 웹, 모바일 앱 개발을 더 쉽고 빠르게 할 수 있도록 돕는 클라우드 기반의 백엔드 서비스가 Baas 이다. 복잡한 백엔드 시스템을 직접 관리할 필요가 없기 때문에 프론트엔드에 집중하는 것이 가능해진다! (참고: https://velog.io/@ki5970)  대표적인 BaaS 플랫폼에는 Firebase(Google 운영), Parse, AWS Amplify 등이 있다. 이러한 서비스들은 데이터베이스, 소셜 미디어 서비스와의 연..