인프런 커뮤니티 질문&답변
작성한 질문수
`2.4 Shadcn/ui를 소개합니다` 에서 에러가 뜹니다.
작성
·
35
0
강의대로 따라가다가 shadcn을 설치 후 app.tsx에 다음과 같은 경고가 뜹니다.
import "./App.css";
import { Button } from "@/components/ui/button";
function App() {
<div>
<Button>버튼!</Button>
</div>;
}
export default App;
이대로만 따라서 쳤는데 button.tsx에서 [{
"resource": "/Users/minsu/Documents/onbite-exam/src/components/ui/button.tsx",
"owner": "eslint4",
"code": "react-refresh/only-export-components",
"severity": 4,
"message": "Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components.",
"source": "eslint",
"startLineNumber": 62,
"startColumn": 18,
"endLineNumber": 62,
"endColumn": 32,
"modelVersionId": 2
}]라고 에러가 뜹니다.
추가로 index.css에서도 에러가 다음과 같이 뜹니다..
신경 안써도 되는 에러일까요?
소스코드는 구글드라이브로 공유드립니다.
https://drive.google.com/file/d/1gjyp7Io1bA6Tb2hriqhQN8T-jInXo7kY/view?usp=drive_link
답변 2
0
안녕하세요 hinpuo님 이정환입니다.
남겨주신 react-refresh/only-export-components는 말 그대로 “에러”가 아니라 경고 메시지입니다. 그래서 지금 경고가 보이더라도 프로젝트가 깨지거나 버튼이 동작하지 않는 문제가 생기는 것은 아니고, 강의 실습을 진행하는 데도 직접적인 영향은 없습니다.
이 경고가 뜨는 이유를 조금 더 쉽게 설명드리면, 개발 환경에서 React는 코드를 저장할 때마다 화면을 빠르게 갱신해주는 기능(Fast Refresh)을 사용합니다. 이 기능은 보통 파일 하나가 ‘화면에 렌더링되는 React 컴포넌트(예: Button 컴포넌트)만’ 담고 있을 때 가장 안정적으로 동작합니다.
그런데 shadcn/ui의 button.tsx 파일은 버튼 컴포넌트뿐만 아니라, 버튼의 스타일 변형(variant)이나 클래스 조합처럼 컴포넌트 동작을 돕는 상수/함수/설정 값도 같은 파일 안에 함께 들어 있는 형태입니다. 그리고 이 형태는 라이브러리가 이미 정해둔 고정적 형태이므로 우리가 직접 수정하는건 그닥 권장되지는 않죠 ... 🥲
따라서 ESLint가 이 상황을 보고 “Fast Refresh 관점에서 이상적인 형태는 아니지만, 동작 자체가 불가능한 건 아니다”라는 의미로 경고를 띄워주는 것입니다.
0
안녕하세요, 인프런 AI 인턴입니다. hinpuo님.
다음과 같은 문제로 어려움을 겪고 계신 것 같네요:
문제 요약
button.tsx관련 경고: “Fast refresh only works when a file only exports components” 경고는 해당 파일에서 끊임없이 변경이 가능한 기능인 “Fast Refresh”가 활성화되지 않음을 알려주는 것입니다. 이는 일반적으로 한 파일에서 컴포넌트 외에도 다른 상수나 함수들이 존재하는 경우 발생할 수 있습니다.
index.css관련 경고: “Unknown at rule” 경고는 CSS 파일에서 사용되고 있는 특정 규칙들이 해석되지 않음을 나타냅니다. 이는 보통 CSS 전처리기(예: PostCSS)를 사용하는 경우 생길 수 있는 문제입니다.
해결 방법
button.tsx경고 해결:button.tsx파일이 컴포넌트 외에 다른 객체나 함수를 내보내고 있는지를 확인해 보세요. 만약 그런 경우라면, 이를 별도의 파일로 분리하여 상태 관리를 정리할 수 있습니다.
index.css경고 해결:- 사용 중인 CSS 전처리기나 빌드 도구 설정 파일에서 해당 규칙들이 제대로 지원되는지를 확인합니다. 예를 들어,
postcss.config.js나tailwind.config.js에서 사용 중인 규칙이 제대로 설정되어 있는지 검토합니다.
- 사용 중인 CSS 전처리기나 빌드 도구 설정 파일에서 해당 규칙들이 제대로 지원되는지를 확인합니다. 예를 들어,
유사한 질문 및 답변
이와 유사한 문제에 대해 다른 사용자들이 작성한 질문과 답변도 유용할 수 있습니다. 다음 URL에서 관련된 내용을 참고할 수 있습니다:
- “ESLint와 관련된 문제 해결 방법”
- “CSS 전처리기 설정 검토”
해당 링크의 내용을 참고하셔서 문제를 해결하는 데 도움을 받으시기 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
친절한 답변 감사합니다!