코딩기록

처음에 잘 나오던 메인 홈페이지 캐러셀이 작업중간 부터 렌더링후 배경색만 나오는 오류가 생겼다. ✅ 로딩? 렌더링? 무엇이 문제인가?확인1.F12 Elements 탭에서 보면 태그는 존재 → 렌더링 OK 확인2.http://localhost:3000/assets/carousel/carousel1.jpg 주소창에 입력해보니 이미지가 잘 나온다 → 로딩 OK 로딩(Loading) 또는 태그가 참조하는 이미지 파일이 실제로 서버에서 내려받아지는 것즉,네트워크를 통해 이미지 파일을 요청하고브라우저가 성공적으로 응답받아 표시하는 과정렌더링(Rendering)페이지 구조상 태그 자체가 DOM에 표시되는 것즉,컴포넌트가 mount되고HTML 구조가 브라우저에 그려지는 과정 ❌ 하지만:Swiper 구조가 꼬..

깜빡거리는 막대기를 텍스트 커서 또는 캐럿 (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) => ( ..

Next.js 15 App Router에서 page.tsx의 타입을 자동 추론하는 과정에서 Promise와 충돌하는 타입 오류 src>app>items>[id]>page.tsx[수정전]import { cartItemList } from "@/components/cart/data/cartItemList";import ItemDetail from "@/components/items/ItemDetail";export function generateStaticParams() { return cartItemList.map((item) => ({ id: item.id, }));}// ✅ 타입을 인라인으로 선언 (interface 쓰지 마세요)export default function Page({ param..

아래 코드에서 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 ..

24년 12월 1일 이후로 kakao map api 사용방법이 바뀌어서 비지니스앱 or 테스트 앱으로만 가능하다. 전 처럼 누구나 JavaScript 키만 있으면 지도 API 사용 가능했던 정책에서비지니스가 아닌이상 테스트앱을 생성해야하는 정책으로 바뀌었다. 카카오맵 API활성화 및쿼터 상향2024년 12월 1일부터 신규로 카카오맵 API 를 사용하기 위해서는 사용 권한을 활성화해야 합니다.또한 기본 제공 쿼터의 초과 사용이 필요할 경우,별도의 제휴 계약 협의를 진행하지 않고 직접 유료 사용 설정을 할 수 있도록 제공합니다.관련 내용은 아래 공지를 참고 부탁드립니다.[[공지] 카카오맵 API 활성화 설정, 추가 쿼터 제공 기능 적용 안내] 1. kakao developers 앱 생성 2. 개인 개..

1. 부모div > 자식div 로 만든 버튼 전체 위치 조정부모에 position: relative; 이렇게 해서 위치의 기준을 이 속성을 준 태그로 한다. 자식 divposition: absolute; 부모의 세로 중심선에, 자기 자신을 딱 가운데로 맞추는 공식top: calc(50% - 25px) => calc(50% - 요소 높이의 절반) 2. div안 버튼 표시 위치 조정버튼을 ' > ' 표시가 처음엔 한쪽에 쏠려있었다 display: flex; align-items: center; justify-content: center; 이 세줄은 공식이다.

import "./App.css";import React, { useEffect, useState } from "react";// useEffect - 컴포넌트 랜더링 될 때 특정시점을 캐치 해서 실행할 수 있도록 함./* mount ( = 리액트 컴포넌트가 그려질때, 렌더될때 ) unmount ( = 리액트 컴포넌트가 사라질때, 지워질때 ) update ( = 특정 값이 변해서 리액트 컴포넌트가 다시 그려질때 )*/function App() { const [count, setCount] = useState(0); // mount => []빈배열은 App()이 로딩될때 초기에 딱, 한번만! 호출됨. useEffect(() => console.log("hello"), []); // unmoun..

네비게이션, 메인, 풋터 레이아웃이 너무 안잡혀서 레퍼런스를 보다가 지난 과제에서는 이 고민을 안했던걸 기억하고 서로 비교하면서 보던중, App.tsx에서 차이를 발견했다.  과제에서는 틀을 만들어서 줬고 난 거기에 살을 붙여서 진행 했기 때문에 풋터 위치 조정에 고민을 안했는데 레이아웃을 App.tsx에서 미리 배치해서 줬기 때문에 고민했던 기억이 없었다.정확한 차이를 우리 쳇지피티 아리에게 물어봤다.    아리답변네, 맞습니다. 첫 번째 코드처럼 전체 레이아웃을 구성하는 방식이 맞습니다. 이 방식은 레이아웃을 하나의 컴포넌트로 묶어서 전역적으로 관리할 수 있도록 합니다. 이렇게 하면, CSS에서 레이아웃을 직접 배치하지 않더라도, 첫 번째 코드처럼 네비게이션 바, 메인 콘텐츠, 풋터를 전체 레이아웃으..