App Router
-
page 라우터는 이제 저무는 기술.
-
App 라우터가 상위호환.
경로와 파일명의 약속을 통해서 결정됨.
dev 는 개발에서 사용
start 는 프로덕션에서 사용 npm run build npm run start
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}Next 의 약속. 제어의 역전을 발생시키는. 우리가 꼭 맞춰줘야해.
**app**디렉터리 아래의 디렉터리명이 url의 일부가 된다- 디렉터리 아래에 위치한
**page.js**가 해당하는 url의 페이지가 된다.
CSR 과 다른
서버 사이드 렌더링 SEO (검색엔진 최적화) 를 하기 위해 사용하는것.
- 처음에 url 치고 들어가면 서버사이드 렌더링 해주는데,그 이후 검색은 기존 서버사이드 렌더링으로 받은 페이지에서 클라이언트 사이드 렌더링 해줄 수 있도록 최소한의 정보만 전달해줌.
- 레이아웃은 중첩이된다.
리액트 훅
-
디폴트가 서버 컴포넌트임. 그려지는게 서버에서 그려짐.
-
useEffect 는 브라우저에 그려진다음에 작동하는것. 그래서 서버 컴포넌트에서는 작동할 수 없음.
=> "use client"; 써줘야함. -
서버 클라이언트가 성능상 좋기때문에, 필요할때만 use client 로 바꾸면서 쓴다.
private Route 와
public Route 에 레이아웃을 구분해서, 로그인했을때랑 게스트일때 화면을 다르게 보여줄 수 있음.
레이아웃은
<body className={inter.className}>{children}</body>children 을 받아서 내려주는건데, 이때 칠드런은 넥스트가 알아서 페이지를 넣어준다.
라우팅 시스템에서 고려되지 않는것
개인 폴더
- 개인 폴더는 폴더 앞에 밑줄을 붙여 생성할 수 있습니다.
- _folderName 이렇게 사용
- 아예 라우팅 시스템에서 반영이 안됨.
소괄호
- 경로에서만 이름이 빠짐. 레이아웃 적용 가능
npx create-next-app@latest
백엔드 서버
HTTP 메소드
- GET,POST 등 함수 이름으로 지어야함. 컨벤션
요청하는 쪽
const url = "http://localhost:3000/api/auth/log-in";
fetch(url, { method: "POST", body: });
바디에는 객체를 쓰면 안돼. json 형식만.
fetch(url, { method: "POST", body: JSON.stringify({ id, pw }) }); 응답하는 쪽
보통 백엔드는 엑세스 토큰,리프레시 토큰을 발급해주는데,
JWT 는 암호화가 안되고, 위변조가 불가능하다는데 의미가 있음.
그런 의미에서 JWT 를 쓴다.
띨띨 프로젝트
-
Header 에
-
레이아웃은 UI 뿐만아니라 공통적으로 적용되는 비즈니스 로직도 넣어서 통채로 관리할 수 있게 쓴다!
-
onSubmit 은 새로고침 되서 e.preventDefault() 로 막기
로그인이 자동으로 되는 페이지를 만들거임.
백엔드 코드에서 fetch 를 통해 발란 서버로 보내고 있어, 이 기록을 response 로 받아서 다시 til 로 보내줘.
post 보낸게 발란서버로 쌓여.
클라이언트 사이드에서 API 코드 넣을때 vs 서버 사이드에서 요청
- 호출할때 API 키가 노출하기 싫을때
- 브라우저가 브라우저에서 요청이 오고 갈때에는 CORS 문제가 발생. => 서버 사이드에서 요청(GET)을 보내면 CORS 문제를 방지할 수 있어.
rest 방식의 약속
const idRef = useRef<HTMLInputElement>(null)
const id = idRef.current?.value;
onChange = {e => setState(e.target.value)}
ref= {isRef}
마지막에 버튼이 눌리면