클론코딩15 Next.js로 SNS x.com 클론코딩하기 - 15 Next 배포 모드 기존 페이지 라우터의 넥스트의 배포 모드에는 총 3가지의 모드가 있었다고 합니다. 앱 라우터에선 2가지 모드로 줄었다고 합니다. Static Mode Deploying: Static Exports | Next.js Next.js enables starting as a static site or Single-Page Application (SPA), then later optionally upgrading to use features that require a server. nextjs.org next.config.js 파일 안에 아래와 같이 output 속성을 export 로 지정해줍니다. /** @type {import('next').NextConfig} */ const nextCo.. 2024. 2. 22. Next.js로 SNS x.com 클론코딩하기 - 13 메타데이터 https://nextjs.org/docs/app/building-your-application/optimizing/metadata#merging Optimizing: Metadata | Next.js Use the Metadata API to define metadata in any layout or page. nextjs.org 각 page.jsx / page.tsx 에서 export const metadata 를 통해 메타데이터를 직접 입력해줄 수 있습니다. 물론 layout 파일 또한 동일한 방법으로 메타데이터를 지정해줄 수 있으나 layout 과 page 동일 계층이라면 page 내용의 메타데이터로 보여지게 됩니다. export const metadata = { title: "홈 / .. 2024. 2. 19. Next.js로 SNS x.com 클론코딩하기 - 12 Optimistic update 복습 전 포스팅에도 언급했었지만 긍정적 업데이트는 곳곳에 잘 쓰이는 편이라 팔로우/언팔로우 기능을 가지고 복습 겸 정리를 합니다. Optimistic update 란 사용자가 서버에 요청 시 성공될거라는 가정(긍정적)으로 미리 UI를 업데이트 시켜준 다음 -> 서버 검증 후 -> 업데이트/롤백을 하는 방식 이 방식을 통해 동작에 대한 빠른 피드백을 받을 수 있어서 애플리케이션이 빠르게 반응한다고 느껴 UX 경험이 향상됩니다. 다만 의문점이 생길 수 있는 게, 그저 서버의 성능을 높이면 되는 문제라고 여길 수 있는데 이는 사용자의 네트워크 환경이 어떠냐에 따라 서버의 성능과는 무관하게 응답 속도가 달라질 수 있습니다. 그렇기에 그저 단순히 서버 성능을 높이면 되는 것과는 다.. 2024. 2. 18. Next.js로 SNS x.com 클론코딩하기 - 11 useMutation react query 의 훅 중 하나로, 서버에 변경 작업을 요청할 때 사용합니다. 즉 Post 요청을 할 때 사용하게 됩니다. 선언적으로 데이터를 언제 업데이트 할 지 직접 지정해주어 useMutation의 반환값인 mutate 함수를 사용하여 mutation 작업을 수행할 수 있게 합니다. 사용방법은 간단합니다. 먼저 데이터를 fetching 하는 함수를 만든 다음 그 함수를 useMutation의 매개변수에 담아 return 하는 함수를 만들어줍니다. import {useMutation} from 'react-query'; const addPost = (post) => { return axios.post(url, post); } export const useAddPost = (.. 2024. 2. 16. 이전 1 2 3 4 다음
