next

jihyun·2022년 1월 10일
1

라이브러리와 프레임워크?

library는 내가 코드를 불러오는 것, 내가 사용하고 싶을 때 사용할 수 있다.
반대로 framework에서는 framework가 내 코드를 불러간다. 내가 framework의 룰에 따라야 한다.

ex) index.js 에서 작성한 내용은 자동으로 home에 반영된다.

next.js에서 라우터를 정의하지 않아도 pages 폴더 내 파일 이름을 url로 설정하고, 그 컴포넌트를 보여준다.
각 컴포넌트 파일은 반드시 export deault로 시작해야 한다.
존재하지 않는 파일이름을 url에 입력하면 404페이지

예외 1) index 파일 -> home(url존재 X)
예외 2) jsx만 사용할 떄는 react를 import하지 않아도 된다. hook 사용해야 할 떄는 import해야 한다.

CSR vs SSR

CSR : 브라우저(client side의 javascript)가 UI의 모든 것을 한다.
단점? 브라우저에서 javascript 로딩, API fetch 과정이 느릴 수 있다.

SSR : next.js는 SSR이다.
next.js는 실제 html을 가지고 있어 화면에 미리 렌더링(pre-rendering)하고, API만 가져오면 된다.

즉 next.js는 react.js 백엔드에서 코드를 동작시켜 pre-rendering하고 HTML을 페이지의 소스코드에 넣는다. ->SEO에 good (hydration)
이후 react.js가 클라이언트로 전송되면 상호작용하는 react app이 된다.

next.js에서 링크 이동하는 데에 <a>태그를 사용하면 페이지 전체를 새로고침하므로 사용하지 말기
import Link from "next/link"
해서 <Link>를 가장 밖에 감싸야 하고 안에 <a>태그에 스타일 줄 수 있음

const router = useRouter(); -> location에 관한 정보 얻을 수 있는 hook

css ? xxx.module.css (.nav {}) -> css module이 className을 무작위화 해 다른 파일에서도 같은 className 사용 가능
but css 파일 따로 관리 불편하고 항상 className 써야 한다.

import styles from "./xxx.module.css"
<div className={styles.nav}>

style jsx ? 컴포넌트 파일 안에서 <style jsx>
각 컴포넌트 안에서만 스타일 적용된다.
global style -> global style을 가지고 있는 컴포넌트에만 적용(페이지 단위로 접근하자)

_app.js
render할 때마다 사용된다. "템플릿으로 만들고 싶을 때"

getServerSideProps 함수는 서버에서 실행 -> 클라이언트 X, 따라서 이 함수를 이용해서 API key 숨길 수 있다.

next.js에서의 라우터?
pages 폴더에 파일명이 url -> 기본
movies/all 처럼 오는 경우 pages > movies > 파일명이 url
이경우 movies로 끝나면 movies > index
변수가 필요한 경우 파일명에 [변수명]으로 지어주면 됨 ex.[id].js

0개의 댓글