24.07.01

[Next.js의 특장점]

왜 쩌는지?

React Router Dom은 외부 라이브러리,
Next.js는 프레임워크

- 렌더링 방식
1. CSR : 클라이언트 사이드 렌더링, 우리가 계속 해왔던 것
2. SSR : 서버사이드 렌더링으로 mpa 제공, 전통적, 깜빡거림
3. SSG : 쓱? 아니고 Static Side Generation
4. ISR

- Route Handlers
풀스택이 가능한 프레임워크다 라고 Next.js를 부르고
그걸 구현하게 하는 게 Route Handler다

• Next.js는 React를 기반으로 만들어진 프레임워크
  라이브러리(React) vs 프레임워크(Next.js)
  -내가 하나하나 세팅 -통째로 세팅된 것을 사용하기
  -공통 기능의 모듈화

- 스타일링 : Css, Sass, CSS-in-JS, Tailwind

- 최적화, 번들링 : 코드 스플리팅, 이미지 최적화, 웹팩 설정

[package.json] 명령어

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

• dev(npm run dev) : 개발자가 개발하는 중 사용하게 될 방법.

• build(npm run build) : production 레벨로 배포 전
  필요한 빌드 작업 과정을 실행하기 위한 방법.

• start(npm run start) : 만들어진 build 파일을 이용하여
  실행시키는 방법.

  next start의 전제 조건은 next build를 먼저 했다는 것!

[다이나믹 라우팅]

우왕 미쳤다..

[supabase 회원가입, 로그인]

https://supabase.com/docs/reference/javascript/auth-signup

https://velog.io/@yubnee/%EC%B5%9C%EC%A2%85%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-4%EC%9D%BC%EC%B0%A8-supabase%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%9D%B4%EB%A9%94%EC%9D%BC-%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85-%EB%A1%9C%EA%B7%B8%EC%9D%B8

근데 이제 관계 설정 대신 코드를 곁들인