#705 `@taxi/app` init #704

SnowSuno · 2024-01-18T08:11:42Z

Summary

It closes #705

@taxi/app 패키지를 초기화하고 웹뷰 스크린을 local navigation과 연결합니다.

Images or Screenshots

Video in Slack

Further Work

netlify · 2024-01-18T08:12:12Z

✅ Deploy Preview for taxi-dev-preview ready!

Name	Link
🔨 Latest commit	`036ac16`
🔍 Latest deploy log	https://app.netlify.com/sites/taxi-dev-preview/deploys/65b863797fbdc40008cead84
😎 Deploy Preview	https://deploy-preview-704--taxi-dev-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

SnowSuno · 2024-01-24T07:52:24Z

packages/app/app.config.ts

+    SERVER_URL: isDev
+      ? `http://${ip.v4.sync()}:3000`
+      : "https://taxi.sparcs.org",


개발 환경에서는 로컬 네트워크의 택시 웹이 뜨도록 하였습니다.
모바일 기기(expo go)를 이용하여 개발하는 경우 localhost:3000으로는 접속하지 못하기 때문에 local ip를 가져오도록 하였습니다.

SnowSuno · 2024-01-24T07:52:59Z

package.json

-    "web": "pnpm -F @taxi/web",
+    "app": "pnpm --filter @taxi/app",
+    "web": "pnpm --filter @taxi/web",
+    "start:app": "pnpm -r --stream start",


pnpm start:app을 할 경우 web과 app이 동시에 시작됩니다.

SnowSuno · 2024-01-24T07:54:56Z

packages/app/src/components/TaxiWebView.tsx

+  const onNavigationStateChange = useCallback(
+    (event: WebViewNavigation) => {
+      const screen = mapWebRoutes(event.url);
+      if (!isFocused || isSameScreen(currentScreen, screen)) return;
+
+      navigation.navigate(...screen);
+      ref.current?.stopLoading();
+      ref.current?.goBack();
+    },
+    [isFocused, currentScreen, navigation]
+  );


onNavigationStateChange 리스너를 이용하여 새로운 route로 이동하는 경우 그 페이지에 해당하는 native app에서의 navigating을 진행해 줍니다.

나중에 앱과 웹의 코드베이스가 공유되는 경우에는 다른 접근을 취하는게 좋을 것 같습니다.

SnowSuno · 2024-01-24T08:03:52Z

packages/app/src/utils/navigation.ts

Web route를 native screen으로 매핑하기 위해 필요한 유틸 함수들이 정의되어 있습니다.

현재는 web route와 native screen을 각각 정의하고, 둘을 매핑해주는 방식을 사용하고 있지만 추후에는 둘을 동시에 정의할 수 있는 공통 인터페이스를 구현하는 것이 유지보수 상 용이할 것 같습니다.

SnowSuno · 2024-01-24T08:06:53Z

packages/app/src/utils/navigation.ts

+export const screen = <ScreenName extends keyof RootStackParamList>(
+  ...args: // this first condition allows us to iterate over a union type
+  // This is to avoid getting a union of all the params from `ParamList[RouteName]`,
+  // which will get our types all mixed up if a union RouteName is passed in.
+  ScreenName extends unknown
+    ? // This condition checks if the params are optional,
+      // which means it's either undefined or a union with undefined
+      undefined extends RootStackParamList[ScreenName]
+      ?
+          | [screen: ScreenName] // if the params are optional, we don't have to provide it
+          | [screen: ScreenName, params: RootStackParamList[ScreenName]]
+      : [screen: ScreenName, params: RootStackParamList[ScreenName]]
+    : never
+) => args;


screen을 정의하는 함수입니다. @/navigation/types에 정의된 스크린을 type-safe하게 사용할 수 있도록 react-navigation에 정의되어 있는 navigation.navigate()의 타입 정의를 그대로 사용하였습니다.

screen("Chatting", { roomId })와 같이 스크린을 표현할 수 있습니다.

SnowSuno · 2024-01-24T08:08:22Z

packages/app/src/utils/navigation.ts

+type ExtractRouteParams<T extends string> = string extends T
+  ? Record<string, string>
+  : T extends `${infer Start}:${infer Param}/${infer Rest}`
+  ? { [K in Param | keyof ExtractRouteParams<Rest>]: string }
+  : T extends `${infer Start}:${infer Param}`
+  ? { [K in Param]: string }
+  : {};


"/chatting/:chatId/message/:messageId" 등의 string에서 path parameter 타입 { chatId: string, messageId: string }을 추출해내기 위한 유틸리티 타입입니다.

SnowSuno · 2024-01-24T08:10:39Z

packages/app/src/utils/navigation.ts

+export const route = <Pattern extends string>(
+  routePattern: Pattern,
+  getScreen: (params: ExtractRouteParams<Pattern>) => Screen
+): Route => {


route(<웹 라우트 패턴>, (파라미터) => <스크린>)으로의 단일 매핑을 정의하는 유틸 함수입니다.

<웹 라우트 패턴>에 정의된 :pathParameter가 params로 그대로 전달되며 타입도 infer됩니다.

SnowSuno · 2024-01-24T08:14:05Z

packages/app/src/utils/navigation.ts

+  ? { [K in Param]: string }
+  : {};
+
+type Route = (route: string) => Screen | null;


route 함수의 return type 입니다.

route가 string으로 주어졌을 때 매칭되는 스크린이 있다면 해당 Screen을, 아닌 경우에는 null을 반환하는 매칭 함수를 반환합니다.

SnowSuno · 2024-01-24T08:15:40Z

packages/app/src/utils/navigation.ts

+  const pattern = new URLPattern(routePattern);
+
+  return (pathname: string) => {
+    const params = pattern.match(pathname);


url pattern matching은 url-pattern 라이브러리를 이용하였습니다. 다만 해당 라이브러리의 타입 지원은 대부분 any로 지원되고 있어 위에서 정의한 커스텀 타입들을 덮어씌워 이용합니다.

SnowSuno · 2024-01-24T08:17:47Z

packages/app/src/utils/navigation.ts

+export const getPath = (route: string) => {
+  const match = route.match(new RegExp(`^${env.SERVER_URL}([\\w\\/]+)\\??`));
+  return match?.[1];
+};


택시 웹의 주소 https://taxi.sparcs.org/chatting/123이 주어졌을 때 path /chatting/123을 반환합니다. (로컬 개발 환경일 경우에는 taxi.sparcs.org 대신 로컬 주소)

외부 주소(SPARCS SSO 등)일 경우에는 null을 반환합니다.

SnowSuno · 2024-01-24T08:20:47Z

packages/app/src/utils/navigation.ts

+  return match?.[1];
+};
+
+export const routes = (routes: Route[]) => (uri: string) => {


여러 route 매핑 정의(매칭 함수)를 array로 받아 단일 매칭 함수로 합쳐 줍니다.

uri를 받아 해당하는 Screen을 반환하는 매칭 함수를 반환합니다.
해당 매칭 함수는 uri가 외부 uri이거나, 매칭되는 스크린이 없는 경우 screen("Web", { uri }) 스크린을 반환합니다. 해당 스크린은 모든 기타 웹 주소가 렌더링되는 스크린입니다.

SnowSuno · 2024-01-24T08:21:39Z

packages/app/src/components/TaxiWebView.tsx

+
+  const onNavigationStateChange = useCallback(
+    (event: WebViewNavigation) => {
+      const screen = mapWebRoutes(event.url);


uri가 바뀔 때 그 uri가 매칭되는 스크린을 받아옵니다.

SnowSuno · 2024-01-24T08:22:11Z

packages/app/src/components/TaxiWebView.tsx

+  const onNavigationStateChange = useCallback(
+    (event: WebViewNavigation) => {
+      const screen = mapWebRoutes(event.url);
+      if (!isFocused || isSameScreen(currentScreen, screen)) return;


매칭된 스크린이 현재 스크린과 동일한 경우, 새로운 route navigation을 진행하지 않습니다.

SnowSuno · 2024-01-24T08:23:04Z

packages/app/src/components/TaxiWebView.tsx

+      navigation.navigate(...screen);
+      ref.current?.stopLoading();
+      ref.current?.goBack();


다른 스크린으로 이동하는 경우, 현재 WebView에서의 routing은 취소하고, native에서 해당하는 스크린으로 navigation합니다. (tab navigation, stack navigation 모두 가능)

SnowSuno · 2024-01-24T08:23:40Z

packages/app/src/utils/navigation.ts

+export const isSameScreen = (
+  screen1: Screen,
+  screen2: Screen
+): screen1 is Screen => {
+  const [screenName1, params1] = screen1;
+  const [screenName2, params2] = screen2;
+  if (screenName1 === "Web" && screenName2 === "Web") return true;
+  return screenName1 === screenName2 && shallowEqualObjects(params1, params2);
+};


두 개의 스크린이 동일한 스크린인지 확인하기 위한 equality 유틸 함수입니다.

SnowSuno · 2024-01-24T08:24:42Z

packages/app/src/utils/navigation.ts

+  for (const route of routes) {
+    const screen = route(path);
+    if (screen) return screen;
+  }


주어진 route array 중 먼저 정의된 route부터 검사합니다.
즉, 한 개 이상의 route가 매칭되는 경우, 더 위에 정의된 screen으로 이동합니다.

SnowSuno · 2024-01-24T08:33:38Z

packages/web/src/tools/loadenv.ts

@@ -4,7 +4,7 @@ const env = { ...import.meta.env, ...window["env"] };

 // 환경변수
 export const isDev = env.DEV; // automatically provided
-export const backServer = env.REACT_APP_BACK_URL; // required
+export const backServer = isDev ? "/api" : env.REACT_APP_BACK_URL; // use proxy in dev mode


local network(앱)에서도 backend에 접근할 수 있도록 하기 위해 local dev proxy를 이용합니다.

SnowSuno · 2024-01-24T08:34:44Z

packages/web/vite.config.ts

local dev proxy를 설정합니다.
아직 socket 쪽은 작동하고 있지 않아 확인해 보아야 할 것 같습니다.
다만 rewrite 규칙을 사용하는 것보다 �sparcs-kaist/taxi-back#446 와 같은 접근을 취하는 것이 더 나아보입니다.

SnowSuno · 2024-01-24T09:09:45Z

packages/app/src/navigation/types.ts

https://reactnavigation.org/docs/typescript/

react navigation docs에서 권장하는 방식의 navigiation screen 타입 정의입니다.

SnowSuno · 2024-01-24T09:10:47Z

packages/app/src/navigation/web.ts

웹에서 각각의 path와 path param이 어떤 스크린과 그 param에 대응되는지 정의되어 있습니다.
현재에 각각의 screen은 다시 WebView를 띄우고 있지만 그대로 저 param을 이용하는 native component로도 대체 가능합니다.

route, routes, screen 등 사용하는 util 함수들은 모두 type-safe 하게 작성했으며 구현은 @/utils/navigation에서 찾아보실 수 있습니다.

SnowSuno · 2024-01-24T09:11:23Z

packages/app/src/screens/Chatting.tsx

현재에는 모든 스크린에서 WebView를 다시 리턴하고 있습니다.
그러나 추후 params.roomId 등의 screen parameter를 직접 사용하여 native component도 구현할 수 있습니다.

WebView -> Native Component 으로 이동한 경우에도 screen parameter가 자동으로 채워집니다.

happycastle114

LGTM

Add: Init @taxi/app package

ab623cd

SnowSuno force-pushed the #702-app-core-package-init branch from 41896d0 to ab623cd Compare January 18, 2024 08:15

SnowSuno changed the title ~~@taxi/app, @taxi/core init~~ #702 @taxi/app, @taxi/core init Jan 18, 2024

SnowSuno added 2 commits January 18, 2024 17:17

Add: Implement WebView wrapper

a230234

Add: Connect local web server with app

0c45634

14KGun assigned SnowSuno Jan 23, 2024

SnowSuno added 3 commits January 24, 2024 16:47

Add: Config @taxi/app path aliases

44b0157

Add: Navigation packages

d2eb95f

Add: Impl webview screen routing

17b39bb

SnowSuno commented Jan 24, 2024

View reviewed changes

Remove: unused webview listener

d548130

SnowSuno commented Jan 24, 2024

View reviewed changes

Fix: remove redundant types

b315981

SnowSuno commented Jan 24, 2024

View reviewed changes

SnowSuno mentioned this pull request Jan 24, 2024

/api 라우팅을 path rewrite가 아닌 application level에서 추가 sparcs-kaist/taxi-back#446

Open

2 tasks

SnowSuno commented Jan 24, 2024

View reviewed changes

SnowSuno changed the title ~~#702 @taxi/app, @taxi/core init~~ #705 @taxi/app init Jan 24, 2024

SnowSuno requested review from happycastle114, ybmin and 14KGun January 24, 2024 09:04

SnowSuno commented Jan 24, 2024

View reviewed changes

SnowSuno added 4 commits January 30, 2024 11:38

Fix: Configure socket.io dev proxy

adedbd9

Add: start:app:prod script

3d2129d

Fix: Temp disable native tab navigation

2ff481a

Add: Inject platform OS in userAgent

036ac16

SnowSuno marked this pull request as ready for review January 30, 2024 02:49

happycastle114 approved these changes Jan 30, 2024

View reviewed changes

SnowSuno merged commit fcf0786 into dev Jan 30, 2024
4 checks passed

SnowSuno deleted the #702-app-core-package-init branch January 30, 2024 11:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#705 `@taxi/app` init #704

#705 `@taxi/app` init #704

SnowSuno commented Jan 18, 2024 •

edited

Loading

netlify bot commented Jan 18, 2024 •

edited

Loading

SnowSuno Jan 24, 2024

SnowSuno Jan 24, 2024

SnowSuno Jan 24, 2024 •

edited

Loading

SnowSuno Jan 24, 2024 •

edited

Loading

SnowSuno Jan 24, 2024

SnowSuno Jan 24, 2024 •

edited

Loading

SnowSuno Jan 24, 2024 •

edited

Loading

SnowSuno Jan 24, 2024 •

edited

Loading

SnowSuno Jan 24, 2024 •

edited

Loading

SnowSuno Jan 24, 2024 •

edited

Loading

SnowSuno Jan 24, 2024 •

edited

Loading

SnowSuno Jan 24, 2024

SnowSuno Jan 24, 2024

SnowSuno Jan 24, 2024

SnowSuno Jan 24, 2024 •

edited

Loading

SnowSuno Jan 24, 2024 •

edited

Loading

SnowSuno Jan 24, 2024

SnowSuno Jan 24, 2024

SnowSuno Jan 24, 2024

SnowSuno Jan 24, 2024

SnowSuno Jan 24, 2024

happycastle114 left a comment

#705 @taxi/app init #704

#705 @taxi/app init #704

Conversation

SnowSuno commented Jan 18, 2024 • edited Loading

Summary

Images or Screenshots

Further Work

netlify bot commented Jan 18, 2024 • edited Loading

✅ Deploy Preview for taxi-dev-preview ready!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SnowSuno Jan 24, 2024 • edited Loading

Choose a reason for hiding this comment

SnowSuno Jan 24, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SnowSuno Jan 24, 2024 • edited Loading

Choose a reason for hiding this comment

SnowSuno Jan 24, 2024 • edited Loading

Choose a reason for hiding this comment

SnowSuno Jan 24, 2024 • edited Loading

Choose a reason for hiding this comment

SnowSuno Jan 24, 2024 • edited Loading

Choose a reason for hiding this comment

SnowSuno Jan 24, 2024 • edited Loading

Choose a reason for hiding this comment

SnowSuno Jan 24, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SnowSuno Jan 24, 2024 • edited Loading

Choose a reason for hiding this comment

SnowSuno Jan 24, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

happycastle114 left a comment

Choose a reason for hiding this comment

#705 `@taxi/app` init #704

#705 `@taxi/app` init #704

SnowSuno commented Jan 18, 2024 •

edited

Loading

netlify bot commented Jan 18, 2024 •

edited

Loading

SnowSuno Jan 24, 2024 •

edited

Loading

SnowSuno Jan 24, 2024 •

edited

Loading

SnowSuno Jan 24, 2024 •

edited

Loading

SnowSuno Jan 24, 2024 •

edited

Loading

SnowSuno Jan 24, 2024 •

edited

Loading

SnowSuno Jan 24, 2024 •

edited

Loading

SnowSuno Jan 24, 2024 •

edited

Loading

SnowSuno Jan 24, 2024 •

edited

Loading

SnowSuno Jan 24, 2024 •

edited

Loading

SnowSuno Jan 24, 2024 •

edited

Loading