NextJS

shadcn silder - dual range slider 제작 작성일자 : 2026년 03월 29일 slider.tsx"use client";import * as React from "react";import * as SliderPrimitive from "@radix-ui/react-slider";import { cn } from "@/lib/utils";const Slider = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => ( ));Slider.displayName = SliderPrimitive.Root.displayName;export { Slide..

한국어 조사(을/를, 이/가, 은/는, 와/과) 정리 작성 일자 : 2025년 12월 21일 개요 한국어의 을/를, 이/가, 은/는, 와/과는 같은 역할을 하는 조사 쌍이지만, 앞 단어에 받침(종성)이 있느냐 없느냐에 따라 형태가 달라집니다.여기서 받침(종성)이란 음절의 맨 끝에 붙는 자음을 말합니다.예: 밥(받침 ㅂ), 집(받침 ㅂ), 사과(받침 없음), 나무(받침 없음) @toss/hangul 라이브러리 사용 예시function josa( // 조사를 붙일 한글 문자열 word: string, // 붙일 조사 josa: '이/가' | '을/를' | '은/는' | '으로/로' | '와/과' | '이나/나' | '이에/에' | '이란/란' | '아/야' | '이랑/랑' | '이에요/예요' | '..

DOMPurify란? 작성 일자 : 2025년 11월 16일 DOMPurify란? 웹 서비스에서 사용자 입력을 그대로 화면에 렌더링하는 것은 높은 자유도를 제공하는 동시에, 보안 취약점을 초래할 수 있는 위험한 동작입니다. 특히 innerHTML, dangerouslySetInnerHTML와 같이 HTML을 직접 DOM에 삽입하는 기능은, 적절한 방어 장치 없이 사용할 경우 XSS(Cross-Site Scripting) 공격에 노출되기 쉽습니다. DOMPurify는 잠재적으로 위험한 HTML 문자열에서 스크립트와 악성 속성 등을 제거하여, 브라우저에 삽입해도 안전한 형태로 변환해 주는 라이브러리입니다.입력: 신뢰할 수 없는 HTML (예: 사용자 입력, WYSIWYG 에디터 결과물 등)출력: 스크립트,..

SpringBoot, NextJS - CookieTheifException 방지하기 작성일자 : 2025년 08월 31일 CookieTheifException Spring Boot에서 remember-me 기능을 사용할 때, Session이 만료된 후 Frontend Client에서 Concurrent 하게 요청이 들어오면 CookieTheifException이 발생할 수 있습니다. 아래는 이 문제를 방지하기 위한 NextJS 설계를 소개합니다. 예시 코드 app/lib/handshake.ts"use client";/** * Minimal, single-tab handshake to ensure exactly one request * triggers remember-me → new JSESSIONI..

다크 모드 - 배경 색 선택 과정 (퓨어 블랙 vs 다크 그레이) 작성 일자 : 2025년 08월 17일 테스트 결과 - 퓨어 블랙 코드import React from 'react';const TextBlocksUI = () => { const loremText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute iru..

Zustand - local storage 사용하기 작성 일자 : 2025년 08월 10일 dark-mode-store.tsimport { create } from "zustand";import { persist } from "zustand/middleware";import { useState, useEffect } from "react";interface DarkModeState { isDarkMode: boolean; toggleDarkMode: () => void;}const useDarkModeStore = create()( persist( (set) => ({ isDarkMode: false, toggleDarkMode: () => set((state) => ({ i..

Shadcn - Textarea에서 Cmd+Enter / Ctrl+Enter 구현하기 작성 일자 : 2025년 08월 03일 Textarea 기본 코드import { Label } from "@/components/ui/label"import { Textarea } from "@/components/ui/textarea"export function TextareaWithText() { return ( Your Message Your message will be copied to the support team. )} Cmd+Enter / Ctrl+Enter 구현하기import { useState, useCallback } from "..

JS - 어떤 문자가 쓰였는지 감지하기 작성일자 : 2025년 07월 06일 어떤 문자가 쓰였는지 감지하기 (ISO 15924) script.jsexport const scripts = [ { code: 'Latn', name: 'Latin' }, { code: 'Cyrl', name: 'Cyrillic' }, { code: 'Hang', name: 'Hangul' }, { code: 'Hani', name: 'Han (Hanzi)' }, { code: 'Arab', name: 'Arabic' }, { code: 'Deva', name: 'Devanagari' }, { code: 'Beng', name: 'Bengali' }, { code: 'Grek', name: 'Greek' }, {..