NextJS 개요
Next.js 페이지의 실행 순서
- 브라우저에서 특정 페이지로 요청이 들어옴.
- Next.js 서버가 요청된 페이지에 해당하는 컴포넌트를 렌더링하기 위해 pages/_app.js를 실행함.
- pages/_app.js에서 정의된 레이아웃을 갖춘 상태에서 해당 페이지 파일 (예: pages/index.js)을 실행함.
- 해당 페이지 파일에서 페이지 컨텐츠를 렌더링하고, 최종 결과가 클라이언트로 전송됨.
- pages/_app.js
- 이 파일은 Next.js 애플리케이션의 루트 컴포넌트로서, 모든 페이지에 공통적으로 적용되는 레이아웃, 스타일, 상태 관리 등을 처리하는 역할을 합니다. _app.js 파일은 페이지 컴포넌트들을 렌더링하기 전에 최초로 실행됩니다. 이 파일은 모든 페이지에서 단 한 번만 실행되며, 페이지 간의 상태를 유지하거나 레이아웃을 정의하는데 사용됩니다.
- 해당 페이지 파일 (예: pages/index.js)
- 각 페이지 파일은 _app.js에서 정의한 레이아웃을 감싸고, 해당 페이지에 특화된 컨텐츠를 렌더링합니다. 페이지 파일은 _app.js가 실행된 후에 해당 페이지가 요청되면 실행됩니다. 페이지 파일은 라우팅 경로에 따라 해당 페이지가 렌더링되는 역할을 합니다.
즉, _app.js가 먼저 실행되고, 그 후에 요청된 페이지 파일이 실행되는 구조입니다. 이를 통해 모든 페이지에서 공통적인 레이아웃을 구성하거나 상태 관리 로직을 처리할 수 있습니다.
VScode React 컴포넌트 자동완성 기능
STEP1. 루트/jsconfig.json
touch 루트/jsconfig.js
// ctrl + space
{
"compilerOptions": {
"target": "es6"
}
}
위 코드가 작성되어 있으면 된다.
VSCode 창에 컴포넌트가 열려있지 않아도 자동완성이 가능해진다.
CSS Modules 사용하기
STEP1. CSS Modules 설정
/* next.config.js */
cssModules: true,
STEP2. CSS Modules 전용 CSS 생성
/* styles.module.css */
.container {
width: 100%;
max-width: 960px;
margin: 0 auto;
}
.title {
font-size: 24px;
font-weight: bold;
}
STEP3. React 컴포넌트에서 CSS Modules 적용
/* MyComponent.js */
import styles from '@/path/to/styles.module.css';
const MyComponent = () => {
return (
<div className={styles.container}>
<h1 className={styles.title}>Hello, CSS Modules!</h1>
</div>
);
};
export default MyComponent;
일반적인 CSS 는 클래스명이 고유한지 고민해야야하는데, CSS Modules 은 직접 불러온 컴포넌트 내부에서만 동작하기에 고민할 필요가 없다. (키:값 형태로 들어있다.)
일반 CSS
- CSS Modules를 사용하면 스타일이 모듈화되어 컴포넌트 스코프 내에서만 적용됩니다.
- 스타일은 컴포넌트별로 격리되어 재사용이 용이하며, 클래스 이름은 고유한 이름으로 변환됩니다.
- 스타일의 충돌을 방지하고 모듈식 개발을 도와줍니다.
- CSS 파일의 이름에 .module.css 또는 .module.scss와 같은 접미사를 붙여서 CSS Modules로 인식하도록 합니다.
- 컴포넌트에서 import를 사용하여 CSS 파일을 가져와서 클래스 이름을 사용합니다.
CSS Modules
- CSS Modules를 사용하면 스타일이 모듈화되어 컴포넌트 스코프 내에서만 적용됩니다.
- 스타일은 컴포넌트별로 격리되어 재사용이 용이하며, 클래스 이름은 고유한 이름으로 변환됩니다.
- 스타일의 충돌을 방지하고 모듈식 개발을 도와줍니다.
- CSS 파일의 이름에 .module.css 또는 .module.scss와 같은 접미사를 붙여서 CSS Modules로 인식하도록 합니다.
- 컴포넌트에서 import를 사용하여 CSS 파일을 가져와서 클래스 이름을 사용합니다.
요약하면, cssModules: true로 설정하면 CSS Modules를 사용하여 스타일을 작성할 수 있습니다. 이를 통해 스타일을 모듈화하고 컴포넌트 스코프 내에서만 유효한 고유한 클래스 이름을 생성합니다. 이는 스타일의 격리와 모듈식 개발을 도와주는 좋은 기능입니다.
전역CSS 설정하기
/* next.config.js */
globalCSS: ['@/assets/css/styles.module.css'],
-
globalCSS 옵션은 Next.js 프레임워크에서 사용되는 설정 옵션 중 하나입니다. 이 옵션은 전역으로 적용되는 CSS 파일을 지정하는데 사용됩니다. 전역 CSS 파일은 모든 페이지에서 공통으로 사용되며, 페이지별로 로드되는 것이 아니라 렌더링되는 모든 페이지에 포함됩니다.
-
globalCSS: Next.js에서 전역으로 적용할 CSS 파일을 지정하는 옵션입니다.
-
이 설정을 사용하면 styles.module.css 파일의 스타일이 모든 페이지에 적용됩니다. 예를 들어, styles.module.css 파일에 정의된 스타일은 모든 페이지에서 동일하게 적용되며, 모든 컴포넌트에서 해당 스타일을 사용할 수 있습니다.
- Next.js에서 globalCSS 옵션을 사용할 때는 전역 스타일이 많지 않고 가능한 한 지역적인 스타일을 선호하는 것이 좋습니다. 왜냐하면 전역 스타일은 프로젝트 규모가 커질수록 관리하기 어려워질 수 있기 때문입니다. 가능하면 컴포넌트에 로컬 스타일을 적용하여 스타일의 범위를 제한하고 유지보수를 쉽게 하십시오.
Leave a comment