728x90
emotion을 이용하여 프로젝트 스타일링을 하였고,
깃허브 액션을 이용하여 CI CD 를 진행하려고 하였다.
local에서는 build가 성공하는데 깃허브 액션에서는 build를 자꾸 실패하는 점이 있었다.
빌드 실패 내용은 테마에서 breakPoints를 찾지 못하는 것이었다.
TS2339: Property 'breakPoints' does not exist on type 'Theme'.
나는 emotion을 이용하여 styled 컴포넌트를 작성할 때
max-width: ${({ theme }) => theme.breakPoints.lg}px;
를 작성해주었다.
theme 파일에 breakPoints파일을 잘 지정해주었는데
대체 왜 build를 실패할까? 의문이 생겼다.
tsconfig 문제일까하고, 타입을 다 지정하고 난리를 쳤지만, 계속 오류가 똑같이 뜨는 문제가 있었다.
해당 문제는 테마 관련 파일명을 theme.ts로 지정하여 theme파일에서 export를 해주었는데,
type에서 declare로 만들어진 Theme와 파일이름의 theme이 똑같아서 발생하는 문제이다.
맥북에서는 theme, Theme로 대소문자를 구분하지만, 윈도우에서는 구분하지 않는다고 한다.
즉, 깃허브에서 대소문자 관련 폴더명, 파일명을 변경할 때 커밋을 다시 찍어주는 문제와 같다.
theme파일명을 defaultTheme으로 변경하니 잘 작동하는 것을 볼 수 있었다.
앞으로는 대소문자를 구분하여 잘 작성해봐야겠다.
728x90