12. 10. 33일차 TIL Next.js 시작

지난 뉴스피드 팀프로젝트 이후 욕심이 커 무리하게 되었다. 하루 평균 수면 시간이 2시간도 되지 않았던 것 같다. 그러다 저번주 수요일 문제가 생겼고 개인 컨디션 관리의 중요성을 뼈저리게 깨닫게 되었다. 그동안 많은 것들을 학습하였는데 (tailwind, zustand, 페이지네이션, 인피니티스크롤, 등) 이는 차츰 업데이트해야 할 것 같다. 오늘은 간단하게 타입스크립트와 next에서의 라우팅 구현 방식을 정리하려고 한다. React도 모르던 나는 어느새 next.js에 대해 배우고 있다. 

---

1. 타입스크립트 (TypeScript)의 개념

타입스크립트란 JS에 정적 타입을 추가한 프로그래밍 언어로 JS를 기반으로 하면서 코드의 안정성과 유지보수성을 향상시키기 위해 설계된 JS 상위 집합 언어라고 할 수 있다.

 

1) 주요 특징

• 정적 타입 시스템

아래는 타입스크립트에서 선언 가능한 타입을 정리한 도표이다.

• JS와 완전 호환

 

• 객체 지향 프로그래밍 지원
  • 타입스크립트는 js에 없는 클래스, 인터페이스, 추상 클래스, 접근 제어자(public, rivate, protected) 같은 객체 지향 프로그래밍의 개념(Object Oriented Programming)을 지원한다.

class Person {
  private name: string;
  constructor(name: string) {
    this.name = name;
  }
  sayHello(): string {
    return `Hello, ${this.name}`;
  }
}
const john = new Person("John");
console.log(john.sayHello()); // Hello, John

 

• 제네릭과 유연한 타입
  • 제네릭은 데이터 타입을 재사용 가능하고 유연하게 설정할 수 있게 해준다.

function identity<T>(arg: T): T {
  return arg;
}
console.log(identity<string>("Hello")); // "Hello"
console.log(identity<number>(42)); // 42

• 코드 유지 보수성 향상
  •  코드에 타입 정보를 추가함으로써 함수나 변수의 역할과 데이터를 더 명확하게 이해할 수 있다.
  • 때문에 팀원 간 협업이나 시간이 오래 지난 이후에 코드를 수정해야할 때 작성된 코드의 의미를 빠르게 파악할 수 있다.

✔ 타입스크립트는 기존 JS를 기반에 정적 타입을 추가한 프로그래밍 언어로 안전성, 유지보수성, 생산성을 중시하는 개발자들에게 적합한 언어이다. 특히 대규모 프로젝트나 협업 환경에서 많은 이점을 제공해준다.

---

2. Next.js의 Router

Next.js의 Router는   Pages router와 App router 두 가지로 나뉜다. Pages router는 12버전까지 사용되어오던 기존 방식의 라우터이고, App router는 13버전부터 새롭게 도입된 라우터이다.

App router에서 레이아웃과 페이지의 동작 방식

 

디렉토리 구조	pages/ 디렉토리 사용	app/ 디렉토리 사용
라우팅 방식	파일 기반 라우팅 (pages/about.js -> /about)	폴더 기반 라우팅 (app/about/page.js -> /about)
동적 라우팅	[param] 문법 (pages/posts/[id].js)	[param] 폴더 (app/posts/[id]/page.js)
레이아웃 관리	전역적으로 설정하거나 각 페이지마다 설정	layout.js 파일을 통해 폴더 별로 설정
데이터 페칭	getStaticProps, getServerSideProps, getStaticPaths	React 18의 새로운 데이터 페칭 메서드 사용 가능
서버 컴포넌트 지원	기본적으로 클라이언트 중심	서버 컴포넌트와 클라이언트 컴포넌트 명시적 구분 가능
사용 용이성	간단하고 직관적임	유연하지만 초기 설정이 복잡할 수 있음
프로젝트 적용	기존 프로젝트에 적합	신규 프로젝트 및 최신 기능에 적합