프로젝트

1. Kakao Developers 앱 생성 및 키 발급 https://developers.kakao.com/ 접속 후 앱 생성 생성한 앱에서 JavaScript 키 확인 .env.local 파일에 키 저장하기 2. Kakao SDK 스크립트 로드 /app/servi

컴포넌트 개요 API를 통해 전체 데이터 개수를 받아오고, 페이지 수를 계산하여 현재 페이지 기반의 페이지네이션 버튼 렌더링 최대 5개의 페이지 버튼이 한 번에 보이도록 구성하기 1. 필요한 Props 타입 정의 pageSize : 한 페이지에 보여줄 항목 개수 cu

왜 환경 변수로 관리해야 할까? API 키는 절대 코드에 직접 작성하면 안됨!! GitHub에 푸시되면 외부에 노출될 수 있어 보안에 심각한 문제 발생 .env 파일을 사용하면 민감한 정보(API 키, DB 주소 등(를 소스 코드와 분리할 수 있어 보안성과 유지보수성

컴포넌트 개요 LocalStorage를 활용하면 로그인 시스템 없이도 사용자 고유의 식별자를 클라이언트에 저장하고, 이를 바탕으로 간단한 계정 시스템처럼 사용 가능 목표 사용자가 게시글을 작성할 때 고유 ID 생성 이 ID를 LocalStorage에 저장해서 추후 계

문제 : 초기 로딩이 느림 처음 ListPage에 진입할 때, 사용자 카드 목록이 늦게 표시되는 문제가 있음 전체 데이터를 클라이언트에서 fetch만 하던 기존 방식에서는 초기 로딩이 느림 SEO도 고려하지 못함 해결 : SSR + CSR 하이브리드 1. 초기 1페이

컴포넌트 개요 서버 컴포넌트(ListPage)에서 SSR로 초기 데이터를 8개 받아옴 그리고 클라이언트 컴포넌트(ListClientPage)에서는 정렬 기능과 반응형을 위해 CSR로 다시 데이터를 받아오는 로직이 포함되어 있음 문제 : 스켈레톤이 두 번 뜨는 이슈

문제 : 예상보다 많은 컴포넌트들의 리렌더링 list 페이지에서 정렬 방식 변경을 위한 Dropdwon 컴포넌트를 클릭했을 때, 예상보다 많은 컴포넌트들이 리렌더링됨 Dropdown 클릭 시 Dropdown 외에도 UserCard 6개, 로고 이미지, 버튼 등 총 1

tailwind는 모바일이 우선이라 반응형을 하려면 모바일을 먼저 만들고 반응형을 해야함 Tailwind CSS는 "모바일 우선(Mobile First)" 방식을 따릅니다. 그래서 기본 스타일은 모바일용으로 작성하고, 해상도가 커질수록(sm, md, lg, …) 점진

API 요청 방식 API를 호출할 땐 요청 도구와 응답 처리 방식을 조합해서 사용 요청 도구 fetch 브라우저 내장 함수 별도 설치 불필요 작은 프로젝트나 간단한 요청에 적합 axios 외부 라이브러리 응답 데이터가 res.data에 바로 담김 인터셉터, 기본 설정

1. Axios란? Promise 기반 HTTP 클라이언트 브라우저와 Node.js에서 모두 사용 가능하며 fetch보다 직관적이고 기능이 풍부함 특징 요청/응답 인터셉터 지원 자동 JSON 변환 브라우저 호환성 우수 baseURL, timeout, headers 등

1. npm (Node Package Manager) Node.js의 패키지 관리 도구 패키지 관리 라이브러리를 설치(npm install) / 업데이트(npm update) / 삭제(npm uninstall) -> package.json의 dependencies /

SCSS 변수 방식 정의 방식 : 단순 값(box-shadow)만 저장 장점 : 간단하고 직관적, 코드가 짧음 단점 : box-shadow 이외의 속성을 묶어 쓰기는 어려움 추천 상황 : 단순히 한 줄짜리 그림자 값만 재사용할 때 Mixin 방식 정의 방식 : C

Next.js App Router일 때!! 1. TailwindCSS 설치 TailwindCSS와 관련된 패키지 설치 설치 후 tailwind.config.js와 postcss.config.js 자동 생성 2. devDepenencies 확인 설치된 버전은 다음과

문제 상황 Tailwind에서 변수를 이용해 색상을 지정하려고 했는데, 전혀 먹히지 않았다. Tailwind CSS 정적 분석 기반으로 동작 즉, 빌드 타임에 미리 정의된 클래스들만 인식하고 CSS를 생성 따라서 bg-[${color.bg}] 같이 런타임에 값이 바뀌

해시(Hash)란? 데이터를 고정된 길이의 숫자 값으로 변환하는 함수 같은 입력 → 항상 같은 출력 다른 입력 → 충돌이 최소화되도록 분산 검색, 색상 매핑, 캐싱, 해시 테이블 등에서 활용됨 예시: react -> 123456 next -> 987654 문자열 해

문제 태그마다 고유한 색상을 주고 싶을 때, 단순히 랜덤 색상을 쓰면 일관성이 없음 같은 태그인데 새로고침할 때마다 다른 색상이 나옴 어떤 페이지에선 파랑, 다른 페이지에선 분홍 -> 일관성 없음 구현하기 색상 팔레트 준비 사용할 색상 배열 정의 해시 기반 색상 선

Zustand란? React 전역 상태 관리 라이브러리 Context API보다 간단하고 직관적 Provider 없이 상태 관리 가능 Redux, Recoil처럼 컴포넌트 간 상태 공유 브라우저 메모리에서만 관리되므로 새로고침 시 초기화됨 서버와 통신하지 않음 -> 서

기본 동작 Zustand 상태는 브라우저 메모리에만 저장됨 따라서 새로고침하면 상태가 초기화됨 상태를 확인하려면 console.log나 Devtools 사용 가능 상태를 새로고침 후에도 유지하려면? zustand/middleware의 persist를 사용해 localS

문제 로컬에서는 정상 작동하던 프로젝트가 Vercel 빌드 단계에서 Module not found 에러가 발생 예시: Windows / macOS: 기본적으로 파일명 대소문자를 구분하지 않음 → 로컬에서는 정상 동작 Vercel 빌드 서버(Linux): 파일명 대소문

문제 새로고침 시 로그인 상태가 초기화됨 → Local state만 사용한 한계 인증 없이 보호 라우트에 접근 가능 세션 지속성이 짧아져, 토큰 만료(401) 시 일정 주기로 재로그인을 유도해야 함 분석 상태 영속화 필요: accessToken을 안전하게 저장해야 함

컴포넌트 개요 같은 컬럼 내 순서 이동 / 다른 컬럼으로 이동을 수정하기 버튼으로만 하는 건 UX적으로 한계가 있었음 따라서 마우스로 직관적으로 옮기는 Drag & Drop 기능이 필수 왜 Drag & Drop인가? 행동-결과의 직관성: 버튼/모달보다 훨씬 빠르게 재

0. Tailwind v3 vs v4 폰트 설정 차이 Tailwind v3 (이전 방식) 설치: tailwindcss, postcss, autoprefixer 각각 설치 필요 설정 파일: tailwind.config.js, postcss.config.js 둘 다 작성해

체크리스트 포인트 고유 ID 생성 useId()로 폼 내부에서만 유효한 id 생성 aria-labelledby, aria-describedby 연결에 활용 시맨틱 구조화 section + h2로 문서 구분 반복 영역은 ul/li 관련 입력 묶음은 fieldset + l

잘못된 접근 스크린리더는 버튼 안의 이미지를 읽기 때문에 "알림"이라고 읽음 하지만 이건 버튼 동작을 설명하는 게 아니라 이미지 설명일 뿐 → 올바르지 않음 올바른 접근 button 자체가 "알림"이라는 레이블을 가짐 → 스크린리더가 제대로 읽음 아이콘은 장식 요

설치 및 세팅 globals.css에 스타일 추가 Swiper 사용 예시 modules: 사용할 기능을 배열로 불러옴 Navigation: 좌우 화살표 버튼 Pagination: 하단 점 네비게이션 Autoplay: 자동 재생 spaceBetween: 슬라이드

Popover란? 특정 요소 근처에 가볍게 띄워지는 작은 창 사용자가 현재 보고 있는 맥락을 그대로 유지하면서, 추가적인 옵션이나 정보를 보여줄 때 적합 Dialog와 차이 Dialog(모달)의 특징 화면 중앙 고정 + 보통 어두운 Overlay를 동반함 사용자의 현재

floating-ui란? Popover/Tooltip/Dropdown 위치 제어 라이브러리 자동 위치 보정, 충돌 방지, offset, flip, shift 제공 floating-ui 사용 예시 placement: "right-start" : 기준 요소(referenc

위험 요소 1. XSS에 그대로 노출 > XSS(Cross-Site Scripting, 크로스사이트 스크립팅)란? 공격자가 웹사이트에 악성 스크립트를 주입해서, 그 스크립트를 다른 사용자의 브라우저에서 실행시키는 공격 zustand persist는 localStora

1. maxAge / expires 쿠키의 유효 기간을 설정하는 옵션 maxAge가 있으면 expires보다 우선 특징 maxAge: 초 단위 (예: 60 * 60 * 24 = 하루) → “지금부터 몇 초” expires: 특정 날짜/시간을 지정 → “언제까지” 2.

Axios 에러의 기본 구조 error.response(서버 응답 정보) error.config(실패한 요청 설정) 실패했던 원래 요청의 모든 옵션이 들어 있으며, 재요청 시 그대로 재사용됨 basicAxios 코드 사용 예시 _retry 속성 추가 error.

date-fns란? JavaScript 날짜/시간 처리 유틸리티 라이브러리 Lodash가 배열/객체 유틸을 제공하듯, date-fns는 날짜를 위한 다양한 함수를 제공 함수 하나하나가 작은 모듈로 제공되어 필요한 것만 import → 번들 최적화에 유리 40개 이상의

0. 사전 준비 카카오 developers카카오 개발자 콘솔에서 앱 등록 → Kakao Login 활성화 → Redirect URI 등록 예시 Redirect URI: http://localhost:3000/oauth/kakao (정확히 일치해야 함) 1. “카카오로

0. 개발자 키 받기 & 환경변수 설정 카카오 개발자 센터 내 애플리케이션 → 새 앱 만들기 플랫폼 등록에서 “웹” 추가 (도메인: 개발 중이면 http://localhost:3000) 앱 키에서 JavaScript 키 복사 루트에 .env.local 생성: N

TanStack Query란? 서버 상태(Server State)를 효율적으로 관리하기 위한 라이브러리 기존의 React Query가 발전해 이제는 React/Vue/Svelte/Solid 등 멀티 프레임워크를 지원하는 통합 패키지 useQuery - 기본 데이터 패

문제 모든 요청마다 서버에서 새로 데이터를 fetch해 초기 로딩이 느림 자주 변하지 않는 상세 페이지도 매번 API 호출로 불필요한 낭비 발생 SSR만 사용할 경우, 요청 때마다 서버 부하 증가 CSR만 사용할 경우, 빈 화면이 잠깐 보이고 SEO에 불리함 해결 1.

useInfiniteQuery - 무한 스크롤/페이지네이션을 위한 데이터 패칭 훅 다음 페이지를 이어 붙이며 데이터를 가져오기 위한 훅 커서 기반 API(cursorId)와 함께 사용할 때 가장 깔끔함 주요 특징 pageParam: 다음 요청에 전달될 커서/페이지 ge

문제 useSearchParams()는 클라이언트 훅이라 SSR 단계에서는 실행되지 않음 서버는 브라우저의 URL을 직접 알 수 없기 때문에 검색어(query)를 모르면 API 요청 자체를 할 수 없음 따라서 검색 결과를 SSR로 미리 렌더링할 수 없고, 초기 진입 시

문제 프로젝트에서 SVG 파일을 import할 때 갑자기 발생하는 에러 원인 분명 잘 되던 코드인데, 어느 날 갑자기???? 원인은 : TypeScript가 .svg 파일의 타입을 모르기 때문에 TypeScript는 JS 자산(.js, .ts) 만 타입 정보를 알고