index 파일/폴더 관리 컨벤션 개선 아이디어

[godhyeongman]

주제

현재 폴더/파일 컨벤션 에서 index의 역할 변경 건의

문제

폴더 컨벤션에서 index 파일에서 폴더가 '구현해야' 하는 것을 제작하고 내보냄,
다른 파일 에서의 코드도 내보내야 하는 경우도 있는데 이때 index파일에서 이를 찾을 수 없으므로 불편한 점임
또 내보내기만 집중해서 보기 불편함

파일 변경된점 비교할떄도 파일목록에 index가 많아서 원하는 구현부 찾는게 성가심 명시적이면 편할것 같음

아이디어

해당 폴더에서 중요한 구현부도 따로 파일로 분리를 하고
index 파일은 내보내기를 중점적으로 하는것에 대해

[herrakam]

제가 문제점을 제대로 이해하지 못하고 있어요 ㅠㅠ 다른 파일에서의 코드를 내보내는 경우는 어떠한 경우인가요?

[godhyeongman]

예를 들어서 layout이라는 폴더가 있고 여러 파일들이 있다고 가정을 할게요
여기서 export 하는 데이터가 index 파일 말고도 다른파일에 있는 경우가 많은것 같아요.

그래서 index 파일은 해당 폴더에서 export 하는 데이터를 취합하여 export 하는것이 올바른 사용법이 아닌가? 하는 생각입니다.

'index 파일은 해당 폴더의 내보내기를 담당한다.'
'index 파일은 해당 폴더의 주요한 관심사를 구현하고 내보내기를 담당한다'

둘 중 전자가 직관적이라고 생각이 들기도 합니다!

[herrakam]

아하 이해했습니다!
index 말고 다른 파일에 있는 데이터를 import 해야 하는 상황을 말씀하시는 거네요
저는 index의 역할 중에서 내보내는 역할보다 해당 폴더의 주요한 내용을 들고 있는 게 더 중요한 역할이라고 생각해서 index 파일을 내보내는 역할에만 사용 하는 건 기존 방법보다 단점이 더 많아지는 것 같습니다. index가 들고 있어야 하는 코드(예를 들어 데이터 패칭)도 있을 텐데, 이 부분을 분리 해야 한다는 문제점도 발생하는 거 같아요. 특히 고유한 코드를 많이 들고 있는 page 위치에 있는 index( ex: page/main의 index)에 많은 문제가 발생할 거 같습니다. index파일에서 데이터를 다 취합하는 내용을 추가하는건 어떠신가요?

[godhyeongman]

• 정확히 어떤 문제가 있을지 알고싶습니다! Page 폴더에서 index.ts 와 Main.tsx 로 나누었을때 문제점을 알 수 있을까요?

• index파일을 내보내는 역할을 하면 제가 생각하는 장점을 가령 이런게 있을 것 같아요. Main/page에서 사용되는 UI 추상화 컴포넌트의 프롭스를 사용한다 했을때 해당 컴포넌트의 위치를 뒤지는 과정이 추가되는데 이 과정을 import { 특정 타입 } from Main/page 라고 할 수 있습니다. 편의성이 올라가는것 같아요

• "index가 들고 있어야 하는 코드 = 폴더 네이밍이 다뤄지는 코드" 라고 생각이 드는데 Main 폴더에서 Main이라는 파일이 그 역할을 한다면 중요한 코드 확인 하고 싶을 때 의 문제를 해결 할 수 있을 것 같습니다.

• 예시 자료 입니다.
  1번 : https://www.digitalocean.com/community/tutorials/react-index-js-public-interfaces
  2번 : https://leedr0730.medium.com/%EB%94%94%EB%A0%89%ED%86%A0%EB%A6%AC-%ED%8C%8C%EC%9D%BC-export-%ED%95%98%EA%B8%B0-index-js-%EC%82%AC%EC%9A%A9-2e698a8e2cbd

[herrakam]

• 위에서 말씀드린대로 index가 들고 있어야 하는 코드가 index 밖에서 존재해야 하는 경우가 문제점이라는 생각이었습니다. 그런데 index 관련 영상을찾아보니까, 하위 디렉토리에 있는 모듈을 외부에서 접근을 하게 하는 역할이 중요하다는 결과를 많이 봤어요! 그래서 main.tsx와 index.ts로 구현을 해도 괜찮을 것 같습니다

[godhyeongman]

동의합니다!

폴더의 역할을 알리는 파일 -> 폴더명 과 동일 한 네이밍

index 파일 -> export 담당하는 역할

결정 된 사항들은 공지에 정리해두겠습니다.