hajoeun

미들 (4~8년)

안녕하세요! 질문에 답변을 너무 늦게 남겨서 죄송합니다.좋은 질문 주셔서 감사하단 말씀 먼저 드리고 싶습니다. 제 설명이 부족했던 부분인데 질문 주신 덕분에 저도 공부가 됐습니다.&nbsp;답변을 드리자면, 해당 영상에서 Promise가 필요하다고 언급한 건 sitemap 함수를 async 함수로 정의했기 때문입니다. 엄밀하게 말하면 sitemap은 항상 async 함수로 정의할 필요는 없습니다. 하지만 추후 확장성을 고려해 비동기 함수로 구현했고 이를 명시적으로 드러내기 위해 리턴 타입을 Promise로 명시해주고 있습니다.예시만 놓고 보자면 아래와 같이 async를 제거하고 Promise 역시 제거해도 전혀 문제가 없습니다.<pre><code>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]
}</code></pre>&nbsp;질문 주셔서 다시 감사드리며, 답변이 도움되셨길 바랍니다!

sitemap 에 Pormise가 필요한 이유

안녕하세요! 질문 남겨주셔서 감사합니다. &nbsp;문의 주신 <code>getPostData</code>의 경우 일반적으로 마크다운 파일에서 게시글 데이터를 파싱하는 예시를 소개하기 위해 사용한 함수입니다. <code>matterResult.data</code>은 게시글의 메타데이터 정보를 담고 있는데요. 실제로 이 값은 OpenGraph 데이터로 활용됩니다. 이후 구현에서 실제로 사용되는 함수는 <code>getBlogPosts</code>함수입니다. 이는 <code>generateMetadata</code>를 비롯한 다양한 곳에서 메타데이터 정보를 조회할 때도 사용되고 있는 걸 확인하실 수 있어요.&nbsp;확인해보시고 추가 질문 있으시다면 언제든 질문 남겨주세요! 감사합니다.

getPostData 함수 질문

다연님, 안녕하세요. 메일 보내주셔서 답변 드릴 수 있게 됐어요! 감사합니다.&nbsp;<code>next.config.js</code> 파일을 수정해주셔야 할 것 같아요. 다음과 같이 수정해보시면 PartialPrerendering이 정상 동작하는 것을 확인하실 수 있어요.<pre><code class="language-javascript">const createMDX = require("@next/mdx");

// module.default = {
// experimental: {
// ppr: true,
// },
// };

const withMDX = createMDX({
 extension: /\.mdx?$/,
});

module.exports = withMDX({
 pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
 experimental: { // 여기로 설정을 옮겼어요!
 ppr: true,
 },
});</code></pre>&nbsp;아마도 MDX 설정을 추가하시는 과정에서 파일이 변경되면서 설정 충돌이 난 것 같아요. 적용 해보시고도 문제가 있으면 다시 질문 남겨주세요!&nbsp;메일 보내주셔서 감사합니다. 궁금한 점이 있다면 언제든 또 질문 주세요!

PPR 적용 후 여전히 SSG로 배포되는 이슈

Dayeon님! 답변이 늦어서 정말 죄송해요. &nbsp;남겨주신 상황을 보니 저도 왜 그런지 알기 어렵네요! 캡쳐해주신 부분은 모두 잘해주신 것으로 보여요. 혹시 가능하다면 작업 중이신 코드 저장소 링크를 공유해주실 수 있을까요? 여기에 링크 올리시기 어렵다면 제 계정(imjoeunha@gmail.com, <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/hajoeun">https://github.com/hajoeun</a>)에 공유해주시면 될 거 같아요.&nbsp;공유해주시면 저도 테스트 해보고 바로 답변 드릴게요! 질문 남겨주셔서 정말 감사해요!

안녕하세요! 메리크리스마스 입니다!배포 단계까지 오셨다니 고생 많으셨어요. 혹시 설치된 Next.js의 버전을 확인해주실 수 있을까요? 강의에서는 13.4.19 버전을 쓰고 있습니다. 그 이상 버전이 설치된 환경이라면 <a target="_blank" rel="noopener noreferrer nofollow" href="https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#example">최신 문서 가이드</a>를 참고하셔서 Props의 params를 Promise로 감싸보시면 해결될 것 같아요! 시도해보시고 다시 답변 남겨주세요.

안녕하세요! 서비스 배포를 하는데 에러가 생겨서 문의드립니다!

오, 이슬님! 안녕하세요! Vercel Postgres를 대체하는 Neon Marketplace 통합되었는지 몰랐네요... 변화가 정말 빠른 거 같습니다 😅 &nbsp;알려주신 것으로 시도해봤는데... 저도 동일한 증상이 발생하더라고요. 뭔가 이상해서 원래 예제로도 테스트를 해봤어요. 그랬더니 역시 동일하게 카운트가 2회 이상 오르는 문제가 생기는 걸 발견할 수 있었어요. (제 예제에 있던 버그를 발견해주셨어요. 감사해요!)&nbsp;다시 알아보니 서버 컴포넌트의 중복 호출 문제로 보여요. 예제에서처럼 새로고침 마다 변경되어야 하는 경우라면 <code>incrementView</code>에 해당하는 로직을 Route Handlers로 구현하는 방식이 가장 쉬운 접근일 것 같아요.예제를 별도의 브랜치에 만들어뒀으니 확인 해주세요. <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/hajoeun/next-js-blog/blob/fix/view-count/app/api/view-count/route.ts">https://github.com/hajoeun/next-js-blog/blob/fix/view-count/app/api/view-count/route.ts</a>&nbsp;더 알아보고 좋은 방법이 있다면 강의 소식에 남겨둘게요! 문제를 발견해주셔서 너무 감사드립니다!&nbsp;시도해보시고 결과 알려주세요. 문제가 있다면 또 질문 남겨주세요! 감사합니다.

배포 후, 조회수 증가 이슈

안녕하세요. 우성님! 1, 2번 질문에 이어서 답변 드릴게요. 4번 - 3번 순서로 답변드리겠습니다.&nbsp;A4. dangerouslySetInnerHTML를 사용하는 이유<code>dangerouslySetInnerHTML</code>를 쓰지 않고 script 태그에 themeEffect의 로직을 넣어보면 답을 알 수 있습니다. 서버에서 렌더링하는 시점의 HTML과의 차이가 발생해 <code>Error: Text content does not match server-rendered HTML.</code> 에러를 만나게 됩니다. Next.js 서버에서는 <script> 태그 안의 컨텐츠를 특수 문자를 엔티티로 이스케이프 처리합니다. 예를 들면 따옴표(')를 <code>&#x27;</code> 이렇게 바꾸는거죠. 그 결과 브라우저에서 해석하는 결과와 차이가 생기는 것이죠. 반면 <code>dangerouslySetInnerHTML</code>을 사용하면 내용을 그대로 사용해 서버와 브라우저가 동일한 결과를 반환합니다.때문에 <code>dangerouslySetInnerHTML</code>을 사용했습니다. &nbsp;A3. 즉시 실행 함수를 사용한 이유<code>dangerouslySetInnerHTML</code>를 사용할 수 밖에 없는 상황이라는 점을 감안했을 때 결국 <code>__html</code>에서 테마 설정을 바꿔야 합니다. 이때 선택지는 두개가 있습니다. <ol><li><code>themeEffect</code> 와 같은 함수를 즉시 실행</li><li>문자열로 모든 <code>themeEffect</code> 함수 내의 로직을 적기</li></ol>저는 남겨주신 스코프 제한의 이유 외에도 에디터에서 지원하는 하이라이트 기능의 사용 편의나 코드의 가독성 측면에서 즉시 실행 함수가 유리하다고 판단했습니다.&nbsp;즉시 실행 함수를 쓰는 일이 잦은 편은 아닙니다. 예전에는 <code>useEffect</code> 내에서 비동기 함수를 호출할 때 <code>async/await</code> 문법을 쓰기 위해 async로 선언한 즉시 실행 함수를 쓰곤 했는데 TanStackQuery와 같은 좋은 도구가 나오면서 이런 방법을 잘 쓰진 않습니다. 테마 변경 기능에 쓰인게 특이한 사례라고 보셔도 괜찮을 거 같아요!&nbsp;답변이 되셨으면 좋겠네요. 또 다른 질문 있다면 얼마든 편하게 남겨주세요!&nbsp;열심히 하시는 모습 보기 좋습니다! 응원할게요!

추가로 Head tag에서 작성된 script 코드 관련하여 질문드리고 싶습니다. (feat. 즉시 실행 함수, dangerouslySetInnerHTML)

우성님, 안녕하세요! 너무 좋은 질문들 남겨주셨네요. 하나씩 답변드려 볼게요.&nbsp;A1. 다크모드 설정을 localStorage에서 가져오는 부분에서 head에서 script를 사용하는 이유fouc 현상을 방지하기 위함이라고 보시는 게 맞습니다! &nbsp;A2. NextJS에서 제공하는 Head tag와 Script tag를 사용하지 않고 순수 HTML로 작성하신 이유Head 태그의 경우 Pages router에서 제공하는 컴포넌트로 알고 있어요. App router를 사용하는 저희 예제에서 사용하기에 적절하지 않은 컴포넌트 였습니다. Head 컴포넌트는 보통 메타데이터 설정을 위해 많이 사용합니다. 저희가 블로그를 Page router로 만들었더라도 Head 컴포넌트를 사용하지 않는 선택을 했을 것 같아요.Script 태그는 App Router에서도 제공하는 컴포넌트입니다. 하지만 Script 컴포넌트는 마치 Image 컴포넌트와 같은 역할을 하는 용도로 쓰입니다. 스크립트를 로드할 때 최적화를 하기 위해 쓰이죠. 저희가 구현한 HTML 순수 기능인 script 태그는 내부에서 자바스크립트 코드를 실행시키기 위해 쓴 경우라 상황이 조금 다르다고 볼 수 있을 것 같습니다.&nbsp;좋은 질문 남겨주신 걸 보니 열심히 공부하고 계신 것 같아 너무 뿌듯합니다! 다른 질문이 있다면 또 편히 남겨주세요. 3, 4번 질문도 바로 답변 드릴게요!&nbsp;감사합니다.

Head tag에서 script를 작성하는 이유에 대해서 여쭤보고 싶습니다! (+ NextJS의 Head tag와 Script tag)

안녕하세요! 강의 봐주셔서 진심으로 감사드립니다.&nbsp;<ol><li>렌더링 기법의 경우 실무에서 필요에 따라 선택해서 사용합니다.<ol><li>SSR, CSR을 보통 혼용해서 사용합니다. 첫 렌더링에 SSR을 활용하고 이후 페이지 전환에 CSR을 적용하는 패턴이 흔히 보입니다.</li><li>SSG, ISR의 경우 블로그나 회사 홈페이지 같은 정적인 컨텐츠를 제공할 때 많이 사용합니다.</li><li>PPR의 경우 아직은 실무에서 널리 사용되는 기법은 아닙니다.</li></ol></li><li>개인적인 관찰에 따르면 CRUD까지 직접 구현한 블로그는 적은 편이라고 보입니다.<ol><li>티스토리나, 벨로그, 네이버 블로그 등의 블로그 서비스를 이용하는 경우가 아니라 직접 구현을 선택하는 경우에는 제 강의와 같은 마크다운 파일을 활용해서 구현하는 사례가 일반적입니다.</li><li>요즘엔 옵시디언, 노션과 같은 메모 도구가 글을 퍼블리시할 수 있는 기능을 제공합니다. 이를 활용해서 블로그를 운영하는 사례도 종종 있습니다. (일부 유료로 알고 있어요)</li><li>md 파일을 직접 작성하지 않고 글을 브라우저에서 작성/수정하려면 추가적인 기능을 붙여야 합니다. CMS(Content Management System)를 연계해서 개발하는 방법입니다. 아무래도 에디터를 직접 분이거나 외부 서비스를 연동하는 작업이다보니 직접 마크다운을 작성하는 것에 비해 개발에 힘을 더 쏟아야 한다는 단점이 있습니다.</li></ol></li></ol>&nbsp;빠르게 답변 드리고 싶어서 조금 건조하게 답변드렸는데, 더 자세한 이야기가 나누고 싶으시다면 추가로 질문 남겨주세요! 도움될 때까지 답변 드리겠습니다.&nbsp;감사합니다. 하조은 드림

완강하고 질문 드립니다

안녕하세요! 회신이 늦었습니다. 고민 많이 하고 계실텐데 답변이 늦어서 죄송합니다.&nbsp;가능하다면 전체 코드를 알려주시면 확인이 조금 더 쉬울 것 같습니다. 짐작해보건데 빌드 시점에 <code>prefetchQuery</code>가 동작하면서 로그를 남기고 있는 게 아닐까 싶어요.&nbsp;말씀주신 것처럼 Next.js의 캐시 있어서 중복 요청을 제거합니다. 이는 <code>fetch</code> 함수를 이용한 API 호출인 경우입니다. <code>fetch</code> 이전에 <code>fetchBanner</code> 내부에서 콘솔을 남기고 있는 것이라면 <code>prefetchQuery</code> 는 매번 호출될 수 있을 것 같습니다.&nbsp;기다려주셨는데 명쾌한 답변을 드리지 못한 점 양해 부탁드립니다! 코드 저장소를 알려주시면 살펴보고 빠르게 답변 드릴게요!

hajoeun

Bài viết