전체 글

해당 게시물은 Next.js와 Vercel을 통해 웹사이트를 배포한 상황을 가정하여 진행됩니다. 1. 사이트 등록 및 소유확인1) 배포한 웹사이트 URL 복사 https://searchadvisor.naver.com/console/board 네이버네이버에 로그인 하고 나를 위한 다양한 서비스를 이용해 보세요nid.naver.com2) 네이버 웹마스터 도구 접속 3) 입력칸에 배포 URL 붙여넣기 4) 소유확인 진행 클릭 5) 'HTML 확인 파일'을 클릭해 파일 다운로드 [ public / naverOOOO.html ]6) 다운로드한 파일을 public 폴더로 이동7) 커밋 -> 푸쉬 -> 배포 8) https://...URL... 링크 클릭 9) 사이트 인증 확인 10) 소유 확인 클릭 11) 소유 확..

설치npm install @next/third-parties@latest 코드 (전역 경로 GA)app / layout.tsx import { GoogleAnalytics } from '@next/third-parties/google' export default function RootLayout({ children,}: { children: React.ReactNode}) { return ( {children} )} 코드 (단일 경로 GA)app / page.tsximport { GoogleAnalytics } from '@next/third-parties/google' export default function Page() { return }

미리보기 소개Noistack 라이브러리는 React 애플리케이션에서 간편하게 알림(Notification)과 같은 메시지를 처리할 수 있도록 도와주는 유틸리티입니다.주로 Material-UI(MUI)와 함께 사용하며, 스낵바(Snackbar)를 활용한 사용자 피드백을 쉽게 구현할 수 있습니다. 주요 특징간단한 사용법: 기본적으로 훅(hook)을 통해 알림을 호출.Customizable: 알림 스타일 및 동작을 자유롭게 설정 가능.Stacking 지원: 여러 알림을 동시에 쌓아 보여줌.1. 설치npm install notistack2. 기본 사용법1) Provider 설정SnackbarProvider를 루트 컴포넌트에 추가합니다.import React from "react";import ReactDOM f..

설치$ npm install next-pwa next.config.ts 설정[경로 : / next.config.ts ]// eslint-disable-next-line @typescript-eslint/no-require-importsconst withPWA = require("next-pwa")({ dest: "public", register: true, skipWaiting: true,});/** @type {import('next').NextConfig} */const nextConfig = { // ...기존에 추가했었던 next.config.ts 설정};module.exports = withPWA(nextConfig); manifest.json 생성 [경로 : / public / man..

기본 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 특정 줄 수 이상만 ...으로 표시 display: -webkit-box; -webkit-line-clamp: 3; // 3줄 이상이면 ellipsis 적용 -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; overflow-wrap: break-word;

Next.js Image 태그란? 장점과 모든 속성 정리웹사이트를 개발할 때 이미지는 중요한 요소입니다. Next.js는 이러한 이미지를 효율적으로 관리하기 위해 컴포넌트를 제공합니다. 이 컴포넌트는 이미지 최적화, 반응형 디자인, 성능 향상을 자동으로 처리하여 개발자와 사용자 모두에게 이점을 제공합니다. 이번 포스팅에서는 Next.js의 태그란 무엇인지, 장점, 그리고 사용 가능한 모든 속성과 속성값을 정리해 보겠습니다.1. Image 태그란?Next.js의 컴포넌트는 이미지를 서버와 클라이언트에서 최적화하여 빠르고 효율적으로 렌더링할 수 있게 돕는 컴포넌트입니다. 일반 HTML의 태그를 확장한 것으로, 다음과 같은 기능을 제공합니다:자동 이미지 최적화: 이미지를 사용자가 보이는 크기로 자동으로..

import { AuthStoreType } from "@/types/store/auth.type";import { create } from "zustand";import { persist, PersistStorage } from "zustand/middleware";// Custom storage for zustandconst customStorage: PersistStorage = { getItem: (name) => { const item = localStorage.getItem(name); return item ? JSON.parse(item) : null; }, setItem: (name, value) => { localStorage.setItem(name, JSON.str..

"use client";import * as React from "react";import SwipeableDrawer from "@mui/material/SwipeableDrawer";import Button from "@mui/material/Button";import { useSidebarStore } from "@/store/sidebarStore";import SidebarItem from "./SidebarItem";import styled from "styled-components";const Sidebar = () => { const { items, items2, isOpen, open, close } = useSidebarStore(); const isSecondOpen = useSi..