npm run dev
개발자로써 내가 사용하는것 라이브러리 불러와서 사용해서 뭔가 한다.
특징으로는 내가 원할때 언제든 어떤 방법으로 불러온다. 즉 내가 마스터이다.
ex) react
나의 코드를 불러오는 것
프레임워크는 집이라고 할 수 있다. 나는 집에 들어가서 행동하는 게스트이다. 게스트는 집을 바꿀수는 없지만 집에 있는 물건들을 사용할 수 있다. 즉 특정한 규칙을 따라서 특정한걸 해야한다
내 코드를 적절한곳에 넣어야한다. 나의 코드를 nextjs가 추상화한 특정한 곳에서 진행된다.
ex) next.js
export default function (변수명)() {
return;
}
파일명이 url의 주소가 되므로 파일명은 중요하다.
예외사항으로 index.js는 / 이다.
nextjs는 react를 불러오거나 파일 확장자를 .jsx로 할 필요 없다. 하지만 useState나 useEffect를 사용하고 싶다면 react를 불러와야한다.
next.js에서도 클라이언트 사이드 렌더링처럼 전체 페이지를 새로고침 하면서 이동하지 않는 방법이 있다. 그 방법은 Link이다.
<Link href="/">
<a className="hello">Home</a>
</Link>
useRouter을 이용하면 현재 페이지의 정보를 알 수 있다.
const router = useRouter();
console.log(router);
nextjs에서 지원하는 css를 입히는 방법이다. 각각의 컴포넌트마다 분리되어 있다는 장점이 있다. 그렇기 때문에 다른 컴포넌트에서 같은 클래스이름을 써도 상관이 없다는 큰 장점이 있다.
<style jsx>{`
nav {
background-color: tomato;
}
a {
text-decoration: none;
}
.active {
color: yellow;
}
`}</style>
전역적으로 css를 설정하는 방법
<style jsx global>{`
`}
nextjs는 화면을 렌더링 하기 전에 먼저 _app.js를 렌더링한다. 그렇기 때문에 _app.js에 글로벌 css를 설정하거나 NavBar등을 넣어놓으면 중복해서 작성할 필요가 없다는 장점이 있다.
_app.js
export default function App({ Component, pageProps }) {
return (
<>
<NavBar />
<Component {...pageProps} />
<style jsx global>
{`
a {
color: white;
}
`}
</style>
</>
);
}
global.css 는 _app.js에 임포트 해줘야한다.