I’m on the Next.js

어제 작성한 그 CSS코드 기억하실련지요
전 갠적으로 그런 코드 싫어함
이유 : 걍 보기 싫음

🦭 홀리몰리 이렇게 style태그를 이용해서 CSS를 작성해줘도

🦭 요로코롬 잘 나타난다고 한다
근데 난 이런 코드도 별로 선호하지않음 코드 길어짐...

🤷‍♂️ : 근데 저건 한 컴포넌트에만 해당되는 CSS이지 않습니까
만약 공통적으로 가져야 하는 CSS는 어쩌실건가요 ? 컴포넌트마다 똑같이 써줄건가요 ? 예 ?

🥔 : 거 참 성격 급하네 기다려보쇼

🦭 이렇게 Pages폴더에 _app.js를 만들고 저렇게 코드를 한 번 작성해봅싀다

🦭 컴포넌트 이동시에도 span태그 속 문자열이 보여지는 것을 알 수 있습니다 !

🤷‍♂️ : 아니 저렇게 코드쓰는건..뭐죠 ?
🥔 : 정해져 있는거임 난 모름

🦭 요로코롬 globals.css 파일을 만들어서 폰트를 바꿔봄

🦭 이렇게 잘 바뀌는 것을 확인 할 수 있다 !

오늘의 공부 🐤

App Component와 App Page

App Component : 일종의 어떤 컴포넌트의 청사진 blueprint
Next.js가 모든 페이지를 렌더링 할 수 있게 !
기본적으로 프레임워크 내에 포함되어 있음
Pages 폴더내에 _app.js를 만듭세다 -> Next.js는 타 컴포넌트 (여기선 About.js이나 index.js)이 렌더링 되기전에 먼저 App을 보기 때문

Page별로 생각해야함

Custom App

Next.js는 App 컴포넌트를 사용하여 page를 초기화합니다. 이를 재정의하고 페이지 초기화를 제어할 수 있습니다. 이를 통해 다음과 같은 놀라운 일을 할 수 있습니다.

1. 페이지 변경 간에 레이아웃 유지
2. 페이지 탐색 시 state 유지
3. componentDidCatch를 사용한 Custom 에러 처리
4. 페이지에 추가 데이터 삽입
5. Global CSS 추가

기본 App을 재정의하려면 아래와 같이 ./pages/_app.js 파일을 만듭니다.

export default function MyApp({ Component, pageProps }) {
return < Component {...pageProps} />
}

https://nextjs.org/docs/advanced-features/custom-app

Custom App (with 타입스크립트)
_app.ts가 아닌 _app.tsx파일을 만들고 아래와 같이 작성

import type { AppProps } from 'next/app'

export default function MyApp({ Component, pageProps }: AppProps){
return < Component {...pageProps} />
}

https://nextjs.org/docs/basic-features/typescript#custom-app

• 파일명.module.css 파일 형태를 제외한 모든 나머지 css파일들은 _app.js에서만 import해와서 사용해야 한다. (글로벌 css간의 충돌을 피하기 위해서이다.)
  https://nextjs.org/docs/messages/css-global
  

오늘의 왜때문에 🐣

mei you

왜때문에 -해결편 🐥

mei you

오늘의 삽질 🥄

에러노트 릭클릭클

오늘의 일기

static, SRC 자꾸 헷갈린다
왜 상세페이지는 최신상태를 유지해야 하는거지
대체 왜..

---

Sae Eleisa Tera Vi