[React] Day_63 개인 프로젝트 작업 뜨라블슈띵 (2)

 

오늘도 버그와 싸운 림졍림졍... ㅇ<-<.

 

 

이제 짜잘한 오류들이랑.. 디자인만 손보면 과제도 끝난다..!

그런의미로 오늘도 적어보는 뜨라블슈팅..

레쯔고

 

뜨라블슈띵 (1) - Next.js Image 작동 오류

 

그렇대~

 

문제

 

Image 태그를 사용해서, 외부 URL에서 이미지를 가져오려 했지만,

이미지가 로드되지 않아 화면에 표시가 되지 않는 오류가 발생하였다..!!

 

원인

 

Next.js는 보안상 허용되지 않은 외부 도메인의 이미지를 불러올 수 없으므로

외부 이미지 호스트를 명시적으로 허용해줘야 한다..!

 

해결 방법

 

next.config.js 파일에 remotePatterns 사용 → 허용할 이미지 도메인 명시

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'ddragon.leagueoflegends.com',
        pathname: '/**', // 해당 도메인의 모든 경로 허용
      },
    ],
  },
};

export default nextConfig;

 

 

remotePatterns :  외부 이미지 리소스를 허용을 위한 설정 옵션

protocol, hostname, pathname 지정 시, 해당 외부 리소스의 이미지를 로드할 수 있음!

 

결론 = 도메인에서 정상적으로 업로드 완! ^-^)b

 

 

 

트러블슈팅 (2) - Tailwind CSS가 다른 폴더로 이동하면 깨진다..!

 

????? 아니 그래서 이유가뭔데..?

 

문제

 

오늘도 뚱땅뚱땅 

tailwind CSS가 app 폴더 내에서만 작동하고,

다른 폴더(예: src/pages, src/components)로 넘어가면 스타일이 적용되지 않더라...

단순히 .next 캐싱 문제라고 생각하여

지우고 다시 하기를 반복하거나,

app에서 작업하고 다시 돌려보내는

일명 노가다(?)를 하면서 보내야 했더니...

 

원인

 

tailwind CSS의 content 설정이 특정 폴더(app)만 스캔하도록 지정되어 있어 다른 폴더를 인식하지 못했음!!

 

해결 방법

 

tailwind.config.ts (또는 tailwind.config.js) 파일의 content 배열에 필요한 경로 추가하기

(나의 경우, 그냥 경로에 app만 지워줬다 ^0^)

content  내부 = tailwind가 클래스명을 탐색할 파일 경로를 설정

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/**/*.{js,ts,jsx,tsx,mdx}", // app만 지움 ^0^)b
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
};

export default config;

 

결론 = 다른 폴더로 변경되어도  CSS 안깨짐!! ^0^)b

 

 

오늘도 뜨라블탕탕 끝-!

내일.. 작성해야겠지...? ㅎㅅㅎ...!?