인생 투자 노트 📒

최근 Cursor, Antigravity IDE 사용해서 코딩을 주로 했었다.Claude가 대표적인 터미널 기반인데 이로써 가장 큰 장점은 에디터를 타지 않는다는 점이다.Gemini CLI도 출시되었다고 해서 사용해봤고 최근 skill도 설정 가능하다고 해서 찾아보고 적용하게 된 내용을 정리했다. 우선 각 프로젝트에 커스텀하게 스킬을 적용하는 방법은 .gemini/skills/ 또는 .agents/skills/ 폴더를 만든 뒤 하위에 SKILL.md 파일을 만든 후 스킬을 내용은 해당 문서에 작성하면 된다. 또는 아래 명령어로 설치도 가능하다.gemini skills install https://github.com/user/repo.git 하지만 이것도 귀찮다.잘 만들어진 skill 문서를 넣으면 되는데..

error.tsx 페이가 존재하는 위치에 페이지에서 에러가 발생하면 해당 에러 컴포넌트가 노출된다.부모에도 error.tsx가 존재하고 페이지 자신 위치에도 존재할 경우 가까운 error.tsx로 덮어쓰게 된다.error.tsx 위치하는곳의 레이아웃을 적용하기때문에 상황에 따라서는 같은 에러 화면을 페이지별로 다르게 둬야할수도 있다. "use client";import { useEffect } from "react";export default function Error({ error, reset,}: { error: Error; reset: () => void;}) { useEffect(() => { console.log(error.message); }, [error]); return ..

서버에서 클라이언트에게 전송하는 데이터가 너무 큰 경우 데이터를 잘개 쪼개서 네트워크에 보내는 기술을 말한다.일부 데이터를 가지고 바로 동작이 가능하기때문에 사용 경험이 좋게된다. (덜 기다리게됨)이런 기술을 Next.js에 적용한 것을 말하는데 데이터 전달이 필요 없는 경우는 먼저 보여주고나머지 데이터가 필요한 컴포넌트의 경우 스켈레톤을 먼저 보여주고 이후에 데이터가 전송 되면 온전하게 보여지게 한다. 검색 페이지 스트리밍 적용page.tsx 파일이 있는 폴더 위치에 loading.tsx 파일을 생성해주면 로딩중에 적용해준다. 주의 할 점layout 처럼 하위 폴더에도 동일하게 적용된다.async 붙은 비동기 컴포넌트에만 적용된다.브라우저에서 쿼리 스트링이 변경될때는 작동하지 않는다.http://loc..

export const dynamic = "auto"; //defaultexport const dynamic = "force-dynamic"; // dynamic 페이지로export const dynamic = "force-static"; // static 페이지로export const dynamic = "error"; // static 페이지로(불가능하면 에러를 발생) force-static 변경하면 동적 데이터 값이 undefind로 변경되고 fetch 캐싱하지 않은 경우 강제로 캐싱 상태로 변경한다.그래서 정상적으로 기능이 동작하지 않게된다. 그외 다음과 같은 옵션도 제공되고 있다. 클라이언트 라우터 캐시페이지 이동시 중복되는 레이아웃이 존재할때 Next 서버에서 받아오지 않고 클라이언트 라우터 캐..

js fetch가 아닌 Next의 fetch 에서만 제공하는 옵션 1. {cache: "no-store"} : 기본값데이터 캐시를 하지 않고 BE 서버에 요청후 데이터를 받아온다.즉 캐싱하지 않음. 2. {cache: "force-cache"}무조건 캐싱하기 때문에 저장된 데이터를 받아온다.변경되지 않음. 3. {next: {revalidate: 10}}10초동안 캐싱할수 있도록 설정할수 있다. 4. {next: {tags: ['a']}}On Demand Revalidate로 요청이 들어 왔을때 데이터를 업데이트 하는 방식으로On Demand ISR 같은 방식을 말한다. 리퀘스트 메모이제이션클라이언트에서 요청이 오고 렌더링 결과가 전달되기 전에 중복되는 요청을 방지하기 위해서 캐싱하는 것이다.렌더링이 ..

Next.js는 별도 설정이 필요 없기 기본적으로 서버 컴포넌트로 인식한다.클라이언트 컴포넌트로 변경하려면 문서 최상단에 `"use client";` 키워드를 추가해준다. 1. 서버 컴포넌트에는 브라우저에서 실행되는 코드가 포함되면 안된다.서버 컴포넌트는 서버에서 실행되는 컴포넌트이기때문에 당연하게도 브라우저에서 실행되는 코드가 포함되면 안된다.만약 브라우저에서 동작하는 코드를 추가하면 에러를 발생한다. 참고: 컴포넌트를 별도 컴포넌트 폴더가 아닌 페이지 라우터 안에 위치하게 하는것을 co-location이라고 한다. 2. 클라이언트 컴포넌트는 클라이언트에서만 실행되지 않는다.사전 렌더링을 위해서 서버에서 1번 실행되고하이드레이션을 위해 브라우저에서 1번 실행되기때문에 총 2번 실행된다 3. 클라이언트 ..

app 라우터의 페이지 라우터 방식은 폴더 하위에 `page.tsx` 존재할때 해당 경로로 페이지가 생성된다.그외는 pages 라우터와 동일한 규칙을 갖는다. [id], [...id], [[...id]] 옵션 등등 src/app/layout.tsx 파일이 존재하는데 root layout으로 모든 페이지에 적용되는 레이아웃으로 필수적으로 존재해야한다. (삭제가 불가능)import type { Metadata } from "next";import { Geist, Geist_Mono } from "next/font/google";import "./globals.css";const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"],}..

ISR 증분 정적 재생성SSG 방식으로 동작하나 일정 시간이 지나면 SSG를 다시 생성해서 업데이트 하는 방식을 말한다. `getStaticProps` 의 반환값에 revalidate 값을 지정해주면 된다. export const getStaticProps = async () => { const [allBooks, recoBooks] = await Promise.all([ fetchBooks(), fetchRandomBooks(), ]); return { props: { allBooks, recoBooks, }, revalidate: 3, // 초단위 };};export default function Home({ allBooks, recoBooks,..