폴더명과 파일명 동일하지 않을 때 발생하는 이슈

[homiekim]

빌드 에러 해결

• layout 수정과 login 폼 작업하신 부분 바로 master 브랜치로 풀리퀘 해주셔서 수정 사항이 많지 않아 우선 제가 바로 merge 하였습니다.
• github action 에서 배포 도중 빌드 에러를 확인 하여 해결 하였습니다.

에러 내용

에러 원인?

-> pages/signup에서 components/Button/Button에서 Button을 참조 하고 있는데 components/Button 경로에 Button 컴포넌트는 button.tsx로 소문자로 되어있어서 참조를 못하여 발생한 에러 입니다.

해결 방법

• dev 브랜치에서 파일명을 button.tsx -> Button.tsx로 변경후 풀리퀘 / 머지 하였는데 master 브랜치에 파일명이 바뀌지 않는 것을 확인하였습니다.
• 알아보니가 github에서 대소문자 구별 없이 캐싱하는 것 같습니다. 그래서 button이랑 Button을 같은 거로 인식해서 commit 해도 바뀌지 않는 것 같습니다.
• 강제로 파일명 바꾸기! -> master 브랜치 들어가서 git 명령어로 강제로 파일 명 바꿔줬습니다. 해당 명령어는 mv 입니다.
  
• master 브랜치랑 dev 브랜치 동일하게 수정하였고 개발 할 때는 git pull origin dev로 받아서 개발하고 dev로 풀리퀘 모으면 될 것 같습니다!

제안 사항

• 저는 이런 경우 헷갈리지 않기 위해 폴더 하나에 index.tsx 를 만들어 export default 하는 방법을 사용하는데 이렇게 쓰는게 어떨지 제안 해 봅니다.

예시

해당 예시의 경우 components/login-sectoin경로로 import 하면 index.tsx를 가져옵니다.

한 폴더 안에 여러개의 컴포넌트를 작성해야하는 경우?

index.ts

해달 폴더의 index.ts에서 전부 export 해주고 사용할 컴포넌트에서 import { Login, SignUp } from 'components/auth' 이런식으로 사용 가능 합니다.

[yun-ji-cho]

호민님, 에러내용과 제안사항 읽어 보았습니다.
git의 기본 설정 자체가 영문 대소문자를 무시하도록 되어있다고 하네요!

.tsx 파일의 파일 명에 대해서는 제가 예전에 프로젝트 했 을때도 논쟁이 있었던 부분인데요.
index.tsx 로 놓고 여러 창을 띄우면서 작업하다 보면 이 index.tsx 파일이 어떤 파일인지 헷갈린다는 분이 많았고, tsx 파일명을 폴더명과 동일하게 하자고 의견이 모아졌습니다. 그 프로젝트를 참고해서 저희 프로젝에서도 그렇게 설정했구요~ 만약 두 분다 불편하시다 하면 index.tsx 로 바꿔도 되긴하구요!

그런데 깃에서도 대소문자를 구분할 수 있도록 설정할 수 있더라구요.
git config core.ignorecase false

위의 명령어를 터미널에 쳐주기만 하면 디렉토리명 뿐만 아니라 파일명의 영문 대소문자를 바꾸어도 깃이 무엇이 바뀌었는지 알수 있게 됩니다.

확인해보시고 의견 주세요~ 감사합니다.

[Jooseulgi]

윤지님, 호민님 의견 읽어보았습니다!
저는 평소에 윤지님과 같이 폴더, 파일명을 동일하게 써서 작업을했는데
이번에는 호민님 의견처럼 index.tsx로 작업해보는것도 좋을 것 같습니다!

index.tsx는 export용 파일이기에 계속 띄어두고 작업하진 않을 것 같기도하고,
import { Login, SignUp } from 'components/auth' 한 줄에 사용한 컴포넌트가 보이는게 깔끔한 것 같습니다!

그럼 확인부탁드립니다!!👍