next/image에 대한 질문

안녕하세요. 이미지 컴포넌트에 대해 질문 남겨주셨네요! AWS로 배포했을 때 next/image 때문에 비용이 더 올라 가나요? next/image 가 서버를 활용해 이미지 최적화를 하기 때문에 어느정도의 서버 운용 비용을 증가 시킬 수 있다는 의미로 질문을 해석했습니다. 이미지의 갯수, 페이지 방문 트래픽에 따라 차이가 있을 수 있지만 일반적인 경우라면 next/image 를 사용한다고 해서 크게 차이날 정도는 아닐 것으로 예상합니다. next/image가 비용이 비싸다면 어떤 경우에 사용하는지 궁금 합니다. 이미지는 웹 서비스의 성능에 가장 많은 영향을 끼치는 요소입니다. 특히, LCP라고 부르는 지표 에 큰 영향을 줍니다. 때문에 이미지 로딩 성능을 개선하면 웹 서비스의 성능 향상에 지대한 영향을 끼칠 수 있습니다. 이를 위해 Next.js에서는 next/image 를 제공합니다. next/image 는 다음과 같은 장점을 가지고 있습니다. 디바이스 환경에 맞는 이미지 사이즈, 포맷으로의 자동 매칭 레이아웃 시프팅 이슈 해결 (레이아웃 시프팅:이미지 로드 전과 후의 크기 차이에서 발생하는 레이아웃 트러짐 현상) 이미지 지연 로딩으로 초기 로딩 속도 개선 장점에 대한 자세한 내용은 공식 문서 를 확인해보시면 좋을 것 같습니다. 결국 next/image 를 사용했을 때의 장점이 어느정도의 비용 발생보다 큰 가치를 제공한다고 판단했을 때 next/image 를 쓰는 것이라 말할 수 있을 것 같습니다. 질문 남겨주셔서 감사합니다.

데이터 재검증 방법

안녕하세요! 질문 남겨주셔서 감사합니다. 하나씩 답변드려볼게요! 클라이언트 컴포넌트에서 어떠한 동작을 수행한 후 데이터를 재검증 하려면 route handler로 요청을 보내고 route handler 내에서 revalidateTag 등을 사용하는 방법밖엔 없는걸까요? revalidateTag 를 사용하는 이유에 대해 생각해보면 좋을 것 같습니다. 해당 함수는 캐시된 데이터를 비우고 새로운 데이터를 사용할 수 있도록 만들기 위해 사용합니다. 강의에서 캐시된 데이터는 서버에 존재하는 상태입니다. 때문에 서버에 있는 캐시를 비우기 위해 Route Handler 를 이용해 서버에서 revalidateTag 를 호출해 캐시를 비워야만 합니다. Route Handler 를 이용하지 않고 서버에서 캐시를 비우는 방법으로는 Server Actions를 활용하는 방법이 있을 수 있습니다. 이는 강의에서 다루지 않았지만 공식 문서 에서 다루고 있는 방식을 참고하시면 좋을 것 같습니다. 결국 서버에서 캐시된 값은 서버에서 해제 해야 한다는 것이 규칙임을 알 수 있습니다. 직접 새로고침하지 않고 캐시를 지움과 동시에 바로 화면상의 모습도 갱신하려면 어떻게 해야 하나요? 새로고침 없이 화면 상의 모습을 갱신하기 위해선 클라이언트 컴포넌트를 사용해야 합니다. 새로고침 없이 데이터 갱신이 필요한 곳을 모두 클라이언트 컴포넌트로 활용하는 방법입니다. 이는 기본적인 React 활용 방식과 동일하게 API 응답값을 useState 와 같은 상태로 저장해서 관리하는 방식입니다. next.js에서도 react처럼 axios를 많이 사용하나요? 이번 App Router가 등장한 Next.js 13 이후에는 fetch 사용을 권장하고 있습니다. 캐시와 같은 성능 향상의 이점을 보기 위함입니다. 하지만 사용성 등에서 불편함을 느끼고 Axios와 같은 라이브러리를 쓰는 사례도 많습니다. 관련 사례를 소개하는 글을 남겨둘게요! https://blog.deercorp.com/next-js-app-router-and-fetch-library/ 추가 질문 있으시면 언제든 남겨주세요! 답변이 도움되셨으면 좋겠습니다. 감사합니다.

next.js 에서 서버 컴포넌트 비중을 늘리는 이유

안녕하세요! 남겨주신 질문에 답변 드릴게요. 프로젝트를 서버 컴포넌트의 비중을 늘린다면 이점은 무엇인가요? 서버 컴포넌트의 비중이 늘어난다는 건 브라우저에서 해석할 컴포넌트가 줄어든다는 의미입니다. 따라서 JavaScript 번들 파일의 크기가 줄어듭니다. 이는 전체적인 어플리케이션의 로딩 속도 개선에 긍정적인 영향을 끼칠 수 있습니다. 서버 컴포넌트의 비중을 늘리면 번들 크기의 감소로 사용자 경험을 최적화 하는 것이라서 next.js를 사용하는 것인가요? 이 부분은 답하기에 모호한 부분이 있는데요. 질문의 의도를 두 가지로 나눠서 답변드려보겠습니다. 만일 질문의 의도가 "번들 사이즈를 줄이기 위해 서버 컴포넌트를 활용하는 것인가요?" 라면 답은 "Yes" 입니다. 브라우저가 해야할 일을 최대한 서버가 처리해서 번들 사이즈를 줄여 로딩 속도, 퍼포먼스 향상에 도움을 주기 위해 서버 컴포넌트를 활용합니다. 허나 "Next.js를 사용하는 이유가 서버 컴포넌트가 주는 장점 때문인가요?"라는 의도로 질문 남겨주신 것이라면 답은 "No"입니다. 현재를 기준으로 Next.js는 서버 컴포넌트를 사용하기 가장 편리한 프레임워크가 맞습니다. 때문에 서버 컴포넌트를 활용해 서비스를 개발하기 위해서 Next.js를 도입할 수 있죠. 하지만 서버 컴포넌트는 Next.js의 전유물이 아닙니다. 이후 Remix와 같은 다른 프레임워크에서도 서버 컴포넌트를 활용할 수 있게 될 예정입니다. 따라서 서버 컴포넌트를 위해 Next.js를 쓴다고 잘라 말하기 어려운 부분이 있습니다. Next.js는 서버 컴포넌트가 없이도 React를 사용하는 개발자에게 개발 경험을 비롯한 퍼포먼스 개선에 도움을 주는 프레임워크 입니다. 서버 컴포넌트가 없는 13 버전 이전의 Next.js, Pages Router가 존재하는 이유입니다. 질문에 대한 답이 되었으면 좋겠네요. 추가 질문이 있으시다면 언제든 편하게 남겨주세요! 감사합니다.

route.ts에 async 키워드가 필요한가요?

안녕하세요! 질문 남겨주셔서 감사합니다. 말씀주신 것처럼 해당 함수에 async 키워드가 사용되고 있습니다. 말씀주신 것처럼 내부에 await 를 사용하지 않고 있어서 async 키워드가 없어도 괜찮습니다. 하지만 일반적으로 API에서는 비동기를 제어하는 경우가 많아 async 키워드를 넣어둔 상태입니다. 현재 상황에선 제거해도 무방합니다. 좋은 포인트 짚어주시고 질문 남겨주셔서 감사합니다. 다른 부분에도 궁금증 있다면 편하게 질문 남겨주세요!

import 절대경로 설정 방법 질문 드립니다!

안녕하세요! 좋은 질문 남겨주셔서 감사합니다. 해당 설명은 tsconfig.json 내에 있는 paths 설정을 통해 적용하고 있어요! 코드는 아래의 링크를 통해 확인하실 수 있어요! https://github.com/hajoeun/weather-app/blob/1a15ed20d5621eb86a0220f8716e2d4aa9eb1c1c/tsconfig.json#L21-L23 "paths": { "@/*": ["./src/*"] } 혹시 적용해보시고 동작하지 않는다면 작업 중이신 코드를 알려주시면 도움 드릴겠습니다. 질문 남겨주셔서 감사합니다!

기존 react 에서 navigate 에 state 로 데이터를 전달했습니다.

정호님, 안녕하세요! useRouter 을 활용해 페이지 간 데이터를 전달하는 방법에 대해 질문 주신 것으로 이해했습니다. 말씀주신 것처럼 AppRouter를 사용하는 next/navigation 에서는 useRouter 를 이용해 push 를 할 때 URL에 쿼리스트링을 붙여 데이터를 전달하는 것이 유일한 방법이라고 알고 있습니다. 데이터를 전달 받은 페이지에선 useSearchParams 를 사용해 데이터를 조회하게 되는데 이때 참고하시면 좋을 링크를 하나 첨부해두겠습니다. 마이그레이션에 도움되셨으면 좋겠습니다! https://github.com/vercel/next.js/discussions/47583#discussioncomment-5449707 React를 Next.js로 마이그레이션하는 과정에 또 다른 질문이 있으시다면 언제든 질문 남겨주세요! 감사합니다.

VSCode 확장프로그램은 어떤 것을 사용하셨나요?

안녕하세요! 질문 남겨주셔서 감사합니다. 제가 확장 프로그램에 대한 언급을 하지 않아 궁금하셨을 것 같습니다. 저는 GitHub Copliot 이라는 확장 프로그램을 사용하고 있습니다. 답변이 도움이 되었길 바랍니다!

환경변수 오류

안녕하세요! 환경변수 설정에서 어려움을 겪고 계시군요. 먼저 강의에서 조금 더 친절하게 가이드 드리지 못해서 죄송합니다. 현재 보이는 에러 메시지로 미뤄 짐작했을 때 두 가지 가능성이 예상됩니다. API 제공하는 서버의 장애 혹은 오류로 인한 일시적인 현상일 가능성 API_KEY 가 잘못 설정되었을 가능성 아마 시간을 두고 여러차례 시도해보셨을테니 2번이 더 높은 가능성이 있지 않을까 싶습니다. 코드 전체를 확인하기 전에는 정확한 도움을 드리기 어려운 부분이 있습니다. 혹시 작업 중이신 저장소의 주소를 남겨주실 수 있을까요? 댓글로 남겨주셔도 좋고 메일로 보내주셔도 좋습니다. 제 메일은 hello@hajoeun.dev 입니다. 저장소를 알려주시기 어렵다면 fetch 요청의 결과인 res 값을 console.log 로 찍어 실제 에러 메시지가 어떻게 전달되었는지 확인해보시고 그걸 캡쳐해서 올려주시면 확인해볼 수 있을 것 같습니다. 질문 남겨주셨는데 한 번에 해결해드리지 못해 죄송합니다. 댓글 남겨주시면 빠르게 도와드리겠습니다. 감사합니다.

Create React App에서 Next.js로 마이그레이션하기 의 깃허브 소스도 npm i 하면 에러가 발생합니다.

억수님, 안녕하세요! 현재 작업 중이신 환경의 Node.js 버전 정보를 알 수 있을까요? node -v 명령어를 통해 확인하실 수 있습니다. 답변 남겨주시면 빠르게 도움드릴 수 있도록 하겠습니다.

Cannot find module 에러

억수님, 안녕하세요! 질문 확인이 늦었습니다. 혹시 해당 에러를 마주한 상황에 어떤 명령어를 입력하셨는지 확인해주실 수 있을까요? 답변 남겨주시면 이번에는 빠르게 도움 드릴 수 있도록 하겠습니다. 감사합니다.