나는 궁금한 걸 참을 수 없어...ㅠ
🧩 Next.js 의 실행 명령어와 역할
Next.js 로 프로젝트를 셋업하고, 이제 작업을 시작하려고 yarn dev 를 기계처럼 입력하는데, 문득 yarn build 와 yarn start 와 yarn dev 의 차이가 궁금해졌다.
1. yarn dev (개발 환경)
yarn dev- 개발 중에 사용
- 변경사항은 저장을 하면 자동으로 반영됨
- 빠르게 테스트하고 수정할 수 있음.
2. yarn build (프로덕션 빌드)
yarn build- 애플리케이션을 배포하기 전에 최적화된 정적 및 서버 파일을 생성
Typescript오류 및Next.js설정 오류 체크 포함- 모든 페이지를 빌드하고, 정적 페이지와 동적 페이지 구분
- 빌드 후 실행을 위해 별도로
yarn start가 필요
3. yarn start (프로덕션 서버 실행)
yarn startyarn build이후, 프로덕션 환경에서 Next.js 어플리케이션을 실행- 핫 리로딩이 없음 (실시간 반영 x)
- 빌드된 최적화된 애플리케이션을 실행
- 빌드된 앱을 실행하고, 실제 서비스 환경에서 테스트할 때 (배포된 환경)
🧩 globals.css 파일의 기본 구성은 어떻게 되어 있는 걸까?
// Tailwind CSS 의 핵심 스타일 계층을 로드하는 역할
@tailwind base; // 기본 CSS 스타일 (리셋 스타일 포함)
@tailwind components; // 사용자 정의 클래스를 만들어 컴포넌트 스타일 정의, 반복적으로 사용할 스타일 정의
@tailwind utilities; // 유틸리티 클래스 (텍스트 크기, 색상, 마진 등)
// CSS 변수 설정
// 커스텀 프로퍼티를 전역적으로 설정하는 역할
:root {
--background: #ffffff;
--foreground: #171717;
}
// 미디어 쿼리를 사용하여 다크 모드 스타일을 설정하는 코드
// 사용자가 다크 모드를 활성화했을 경우에만 실행되는 스타일
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
// body 스타일
body {
color: var(--foreground); // :root 에서 설정한 값
background: var(--background); // 배경도 :root 에서 설정한 값
font-family: Arial, Helvetica, sans-serif; // 기본 폰트 설정
}
// Tailwind 의 유틸리티 계층에 사용자 정의 클래스를 추가하는 역할
@layer utilities {
.text-balance { // 사용자 정의 유틸리티 클래스
text-wrap: balance; // 스타일 적용 - 균형 있게 줄바꿈!
}
}🧩 layout.tsx 파일의 기본 구성은 어떻게 되어 있는 걸까?
layout.tsx 파일은 Next.js 의 App Router 에서 전역 레이아웃을 정의하는 파일로, 모든 페이지에 공통적으로 적용된다.
// 모듈 및 스타일 가져오기
// 메타데이터 타입을 가져오는 코드
// 메타데이터 객체의 타입을 지정하는 데 사용됨
// 메타데이터 타입을 적용하면, title, description 등을 자동 완성으로 추천받을 수 있음
import type { Metadata } from "next";
// 로컬에 저장된 폰트를 직접 프로젝트에서 사용할 수 있도록 설정함
import localFont from "next/font/local";
// 전역 스타일링 파일 불러오기
import "./globals.css";
// 로컬 폰트 설정
// geistSans 폰트 불러옴
const geistSans = localFont({
src: "./fonts/GeistVF.woff", // 폰트 파일의 경로 지정
variable: "--font-geist-sans", // CSS 에서 사용할 변수명 지정
weight: "100 900", // 폰트의 가중치 범위 지정 (100-900)
});
const geistMono = localFont({
src: "./fonts/GeistMonoVF.woff",
variable: "--font-geist-mono",
weight: "100 900",
});
// 메타데이터 설정
// SEO 및 페이지 정보에 사용됨
export const metadata: Metadata = {
title: "Create Next App", // 웹사이트의 기본 제목 (브라우저 탭에 표시됨)
description: "Generated by create next app", // 검색 엔진이나 공유 링크에서 보여줄 설명
};
// RootLayout 컴포넌트 정의
// RootLayout은 Next.js의 레이아웃 컴포넌트로, 모든 페이지에 공통 적용됨
export default function RootLayout({
children, // 레이아웃 내부에 렌더링될 페이지 콘텐츠
}: Readonly<{ // children 이 변경되지 않도록 설정 (읽기 전용)
children: React.ReactNode; // React 에서 JSX 를 포함한 모든 요소를 나타내는 타입
}>) {
// html 구조 정의
return (
<html lang="en"> // 문서의 언어는 영어로 설정
<body
// classname 을 사용하여 로컬 폰트 변수를 적용
// antialiased = 부드러운 폰트 렌더링을 적용하는 유틸리티 클래스
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children} // 페이지의 컨텐츠를 레이아웃 내부에 렌더링 (사용자가 요청하는 모든 페이지)
</body>
</html>
);
}React 도 해봤고 Tailwind 도 쓸 줄 아는데 전부 외계어 같아요,,,
하지만 빨리 익숙해져야겠다. 최대한 많은 기능을 빨리 써서 다 만들어보고 싶어,,,
:D