seopport.log

카테고리 옵션을 클릭, 언클릭할 수 있는 메뉴의 중첩 필터링 코드이다. 카테고리 클릭시 필터조건이 추가되고, 카테고리 언클릭시는 true로 모든 아이템이 통과된다. return에서 두 조건이 모두 true인 아이템들만 필터된다. const filterByCategoryRecipes = filteredRecipes.filter((item) => { // 카테고리를 선택했으면 필터조건추가, 아니면 true로 필터링 조건 무시(모든 아이템이 통과) const filterByFood = selectedFood ? item.RCP_TYPE === selectedFood : true; const filterByCalories = selectedCalorieNumberLevel ? item.INFO_CAR

1. queryProvider 생성 및 RootLayout에 적용 'use client'; import React from 'react'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; const QueryProvider = ({ children }: React.PropsWithChildren) => { const queryClient = new QueryClient(); return {children}; }; export default QueryProvider; //RootLayout export default function RootLayout({ children, }: Readonly) { return ( {chi..

리액트를 쓸때는 라우터의 Link 태그에 기본적으로 active 클래스가 내장되어 있기 때문에 간편하게 active 스타일링을 지정할 수 있었다. 하지만 Next의 Link 태그에는 그러한 기능이 없기 때문에 pathName을 이용해서 네비게이션 바를 구현해보게 되었다. 처음에는 useState를 사용해서 네비게이션바의 아이템을 클릭하면 아이템과 state를 비교하여 조건부 스타일링을 구현했었는데, 그렇게 하니까 사용자가 네비게이션바가 아닌 다른 버튼을 통해 다른 페이지로 이동했을 때 네비게이션 바에는 반영되지 않아 문제가 있던 상황이었다. 원했던 것은 사용자가 현재 위치한 페이지가 navBar와 동기화되는 것이었다. 1. Nav Bar 생성 우선 네비게이션 아이템 리스트를 만들고 map으로 링크를 생성..

SSG는 한번 캐시된 데이터를 계속해서 가지고 있기 때문에 수정 내역이 반영되지 않는 것이 맞지만, json server에 오타가 있어서 서버 데이터를 수정하고, dev 서버와 json 서버를 껐다 켜보고 별 짓을 다했는데도 수정 내역이 반영이 안되어서 삽질을 했다 해결방법은 이러했다. .next 폴더 밑에 cache - fetch-cache에 서버에서 가져온 캐시가 들어있다. 저 405f69c7... 파일이 서버의 데이터의 캐시를 가지고 있었다. 그래서 저 파일을 삭제하고 서버를 다시 구동하니 정상적으로 수정내역이 반영되었다. 🥲

1. Next에서 제공하는 Image 태그 임포트 import Image from 'next/image'; 2. 이미지 속성 정의 Next에서는 이미지 최적화 기능을 지원하고 있기 때문에 width, heigth 속성을 지정해주지 않으면 오류가 난다. 3. next.config.mjs 설정 만약 이미지 주소가 'https:/i.ibb.co/L0CSxK9/image.png' 라면 다음과 같이 작성하면 된다. const nextConfig = { images: { remotePatterns: [ { protocol: 'https', hostname: 'i.ibb.co', pathname: '/L9CSxK9/image.png', }, ], }, }; 만약 도메인만 작성하고 싶다면 pathname을 생략하면 된..

기본적으로 app하위의 모든 컴포넌트는 서버 컴포넌트이다. (초기 상태가 SSG) 서버 컴포넌트 노드에서 동작하는 컴포넌트 서버 컴포넌트에서 console.log()를 찍으면? => 노드가 구동되고 있는 터미널에 로그가 찍힘 클라이언트컴포넌트 클라이언트에서 동작하는 컴포넌트 클라이언트 컴포넌트에서 console.log()를 찍으면? => 브라우저 콘솔에 로그가 찍힘 "use client"로 클라이언트 컴포넌트로 변경할 수 있다. 어떻게 구분해서 사용해야할까? 사용자와의 상호작용이 있는 컴포넌트는 클라이언트 컴포넌트이다. 예시 fetch로 데이터 가져오기 = 서버 컴포넌트 백엔드의 리소스에 직접적으로 접근하기 = 서버 컴포넌트 Access Token 등 민감한 정보를 지켜야 할때 = 서버 컴포넌트 onCl..

Next.js - 웹 개발을 위한 React 프레임워크 - 기존 SPA 라이브러리(React)에서 사용하던 CSR에서 벗어나 SSR, ISR, SSG등을 가능케 함 - 폴더 기반 라우팅 - route handler로 일부 백엔드 커버 가능 - 최적화 및 번들링이 우수하다. TTV와 TTI TTV(Time To View) - 페이지의 모든 콘텐츠가 화면에 표시될 때까지 걸리는 시간 TTI(Time To Interact) - 페이지가 로드된 후 사용자가 버튼 등 상호 작용할 수 있을 때까지 걸리는 시간 - 페이지가 실제로 사용 가능한 상태가 되는 데 걸리는 시간 Next.js 는 코드스플리팅을 지원하여 사용자가 필요로 하는 부분만 우선적으로 로딩하여 TTV를 향상한다. > UX 향상 TTI 동안 리액트 코드..

Vercel은 main에 push된 내역만 자동으로 반영해준다. 내가 수정한 내역을 배포한 사이트에 반영하고 싶다면 변경내역을 main에 push해야한다. push한 브랜치가 default 브랜치여도 자동 반영되지 않는다. main만 됨!

문제 상황 원했던 것 : task 컨테이너를 클릭했을 때 상세 페이지로 이동함. 버튼을 클릭했을 때는 navigate 되지 않음. 컨테이너 요소에 navigate를 걸어놓았을 때, 그 안의 버튼을 클릭하면 기능을 수행함과 동시에 페이지가 네비게이트 되어 원하는대로 실행되지 않는 문제. 이는 이벤트 버블링 때문에 발생하는 흔한 문제다. TaskBox 내 버튼(StProgressButton) 클릭이 상위 컴포넌트 이벤트(handleDetailNavigate)를 트리거해 원치 않는 페이지 네비게이션을 발생시키는 것이었다. 해결 방안 이 문제를 해결하기 위해 이벤트 버블링을 방지하는 로직을 구현해야 한다. 버튼의 클릭 이벤트 핸들러 내에서 event.stopPropagation() 메서드를 호출함으로써, 해당 ..

1. navigate로 페이지를 이동할 때 ?키이름={값} 쿼리스트링을 추가한다. navigate(`/detail?id=${item.id}`) 2. 이동한 페이지(컴포넌트)에서 searchParams Import const [searchParams, setSearchParams] = useSearchParams(); 3. get 메서드의 값으로 1번에서 지정했던 키이름을 넣는다. const targetId = searchParams.get('id'); 값을 읽어오는 메서드: searchParams.get(key): 지정된 key에 해당하는 값을 가져온다. 해당 key에 여러 개의 값이 있더라도 첫 번째 값을 반환한다. searchParams.getAll(key): 지정된 key에 해당하는 모든 값을 가져..