본문 바로가기

NEXTjs5

[Nuxtjs] Plugins의 inject를 쓰는 이유(feat. chatGPT에 물어봤어요.)

Nuxt.js에서 "inject" 플러그인은 애플리케이션 컨텍스트에 변수를 주입하여 애플리케이션 전체에서 변수를 전역적으로 사용할 수 있도록 하는 데 사용됩니다. 컨텍스트는 애플리케이션의 모든 구성 요소에 전달되는 개체이며 수명 주기 후크, 구성 요소 및 애플리케이션의 다른 부분에서 context 매개 변수를 사용하여 액세스할 수 있습니다. 이것은 다음과 같은 다양한 목적에 유용할 수 있습니다. 그래서 사용하면 좋은 점은? 공통 데이터 공유: "inject" 플러그인을 사용하여 애플리케이션 전체에서 API의 기본 URL과 같은 공통 데이터를 저장하고 공유할 수 있습니다. 서비스 주입: "inject" 플러그인을 사용하여 로깅 서비스와 같은 서비스를 애플리케이션에 주입하여 구성 요소에서 쉽게 액세스하고 재.. 2023. 2. 4.

[Nextjs] useRouter의 query를 useEffect에서 사용하기

개요 구현하려는 기능은, 원래 작성되어 있는 블로그 글을 다시, 업데이트하는 기능이다. 우선, 해당 페이지는 pre-rendering이 필요없는 페이지이다. 그래서, CSR을 사용하려고 했다. nextjs의 dynamic route 스펙을 사용해서, /wirte/[id].js라는 page를 만들었고, [id].js에서 useRouter hook을 사용해서, [id]의 id를 추출했다. 그리고, useEffect hook을 사용해서, nextjs의 api routes의 api를 호출했다. api routes의 url은 '/post/[id]'이다. 그래서, 다음 코드처럼, 호출했는데, 에러가 발생하였다. /** * @description CSR */ export default function WriteId(.. 2022. 10. 4.

[Nextjs] Pre-rendering과 Data fetching

https://nextjs.org/learn/basics/data-fetching/blog-data Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org Data Fetching Overview getStaticProps() nextjs가 빌드타임에 'getStaticProps'가 props를 반환하면서 페이지를 pre-render할 거다. export async function getStaticProps(context) .. 2022. 9. 23.

[Nextjs] 설치

npx create-next-app nextjs-blog --use-npm --example .., yarn create next-app blog --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter" next/Link와a 의 차이점 next/Link는 Client Side Navigate로 동작함. *Client Side Navigate는 browser에서 url을 직접 쳐서 이동하는 것과 달리, js상에서 page 컴포넌트를 교체함. a태그는 페이지 자체를 다시 리로드함. 페이지가 새로고침됨. 그니까, next/link는 링크로 이동할 페이지에 대해서, prefetch를 하거나, client-side-rende.. 2022. 9. 21.

[Nextjs] 기본 절대 경로 설정하기

홈 디렉토리 경로에 jsconfig.json 폴더에 다음을 작성 { "compilerOptions": { "baseUrl": "src" } } 2022. 9. 20.

티스토리툴바