dev_eun

[Crew Space] 프로젝트 구조 설계 본문

개발일지/Crew Space

[Crew Space] 프로젝트 구조 설계

_eun 2021. 12. 23. 03:33

Directory Structure

처음에 저는 React와 React Native를 유사한 기술이라 생각하고 덤볐었는데, 반성하고 있습니다😊

애초에 구동되는 환경이 다른데, 어떻게 유사하다고 생각할 수 있었을까요? 하하

그냥 문법만 유사한 거지 완전히 다른 생태계였습니다.

 

그래서 디렉토리 구조도 다시 한 번 고민해보게 되었습니다.

많은 리서칭 후에 나온 결과는 아래와 같습니다.

디렉토리 구조

react app과 크게 차이가 나는 것같지는 않긴한데..

가장 다른 점은 screens와 navigation입니다.

 

page 대신 screen, router대신 navigation으로 세팅하였습니다.

 

Navigation Structure

React Native에서는 router역할을 하는 것이 navigation입니다.

RN에서는 web의 site-map처럼 navigation 설계도 진행하더군요.

마침 저도 뷰가 너무 많아서 어디서부터 처리해야 할 지 모르겠는 참이어서 한 번 설계를 해보았습니다.

네비게이션 구조

Authentication과 Content 로 두 개를 먼저 구분하였습니다. 이 둘은 겹치지 않기 때문에 SwitchNavigation으로 구성하였습니다.

Content는 StackNavigation으로 사용자가 들어갈 모든 스크린이 있습니다.

그 안에 Main은 BottomTabNavigation으로 하단에 탭이 있는 스크린입니다.

BottomTabNavigation 위로 스크린이 덮어지는 경우도 있기 때문에, nested 하게 구성하였습니다.

이거 때문에 발생한 문제가 몇 가지 있는데 그건 나중에..ㅠㅠ

 

별 거 아닌 것 같지만, 이거 설계하느라고 머리 뽀개지는 줄 알았습니다ㅠㅠ

web처럼 path가 따로 있는 것도 아니고, 모든 스크린이 연결되다 보니 어떻게 설계를 해야 할 지 처음에는 막막했어요.

플로우 차트를 보면서 겨우겨우 설계해 냈습니다.

그래도 한 번 하고 나니 내가 이 프로젝트를 제어하고 있구나 라는 느낌도 들고, 확실히 서비스에 대한 이해도가 올라간 것 같았어요.

 

아마 기능이 더 추가가 되면 뷰도 추가가 될 테고, 그럼 더 복잡해질텐데 추가할 때마다 더 나은 방법이 없을까 생각해봐야겠습니다😎

 

 

 

728x90

'개발일지 > Crew Space' 카테고리의 다른 글

[Crew Space] 모바일 앱, 뭘로 개발할까?  (0) 2021.12.23
[CrewSpace] 해, 커리어 회고  (0) 2021.12.21