코딩기록

깜빡거리는 막대기를 텍스트 커서 또는 캐럿 (Caret)이라 한다. 숨기는 방법테일윈드 CSS.wrap: { caret-color: transparent;} 여기서 추가로 🧩 user-select: none;과 caret-color: transparent; 차이🎯 user-select: none;역할: 사용자가 텍스트를 드래그해서 선택하지 못하게 막음.적용 대상: 텍스트 블록, 버튼, 링크 등테일윈드 이 텍스트는 복사 안 돼요CSS.wrap: { user-select: none;}✏️ caret-color: transparent; 또는 Tailwind에서 caret-transparent역할: 입력 필드에서 텍스트 커서(깜빡이는 막대기)를 숨김적용 대상: , 등테일윈드 CSS.div-wrap..

현재 작업중인 리액트, Next.js, Tailwind.css 프로젝트에서 쿠폰 번호 등록을 모달대신 버튼 클릭으로 아래로 입력창이 열리게 구현했다. ✅ 완성된 결과물 ✅ 애니메이션 적용한 코드[CouponHistory.tsx]{/* 쿠폰번호등록 */} {isOpen && ( 쿠폰번호등록 시리얼번호는 영문자+숫자의 조합이며, 총 16자리 입니다. 예)AB12-CD23-EF56-123A {[...Array(4)].map((_, idx) => ( ..

아래 코드에서 getTextColor(color: string) 함수는 주어진 color가 밝은 색인지 어두운 색인지 판단해서 텍스트 색상을 흰색(white) 또는 검정(black)으로 자동 결정해주는 함수.✅ 1단계: 준비 (초기값 및 색상 테이블 정의)let r = 0, g = 0, b = 0;const lowerColor = color.toLowerCase();입력값 color를 소문자로 바꿔서 처리 (대소문자 구분 없이 일치 확인하기 위해).RGB 기본값은 (0, 0, 0)으로 초기화.✅ 2단계: named color 처리if (namedColors[lowerColor]) { [r, g, b] = namedColors[lowerColor];}namedColors는 CSS에서 쓰는 "blue", ..

Next.js에서 폴더명에 [](대괄호)를 쓰는 건 **동적 라우팅(Dynamic Routing)**을 의미.즉, 주소의 특정 부분을 변수처럼 처리하고 싶을 때 사용하는 방식이다. ✅ 예: [id] 폴더의 의미src/app/items/[id]/page.tsx이 구조는 /items/무언가 형태의 URL을 모두 이 페이지로 연결하겠다는 뜻이다.예를 들어:주소 처리되는 값 (id)/items/check1"check1"/items/some-product"some-product"/items/123"123"이때 이 id 값은 useParams() 또는 PageProps를 통해 접근할 수 있다.✅ 어떻게 동작하나요?1. URL 접속브라우저에서 /items/check1에 접속2. [id]/page.tsx 실행Next...

Swiper(스와이퍼)는 반응형 슬라이드(캐러셀) 라이브러리로, 이미지 슬라이더나 배너 캐러셀 등을 만들 때 많이 사용.React 프로젝트 기준.✅ 1단계: Swiper 설치npm install swiper✅ 2단계: 스타일 불러오기globals.css 또는 layout.tsx에서 전역 스타일에 추가.// 예: app/globals.css@import 'swiper/css';@import 'swiper/css/navigation';@import 'swiper/css/pagination';✅ 3단계: 사용 예시 (React 컴포넌트)"use client"; // Next.js App Router 사용 시 필수import { Swiper, SwiperSlide } from "swiper/react";impo..

'use client'는 Next.js App Router에서 클라이언트 컴포넌트임을 명시하는 지시문.✅ 'use client'를 작성하는 이유📌 1. 기본은 서버 컴포넌트이기 때문Next.js(App Router 기준)에서는 .tsx 파일은 기본적으로 서버 컴포넌트이다.→ 서버에서 실행되고, HTML을 생성해서 클라이언트에 전달한다.하지만:상태(useState)이펙트(useEffect)이벤트 핸들러 (onClick, onChange)브라우저 API (localStorage, window 등)이런 브라우저 전용 기능을 쓰려면 클라이언트 컴포넌트여야 한다.📌 2. 'use client'가 필요할 때아래 조건에 해당하면 컴포넌트 맨 위에 'use client'를 써야 한다조건 예시useState, use..

로그인시 로그인 종류를 몇가지 만들었다. 탭선택에 따라 form이 다르게 나온다. 중복된 코드 setActiveTab("email")}> 이메일 로그인 {activeTab === "email" && } setActiveTab("qr")}> QR코드 로그인 {activeTab === "qr" && } setActiveTab("nonMember")}> 비회원 배송조회 {activeTab === "nonMember" ..

상황 input의 border- bottom 컬러 변경시 focus 될때 ui가 아래로 살짝살짝 밀린다 ✅ 원인: border 두께가 focus 시 달라지기 때문 해결평상시에도 border 두께를 맞추고, 색상만 바꾸기focus:border-b-2 focus:border-b-[#0073e9] rounded-t" 라인 수정 [수정 전] 아이디(이메일)를 입력해주세요. [수정 후]

✅ 오류상황search 아이콘 클릭시 부드럽게 close아이콘 + input 으로 변경이 안됨. 즉, transition 적용 안됨. {/* 🔽 input 토글 영역 */} {showInput && ( )} ✅ 문제 원인: w-0 → w-[240px] 애니메이션은 display 상태와 관련 있음{showInput && }처럼 조건부 렌더링으로 input 자체를 DOM에 아예 추가/제거하면,transition이 작동하기 전에 width가 없어져 버리기 때문에 애니메이션이 실행되지 않음. ✅ 해결 방법: input을 항상 렌더링하고, className으로만 숨기기 🔧 추가 포인트pointer-events-none: input이 w-0일 때 클릭 방지

const handleClick = useCallback(() => { console.log("clicked");}, []);const btnRef = useRef(null);이 한 줄은 리액트에서 DOM 요소를 직접 참조하기 위한 방법✅ useRef란?React의 훅 중 하나로, 컴포넌트가 리렌더링되어도 유지되는 값을 저장할 수 있음.보통 DOM 요소나 타이머 ID, 외부 라이브러리 인스턴스 등을 저장하는 데 쓰임.✅ 이 코드에서의 의미const btnRef = useRef(null);구성 요소 설명useRef()ref 객체 생성HTMLButtonElementref.current가 버튼 요소를 가리키도록 타입 지정null초기값: 아직 버튼이 화면에 나타나지 않았기 때문에 null즉, 이 코드는“버튼을..

상황: 써치버튼 클릭시 x, input 활성화됨 반대로 x 클릭시 써치버튼 활성화 안됨. 이유: Next.js의 컴포넌트는 최적화를 위해 내부적으로 이미지 캐싱을 강하게 적용, 그래서 src만 바꿔도 리렌더링이 안 될 수 있음. → 이렇게 하면 src는 바뀌었지만, Next.js가 내부적으로 같은 컴포넌트로 판단해서 업데이트를 생략함. 해결: key={showInput ? "close" : "search"} // 🔑 캐시 무효화용 코드 추가 key 값이 바뀌면 React는 이 컴포넌트를 새로운 컴포넌트로 인식하고 다시 렌더링함. 그래서 close ..

TypeScript에서 type과 interface는 둘 다 타입을 정의하는 역할을 하지만, 몇 가지 차이가 있음 .1. 기본적인 차이점type interface용도다양한 타입(객체, 유니온, 맵드 타입 등)을 정의할 때 사용객체의 구조(프로퍼티와 메서드)를 정의할 때 사용확장(상속)&(인터섹션)으로 확장extends 키워드로 확장중복 선언 가능 여부❌ 불가능 (덮어쓰기 됨)✅ 가능 (자동으로 병합됨)유니온 타입 지원✅ 가능❌ 불가능맵드 타입 지원✅ 가능❌ 불가능2. 타입 상속(확장) 방식 비교(1) interface의 확장 (extends)인터페이스는 extends 키워드를 사용하여 확장할 수 있음.interface Person { name: string; age: number;}interface ..

타입 가드(Type Guard)**는 TypeScript에서 특정 값이 어떤 타입인지 판별하는 기능.유니온 타입이나 타입이 확실하지 않은 값을 처리할 때 매우 유용.✅ 타입 가드(Type Guard)란?타입 가드는 런타임에서 타입을 좁히는(Narrowing) 역할.즉, 특정 조건을 만족하면 TypeScript가 해당 변수의 타입을 더 구체적으로 인식할 수 있도록 도와줌.예제) 타입 가드 없이 타입 오류 발생 🚨function printLength(value: string | number) { console.log(value.length); // ❌ 오류: 'number'에는 'length' 속성이 없음}위 코드는 number 타입에는 length 속성이 없기 때문에 오류가 발생.✅ 타입 가드를 사용하..

내가 현재쓰는 버전 1. 프로젝트 생성 및 초기 설정npx create-react-app my-app --template typescriptcd my-appnpm install react@18 react-dom@18 간혹 프로젝트 생성 후 web-vitals 모듈이 누락된 경우 아래 명령어로 설치 하면된다. npm install web-vitals 2. 필요한 패키지 설치npm install react-router-dom@^7.1.5 web-vitals styled-components @types/styled-componentsnpm install @eslint/config-array @eslint/object-schema eslint-config-prettier eslint-plugin-prettie..

[ Header.tsx ]import React from 'react';import styled from 'styled-components';import { ProgressBar } from 'react-bootstrap';interface Props { type: string;}export default function Header(props: Props) { return ( {props.type === 'progress' ? ( ) : ( 😻예비집사 판별기 )} );}const ProgressWrapper = styled.div` font-size: 40pt; align-items: cent..

익스텐션에서 prettier, Eslint를 설치 한다.[ .prettierrc ]{ "arrowParens": "avoid", "bracketSpacing": true, "htmlWhitespaceSensitivity": "css", "insertPragma": false, "jsxBracketSameLine": false, "jsxSingleQuote": false, "printWidth": 120, "proseWrap": "preserve", "quoteProps": "as-needed", "requirePragma": false, "semi": true, "singleQuote": false, "tabWidth": 2, "trailingComma": "es5", "use..

1. 프로젝트 폴더 생성 및 초기화터미널에서 새로운 프로젝트 폴더를 생성하고 해당 폴더로 이동.mkdir ts-app cd ts-appVite로 React + TypeScript 템플릿 생성 (권장)Vite는 빠르고 효율적인 빌드 시스템을 제공. 최신 React 환경에 적합함.npm create vite@latest  --template react-ts필요한 패키지 설치Select a framework: React  선택Select a variant: TypeScript  선택npm install  2. 설정 확인 및 수정 - 선택사항package.json 파일 수정필요한 의존성들만 포함되도록 package.json을 다음과 같이 수정.{ "name": "ts-app", "version": "0.1...