IT/프로그램

Next.js 완벽 가이드: 개발 환경부터 실전 활용까지 자기 공부

higold 2024. 11. 12. 06:20

Next.js 완벽 가이드: 개발 환경부터 실전 활용까지

1. 개발 환경 세팅

Node.js 설치하기

  1. Google에서 'Node.js' 검색 후 공식 사이트 방문
  2. LTS(Long Term Support) 버전 다운로드
    • 버전 18 이상 권장 (16 이하는 호환성 문제 발생 가능)
  3. 운영체제에 맞는 설치 파일 실행
    • Mac, Windows 모두 동일한 개발 환경 구성 가능

VS Code 설치하기

  1. Google에서 'VS Code' 검색
  2. 공식 사이트에서 다운로드
  3. 설치 완료 후 실행

작업 폴더 생성 및 프로젝트 시작

  1. 바탕화면이나 원하는 위치에 작업 폴더 생성
  2. VS Code에서 File → Open Folder로 작업 폴더 열기
  3. 터미널 열기 (상단 메뉴 Terminal → New Terminal)
  4. Next.js 프로젝트 생성 명령어 입력

Next.js 프로젝트 생성 옵션

  1. 프로젝트 이름 설정
    • 원하는 이름으로 자유롭게 지정
  2. TypeScript 사용 여부
    • 방향키로 선택 후 Enter
  3. ESLint 설정
    • 코드 품질 관리 도구 (선택사항)
  4. src 디렉토리 사용 여부
  5. App Router 사용 여부
    • 최신 기능 사용을 위해 권장
  6. import alias 설정

2. 프로젝트 파일 구조 이해하기

주요 폴더 및 파일 설명

  1. app 폴더

    • 프로젝트의 핵심 폴더
    • 페이지와 라우팅 관련 파일들 포함
  2. page.js

    • 메인 페이지 파일
    • 실제 화면에 보여질 컨텐츠 작성
  3. layout.js

    • 페이지의 공통 레이아웃
    • 모든 페이지를 감싸는 컴포넌트
    • 헤더, 푸터 등 공통 UI 포함
  4. node_modules

    • 프로젝트 라이브러리 보관
    • git에 포함되지 않음
  5. public 폴더

    • 이미지, 폰트 등 정적 파일 저장
    • 외부에서 직접 접근 가능
  6. package.json

    • 프로젝트 설정 파일
    • 라이브러리 버전 정보
    • 실행 명령어 등 포함

3. Next.js 기본 문법

JSX 문법 특징

  1. 컴포넌트 기본 구조

    export default function MainPage() {
    return (
     <div>
       내용
     </div>
    )
    }
  2. 한 컴포넌트에서 여러 요소 반환 시 주의사항

    // 잘못된 예시
    return (
    <div>첫 번째</div>
    <div>두 번째</div>  // 에러 발생
    )
    

// 올바른 예시
return (


첫 번째

두 번째


)


3. class 대신 className 사용
```jsx
// 잘못된 예시
<div class="container">  // 에러 발생

// 올바른 예시
<div className="container">

데이터 바인딩

  1. 변수 출력하기

    let name = '홍길동';
    return (
    <div>{name}</div>
    )
  2. HTML 속성에 변수 바인딩

    let img = 'photo.jpg';
    return (
    <img src={'/images/' + img} />
    )
  3. style 바인딩

    // 인라인 스타일 적용
    <div style={{color: 'red', fontSize: '20px'}}>

4. 라우팅 시스템

기본 라우팅

  1. 폴더 구조 기반 라우팅

    • app/list/page.js/list URL
    • app/cart/page.js/cart URL
  2. 페이지 생성하기

    // app/list/page.js
    export default function ListPage() {
    return (
     <div>상품 목록 페이지</div>
    )
    }

레이아웃 시스템

  1. layout.js 기본 구조

    export default function Layout({ children }) {
    return (
     <div>
       <nav>네비게이션 바</nav>
       {children}
     </div>
    )
    }
  2. 레이아웃 중첩

    • 상위 폴더의 layout.js가 하위 페이지에 자동 적용
    • 여러 레이아웃을 중첩해서 사용 가능

5. 컴포넌트 시스템

서버 컴포넌트 (기본값)

  1. 특징

    • 자바스크립트 이벤트 핸들러 사용 불가
    • 빠른 로딩 속도
    • SEO 최적화에 유리
  2. 기본 구조

    export default function ServerComponent() {
    return (
     <div>
       <h1>서버 컴포넌트입니다</h1>
     </div>
    )
    }

클라이언트 컴포넌트

  1. 선언 방법
    'use client'
    

export default function ClientComponent() {
const handleClick = () => {
alert('클릭됨')
}

return (

)
}


2. 특징
   - 인터랙티브한 기능 구현 가능
   - React Hooks 사용 가능
   - 하이드레이션 과정 필요
   - 상대적으로 느린 로딩 속도

## 6. 파일 분리와 모듈화

### export/import 시스템
1. default export
```jsx
// data.js
export default ['데이터1', '데이터2']

// page.js
import data from './data.js'
  1. named export
    // data.js
    export const name = '홍길동'
    export const age = 20
    

// page.js
import { name, age } from './data.js'


### 경로 지정 방법
1. 같은 폴더 내 파일
```jsx
import { name } from './data.js'
  1. 상위 폴더 파일

    import { name } from '../data.js'
  2. 하위 폴더 파일

    import { name } from './subfolder/data.js'

7. 이미지 처리

기본 이미지 태그

<img src="/product.jpg" className="product-img" />

Next.js Image 컴포넌트

import Image from 'next/image'

<Image
  src="/product.jpg"
  width={500}
  height={300}
  alt="상품 이미지"
/>

이미지 최적화 기능

  1. 자동 이미지 최적화
  2. 레이지 로딩
  3. 레이아웃 시프트 방지
  4. 외부 이미지 사용 시 주의사항
    • width, height 필수 지정
    • 도메인 설정 필요

8. 개발 시 Best Practices

  1. 컴포넌트 설계

    • 재사용성이 높은 UI는 컴포넌트로 분리
    • 적절한 컴포넌트 크기 유지
  2. 서버/클라이언트 컴포넌트 활용

    • 기본적으로 서버 컴포넌트 사용
    • 인터랙티브 기능이 필요한 부분만 클라이언트 컴포넌트로 전환
  3. 파일 구조

    • 명확한 폴더 구조 유지
    • 관련 파일들을 함께 관리
  4. 성능 최적화

    • 이미지 최적화 기능 활용
    • 적절한 컴포넌트 분리로 렌더링 최적화

마무리

Next.js는 React 기반의 강력한 프레임워크로, 서버 사이드 렌더링과 정적 생성을 지원하며 직관적인 라우팅 시스템을 제공합니다. 이 글에서 다룬 내용을 기반으로 실제 프로젝트를 진행하면서 더 깊이 있는 학습을 진행하시기 바랍니다.

다음 단계로는 다음과 같은 내용을 학습하면 좋습니다:

  • 데이터 페칭
  • API 라우트 생성
  • 상태 관리
  • 배포 방법
반응형