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/*"] } 혹시 적용해보시고 동작하지 않는다면 작업 중이신 코드를 알려주시면 도움 드릴겠습니다. 질문 남겨주셔서 감사합니다!