pnpm add -D tailwindcss @tailwindcss/postcss
## 파일 에 PostCSS 플러그인을 추가합니다
> postcss.config.mjs.
export default {
plugins: {
'@tailwindcss/postcss': {},
},
}
## 글로벌 CSS 파일에 Tailwind를 가져옵니다. > @import 'tailwindcss';
- 루트 레이아웃에 CSS 파일을 가져옵니다.
import './globals.css' export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) }
## 이제 애플리케이션에서 Tailwind의 유틸리티 클래스를 사용할 수 있습니다. > export default function Page() { return (
main className="flex min-h-screen flex-col
items-center justify-between p-24">
h1 className="text-4xl font-bold">Welcome to Next.
js!
/main>
)
}
전역 스타일은 디렉터리 내의 모든 레이아웃, 페이지 또는 컴포넌트로 가져올 수 있습니다
app. 하지만 Next.js는 Suspense와 통합하기 위해 React의 내장 스타일시트 지원을 사용하기 때문에,
현재 경로 간 이동 시 충돌을 일으킬 수 있는 스타일시트가 제거되지 않습니다.
Tailwind의 기본 스타일처럼 진정한 전역 CSS에는 전역 스타일을, 컴포넌트 스타일에는 Tailwind CSS를 ,
그리고 필요에 따라 사용자 지정 범위 CSS에는
CSS Modules를 사용하는 것이 좋습니다.
- 외부 패키지에서 게시된 스타일시트는 공동 배치된 구성 요소를 포함하여 디렉토리의 어느 곳으로나 가져올 수 있습니다
import 'bootstrap/dist/css/bootstrap.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
html lang="en">
body className="container">{children}
) }
Interleaving은 **Server Component (SC)**와 **Client Component (CC)**를 혼합하여 성능과 상호작용성을 모두 확보하는 핵심 전략입니다. Server Component (SC): 서버에서 데이터 패칭 및 초기 렌더링을 담당하여 정적 HTML을 생성합니다. 역할: 초기 로딩 속도 최적화.
Client Component (CC): 브라우저에서 **상호작용성(useState, onClick 등)**을 담당하며, 하이드레이션이 일어나는 부분입니다. 작동 방식: SC가 만든 정적 HTML을 CC의 children 자리에 삽입하고, CC만 클라이언트에서 JavaScript로 연결됩니다.
전략: Client Component인 Context Provider를 **Server Component인 Root Layout (layout.tsx)**이 감싸도록 구성합니다. 결과: Provider가 앱의 최상단에서 렌더링되므로, 하위에 있는 모든 Client Component와 Server Component가 전역 Context를 공유할 수 있게 됩니다.
Context의 상태(State)에 따라 전역적인 테마를 변경할 때, CSS **속성 선택자 (Attribute Selector)**를 사용합니다.
원리: Context Provider에서 태그에 data-theme="light"나 data-theme="dark"와 같은 속성을 설정합니다.
활용: CSS에서 html[data-theme='dark']와 같이 속성값을 직접 선택하여 스타일을 지정합니다.
이는 클래스 충돌 없이 전역 테마 관리를 용이하게 합니다.
-
1-4. Client-side transitions (클라이언트 측 전환)
-
일반적으로 서버 렌더링 페이지로 이동하면 전체 페이지가 로드
-
→ 이로 인해 state가 삭제되고, 스크롤 위치가 재설정되며, 상호작용이 차단
-
Next.js의 컴포넌트를 사용하면 클라이언트 측 전환을 통해 이를 방지
-
페이지를 다시 로딩하는 대신, 다음과 같은 방법으로 콘텐츠를 동적으로 업데이트
-
공유 레이아웃과 UI를 유지
-
현재 페이지를 미리 가져오기(prefetching) → 로딩 상태 또는 사용 가능한 경우 새 페이지로 빠르게 전환
-
핵심 포인트
-
클라이언트 측 전환은 서버에서 렌더링된 앱을 클라이언트에서 렌더링된 앱처럼 느껴지게 하는 요소
-
프리페칭 + 스트리밍과 함께 사용하면 동적 경로에서도 빠른 전환이 가능
- route(라우트): 경로. routing(라우팅): 경로를 찾아가는 과정.
- path: URL 경로 문자열.
- directory / folder: 라우팅 맥락에서 폴더는 URL 세그먼트에 대응.
- segment: 라우팅과 매핑되는 폴더(경로의 한 구간).
- git checkout -b <브랜치이름>
- git switch -c <브랜치이름>
- git branch <브랜치이름>
-
브랜치 이동
-
git switch feature/login
-
브랜치 생성 + 이동
-
git switch -c feature/signup
-
checkout은 다기능이지만 복잡하고 실수 위험이 있음
-
switch는 브랜치 전용 명령어라서 더 직관적이고 안전함
-
최신 Git 환경에서는 switch 사용을 권장
-
- 컴포넌트 계층 (Component Hierarchy)
-
Next.js는 특정 파일의 컴포넌트를 정해진 계층 구조로 렌더링합니다:
-
layout.js → 공통 레이아웃
-
template.js → 재렌더링 레이아웃
-
error.js → React 에러 경계
-
loading.js → React suspense 경계 (로딩 UI)
-
not-found.js → 404 페이지
-
page.js 또는 중첩된 layout.js → 실제 페이지 콘텐츠
-
중첩 라우트: 자식 라우트의 컴포넌트는 부모 레이아웃 안에 재귀적으로 렌더링됨.
- app 디렉토리 안에서 폴더 구조 = 라우트 구조
- 공개 라우트 조건: page.js 또는 route.js 존재 시만 접근 가능
- 장점: route segment 안에 관련 파일을 안전하게 배치 가능 (라우트로 자동 노출되지 않음)
- 선택 사항: app 밖에 프로젝트 파일을 둬도 됨
-
_folderName으로 폴더 이름 시작 → 라우팅 제외
-
용도:UI 로직과 라우팅 로직 분리
-
내부 파일 일관성 유지
-
코드 에디터에서 정리/그룹화
-
미래 Next.js 파일 규칙 충돌 방지
-
참고:앱 밖에서도 _ 접두사로 "비공개" 표시 가능
-
URL 세그먼트 시작 시 %5F 사용 가능 (%5FfolderName)
- 강의에서는 프로젝트를 자동으로 생성해서 사용
- 다음은 프로젝트를 자동 생성할 때 자동으로 생성되는 항목이다.
- LCP : 뷰포트 내에서 가장 큰 페이지 요소를 표시하는 데 걸리는 시간
- FID : 사용자가 웹페이지와 상호작용을 시도하는 첫 번째 순간부터 웹페이지가 응답하는 시간.
- CLS : 방문자에게 콘텐츠가 얼마나 불안정한 지 측정한 값이다. 페이지에서 갑자기 발생하는 레이아웃의 변경이 얼마나 일어나는지를 측정한다.
- alias 문자를 선택하면 tsconfig.js 에 자동으로 저장 된다.
- pnpm의 특징 중에 하드 링크를 사용해서 디스크 공간을 효율적으로 사용할 수 있다고 한다. 탐색기에서 npm과 pnpm 프로젝트 node_module의 용량을 확인
- 우리가 "파일"이라고 부르는 것은 두 부분으로 나뉘어 있다. 1.Directory Enty : 파일 이름과 해당 inode 번호를 매길 정보가 있는 특수한 파일.
- inode : 파일 또는 디렉토리에 대한 모든 메타데이터를 저장하는 구조체 (권한,소유자,크기,데이터 블록,위치 등)