[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 1기 - 사전직무교육 12일차 후기 (06. 11)

< 학습기록 >

📜 API 호출

🟡 async / await 방식

👉🏻  async await방식으로 연속호출했을 때 단일쓰레드 방식으로 호출되기 때문에 2초 2초 걸린다면 데이터 받는데 총 4초가 걸림

const getPosts = async () => {
  await new Promise((res) => setTimeout(res, 2000))
  return await (
    await fetch("https://jsonplaceholder.typicode.com/posts")
  ).json()
}
const getComments = async () => {
  await new Promise((res) => setTimeout(res, 2000))
  return await (
    await fetch("https://jsonplaceholder.typicode.com/comments")
  ).json()
}
export default async function Home() {
	const posts = await getPosts()
	const comments = await getComments()
  return (
    <>
      <h1>Home Component</h1>
      <pre>{JSON.stringify(posts, null, 2)}</pre>
      <pre>{JSON.stringify(comments, null, 2)}</pre>
    </>
  )
}

 

👉🏻  병렬로 처리하는 Promise.all을 사용해주면 제일 오래 걸리는 거 기준으로 그 시간만큼만 써서 받을 수 있음 아래에서는 받아오는 게 늦은 getComments가 3초가 걸리니까 3초만 사용하면 됨

👉🏻  2초 + 3초 아니고 그냥 3초

const getPosts = async () => {
  await new Promise((res) => setTimeout(res, 2000))
  return await (
    await fetch("https://jsonplaceholder.typicode.com/posts")
  ).json()
}
const getComments = async () => {
  await new Promise((res) => setTimeout(res, 3000))
  return await (
    await fetch("https://jsonplaceholder.typicode.com/comments")
  ).json()
}
export default async function Home() {
  const [posts, comments] = await Promise.all([getPosts(), getComments()])
  return (
    <>
      <h1>Home Component</h1>
      <pre>{JSON.stringify(posts, null, 2)}</pre>
      <pre>{JSON.stringify(comments, null, 2)}</pre>
    </>
  )
}

 

👉🏻  아니면 데이터를 받아오면 바로 보여주는 suspense를 사용해도 됨

👉🏻  그러면 받아온 것부터 그냥 바로 보여줌

import Posts from "@/components/Posts"
import Comments from "@/components/comments"
import { Suspense } from "react"

export default function Home() {
  return (
    <>
      <h1>Home Component</h1>
      <Suspense fallback={<h1>loading...</h1>}>
        <Posts />
      </Suspense>
      <Suspense fallback={<h1>loading...</h1>}>
        <Comments />
      </Suspense>
    </>
  )
}

 

📜 Route Handler

👉🏻 Next.js 14에서는 Express와 비슷한 기능을 제공

👉🏻 Route Handler를 이용해서 다양한 종류의 요청을 처리할 수 있음

👉🏻 Next.js 에서 지원하는 Route Handler 메서드 

• GET :  정보 가져오는 요청
• POST : 새로운 정보를 만들 때 사용
• PUT : 정보를 업데이트할 때 사용
• PATCH : 정보 일부만 업데이트할 때 사용
• DELETE : 정보를 삭제할 때 사용
• HEAD : 서버에 대한 정보를 요청할 때 사용

👉🏻 Next.js에서는 특별한 디렉토리를 사용 app폴더아래에 api폴더를 사용해야 함 그 안에 파일을 만들면  http://localhost:3000/api/파일 이 받아오는 경로

👉🏻 Route Handler 메서드는 request로 요청 조정가능

import { NextRequest } from "next/server"
// export async function GET(request: Request) {
// const { searchParams } = new URL(request.url)
export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams
  return Response.json("GET METHOD! : " + searchParams.get("lang"))
}

export async function POST(request: Request) {
  const data = await request.json()
  return Response.json(data)
}
export async function PUT(request: Request) {
  return Response.json("PUT METHOD!")
}
export async function PATCH(request: Request) {
  return Response.json("PATCH METHOD!")
}
export async function DELETE(request: Request) {
  return Response.json("DELETE METHOD!")
}

 

 

📜  NEXT.JS의 캐시 시스템

에 대해서 배웠는데 아직 이해가 덜 되어서 내일 한번더 설명해 주신다 하니 그거 듣고 내일 정리할 예정

 

 

 

 

 

과제 ) Next.JS 캐싱 시스템 이해한 만큼 정리해서 제출

Next.js 캐싱 시스템 이해 내용
페이지에서  새로운 요청이 들어오면 next는 라우트캐시에서  캐시된 데이터를 찾음
캐시 된 데이터 있으면 캐시 된 걸 주고 없으면 해당 요청을 캐시하고 서버에게 연락.
서버는 메모이제이션된 요청이 있는지 확인하고 있으면 그 정보를 주고 없으면
데이터를 저장해두는 데이터 캐시를 먼저 확인하고 거기에 정보가 있으면 그 정보를 꺼내서 사용함.
만약 없으면 데이터를 제공하는 데이터 소스에서 직접 가져와서 가져온 데이터를 반환해 줌.

---

12일 차 학습후기

캐시 시스템 머릿속에 들어가긴 들어간 것 같은데 글로 쓰려니 써지지 않는.... 다 말로도 안 나온... 다

그럼 이해를 못 한 거겠지? 

오늘은 영화 api 받아와서 홈페이지 만드는 것도 배웠는데 그거는 약간 여유될 때 커스텀 해서 올려야겠다.

강사님이 너무 타자도 빠르시고 진도도 와르르르 

근데 생각해 보면 오후에는 캐시 시스템만 배운 것 같은데 왜 매시간 들을 때마다 새로웠지?

내일은 좀 더 집중해야 할 것 같은 오늘차 학습후기이다.

---

 

본 후기는 본 후기는 [유데미 x스나이퍼팩토리] 프로젝트 캠프 : Next.js 1기 과정(B-log) 리뷰로 작성되었습니다.