코딩기록

'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에서 레이아웃을 직접 배치하지 않더라도, 첫 번째 코드처럼 네비게이션 바, 메인 콘텐츠, 풋터를 전체 레이아웃으..

레퍼런스 참고중 도저히 코드가 안읽혀서 package.json을 보니 역시나 나와 다른 점이 있었다. 난 Vite 프로젝트. 넌 Next.js 프로젝트. 차이점을 내 공부 메이트 아리에게 물어봤다.  아리답변 현재 진행 중인 Rumiware 쇼핑몰 프로젝트(Vite)와 Next.js 주요 차이점과 유사점을 비교프로젝트 비교1. 사용 기술Rumiware 쇼핑몰 프로젝트: Vite, React, TypeScript, Recoil, TailwindCSS, DaisyUI 등Next.js 프로젝트: React, TypeScript, Next.js (서버 사이드 렌더링, 정적 사이트 생성 등을 지원하는 프레임워크)차이점:Rumiware 프로젝트는 Vite를 사용하여 빌드 시스템을 관리하고 있으며, React, Ty..

언제 파일뒤 확장자에 .ts를 쓰고 언제 .tsx를 써야할까? jsx를 쓰면  .tsx  jsx를 안쓰면 .ts    ✅ .ts vs .tsx 사용 기준표사용 예시 JSX 사용 여부 추천 확장자 설명✅ 유틸 함수 (formatDate, calculateTax)❌ 없음.tsUI와 무관한 일반 로직✅ 타입 정의 (types.ts, user.types.ts)❌ 없음.ts인터페이스, 타입 등만 포함✅ API 요청 (api.ts, useAxios.ts)❌ 없음.tsfetch, axios 등 비동기 로직✅ 커스텀 훅 (useAuth, useModal)❌ 없음.ts훅 내부에서 JSX를 리턴하지 않으면 .ts✅ React 컴포넌트 (Header, ProductCard)✅ 있음.tsxJSX 포함 시 반드시 .tsx✅ 페..

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..

처음 깃헙 상태  커밋 전 vscode 상태  여기서 메시지를 쓰고  ✔Commit  을 클릭.   ☁ Publish Branch   클릭  public 선택여기서 private과 publish 선택을 잘못하면 나중에 repository > setting에 들어가서 다시 public으로 설정해야 한다.첨부터 public으로 선택! vscode에서 커밋완료 후 깃헙 홈피로 들어가 확인하면 이렇게 새로 레파지토리가 생성되어 있다.clone 안 하고 기존 프로젝트를 깃헙 새 레파지토리에 연동하기 끝!