[WINK 공식 홈페이지] Next.js 스터디 👨🏻‍💻 [frontend / 신진욱]

로고 제법 이쁜듯

 

Next.js 프레임워크를 사용하여 WINK 공식 홈페이지를 개발하기로 하여, 스터디 중 이해하는데 도움이 될 만한 포스트를 남겨보겠습니다.

Next.js를 사용하여 개발을 하면 async, await을 자주 보게 될텐데 무엇인지 알아보겠습니다.

서버 사이드 렌더링이란?

클라이언트(브라우저)가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식입니다.

즉, 클라이언트에서 요청이 들어올 때마다 매번 서버에서 새로운 화면(view)을 만들어 제공하는 것입니다.

 

Next.js는 SSR 기반이다보니 기본적으로 컴포넌트는 서버 컴포넌트 입니다.

그래서 Next.js는 서버 컴포넌트에 비동기/대기(async/await)를 도입하고

클라이언트 컴포넌트에 새로운 use() 훅을 도입하는 등 지원을 하고 있습니다.

 

async & await 설명하기 전에 promise 객체를 알고 있어야하는데, 간단하게 설명을 해보자면 아래와 같습니다.

Promise

• 비동기 처리에 사용되는 자바스크립트 객체
• 비동기 작업이 맞이할 성공 혹은 실패를 나타냅니다.
• promise에 3개 메서드 존재
  • .then{callback}
    • 데이터 받기 성공할 때 사용
    • callback 함수에 data 인자
  • .catch{callback}
    • 데이터 받기 실패할 때 사용
    • callback 함수에 error 인자
  • .finally{callback}
    • 성공, 실패 여부 x 무조건 실행해야할 때 사용
    • 맨 마지막에 수행
  • .then, .catch 에서 값을 return 하면 promise 객체가 된다. → 체이닝 가능
  • promise를 리턴하는 web api
    • fetch 등등..

async & await란?

• 콜백, Promise 체인의 단점을 보완하는 문법입니다.

async

• 함수에 async를 붙이면 항상 Promise를 반환하는 비동기 함수로 바뀝니다.

-> handleSubmit() 함수가 호출된다면, Promise 객체인 Data를 반환합니다.

await

• async 함수 안에서만 사용할 수 있는 특별한 문법 입니다.
• 해당 Promise의 상태가 바뀔 때까지 코드가 기다리게 됩니다.
  • Promise가 성공 상태 또는 실패 상태로 바뀌기 전까지는 다음 연산을 시작하지 않는 것 입니다.
  • try-catch 블록 안에서 사용하여 에러 처리를 할 수 있습니다.

-> fetch를 통해 데이터를 잘 가져와서 Data의 상태가 바뀐 이후에만 console.log("실행할거에용");가 실행 됩니다.

+++

노마드 코더 Next.js 무료 강의 내용중..

Next.js에서 데이터를 가져올 때 위 사진과 같이 가져올 수 있는 것이다!

데이터를 가져올 때 fetch API를 사용한다고 합니다. (..?>!>?)

서버 컴포넌트 함수

async, await 말고도...

Next.js는 서버 컴포넌트에서 데이터를 가져올 때 필요할 수 있는 유용한 서버 함수를 제공합니다:

• cookies()
• headers()

Functions: cookies | Next.js

Functions: headers | Next.js

 

이렇게 Next.js를 사용하면 보게 될 async, await에 대하여 설명을 해봤습니다.

Data fetching 할 때는 async, await 문법을 꼭 기억해주시길 바랍니당ㅇ

추가적으로 글에서 언급된 것들 말고도 Next.js가 Data를 가져오는 데 유용한 함수들을 제공해주는데 이는 공식문서를 확인해보시면 될 것 같습니다.

🔗 https://nextjs.org/learn?utm_source=next-site&utm_medium=homepage-cta&utm_campaign=home

Learn Next.js | Next.js by Vercel - The React Framework