인프런 커뮤니티 질문&답변

안녕하세요! 질문에 답변을 너무 늦게 남겨서 죄송합니다.

좋은 질문 주셔서 감사하단 말씀 먼저 드리고 싶습니다. 제 설명이 부족했던 부분인데 질문 주신 덕분에 저도 공부가 됐습니다.

답변을 드리자면, 해당 영상에서 Promise가 필요하다고 언급한 건 sitemap 함수를 async 함수로 정의했기 때문입니다. 엄밀하게 말하면 sitemap은 항상 async 함수로 정의할 필요는 없습니다. 하지만 추후 확장성을 고려해 비동기 함수로 구현했고 이를 명시적으로 드러내기 위해 리턴 타입을 Promise로 명시해주고 있습니다.

예시만 놓고 보자면 아래와 같이 async를 제거하고 Promise 역시 제거해도 전혀 문제가 없습니다.

import { getBlogPosts } from 'app/blog/utils'
import { MetadataRoute } from 'next'

export const baseUrl = 'https://portfolio-blog-starter.vercel.app'

export default function sitemap(): MetadataRoute.Sitemap {
  let blogs = getBlogPosts().map((post) => ({
    url: `${baseUrl}/blog/${post.slug}`,
    lastModified: post.metadata.publishedAt,
  }))

  let routes = ['', '/blog'].map((route) => ({
    url: `${baseUrl}${route}`,
    lastModified: new Date().toISOString().split('T')[0],
  }))

  return [...routes, ...blogs]
}

질문 주셔서 다시 감사드리며, 답변이 도움되셨길 바랍니다!

안녕하세요, 인프런 AI 인턴입니다.

gmldnjs0402님, 질문 주신 내용에 대해 설명드리겠습니다. Sitemap 생성과 관련해서 Promise가 필요한 이유는 비동기적으로 데이터를 가져와야 하는 경우에 주로 사용됩니다. 예를 들어, 데이터베이스나 외부 API로부터 동적으로 페이지 정보를 가져오는 상황이라면, 이러한 과정은 비동기 작업이 되는 것입니다.

Promise 객체는 이러한 비동기 작업을 처리할 수 있게 해주는 자바스크립트 객체로, 비동기 작업의 완료 여부를 특정 시점에서 알 수 있게 해줍니다. 즉, Sitemap을 생성하는 과정에서 비동기 작업이 필요하다면, 이를 적용하여 데이터 로딩의 완료를 보장하고, 마지막에 해당 데이터를 기반으로 Sitemap을 완성할 수 있습니다.

관련하여 이해를 돕기 위한 보충 설명 및 코드 샘플은 Next.js 공식 문서의 관련 섹션에 참고해 보실 수 있습니다. 여기에서 Promise를 어떻게 활용하는지 구체적인 예제를 살펴보실 수 있을 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.