[멋쟁이사자처럼] 프론트엔드 6일차 정리

 Next.js란 무엇인가?

• 정의: React 라이브러리를 기반으로 구축된 오픈소스 풀스택(Full-stack) 웹 프레임워크입니다.
  
  
• 핵심 개념: 프레임워크는 정해진 골격(구조)과 규칙을 제공하며, 개발자는 그 틀 안에서 코드를 작성합니다. 이는 라이브러리와의 가장 큰 차이점으로, 프레임워크가 코드의 흐름을 제어하는 '제어의 역전(IoC)' 개념이 적용됩니다.

제어의 역전 (IoC, Inversion of Control)

'제어의 역전'은 소프트웨어 공학의 중요한 원칙으로, 프레임워크를 이해하기 위해 도움이 됩니다.

전통적인 프로그래밍에서는 개발자가 작성한 코드가 프로그램의 전체 흐름을 직접 제어합니다. 그러나, 제어의 역전(IoC)에서는 프레임워크가 프로그램의 흐름을 주도하고, 개발자의 코드는 프레임워크에 의해 '호출'되어 사용됩니다. 이는 제어의 주체가 개발자에서 프레임워크로 넘어간(역전된) 것입니다.

• 개발자의 집중도 향상: 개발자는 웹 서버를 만들고, URL을 분석하고, HTTP 요청을 처리하는 등 반복적이고 복잡한 기반 작업에 신경 쓸 필요가 없습니다. 프레임워크가 모두 처리해주므로, 오직 비즈니스 로직(실제 기능 구현)에만 집중할 수 있습니다.
• 결합도 감소 (Decoupling): 컴포넌트나 모듈들이 서로에게 깊게 의존하지 않게 되어 코드를 더 모듈화하고 유지보수하기 쉬워집니다.
• 재사용성 및 확장성 증가: 프레임워크라는 잘 짜인 구조 안에서 부품(컴포넌트)을 갈아 끼우기 쉽습니다. 새로운 기능을 추가하거나 기존 기능을 수정하기가 매우 용이해집니다.

 

 

Next.js를 사용하는 이유

• 서버사이드 렌더링(SSR): 서버에서 페이지를 미리 그려 사용자에게 전달하므로, 초기 로딩 속도가 빠르고 검색 엔진 최적화(SEO)에 매우 유리합니다. (React는 전체 파일을 한 번에 보내지만, Next.js는 필요한 부분만 먼저 보냅니다.)
  
  
• 파일 시스템 기반 라우팅: app 폴더 안에 폴더를 생성하면, 그 폴더명이 바로 URL 경로가 됩니다. React처럼 별도의 라우팅 설정이 필요 없어 직관적이고 편리합니다.
  
  
• 최적화 기능: 코드 분할, 이미지 최적화 등 성능 향상을 위한 다양한 기능이 내장되어 있습니다.

프로젝트 구조와 컴포넌트 관리

• app 폴더: 사용자가 요청하는 페이지(동적 문서)를 제공하는 핵심 공간입니다.
  
  
• 컴포넌트 관리
  공용 컴포넌트: 여러 페이지에서 재사용되는 컴포넌트나 외부 라이브러리는 최상단에 components 폴더를 만들어 공동으로 관리하는 것이 효율적입니다.
  
  지역(특정 페이지) 컴포넌트: 해당 페이지에서만 사용되는 컴포넌트는 그 페이지 폴더 근처에 두어 관리하는 것이 좋습니다.

스타일링 (CSS)

• global.css: app 폴더 내에 위치하며, 이름 그대로 프로젝트 전역에 적용될 공통 스타일을 정의합니다. 프레임워크의 규칙에 따라 이 파일명을 사용하는 것이 권장됩니다.
  
  
• 저장 위치
  app 폴더: 컴포넌트와 함께 번들링되어 사용자에게 전달될 CSS 파일을 저장합니다. 애플리케이션 소스 코드를 저장하며,  폴더 안의 파일들은 컴포넌트와 함께 처리되고 번들링되어 최적화됩니다. 또한, Next.js가 빌드 시점에 코드를 분석하고 최적화하고 CSS 파일은 압축되어 이미지는 기기에 맞게 크기가 조절됩니다.
  
  public 폴더: 서버에 저장해두고 직접 참조하는 이미지, 폰트 등 정적(Static) 파일을 보관하는 곳이며 파일 그대로 서버에 저장되고 제공됩니다. 특징으로는 Next.js가 코드를 압축하거나 최적화하지 않으며, 폴더 안의 경로가 그대로 URL 주소가 됩니다. (예: public/logo.png → 내사이트.com/logo.png)