[Refactor] 폴더 구조 및 변경된 컨벤션 반영

[constantly-dev]

📌 Related Issues

• close [Refactor] 폴더 구조 및 변경된 컨벤션 반영 #319

✅ 체크 리스트

• PR 제목의 형식을 잘 작성했나요? e.g. [Feat] PR 템플릿 작성
• 빌드가 성공했나요? (pnpm build)
• 컨벤션을 지켰나요?
• 이슈는 등록했나요?
• 리뷰어와 라벨을 지정했나요?

📄 Tasks

스프린트 전 팀원과 다시 정리한 컨벤션을 재반영 하였습니다. 변경한 내용은 크게 다음과 같습니다.

1. 공통의 역할을 가지는 요소 shared 폴더로 이동

이전까지 우리 팀이 사용하는 폴더 구조는 각 페이지에 종속된 요소 (ex. components, types 등)는 pages/ 의 각 페이지 폴더에 따로 분리하고, 공용의 의미를 가진다면 src/ 바로 밑에 위치하였습니다.
물론 이 점 폴더 구조도 공용을 분리한 것은 동일하지만 확실하게 이 의미를 폴더 구조로 표현하기 위해 shared라는 폴더를 만들어 1 depth를 더 두었습니다. 이로 인해 각 페이지 종속된 요소들과 공용으로 재사용하는 요소들을 확실하게 분리한 것을 폴더로도 나타내도록 변경하였습니다.

변경된 폴더 구조

|-- 📁 .github
|-- 📁 node_modules
|-- 📁 public
|-- 📁 src // src 바로 하위 폴더는 모두 common(공통)의 의미
	|-- 📁 routes
	|-- 📁 layouts
  |-- 📁 pages 
	  |-- 📁 ex) home
	    |-- 📁 components
		    |-- 📁 ex) Footer
			    |-- 📄 Footer.tsx
			    |-- 📄 Footer.style.ts
	    |-- 📁 constants
		    |-- 기능별로 잘 분리하기
	    |-- 📁 mocks
	    |-- 📁 hooks
	    |-- 📁 utils  
	    |-- 📁 types
		    |-- 📄 api.ts
	    |-- 📁 apis
		    |-- 📄 quries.ts
		    |-- 📄 axios.ts   
  |-- 📁 shared
	  |-- 📁 apis 
	  |-- 📁 constants
	  |-- 📁 styles
	  |-- 📁 types 
	  |-- 📁 utils
	  |-- 📁 apis 
	  |-- 📁 components // 공통 컴포넌트
		  |-- 📁 Button
			  |-- 📄ex) Button.tsx
			  |-- 📄ex) Button.style.ts
		|-- 📁 assets 
	    |-- 📁 images
	    |-- 📁 svg
	  |-- 📁 hooks 
		  |-- 📄ex) useOutsideClick.ts 
|-- index.html 등 ETC

2. index 파일 네이밍 변경

기존의 컨벤션은 폴더 명으로 도메인 및 역할(기능)을 표현하고 안에 최상위 파일명을 index로 통일하여 사용하였습니다. 이로 인해 얻을 것이라고 생각한 장점은 다음과 같았습니다.

• 파일 import 시 import 구문의 길이를 줄일 수 있다.
• 개발할 때 파일 명을 각각 다르게 생각할 필요 없이 index로 통일해 개발 시간 효율을 높일 수 있다. (리소스를 줄이자)

이러한 장점을 가지고 시작한 컨벤션으로 꽤 괜찮은 효과를 볼 수 있었지만, 장점이 존재하면 반드시 단점도 존재하기에 우리 팀이 마주한 단점은 다음과 같습니다.

• 변경된 파일/여러 파일을 한 번에 봐야 할 때 대부분의 파일 명이 index라 추적하기가 힘들다.

물론 파일을 검색해서 찾아가는 방법도 있지만, 여러 파일을 한 번에 보는 경우에는 확실히 이를 구분하기가 쉽지 않다는 단점이 너무 명확했습니다. 따라서 index 네이밍 대신 import 구문이 조금 길어지더라도 폴더 명을 그대로 파일 명으로 사용하도록 수정하였습니다.

ex)

3. API 관련 types 위치를 분리하여 이동

이전에 앱잼 기간에 개발하면서 우리 팀은 API 관련 types 위치를 컨벤션을 제대로 설정하지 않아 axios 혹은 query 파일에 함께 두어 사용하였습니다. 물론 모두가 이렇게 사용한다면 통일성이라도 좋았겠지만, 모두가 다른 방법을 사용하고 있어 명확한 근거와 함께 컨벤션을 설정할 필요가 있다고 판단하였습니다.

이후에 팀원과의 상의를 하면서 API 관련 types는 types/ 폴더 밑에 api.ts 파일을 두고 한 번에 작성을 하는 것으로 결정하였습니다. 또한 요청/응답에 관련하여 Postfix로 -requestTypes/-responseTypes를 붙이기로 결론을 내고 이를 반영하였습니다.

해당 컨벤션을 선택한 이유는 다음과 같습니다.

• 각 types 폴더 바로 하위에 api.ts를 두는 이유 : 응집도를 위해 관련 코드를 최대한 가까이 두지만 Type이라는 역할은 분리하자.
• API에서 Postfix로 request, response를 붙이는 이유 : 통일성을 위해서

⭐ PR Point (To Reviewer)

1. 구조 및 네이밍을 바꾸는 작업이라 File Change가 굉장히 많습니다...! 그래서 변경된 내용을 다 확인하기 보다는 fetch 후 제 branch 작업 내용을 팀원 분들 각 로컬에서 꼭 실행하면서 모든 페이지 및 컴포넌트 등을 확인하며 이상이 없는지 체크를 해주셔야 할 것 같습니다! 이후에 모두 이상이 없다면 merge approve를 해주시고 이상이 있다면 반드시 알려주시면 감사하겠습니다 :)
2. svg 관련 Barrel 파일 제거 작업은 해당 branch에서 너무 많은 작업이 있기도 하고 컨벤션 변경이 제대로 되고 나서 진행하는 것이 맞을 것 같다고 판단하여 머지가 된 이후 새로 issue를 파서 작업하겠습니다.
3. 최대한 변경된 컨벤션에 대해서 모든 파일을 바꿔보려고 노력했지만....! 복잡한 구조 / 담당자의 판단이 필요하다고 생각하는 부분 (ex. type 네이밍 변경 등)은 수정하지 않았습니다. 이후 리팩토링을 진행하면서 각 담당한 부분을 수정해야 할 것 같습니다! 그렇게 많지는 않고 큰 부분에서 변경은 다 하였습니다!

📷 Screenshot

🔔 ETC

[github-actions]

✅ 빌드 성공적으로 완료되었지롱롱 🛠️

[hansoojeongsj]

최고십니다 👍 pr에 task랑 reviewpoint도 너무 섬세하게 정리해주셔서 회의 내용을 다시 정리하며 pr 확인해볼 수 있었습니다! 클래스 상세, 댄서 상세, 클래스 신청 페이지는 모두 잘 작동 합니다! 대쉬 리팩토링 파이팅 !!

[KIMGEONHWI]

제가 맡은 페이지도 정상 작동하는거 확인했습니다. 수정해야할 파일들이 많아서 귀찮은 부분도 많았을텐데 고생하셨습니다!!

[rtttr1]

이 힘든 작업을 이렇게 해내시다니 고생많으셨습니다!!! 로컬에서 돌려봤는데 홈, 온보딩, 로그인 페이지 모두 정상적으로 작동합니다! 고생많으셨어요 진짜~~~!!

[heesunee]

각 상세페이지 이상 없는거 확인했습니다 ! 하나하나 변경하기 번거로우셨을텐데 너무 고생많으셨습니다 ㅠㅠ

[github-actions]

✅ 빌드 성공적으로 완료되었지롱롱 🛠️