Je개발 일지

app 디렉토리에서, 중첩 폴더는 기본적으로 URL 경로와 매핑된다. 하지만, 경로 그룹(Route Group) 을 활용하면, URL 경로와 매핑하는 것을 피할 수 있다. 이런 방법은 경로 Segement 를 구성하고 프로젝트 파일을 URL 경로 구조에는 영향을 주지 않은 채 로직들을 묶을 수 있도록 도와준다. 1. 규칙 폴더의 이름을 괄호로 묶으면 경로 그룹을 만들 수 있다. (폴더이름) 2. 예시 2-1) URL 에 영향을 주지 않고 경로(Route)구성하기 URL 에 영향을 주지 않고 경로를 구성하려면, 그룹을 만들어야 한다. 괄호 안의 폴더는 URL 에서 생략된다. (marketing), (shop) 폴더가 URL 계층 구조에서 공유되고 있지만, 각 그룹에 대해 다른 레이아웃을 구성할 수도 있다...

1. redirect() 함수 **redirect** 함수는 사용자를 다른 URL 로 리다이렉션 할 수 있게 한다. 리다이렉션은 **Server Components**, **Route Handlers**, **Server Actions** 에서 호출할 수 있다 **redirect** 는 일반적으로 mutation 또는 이벤트 후에 사용된다. 예를 들어서 게시물을 생성하는 경우, 다음과 같은 코드로 만들 수 있다. 'use server' import { redirect } from 'next/navigation' import { revalidatePath } from 'next/cache' export async function createPost(id: string) { try { // 데이터베이스 호출..

error.js 파일 규칙을 사용하면 중첩된 경로에서 예상치 못한 런타임 오류를 알맞게 처리할 수 있다. React 의 를 자동 생성해 해당 경로와 중첩된 자식을 감싼다. 파일 시스템 계층 구조를 사용해서 특정 Segement 에 맞는 맞춤형 에러 UI 를 만들 수 있다. 영향을 받은 Segement 를 격리하면서 나머지 애플리케이션은 기능적으로 유지할 수 있다. 전체 페이지를 다시 로드하지 않고도 오류에서 복구를 시도할 수 있는 기능을 추가할 수 있다. Error 관련 UI 를 만드는 방법은 Segement 내부에 error.js 파일을 추가하고 React 컴포넌트를 exporting 하는 것이다. 'use client' // Error components must be Client Components..

특수 파일인 loading.js 는 React Suspense 와 함께 의미 있는 로딩 UI 를 생성하는데 동무을 준다. 이 규칙으로 루트 Segment 의 컨텐츠가 로드되는 동안, 서버에서 즉시 로딩 상태를 표시할 수 있다. 렌더링이 완성되면 새로운 컨텐츠로 자동 교체된다. 1. 즉각적인 Loading 상태(Instant Loading States) 즉각적인 Loading 상태는 경로를 이동했을 때 즉각적으로 보이는 fallback(* 번역하면 "대체"지만, React Suspense 에서 fallback prop 의미를 살리고자 fallback 을 그대로 사용함) UI 다. 스켈레톤이나 스피너와 같은 로딩 표시기를 미리 렌더링하거나, 후에 보여질 커버 사진, 제목 등의 작은 부분을 표시할 수도 있다...

1. 컴포넌트 는 태그를 확장해서 경로 간의 prefetching(사전 로드), 클라이언트 쪽 네비게이션을 제공한다. Next.js 의 경로 간 이동에 권장하고 또 주된 방법이다. 컴포넌트를 사용하기 위해서는 `next/link` 에서 import 해오고, 컴포넌트에 href prop 을 전달한다. import Link from 'next/link' export default function Page() { return Dashboard } 1-1) Examples 1-1-1) 동적 Segement 로 Link 달기 동적 Segement 에 링크를 설정할 경우, 템플릿 리터럴을 사용할 수 있다. import Link from 'next/link' export default function PostList..

layout.js, page.js, template.js. 이 세 개의 특수 파일은 경로에서 UI 를 만드는데 사용된다. 이 페이지에서는 이 특수 파일을 어떻게 사용할 수 있는지에 대해 설명한다. 1. Pages page 는 해당 경로의 하나뿐인 UI 다. page.js 파일을 통해서 컴포넌트를 export 해 페이지를 정의할 수 있다. 예 를 들어서 index 페이지를 만들고 싶다면, app 디렉토리 안에 page.js 파일을 넣으면 된다. (* 그 해당 경로의 고유 UI 를 index.html 이 아닌 page.js 로 정의하면 된다는 것 같다) // `app/page.tsx` is the UI for the `/` URL export default function Page() { return Hel..

1. 경로 만들기 Next.js 는 파일 시스템 기반이다. 따라서 경로를 정의하는데 폴더를 사용한다. 각각의 폴더는 경로의 한 부분(Route Segment) 를 가리키고 이는 URL 의 Segement 와 매핑된다. 중첩된 경로를 사용하기 위해서는 중첩 폴더 구조를 사용하면 된다. 특수 파일 중 하나인 page.js 는 해당 경로에 공개되는 UI 다. 위의 예시를 들어보자면 `/dashboard/analytics` URL 경로는 page.ts 파일이 없으므로 접근이 불가능하다. 보통 이런 폴더는 컴포넌트, 스타일, 이미지 등을 넣기 위한 것으로 사용된다 2. UI 만들기 각 경로별 segement 를 위한 UI 를 만들기 위해 특수 파일을 활용하는 규칙이 존재한다. 예를 들어서 페이지를 만들고자 할 때..

1. 용어 Tree 계층구조를 시각화하는 컨벤션이다. 예를 들면 부모와 자식간의 컴포넌트, 폴더 구조 등이 트리 구조로 돼있다. Subtree 트리의 한 부분이다. Root 트리가 새로 시작하여 마지막 Leaf 들로 끝난다. Root Tree, 혹은 Subtree 의 시작이 되는 첫 번째 노드다. Leaf Subtree 에서 더이상 자녀가 존재하지 않은 Subtree 의 노드들이다. 예를 들면 URL 에서 마지막 Segement 에 해당하는 것들이 있다. URL Segement URL 의 한 부분으로 Slash 로 구분되는 것들이다. URL Path URL 의 한 부분으로 Domain 뒤에 오는 모든 것을 의미한다. 2. app Router Next.js 13버전에서 React 서버 컴포넌트 기반의 새로..

2주년이 된지 꽤 지났지만, 간만에 설문조사를 진행했다. 이번에는 작년 한 해 동안 L 프로젝트를 만들며 생고생을 했던 팀장님과 사수에게 많은 질문을 쏟아 부으며 내가 지금 잘하고 있는 점과 개선해야할 점에 대해 알아보는 시간을 가졌다. 1. 팀장 팀장님의 경우, 프로젝트 전체를 관리하는 분이셨기에 이번 프로젝트에 있어서 나는 얼마나 이 프로젝트에 기여했는지를 여쭤보고 싶었다. 두 번째로는, 내가 기획과 디자인을 많이 했고 이것을 컨펌해주신 분이 팀장님이었기에 같이 일하면서 어떤 부분이 나에게는 강점이고, 단점인지를 여쭤봤다. 또, 이제 1년이 지났으니 1년 전과 비교했을 때 지금의 나는 어떤 위치에 있고, 팀 내 생활에 있어서 나는 얼마나 잘하고 있는지 평가를 받고 싶었다. (1) L 프로젝트에서 크게..

1. 무엇을 최적화해야 하는가? 프론트엔드에서 가장 비용이 많이 드는 것은 DOM 에 화면을 그리는 Layout(혹은 Reflow), Paint(Repaint) 하는 과정이다. 물론, 이미지 압축, 네트워크 요청 최적화 등의 작업들도 존재하지만 이 장에서는 “React 시작하기” 에 이어 가장 기초적인 React 라이브러리의 최적화 방안에 대해서 알아보고자 한다. 흔히 프론트엔드에서 최적화한다고 말하면 이 화면을 그리는 작업을 최소화하는 것을 뜻한다. 그렇다면 React 에서는 어떤 방식으로 DOM 에 화면을 그리는 지를 알아야 한다. 1-1) React 의 Trigger, Render, Commit React 에서 클래스형 컴포넌트가 주류였던 시기에는 Vue 와 마찬가지로 “Life Cycle” 이 중..