공부 내용

개발을 하면서 발생한 에러를 해결하고, 트러블슈팅하는 시간을 가졌다.

발단

동기가 별안간 내 플젝 코드리뷰를 달면서 카톡이 옴!

<aside> 💡

이미지 임포트 무슨 일이야???????????????????????????

</aside>

……….당연함. 문제 제기를 안 할 수가 없는 레전드 코드였음……….

아주 고맙게도 그 동기가 여러 가지 아티클을 보내주었고 리팩토링을 진행함.

전개

1) 이미지 절대 경로 설정

import bgleisure from "../../../public/assets/images/bg_leisure.png";
import bgfestival from "../../../public/assets/images/bg_festival.png";

이미지를 import 해올 때 상대 경로를 사용했다. 그러나 이런 방법은 가독성이 떨어진다. 특히 경로가 복잡할수록 코드가 길어지면서 매우 지저분해진다. 이러한 문제를 해결하기 위해 절대 경로를 설정한다.

// tsconfig.json
{
	"compilerOptions": {
		...
		"baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@_icons/*": ["public/assets/icons/*"],
      "@_images/*": ["public/assets/images/*"],
    }  
  }
}