seopport.log

위 사진을 보면 화질이 뭔가 묘하게 안좋은 느낌이있다. img태그를 사용했을때는 원본 화질이 잘 나왔는데, 넥스트의 이미지태그로 수정하니 화질이 떨어졌다. 해결 방법은 Image태그에 quality 속성을 지정하는것 기본값이 75이고, 100으로 지정해주면 원본과 같은 화질로 출력된다. 위 사진보다 확실히 화질이 좋아진 것을 확인할 수 있다.

'Promise' 형식은 '(searchTerm: string) => void' 형식에 할당할 수 없습니다. 'Promise' 형식에서 '(searchTerm: string): void' 시그니처에 대한 일치하는 항목을 제공하지 않습니다.ts(2322) SearchBox 컴포넌트를 import하여 사용하려고 했는데 타입에러가 떴다. SearchBox에 들어가는 프롭스 타입은 return void 타입으로 아무것도 반환하지 않아야 한다. interface SearchBoxProps { onSearch: (searchTerm: string) => void; } 내가 searchBox에 넣으려는 함수인 filterDatta는 을 return하고 있다. export con..

카테고리 옵션을 클릭, 언클릭할 수 있는 메뉴의 중첩 필터링 코드이다. 카테고리 클릭시 필터조건이 추가되고, 카테고리 언클릭시는 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..