juni

프로필 이미지를 아바타와 이미지로 별도 관리 예시const profileFormSchema = z.object({ name: z .string() .min(1, { message: "Your name must be at least 1 characters.", }) .max(20, { message: "Your name must be at most 20 characters.", }), nickname: z .string() .min(1, { message: "Your nickname must be at least 1 characters.", }) .max(20, { message: "Your nickname must b..

이전 게시글 생성/수정과 연계  DropDownMenu 컴포넌트에 삭제 예시 {(userId == item.userId || role == "owner") && ( ( 게시글 삭제하기 )} feedId={item.id} onCompleted={onCompleted} setDetailDialogOpen={setDialogOpen} /> )} 삭제 로직 예시export default function DeleteFeed({ renderTrigger, onC..

게시글 작성/수정을 하나의 컴포넌트에서 defaultValues 값 유무에따라 관리 const defaultValues: Partial = { title: defaultValue?.title || "", description: defaultValue?.description || "", tags: defaultValue?.tags || [], }; 게시글 작성 게시글 수정 모달 on/off 상태 관리 const [dialogOpen, setDialogOpen] = useState(false); 모달 동작을 위해 DropDownMenu 컴포넌트 활용  DropDownMenu 커스텀 정의 예시import * as DropdownMenuPrimitive from "@radi..

Dialog와 Switch를 활용하여 권한 설정 퍼블리싱, API완성 전이라 로컬에서 임시 구현Dialog 예시import * as DialogPrimitive from "@radix-ui/react-dialog";import * as React from "react";import { cn } from "@/lib/utils";import { cva } from "class-variance-authority";const DialogTrigger = DialogPrimitive.Trigger;const DialogPortal = DialogPrimitive.Portal;const DialogClose = DialogPrimitive.Close;const DialogOverlay = React.forward..

translate와 translate3dtranslate(x, y):2D 이동을 위한 함수입니다.X축과 Y축으로만 이동이 가능해요.예: translate(-50%, -50%)는 요소를 X축으로 -50%, Y축으로 -50% 이동시킵니다.translate3d(x, y, z):3D 이동을 위한 함수입니다.X축과 Y축 외에도 Z축으로 이동이 가능해요.예: translate3d(-50%, -50%, 0)는 X축과 Y축으로는 -50%씩 이동하고, Z축 이동은 없도록 설정합니다 (0).차이점 요약2D 이동만 필요하면 translate를, 3D 효과나 Z축 이동이 필요한 경우 translate3d를 사용합니다.실제로 Z축 이동이 없더라도 translate3d를 사용하면 하드웨어 가속이 적용되어 애니메이션 성능이 약간 ..

usePathnameNext.js의 내장 훅 중 하나로, 현재 페이지의 경로(pathname)를 가져오는 데 사용됩니다. Next.js 13부터 도입된 App Router 기능과 함께 사용할 수 있으며, 페이지의 경로를 쉽게 얻을 수 있게 도와줍니다.주요 용도현재 경로에 따른 동적 UI 렌더링: 예를 들어, 특정 페이지 경로에 따라 다른 콘텐츠를 표시하거나, 경로에 맞는 메뉴나 네비게이션을 강조하는 등의 작업을 할 수 있습니다.라우팅 로직 구현: 현재 경로를 기반으로 페이지를 리다이렉트하거나, 조건에 따라 동작을 달리할 수 있습니다.현재 페이지가 https://example.com/about/team이라면, usePathname()은"/about/team" event.origin웹 브라우저에서 postM..

json 응답 구조일반적인 응답 구조REST API와 같은 일반적인 웹 서비스에서는 보통 다음과 같은 방식으로 응답이 이루어집니다:HTTP 상태 코드 (HTTP Status Code):클라이언트가 서버에 요청을 보내면, 서버는 응답과 함께 HTTP 상태 코드를 반환합니다.이 상태 코드는 응답의 성공 여부를 나타내며, 클라이언트는 이를 보고 요청이 성공했는지 실패했는지 판단할 수 있습니다.예시: 200 OK, 404 Not Found, 500 Internal Server Error 등. HTTP 상태 코드는 항상 존재하지만, 이는 JSON 응답의 일부가 아니라 HTTP 응답 헤더에서 제공됩니다.HTTP 응답 상태 코드(response.status)를 통해 요청 성공 여부를 확인할 수 있습니다.statusC..

라이브러리ToastifyReact-Toastify가 대표적입니다.빠르고 쉽게 알림을 추가할 수 있도록 설계된 라이브러리입니다.미리 정의된 스타일과 기능이 제공되기 때문에, 설정이 간편하고 바로 사용할 수 있습니다.다양한 기능을 제공: 자동 닫힘, 애니메이션, 위치 설정, 클릭 이벤트 등.ToastPrimitivesToastPrimitives는 이름 그대로 **Primitives(기본 구성 요소)**를 제공하는 라이브러리입니다.알림의 기본 기능을 위한 저수준 구성 요소를 제공하며, 스타일링이나 동작을 사용자 정의할 수 있도록 설계되었습니다.설정과 스타일을 직접 커스터마이징하고 싶은 경우에 더 유용합니다.기본 스타일이나 고정된 기능이 제공되지 않으므로, 완전한 자유도를 원할 때 사용합니다.ToastPrimi..