[Nextjs] 4장 폴더 구조 이해하기

🤓 1. 폴더 구조Next.js는 React를 기반으로 한 프레임워크로, 파일 기반 라우팅, 서버 사이드 렌더링, 정적 사이트 생성 등 다양한 기능을 제공하며, 여기에 TypeScript(TSX)를 더하면 코드 안정성과 유지 보수성이 강화되어 대규모 프로젝트에 적합한 코드가 됩니다. 하지만 처음 시작할 때 어려운 부분이 바로 폴더구조이기에 이번 포스팅을 폴더 구조를 이해하는 방식에 대해 알아보겠습니다.☺️ 2. 프로젝트 폴더 구조 이해/app /page.tsx ← index 페이지 /layout.tsx ← 공통 레이아웃/components Button.tsx Header.tsx/styles globals.css Button.module.css/lib fetche..

• format_list_bulleted Front-End/NextJs
• · 2025. 9. 1.
• textsms

[Nextjs] 3장 React 기본기

✅ 1. 컴포넌트 (Component)컴포넌트는 React 앱의 기본 단위로 함수형 컴포넌트를 주로 사용합니다.function Welcome() { return Hello;}export default Welcome;✅ 2. Props (속성)Props는 컴포넌트에 전달하는 값으로, 부모 -> 자식순으로 데이터를 전달합니다.// 부모// 자식interface HelloProps { name: string; age: number;}// 자식const Hello = ({ name, age }: HelloProps) => { return ( Hello, {name}, {age} );};export default Hello;✅ 3. State (상태)state는 컴포넌트 내부에서 ..

• format_list_bulleted Front-End/NextJs
• · 2025. 8. 18.
• textsms

[Nextjs] 2장 Typescript 기본 문법

✅ 1. 프로젝트 구조next-bloging/├─ pages/│ └─ index.tsx├─ components/│ └─ UserCard.tsx├─ types/│ ├─ user.ts│ └─ userClass.ts├─ utils/│ └─ wrap.ts└─ ...✅ 2. 타입과 인터페이스 (types/user.ts)/** * 타입 선언 (Type Alias) * - 특정 타입에 이름을 붙여 재사용 가능함 * - 유니온 타입(|)아니 튜플, 객체 등 다양하게 정의 */export type ID = string | number;/** * 인터페이스 (Interface) * - 객체 구조를 정의 시 사용 * - 선택적 속성(?)을 사용 가능 * - 상속 가능 */export interface IUser {..

• format_list_bulleted Front-End/NextJs
• · 2025. 8. 14.
• textsms

[Nextjs] 1장 Next.js란?

✅ 1. NextJS란Next.js란 React 기반의 풀스택 웹 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트(SSG)를 비롯한 라우팅, API 서버 기능을 지원하는 언어입니다. Next.js의 특징으로는 다음과 같습니다특징서버사이드 렌더링(SSR): React 앱을 서버에 먼저 렌더링해 HTML을 클라이언트에 보내줌 -> 초기 로딩속도 향상 + SEO(검색엔진 최적화)에 유리정적 사이트 생성(SSG): 빌드 시 HTML을 미리 생성 -> CDN에 올려두면 빠른 페이지 로딩이 가능하이브리드 렌더링: 페이지별로 SSR,SSG,CSR(클라이언트 사이드 렌더링) 선택 가능파일 기반 라우팅: /pages 폴더에 파일을 생성 시 자동으로 라우팅 처리API Routes: pages/api 폴더 안에 ..

• format_list_bulleted Front-End/NextJs
• · 2025. 8. 12.
• textsms