Hackatalk Client-Side 정리

Hackatalk Client-Side file 구조 이해하기

이 글은 해커톡 Client가 어떻게 구성되어있는지를 정리했습니다.

Overall Summary

HackaTalk의 Component 는 크게 Navigation, Screen, 그리고 Shared으로 정리할 수 있습니다.

Navigation: Authorization, MainScreen, MainTab에 각각 쓰이는 screen을 모아놓은 것

Screen: SignUp, SignIn 에 보여지는 화면

Shared: Screen에 쓰이는 Checkbox, MessageListItem 같은 컴포넌트

아래의 그림은 HackaTalk의 Client Navigation이 어떻게 정리 되었는지를 정리했습니다.

App.tsx 의 구성

먼저, App.tsx를 아래의 경로로 찾아주세요

Client (folder) → src (folder) → App.tsx

웹 브라우저로 해커톡을 처음 띄우면, App.tsx 가 열리게 됩니다. App.tsx은 아래와 같이 구성되어 있는데요,

가장 중간에 있는 AppWithTheme 은 여러 component으로 감싸져 있습니다.

• ProviderWrapper : AppearanceProvider, DeviceProvider, AuthProvider 등의 wrapper를 포함
• RelayProviderWrapper : Relay Environment wrapper
• App
• AppWithTheme : return ‘RootNavigator’ (sets device & user, loads assets)

RootStackNavigator

위에서 AppWithTheme 이 RootNavigator를 return 합니다. 이 RootNavigator는 HackaTalk이 로딩 되면, 처음 보여지는 stack들을 정리한 것 입니다. RootNavigator는 아래의 경로에 위치해 있습니다.

Client (folder) → src (folder) → components (folder) → navigation -> RootNavigator

RootNavigator는 Stack 을 생성하고, RootNavigator() 함수 안에서 useThemeContext(), useAuthContext() 함수를 불러, 테마와 유저 승인 을 확인합니다.

RootStackNavigator 는 react-navigation/stack 이라는 API 를 이용하여 Stack 을 만들고 있습니다. 아래의 그림과 같이 AuthStackNavigator 와 MainStackNavigator를 불러줍니다.

AuthStackNavigator

AuthStackNavigator는 component의 navigation안에 위치해 있고 아래와같이 구성되어있습니다. 유저 Authorization 에 필요한 stack을 모아 놓은 것 입니다.

이안에 있는 각각의 SignIn, SignUp, FindPw, VerifyEmail등의 컴포넌트는 components 폴더 안의 screen 에 위치해 있습니다.

Client (folder) → src (folder) → components (folder) → screen

Screen 은 로딩 되었을때 보여지는 화면들을 모은 폴더입니다.

MainStackNavigator

MainStackNavigator는 component의 navigation 안에 위치해 있고 아래와 같이 구성되어있습니다.

MainStackNavigator안에 첫번째 TabNavigator는 MainTab Navigator 에서 가져온 것입니다.

MainTabNavigator

MainTabNavigator 는 아래 처럼 해커톡 화면에 보이는 파란색 header와 친구 와 채팅 창을 왔다 갔다 할 수 있는 tab 창의 component 를 모아 놓았습니다.

아래와 같이 구성되어 있습니다

CustomHeader() — Header를 디자인해 주는 컴포넌트 이고,

TabNavigator() — friend 와 channel tab을 만들어주는 컴포넌트 입니다.

각각의 Navigation Screen 그리고 Shared에서 component들이 어떻게 import되어 사용되고 있는지를 살펴 보면서 HackaTalk의 구성을 이해해보면 좋을 것 같습니다!

다음에는 HackaTalk 의 서버에 대한 설명입니다. 아래의 글을 참고해 주세요!

Hackatalk Server Setting Guide

긴글 읽어주셔서 감사합니다 :)