Skip to content

트러블슈팅

Jump to bottom
Suyeon edited this page Dec 5, 2023 · 11 revisions

🚨 구현

🚨 Build

🤔 @emotion/styled auto importing 문제

문제 설명

아래와 같이 styled 모듈을 불러올 때 자동완성이 되지 않는 문제가 있었습니다. 또한 파일을 불러오는 경로가 types/index.d.ts 가 아닌 dist/emotion-styled.cjs.js 경로였습니다.

// @ emotion/styled/dist/emotion-styled.cjs.js 를 가리키는 상태 + 자동 완성이 안됨
import styled from '@emotion/styled`;

문제 해결

  1. tsconfig 파일 수정

자바스크립트 파일에선 자동으로 import 가 되고 tsx ts 파일에서만 해당 문제가 있다는 것을 알았습니다. 따라서 tsconfig 에 문제가 있다고 판단하였습니다. tsconfig 파일의 다음 프로퍼티를 수정해줌으로써 자동 import 문제를 해결했습니다.

"compilerOptions": {
  "moduleResolution": "node", // "bundler" -> "node" 로 수정
}
  1. moduleResolution?

moduleResolution 프로퍼티는 컴파일러가 모듈을 불러올 때 (import) 어떤 모듈을 가져와 해석하는지를 지정합니다. Vite JS 를 프로젝트에 사용하며 자동으로 bundler 가 지정되어 있었습니다. 이는 번들러에 맞게 유연하게 모듈 해상도를 변경하는 것을 의미합니다. 이를 node 로 바꾸게 되면 Node.js 환경에서 모듈을 해석하는 방식으로 바뀌게 됩니다.

모듈 로드 시 package.json 에 main 타입이 지정되어 있다면 해당 파일을 불러옵니다. @emotion/styled 의 package.json 프로퍼티는 다음과 같습니다.

"main": "dist/emotion-styled.cjs.js",
"module": "dist/emotion-styled.esm.js",
"types": "types/index.d.ts",
  1. bundler 값을 설정하여 번들러 환경에서 모듈을 로드할 때 Common JS 모듈 형식을 사용합니다. 따라서 dist/emotion-styled.cjs.js 파일을 불러옵니다.
  2. node 값을 설정하여 Node.js 환경에서 모듈을 로드할 땐 ES Module 형식을 사용합니다. 이 경우 main 필드가 따로 Common JS 를 가리키더라도 TypeScript 는 types 필드에 지정된 파일을 사용하여 ES Module 을 해석하고 타입을 추가해야하기 때문에 types/index.d.ts 로 부터 모듈을 해석하게 됩니다.

🚨 Git

🤔 git 파일 이름 변경 반영 문제

문제 설명

MbtiButton 이란 파일 이름을 MBTIButton으로 변경했을 때 git에는 파일 이름 변경이 적용되지 않는 문제가 있었습니다.

해결방법

이는 GIT은 대소문자를 구별하지 않는 기본 옵션 때문에 파일이름을 대소문자만 변경 했을 경우 인식 하지 못해 변경으로 생각하지 않기 때문에 발생하는 문제로 해결 방법은 아래와 같습니다.

  1. 방법 1

git mv {oldFileName} {newFileName} 명령어로 이름을 변경한다.

  1. 방법 2

git config core.ignorecase false 명령어 입력

🚨 기타 자잘한 에러 모음들

🤔 린트가 안 먹어요!

다음 세 방법으로 우선 해결해보세요!

  1. npm 지우고 재설치
  2. package.json 지우고 재설치
  3. VSCode 껐다 켜기

🤔 카카오 지도가 불러와지지 않아요!

  • height 이 혹시 100% 로 표시되어 있나요? 이 경우 부모 속성의 height 값이 설정되어 있지 않으면 지도가 나타나지 않아요!

🤔 text/html is not javascript meme type

  1. 파일 이름을 변경하면서 기존 파일을 참조하는 다른 파일에서 경로를 찾지 못해 발생하곤 했어요.
Clone this wiki locally