전체 글

설치$ 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..

import { SidebarStoreType } from "@/types/store/sidebar.type";import { create } from "zustand";export const useSidebarStore = create((set) => ({ isOpen: false, items: [ { text: "제로 칼로리", isSelect: false, query: "zero_calories" }, { text: "로우 칼로리", isSelect: false, query: "low_calories" }, { text: "제로 슈가", isSelect: false, query: "zero_sugar" }, { text: "로우 슈가", isSelect: false, que..

브라우저 기본 동작 vs 이벤트 동작1️⃣ 브라우저 기본 동작HTML 태그와 브라우저가 제공하는 고유 기능.예: 클릭 시 페이지 이동, 제출 시 새로고침, 스크롤 등.자동 실행: JavaScript 코드 없이도 동작.중단 방법: event.preventDefault().2️⃣ 이벤트 동작JavaScript로 addEventListener 또는 React의 onClick 등으로 등록한 사용자 정의 동작.예: 클릭 시 알림 표시, 키보드 입력 감지.수동 실행: 프로그래머가 리스너를 추가해야 동작. 이벤트 버블링 정의**이벤트 버블링(Event Bubbling)**은 DOM 요소에서 발생한 이벤트가 타깃 요소에서 시작해 부모 요소로 전파되는 동작입니다.이벤트는 타깃 요소 → 부모 → 조부모 순으로 상위 요..

dd const ImgNutritionalWrap = styled.div` width: 160px; display: flex; scroll-snap-type: x mandatory; overflow-x: auto; /* 스크롤바 제거 */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ &::-webkit-scrollbar { display: none; /* Chrome, Safari */ }`;const Img = styled.img` width: 100%; height: auto; border-radius: 12px; scroll-snap-align: start;`;const Nut..