본문 바로가기

전체 글485

[😺Just Meow It: 고양이의 조언] Three.js + Next.js / 3D 고양이 모델을 화면에 띄워보자 📌 프로젝트 초기 세팅 (Next.js + TypeScript + Three.js)# Next.js 프로젝트 생성npx create-next-app@latest just-meow-it --typescript# 필요한 패키지 설치cd just-meow-ityarn installyarn add @react-three/fiber @react-three/drei three`@react-three/fiber` === R3F → Three.js를 React에서 사용할 수 있도록 도와주는 라이브러리. 즉 Three.js의 React 버전`@react-three/drei` → Three.js 유틸리티 (카메라, 조명, OrbitControls 등)`three` → Three.js 라이브러리 📌 기본 코드 (고양이 .. 2025. 3. 30.
TIL : 250328금 (메뉴 검색창 만들기, 즐겨찾기 기능 구현, 프로그래머스 유연근무제) 1. oninput 이용해 메뉴 검색창 기능 만들기✅ onInput 과 onChange의 차이- `oninput`: input 태그 내부의 값이 변경 될 때마다 이벤트 발생- `onchange`: input 태그의 포커스를 벗어났을때(입력 종료 시) 이벤트 발생 어드민 페이지의 사이드 바 내부 메뉴(페이지) 수가 많아짐에 따라, 특정 메뉴를 찾는 데 시간이 오래 걸렸다.개발 및 테스트를 하면서도 불편함을 많이 느꼈는데 유저(운영자)의 불편함은 말할 수도 없겠지🤨 그래서 이번 기회에 메뉴 검색 기능을 추가해 보았다.유저가 input에 입력한 값이 변경될 때마다, 즉각적으로 검색어와 일치하는 메뉴는 보이고 그 외의 메뉴는 보이지 않도록 구현하고 싶었다. 따라서 위의 두 개 이벤트 중 `oninput`을 이.. 2025. 3. 29.
[Next.js 공식문서 정리] Routing : 09. Intercepting Routes 9. 경로 가로채기(Intercepting Routes)✅ Intercepting Routes란?Intercepting Routes는 Next.js에서 특정 경로를 가로채서 현재 페이지 위에 새로운 UI(예: 모달, 슬라이드 패널 등)를 표시하는 기능이다.➡️ 즉, 새로운 페이지로 완전히 이동하지 않고, 현재 페이지 위에 겹쳐서 특정 UI를 보여줄 수 있도록 해준다.✅ 왜 필요한가?보통 모달을 구현할 때 사용된다.예를 들어, 사용자가 /products 페이지에서 상품 목록을 보고 있다가, 특정 상품을 클릭하면 상품 상세 페이지를 모달로 표시하고 싶을 때 유용하다.기존 방식상품 목록 /products → 상품 상세 /products/1 로 이동하면 페이지가 새로고침됨Intercepting Routes 사용.. 2025. 3. 29.
[Next.js 공식문서 정리] Routing : 08. Parallel Routes 8. Parallel Routes (병렬 라우트)병렬 라우트를 사용하면 동일한 레이아웃 내에서 여러 페이지를 동시에 또는 조건부로 렌더링할 수 있다. 이 기능은 대시보드, 소셜 사이트의 피드 등 매우 동적인 앱 섹션에 유용하다.예를 들어, 대시보드에서 병렬 라우트를 사용하면 팀 페이지와 분석 페이지를 동시에 렌더링할 수 있다.🔹 Slots (슬롯)병렬 라우트는 슬롯(Slots) 이라는 개념을 사용해 구현 가능하다. 슬롯은 @폴더명 형식으로 정의된다.예를 들어, 다음과 같은 폴더 구조는 @analytics, @team이라는 두 개의 슬롯을 정의한다.app/ ├── @analytics/ │ ├── page.js ├── @team/ │ ├── page.js ├── layout.js ├── page.j.. 2025. 3. 29.
[Next.js 공식문서 정리] Routing : 07. Dynamic Routes.md 정확한 세그먼트 이름을 미리 알 수 없고 요청 시점 또는 빌드 시점에 동적으로 생성해야 할 경우, 동적 세그먼트(Dynamic Segments)를 사용한다.1. 동적 세그먼트 (Dynamic Segments)폴더 이름을 대괄호 [ ] 로 감싸면 동적 세그먼트를 만들 수 있다. (예시: [id], [slug])동적 세그먼트는 layout, page, route, generateMetadata 함수의 prop으로 전달된다.예제다음과 같은 블로그 페이지가 있다고 가정하면,app/blog/[slug]/page.js여기서 [slug] 는 블로그 게시물의 동적 세그먼트이다.export default async function Page({ params,}: { params: Promise}) { const { .. 2025. 3. 29.
[Next.js 공식문서 정리] Routing : 06. Route Groups 6. 라우트 그룹(Route Groups)app 디렉토리에서, 중첩된 경로는 일반적으로 URL 경로에 매핑된다.그러나 라우트 그룹을 사용하면 폴더를 URL 경로에 포함시키지 않고도 프로젝트를 논리적으로 구성할 수 있다.라우트 그룹은 다음과 같은 경우에 유용하다.사이트 section, 목적, 또는 팀별로 라우트 그룹화동일한 경로 세그먼트 수준에서 중첩된 레이아웃 활성화동일한 세그먼트 내에서 여러 개의 중첩 레이아웃(nested layouts) 생성 (여러 개의 루트 레이아웃 포함)공통 세그먼트 내 일부 라우트에만 특정 레이아웃 추가공통 세그먼트 내 특정 라우트에 로딩 스켈레톤 추가URL 경로에 영향을 주지 않고 라우트를 구성하는 방법라우트를 URL 경로에 영향을 주지 않으면서 구성하려면, 관련된 라우트들을.. 2025. 3. 29.
[Next.js 공식문서 정리] Routing : 05. Redirecting 5. RedirectingNext.js에서는 리디렉션을 처리하는 다양한 방법이 존재한다. 이 페이지에서는 각 방법의 사용 가능한 옵션, 사용 사례 및 많은 수의 리디렉션을 관리하는 방법에 대해 설명하고 있다.​📌 리디렉션 방법 및 사용 위치 API 목적 사용 가능한 위치 상태 코드 redirect데이터 변경(mutation or event, 예: 게시글 생성) 후 사용자 리디렉션Server Components, Server Actions, Route Handlers307(임시) 또는 303(Server Action)permanentRedirect데이터 변경(mutation or event, 예: 영구적인 URL 변경) 후 사용자 리디렉션Server Components, Server Actions,.. 2025. 3. 29.
[Next.js 공식문서 정리] Routing : 04. Loading UI and Streaming 4. 로딩 UI와 스트리밍특수 파일 loading.js를 사용하면 React Suspense를 활용하여 의미 있는 로딩 UI를 만들 수 있다. loading.js 파일을 사용하면 특정 경로(segment)의 콘텐츠가 로드되는 동안 서버에서 즉시 로딩 상태(instant loading state)를 표시된다. 렌더링이 완료되면 새 콘텐츠가 자동으로 교환된다.🚀 즉각적인 로딩 상태(Instant Loading States)즉각적인 로딩 상태란 네비게이션 시 즉각적으로 표시되는 대체 UI(fallback UI) 이다.예를 들어, 스켈레톤(Skeleton)이나 스피너(Spinner)를 미리 렌더링하거나, 표지 이미지 또는 제목과 같은 중요한 정보를 먼저 표시하는 것이다.이를 통해 사용자는 애플리케이션이 응답하.. 2025. 3. 29.
[Next.js 공식문서 정리] Routing : 03. Error Handling 3. 에러 핸들링​에러는 예상된 에러(expected errors) 와 예기치 않은 에러(uncaught exceptions) 두 가지 범주로 나눌 수 있다.​✅ 1. 예상된 에러(Expected Errors)는 반환 값으로 처리해야 한다.서버 액션(Server Actions)에서 예상된 에러를 처리할 때는 try/catch를 사용하지 않는 것이 좋다.대신, useActionState를 사용하여 에러를 관리하고 클라이언트로 반환하는 것이 바람직하다.​✅ 2. 예기치 않은 에러(uncaught exceptions)는 에러 경계(error boundaries)를 사용해야 한다.예기치 않은 에러를 처리하려면 error.tsx 및 global-error.tsx 파일을 활용하여 에러 경계(error boundar.. 2025. 3. 29.
[Next.js 공식문서 정리] Routing : 02. Linking and Navigating 2. Linking 및 NavigatingLink 컴포넌트 사용useRouter hook 사용(클라이언트 사이드)redirect 사용(서버 사이드)History API 사용1️⃣ Link 컴포넌트prefetching (사용자가 경로를 방문하기 전 백그라운드에서 경로를 미리 로드하는 방식) 및 라우트 간 client side 탐색을 제공하는 HTML a태그의 확장 버전Next.js에서 라우트 간 탐색을 진행하는 가장 기본적이고 권장되는 방식APIhref (필수, type: String or Object)scroll (기본 true, 브라우저가 뒤 및 앞으로 탐색을 처리할 때 스크롤 위치를 유지, type: Boolean)replace (기본값 false, 브라우저의 history stack에 새 url을 .. 2025. 3. 29.
[Next.js 공식문서 정리] Routing : 01. Layouts and Templates 1. Layouts and TemplatesNext.js는 파일 기반 라우팅을 사용 → 폴더와 파일을 사용한 경로 정의를 이용함❗ 레이아웃, 페이지 생성 및 연결방법페이지특정 경로에서 렌더링되는 UI인덱스 페이지(/)를 만들려면 파일 경로를 아래와 같이 지정한다. (app/page.js)레이아웃여러 페이지 간 공유되는 UI네비게이션에서 레이아웃은 상태 유지, 상호작용 유지, 렌더링x하위 페이지를 받아들일 수 있게 {children} 사용❗ 중첩 경로 만들기중첩경로: 여러 URL 세그먼트로 구성된 경로/blog/[slug]root 세그먼트 / 세그먼트 / leaf 세그먼트폴더 : URL 세그먼트에 매핑되는 route 세그먼트 정의 시 사용파일(page, layout) : 세그먼트에 표시되는 UI를 만드는 .. 2025. 3. 28.
[TIL] 250327목 (isNaN, Number.isNaN / split, splice, slice / reduce / map vs reduce) isNaN, Number.isNaN✅ `isNaN(value)`매개변수를 Number(value)로 변환 후 NaN인지 검사함.숫자로 변환할 수 없는 문자열을 넣으면 Number(value)가 NaN이 되므로 true를 반환.예제isNaN('hello'); // true (Number('hello') → NaN) isNaN(undefined); // true (Number(undefined) → NaN) isNaN('123'); // false (Number('123') → 123) isNaN({}); // true (Number({}) → NaN) isNaN(' '); // false (Number(' ') → 0)타입스크립트에서의 문제점isNaN(value: number): boolean으로 타입이 .. 2025. 3. 27.
반응형

티스토리툴바