2024/12/18 2

[lol 정보 사이트]트러블슈팅

상황 🤔 lol api를 불러오는 함수작성후, 터미널에서 해당 함수를 불러와서 데이터 확인에러 👻에러는 없었지만, 데이터가 안찍힘😱😱😱 해결과정 👀api주소 확인 => 맞음!!!함수가 잘못됐나? => 아님!!!해결 🌟ㅎ... 브라우저에서 새로고침하니 터미널에 찍힘... 밥오...상황 🤔 이미지 불러오기 에러 👻 해결과정 👀다시 코드보며 생각해보니...next에서 Image태그를 쓸때 next.config.mjs에 config 써야하는걸 깜빡,, 해결 🌟상황 🤔 GET함수로 API 불러오기 에러 👻 해결과정 👀차근히 코드를 다시 확인 => 코드상에는 문제가 없음api key가 설정되어있는 환경 변수문제인가? => postman으로 확인시 데이터를 잘 불러와짐console.error..

[next.js]이미지 최적화, 검색 엔진 최적화(SEO)

이미지 최적화웹 성능을 개선하는 중요한 작업으로, 다음 방법들을 활용할 수 있음차세대 형식 사용: WebP, AVIF로 변환디바이스 크기에 맞는 이미지 제공: 적절한 해상도로 최적화레이지 로딩 적용: 스크롤 시 필요한 이미지만 로드블러 이미지 사용: 로딩 중에도 사용자 경험 개선*이미지 최적화 예제import Image from "next/image";export default function BookItem({...}: BookData) { return ( ... );} * 외부 이미지 로드 문제 해결외부 도메인의 이미지를 사용하려면 next.config.js 파일을 수정/** @type {import('next').NextConfig} */const nextConfig = { ..

넥스트js 2024.12.18