질문답변, React + Typescript 사용중 발생한 오류

질문:스타일컴포넌트 쓰다가 너무불편해서 모듈로 바꾸려고하는데 타입스크립트가 계속 모듈파일을 못읽네요.

1. typescript-plugin-css-modules 인스톨
2. declare module "*.module.css"; 선언

3. tsconfig 파일에 컴파일러옵션에     "plugins": [{ "name": "typescript-plugin-css-modules" }] 추가

 

강사님의 추천 안:

가끔은 설정 문제가 아닌 VSCode TS 서버가 오작동하는 경우도 있더라구요
ctrl + shift + p 누르신 다음 "TS 서버 다시시작"도 한번 진행해보세용.

 

수강생1 추천:

src 바로 밑에 global.d.ts 만드시고 
declare module "*.scss" {
  const content: { [className: string]: string };
  export = content;
}

내용 넣어줘보세요.

 

수강생2 추천:

https://velog.io/@dyorong/ts

[typescript] import './App.module.css' 에러 해결

 

ChatGPT 3.5 

답:

It sounds like you're encountering issues setting up CSS modules in your React + TypeScript project. Let's go through some troubleshooting steps to see if we can resolve this:

React + TypeScript 프로젝트에서 CSS 모듈을 설정하는 데 문제가 발생한 것 같습니다. 이 문제를 해결할 수 있는지 알아보기 위해 몇 가지 문제 해결 단계를 살펴보겠습니다.

1. Ensure Proper Installation:  적절한 설치를 확인해보세요.
   • Make sure you've installed typescript-plugin-css-modules correctly. You can do this by running:
   • typescript-plugin-css-modules를 올바르게 설치했는지 확인하세요. 다음을 실행하여 이 작업을 수행할 수 있습니다. 
   • cssnpm install typescript-plugin-css-modules --save-dev
   • Double-check that it's listed in your package.json as a devDependency.
   • package.json에 devDependency로 나열되어 있는지 다시 확인하세요.
2. Check TypeScript Configuration: TypeScript 구성을 확인하세요.
   • Confirm that you've added the appropriate declaration for CSS modules in your tsconfig.json file:
   • tsconfig.json 파일에 CSS 모듈에 대한 적절한 선언을 추가했는지 확인하세요.
   • json{ 

               "compilerOptions": { 

               ... 

               "plugins": [{ "name": "typescript-plugin-css-modules"}] 

                  } 

             }
   • Ensure there are no typos or syntax errors in your tsconfig.json.
   • tsconfig.json에 오타나 구문 오류가 없는지 확인하세요.
3. Verify File Naming Convention: 파일 명명 규칙 확인:
   • CSS modules typically use the .module.css file extension. Ensure that your CSS files follow this convention (e.g., styles.module.css).
   • CSS 모듈은 일반적으로 .module.css 파일 확장자를 사용합니다. CSS 파일이 이 규칙(예: styles.module.css)을 따르는지 확인하세요.
4. Check File Paths: 파일 경로 확인
   • Confirm that your CSS module files are located in the same directory or a subdirectory relative to the components that use them.
   • CSS 모듈 파일이 해당 파일을 사용하는 구성 요소와 동일한 디렉터리 또는 하위 디렉터리에 있는지 확인하세요.
   • Verify that the file paths in your import statements are correct.
   • 가져오기 문의 파일 경로가 올바른지 확인하세요.
5. Restart Development Server: 개발 서버를 다시 시작합니다.
   • Sometimes, changes to TypeScript configuration or plugin installation may require restarting your development server for the changes to take effect. Try stopping and restarting your development server.
   • 경우에 따라 TypeScript 구성 또는 플러그인 설치를 변경하면 변경 사항을 적용하기 위해 개발 서버를 다시 시작해야 할 수도 있습니다. 개발 서버를 중지했다가 다시 시작해 보세요.
6. Check for Errors in Development Console: 개발 콘솔에서 오류 확인
   • Inspect your browser's console for any error messages related to CSS module imports. This can provide valuable clues about what might be going wrong.
   • CSS 모듈 가져오기와 관련된 오류 메시지가 있는지 브라우저 콘솔을 검사하세요. 이는 무엇이 잘못될 수 있는지에 대한 귀중한 단서를 제공할 수 있습니다.
7. Test with a Simple Example: 간단한 예제로 테스트
   • Create a minimal example component and corresponding CSS module to see if you can get CSS modules working in isolation. This can help isolate whether the issue is specific to certain components or configurations.
   • 최소한의 예제 구성 요소와 해당 CSS 모듈을 만들어 CSS 모듈이 독립적으로 작동할 수 있는지 확인하세요. 이를 통해 문제가 특정 구성 요소나 구성에만 국한되는지 파악하는 데 도움이 됩니다.
8. Seek Help from Community: 커뮤니티에서 도움을 구하세요:
   • If you've tried everything and still can't resolve the issue, consider seeking help from online communities like Stack Overflow or forums dedicated to React and TypeScript development. Sometimes, others may have encountered similar problems and can offer valuable insights.
   • 모든 방법을 시도했지만 여전히 문제를 해결할 수 없다면 Stack Overflow와 같은 온라인 커뮤니티나 React 및 TypeScript 개발 전용 포럼에서 도움을 구하는 것이 좋습니다. 때로는 다른 사람들도 비슷한 문제를 겪었을 수 있으며 귀중한 통찰력을 제공할 수 있습니다.

By systematically going through these steps, you should be able to identify and resolve the issue with CSS modules in your React + TypeScript project. Let me know if you need further assistance with any specific step!

이러한 단계를 체계적으로 진행하면 React + TypeScript 프로젝트의 CSS 모듈 문제를 식별하고 해결할 수 있습니다. 특정 단계에서 추가 지원이 필요한 경우 알려주시기 바랍니다!

 

질문자 본인 수정결과:

 

global.d.ts 파일에 꼭 넣어야 되는거였네요 .

 

추가로 참고사항:

https://nextjs.org/docs/app/building-your-application/routing/route-handlers

Routing: Route Handlers | Next.js