jiwoo-include.log

[Next.js 13] Parallel Routes Hard Navigation Intercepting Routes

Mon, 12 Jun 2023 04:37:24 GMT

문제

Next.js 13에서 제공하는 Parallel Routes를 사용하여 모달을 구현할 때, Hard Navigation(새로고침과 URL 접근)을 통한 path 접근 시 404 에러가 발생한다.

Parallel Routes와 Route Groups를 함께 사용하면 이미지와 같이 Error: NEXT_NOT_FOUND 가 발생한다.

Parallel Routes

같은 layout에 여러개의 페이지를 렌더할 수 있도록 함
이를 활용하여 Absolute Dim을 만들어서 modal을 구현.

해결

Parallel Routes에 Soft Navigation과 Hard Navigation이 있다.
- Soft Navigation: 어플리케이션이 활성화 된 상태에서 Link, Router 등을 통해 페이지를 Navigate 하는 경우
- Hard Navigation: 전체 페이지가 새로고침 되는 경우. (ex. URL을 통한 접속, 새로고침 등) default.tsx를 먼저 렌더 시도하고, 불가능하면 404를 렌더한다.
  Soft Navigation / Hard Navigation
Soft Navigation하는 경우 Router의 변화를 Intercept하여 Parallel Routing을 하기 때문에 Hard Navigation으로 접근할 수 있는 페이지를 만들어 해결하려고 했다.
1. default.tsx 를 구현하여 해결할 수 있을 것 같았다.
2. 직접 해당 path에 page를 만들어주는 것으로 해결할 수 있을 것 같았다.
  Intercepting Routes
2번으로 시도
- 기존 Parallel Route path: (without-nav-bar)/half-self/@modal/find-expert
- 따라서 (without-nav-bar)/half-self/find-expert 디렉터리 하위에 page 생성
  
  ⇒ ❗️ 문제: 모든 Navigation이 Intercept되지 않고 (without-nav-bar)/half-self/find-expert page로 이동함
- ✅ 해결: Intercepting Routes Convention을 활용
  - 기존 Parallel Route path((without-nav-bar)/half-self/@modal/find-expert)를 (without-nav-bar)/half-self/@modal/(.)find-expert 로 수정하여 한 레벨 상위에서 Navigation을 Intercept하도록 구현

회고

default.tsx 를 통해 구현도 해 볼 수 있을 것 같다.
- You can define a default.js file to render as a fallback when Next.js cannot recover a slot's active state based on the current URL. [Next.js 공식문서 발췌]
- 활성화 된 상태가 아닐 때 현재 URL에 대해 fallback으로 활용 가능하기 때문
Next.js 13버전에서 새롭게 추가된 것들에 대한 적응이 아직 부족한 것 같다.
그럼에도 불구하고 파일명 matching을 통해 Fallback만 구현하면 되는 부분에서 편리함은 높은 것 같다.
Next.js Github Issue에도 비슷한 상황을 겪은 개발자가 있어서 도움이 될까 싶어 내 의견을 남겼다!

Next.js 13 Elastic Beanstalk 자동 배포

Sat, 10 Jun 2023 09:10:26 GMT

들어가며

Next.js을 Elastic Beanstalk Node.js 환경에 Github Action을 통해 자동 배포해요!

yarn berry의 PnP zero-install을 적용한 Next.js 어플리케이션을 배포해요!

왜 자동배포를 하였는가?

사내 QA를 위해 stage 서버에서 어플리케이션을 배포하는 상황에서 매 번 수정 ➡️ 배포 하는 과정을 자동화하여 생산성을 향상 시키고 싶었어요. ➡️ release/* branch에 commit이 push되면 stage 서버 자동 배포
production 배포 시에도 QA가 완료된 버전을 github branch merge를 통해 자동 배포하여 생산성을 향상 시키고 싶었어요. ➡️ main branch에 commit이 push되면 production 서버 자동 배포

❗️아래 글은 stage 서버 자동 배포에 관한 github action입니다.

구현

branch 배포 전략

release/* 브랜치에 commit이 push되면 해당 action을 실행!
```
  on:
    push:
      branches:
        - 'release/**'
```

배포 실행

jobs/set-eb

Elastic Beastalk를 사용하기 위해 aws-cli를 github action Node 환경에 세팅

Node 환경을 18.x로 세팅

       - name: Set up Node ${{ matrix.node-version }}
          uses: actions/setup-node@v3
          with:
            node-version: ${{ matrix.node-version }}
            registry-url: https://registry.npmjs.org/

aws-zip file을 캐싱 ➡️ static한 파일이기 때문에 캐싱처리를 하면 action 속도를 개선할 수 있을 것 같았어요!

           - name: Cache AWS CLI
            uses: actions/cache@v3
            with:
              path: /usr/local/aws-cli
              key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/awscliv2.zip') }}

          - name: Install AWS CLI 2
            run: |
              curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
              unzip awscliv2.zip
              which aws
              sudo ./aws/install --bin-dir /usr/local/bin --install-dir /usr/local/aws-cli --update


- AWS configuration을 `github action secret`을 통해 진행
➡️ 가장 중요한 건 보안!!

   ```yaml
         - name: Configure AWS credentials
            uses: aws-actions/configure-aws-credentials@v1
            with:
              aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
              aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
              aws-region: ${{ secrets.AWS_REGION }}


### jobs/build

- 실제 Next.js App 빌드 및 EB deploy
- `Node` 환경을 18.x로 세팅.
➡️ 16.14 이후 버전부터 yarn berry를 지원하기 때문에 넉넉하게 세팅했어요!
➡️ yarn을 통해 node package managing
➡️ `cache: ‘yarn’` 를 통해 매 번 npm install -g yarn을 하지 않도록 캐싱하여 `action` 속도를 개선해요!

   ```yaml
           - name: Set up Node ${{ matrix.node-version }}
            uses: actions/setup-node@v3
            with:
              node-version: ${{ matrix.node-version }}
              registry-url: https://registry.npmjs.org/
                        cache: 'yarn'

- yarn berry 세팅
    ➡️ `corepack`을 통해 yarn을 사용할 수 있도록해요!
    ➡️ `corepack`은 `node` `v16.9.0`, `v14.19.0`부터 기본 포함된 실험적 기능으로 `yarn`, `pnpm` 같은 package manager를 프로젝트별로 지정하여 사용할 수 있게 해요.
    ➡️ `yarn set version berry` 를 통해 yarn berry를 세팅해요.

    ```yaml
          - name: Set yarn berry
            run: |
              corepack enable
              yarn set version berry
              yarn install
    ```

- `.env`를 `github action secret`을 통해 생성.
    - `.env` 파일에 추가되는 환경 변수는 `github action secret`과 `github action yml 파일`에도 추가 해야해요

    ```yaml
          - name: Generate .env
            run: |
              echo "NEXT_PUBLIC_ENV=$NEXT_PUBLIC_ENV" >> .env
              echo "NEXT_PUBLIC_INQUIRY_SLACK_HOOK_URL=$NEXT_PUBLIC_INQUIRY_SLACK_HOOK_URL" >> .env
              echo "NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN=$NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN" >> .env
            env:
              NEXT_PUBLIC_ENV: ${{ secrets.NEXT_PUBLIC_ENV_STAGE }}
              NEXT_PUBLIC_INQUIRY_SLACK_HOOK_URL: ${{ secrets.NEXT_PUBLIC_INQUIRY_SLACK_HOOK_URL }}
              NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN: ${{ secrets.NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN_STAGE }}
    ```

- `build`한 어플리케이션을 Elastic Beanstalk 배포를 위해 zip 압축.

    ```yaml
          - name: Build STAGE
            run: |
              yarn build:stage // package.json script에 존재하는 stage build command

          - name: Generate deployment package
            run: zip ./deploy.zip -r * .[^.]*
    ```

- Elastic Beanstalk에 배포
    - `version_label`이 unique해야해서 timestamp로 우선 지정했어요!

    ```yaml
          - name: Current timestamp
            id: timestamp
            run: echo "::set-output name=date::$(date +'%Y-%m-%dT%H-%M-%S-%3NZ')"

          - name: Deploy to EB
            uses: einaregilsson/beanstalk-deploy@v18
            with:
              aws_access_key: ${{ secrets.AWS_ACCESS_KEY_ID }}
              aws_secret_key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
              application_name: ${{ secrets.APPLICATION_NAME }}
              environment_name: ${{ secrets.STAGE_ENVIRONMENT_NAME }}
              region: ${{ secrets.AWS_REGION }}
              version_label: ${{ steps.timestamp.outputs.date }}
              deployment_package: deploy.zip
    ```

- 결과를 Slack webhook으로 전송

    ```yaml
          - name: Send result to slack
            uses: 8398a7/action-slack@v3
            with:
              status: ${{ job.status }}
              author_name: IMCEO - STAGE
              fields: repo,commit,message,author 
              mention: here
              if_mention: failure,cancelled
            env:
              SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
            if: always()
    ```


### 전체 코드

```yaml
name: Auto Deploy - STAGE

on:
  push:
    branches:
      - 'release/**'

jobs:
  set-eb:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [ 18.x ]
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Set up Node ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          registry-url: https://registry.npmjs.org/

      - name: Cache AWS CLI
        uses: actions/cache@v3
        with:
          path: /usr/local/aws-cli
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/awscliv2.zip') }}

      - name: Install AWS CLI 2
        run: |
          curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
          unzip awscliv2.zip
          which aws
          sudo ./aws/install --bin-dir /usr/local/bin --install-dir /usr/local/aws-cli --update

      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ secrets.AWS_REGION }}

  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [ 18.x ]
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Set up Node ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          registry-url: https://registry.npmjs.org/
          cache: 'yarn'

      - name: Set yarn berry
        run: |
          corepack enable
          yarn set version berry
          yarn install

      - name: Remove .next
        run: |
          rm -rf .next

      - name: Generate .env
        run: |
          echo "NEXT_PUBLIC_ENV=$NEXT_PUBLIC_ENV" >> .env
          echo "NEXT_PUBLIC_INQUIRY_SLACK_HOOK_URL=$NEXT_PUBLIC_INQUIRY_SLACK_HOOK_URL" >> .env
          echo "NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN=$NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN" >> .env
        env:
          NEXT_PUBLIC_ENV: ${{ secrets.NEXT_PUBLIC_ENV_STAGE }}
          NEXT_PUBLIC_INQUIRY_SLACK_HOOK_URL: ${{ secrets.NEXT_PUBLIC_INQUIRY_SLACK_HOOK_URL }}
          NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN: ${{ secrets.NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN_STAGE }}

      - name: Build STAGE
        run: |
          yarn build:stage

      - name: Generate deployment package
        run: zip ./deploy.zip -r * .[^.]*

      - name: Current timestamp
        id: timestamp
        run: echo "::set-output name=date::$(date +'%Y-%m-%dT%H-%M-%S-%3NZ')"

      - name: Deploy to EB
        uses: einaregilsson/beanstalk-deploy@v18
        with:
          aws_access_key: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws_secret_key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          application_name: ${{ secrets.APPLICATION_NAME }}
          environment_name: ${{ secrets.STAGE_ENVIRONMENT_NAME }}
          region: ${{ secrets.AWS_REGION }}
          version_label: ${{ steps.timestamp.outputs.date }}
          deployment_package: deploy.zip

      - name: Send result to slack
        uses: 8398a7/action-slack@v3
        with:
          status: ${{ job.status }}
          author_name: IMCEO - STAGE
          fields: repo,commit,message,author # action,eventName,ref,workflow,job,took 추가할 수 있음
          mention: here
          if_mention: failure,cancelled
        env:
          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
        if: always()

속도 개선

사실 처음부터 yarn과 aws-cli를 캐싱하지는 않았어요!
그래서 아래의 3가지를 통해 action 속도를 개선했어요!

cache yarn
- uses: actions/setup-node@v3 에서 cache:'yarn' 을 통해서 yarn 설치 시간 줄임
yarn berry zero install
- pnp zero install을 통해 github에서 매 번 모듈을 설치하는 과정 개선
set-eb 와 build job 분리를 통한 불필요한 동기처리 개선

개선 전 (평균 4m 20s)

개선 후(평균 2m 30s)

➡️ 평균 1m 50s 속도 개선

후기

실제 사내에서 main, release/* branch에 따라 production, stage 자동 배포를 사용하고 있어요 !
stage에 매번 배포하는 과정을 자동화하여 생산성이 향상 되어서 QA 배포 과정이 단순화 되었어요!
production에 배포할 때, github 모바일 앱을 사용해도 되어서 어디서나 해당 버전을 production 출시할 수 있어서 좋았어요!

[React Native] iOS 위젯 - 구현

Sat, 08 Apr 2023 13:38:40 GMT

들어가며

시리즈의 설계편에 이어 구현에 대해서만 포스팅합니다. 간단한 Todo 앱을 예시로 설명합니다🥰 위젯은 앱 내 Todo의 값이 변하면 새로운 Timeline을 불러오도록 구현합니다. 저도 아직 모든 개념이 머리에 있지는 않아 100% 정확하지 않을 수 있어요. 양해 부탁드립니다.🙏 Github Repository - jiwooIncludeJeong/react-native-ios-widget

1. Create React Native App

우선 React Native App 생성!

npx react-native@latest init ReactNativeIOSWidget

2. 간단한 Todo 앱 작성

아주 간단한 Todo 앱을 작성해보았습니다! 복사 붙여넣기도 좋아요 왜냐하면 이 포스팅은 위젯이 주요한 포스팅이니까요!

//App.tsx
import React, {useEffect, useState} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  Text,
  TouchableOpacity,
  useColorScheme,
  View,
} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen';

type Todo = {
  id: number;
  isCompleted: boolean;
  text: string;
};

type TodoProps = Todo & {
  onPress: (id: number) => void;
};

function Todo({isCompleted, text, id, onPress}: TodoProps): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  return (
     onPress(id)}>
      
        

        
          {text}
        
      
    
  );
}

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
    paddingTop: 40,
    flex: 1,
  };

  const [todos, setTodos] = useState([
    {
      id: 1,
      text: 'First Todo',
      isCompleted: false,
    },
    {
      id: 2,
      text: 'Second Todo',
      isCompleted: false,
    },
    {
      id: 3,
      text: 'Third Todo',
      isCompleted: false,
    },
    {
      id: 4,
      text: 'Fourth Todo',
      isCompleted: false,
    },
  ]);

  const handlePress = (id: number) => {
    setTodos(prev =>
      prev.map(i => (i.id === id ? {...i, isCompleted: !i.isCompleted} : i)),
    );
  };

  return (
    
      
      
        {todos.map(t => (
          
        ))}
      
    
  );
}

export default App;

그럼 다음과 같은 화면이 그려집니다.

3. 위젯 만들기

File > New > Target 을 통해 Widget Extension을 추가해주세요 ! 그리고 Product Name을 추가하고 Include Live Activity와 Include Configuration Intent를 해제하고 Finish 클릭. 저는 Product Name: Example로 작성하였어요!

Include Live Activity은 iOS 16부터 생긴 다이나믹 아일랜드에 대응하기 위한 것으로 보입니다. Include Configuration Intent는 유저가 위젯을 편집하기 해줄 기능을 포함할 것이냐인데, 현재 예제에서는 포함하지 않을 것이라 해제합니다.

그럼 아래와 같이 ExampleExtension이라는 WidgetExtension이 추가되었습니다.

3-2. 데이터를 공유할 UserDefaults group 만들기

앱에서 쓴 데이터인 UserDefaults를 위젯에서도 사용할 수 있도록 App group을 만들어서 해당 App group이 등록되어있는 앱에서만 데이터를 공유할 수 있도록 합니다. 가장 왼쪽의 ReactNativeIOSWIdget > TARGETS에서 ReactNativeIOSWidget > Signing & Capabilities > + Capability > App groups 추가 > Signing 아래에 App Groups 영역이 추가 > App Groups의 +버튼을 눌러 그룹명 추가. 저는 group.react.native.widget.example로 대-충 지어봤어요ㅎㅎ 😋 같은 과정을 TARGETS에서 ExampleExtension > Signing & Capabilities > + Capability > App groups 추가 > Signing 아래에 App Groups 영역이 추가 > App Groups의 +버튼을 눌러 그룹명 추가합니다. ❗️위에서 입력한 같은 그룹명을 입력해주세요!

3-3. UserDefaults를 Write할 수 있는 React Native의 Native Module 만들기

File > New > File을 통해 Header File과 Objective-C File을 만들어줍니다. 둘의 네이밍은 통일하는 것이 좋고, 저는 각각 SharedDefaults.h와 SharedDefaults.m으로 생성하였습니다. 참고: React Native iOS Native Modules

//SharedDefaults.h
#if __has_include("RCTBridgeModule.h")
#import "RCTBridgeModule.h"
#else
#import 
#endif

@interface SharedDefaults : NSObject

@end

//SharedDefaults.m
#import 
#import "SharedDefaults.h"

@implementation SharedDefaults

-(dispatch_queue_t)methodQueue {
  return dispatch_get_main_queue();
}

RCT_EXPORT_MODULE(SharedDefaults);

RCT_EXPORT_METHOD(set:(NSString *)data
                  resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject)
{
  @try{
    NSUserDefaults *shared = [[NSUserDefaults alloc]initWithSuiteName:@"group.react.native.widget.example"]; //App Group명
    [shared setObject:data forKey:@"data"]; // data를 저장할 key 값
    [shared synchronize];
    resolve(@"true");
  }@catch(NSException *exception){
    reject(@"get_error",exception.reason, nil);
  }

}

@end

❗️주의할 점: App Group명인 group.react.native.widget.example와 data를 저장할 key 값인 data를 잘 확인해주세요❗️ 이제 React Native에서 SharedDefaults라는 NativeModule을 사용할 수 있습니다! SharedDefaults는 set()이라는 method를 가지며 NSString type을 가집니다. resolver와 rejecter는 각각 성공, 실패에 대한 callback, fallback 함수를 받는 것입니다.

4. React Native에서 UserDefaults Write하기

SharedDefaults라는 class를 만들었습니다.

//SharedDefaults.ts
import {NativeModules} from 'react-native';

const NativeSharedDefaults = NativeModules.SharedDefaults;

class SharedDefaults {
  public async set(obj: Record) {
    try {
      //UserDefaults는 NSString을 받기 때문에 JSON.stringify()하여 Write
      const res: boolean = await NativeSharedDefaults.set(JSON.stringify(obj));
      return res;
    } catch (e) {
      console.warn('[SHARED DEFAULTS]', e);
      return false;
    }
  }
}

export default new SharedDefaults();

그리고 App.tsx에서 useEffect를 통해 todos 상태가 변할 때마다 SharedDefaults.set(todos)를 호출합니다.

//App.tsx
...
function App():JSX.Element {
  ...

  useEffect(() => {
      SharedDefaults.set(todos);
  }, [todos]);

  ...
}
...

5. Widet에서 UserDefaults Read하기

Xcode에서 아까 생성한 WidgetExtension인 Example 디렉터리의 Example.swift 파일을 엽니다. 우리가 Widget에서 사용할 데이터 타입(모델)을 먼저 정의했습니다.

public struct TodoModel:Codable {
  let id:Int, isCompleted: Bool, text: String;
}

그리고 우리가 위젯에서 실질적으로 그릴 TimelineEntry를 정의하였습니다. TodoModel 배열을 받아서 반복문으로 그려줄 것이기 때문에 todos는 배열로, date는 TimelineEntry 타입의 required라서 다음과 같이 정의합니다.

struct SimpleEntry: TimelineEntry {
  let date: Date, todos: [TodoModel]
}

전체 코드 github은 올려드릴 것이지만 대부분이 UI, Timeline 관련입니다. UserDefaults를 Read하는 부분에 대해서 설명드리겠습니다.

struct Provider: TimelineProvider {
    ...
     func getTimeline(in context: Context, completion: @escaping (Timeline) -> ()) {
        var entries: [SimpleEntry] = []

        let userDefaults = UserDefaults(suiteName: "group.react.native.widget.example")
        let jsonText = userDefaults?.string(forKey: "data")

        var todos : [TodoModel] = []

        do {
          if jsonText != nil {
            let jsonData = Data(jsonText?.utf8 ?? "".utf8)
            let valueData = try JSONDecoder().decode([TodoModel].self, from: jsonData)

            todos = valueData
          }
        } catch {
          print(error)
        }
        let currentDate = Date()
        for hourOffset in 0 ..< 5 {
            let entryDate = Calendar.current.date(byAdding: .hour, value: hourOffset, to: currentDate)!
            let entry = SimpleEntry(date: entryDate, todos: todos)
            entries.append(entry)
        }

        let timeline = Timeline(entries: entries, policy: .atEnd)
        completion(timeline)
    }
}

let userDefaults = UserDefaults(suiteName: "group.react.native.widget.example")
let jsonText = userDefaults?.string(forKey: "data")

를 통해 만들어진 Timeline 기준으로 UserDefaults에 있는 값을 가지고 옵니다. 여기서 App Group명을 적어야 우리가 Write한 데이터를 가져올 수 있습니다. 그리고 우리가 Write한 key값인 data를 통해 value를 가져옵니다. 당연히 NSString이었으니 swift에서도 String이라 JSON parsing이 필요합니다.

 var todos : [TodoModel] = []

do {
     if jsonText != nil {
     let jsonData = Data(jsonText?.utf8 ?? "".utf8)
     let valueData = try JSONDecoder().decode([TodoModel].self, from: jsonData)

     todos = valueData
    }
  } catch {
    print(error)
  }

JSONDecoder()로 JSON parsing한 값을 통해 SimpleEntry 객체를 생성하여entries.append(entry)를 통해 Timeline을 새롭게 만듭니다.

이렇게 따라 작성하면 다음과 같은 결과를 얻을 수 있습니다.

Github Repository

jiwooIncludeJeong/react-native-ios-widget

느낀 점

정말 안되는 건 없다라는 걸 느꼈던 것 같아요. 처음엔 막막했고, 설계에 따라 자체적으로 버저닝도 해가며 개발했습니다. 첫번째, 두번째 설계가 적합하지 못하다는 것을 깨닫고 어떻게 해야하나라는 생각에도 잠시 빠졌던 것 같아요. 내가 아니라 다른 분이 구현했으면 더 높은 퀄리티의 코드와 더 빠른 속도로 짤 수 있었을까라는 상실감에도 잠시 빠졌었는데요..😭 금방 극복해서 그래도 배포까지 할 수 있었던 것 같습니다!
React Native에서 iOS 위젯을 개발하기 위해 편의성을 제공하는 패키지는 아직 없는 것 같아요. 꾸준히 해당 repository를 발전시켜서 reloadAlltimes()와 같이 WidgetKit에서 제공하는 Method를 RN단에서 호출 할 수 있게 만들 생각이고, 더 나아가 RN이 그린 UI를 SwiftUI로 변환하는 것을 개발할 수 있다면 RN에서 사용하는 간단한 flex와 View 개념들로 SwiftUI를 그려 편리한 위젯 오픈 소스를 만들어보고 싶다는 생각도 들었어요!
물론 부정확한 개념이 있을 수 있고, 모든 개념이 저에게 들어오지는 않았다고 생각해요. 하지만 이 글이 누군가에게는 도움이 되길 바랍니다 🫶

[React Native] iOS 위젯 - 설계

Sat, 08 Apr 2023 12:23:58 GMT

React Native에서 위젯을 개발해야한다

사내 React Native(이하 RN)으로 개발된 앱에서 위젯 개발 feature가 생겼다. 나는 내심 iOS Native 개발을 해보고 싶던 터라 1순위로 해당 feature를 개발을 희망했고, 다른 개발자분들도 1순위로 원해서 사다리 타기를 통해 해당 feature를 내가 개발할 수 있게 되었다. 원했던 것이지만 RN의 Native Module도 한 번 만들어 본 적 없던 나에게 큰 챌린지가 될 것 같았고 꼭 해내고 싶었다.

해당 포스트는 사내 앱 위젯 개발 경험을 예시로, 간단한 React Native에서의 iOS위젯 개발을 소개하는 글입니다.

설계
구현 으로 나누어 포스팅합니다.

설계

큰 틀

React Native에서는 Native에서 작성된 함수를 실행하기 위해서 Native Module을 Objective-C로 개발하여 RCTBridgeModule을 통해 React Native에서 호출 할 수 있다. (iOS Native Modules RN 공식문서)
iOS에서 UserDefaults라는 저장소가 있는데, 이것을 통해 앱 어디에서나 데이터 CRUD가 가능하다.
1번과 2번을 종합하여 UserDefaults를 CRUD하는 Native Module을 작성하여 React Native에서 iOS의 Native단에 존재하는 UserDefaults 저장소에 CRUD 한다.
UserDefaults는 어디서나 쓸 수 있기 때문에 해당 저장소의 값을 위젯에서 사용하여 data를 그려주면 될 것이다.

❗️하지만

어떻게 위젯의 값을 refresh 할 것인가?

위 질문에 나에게 던져졌다. 나에게 떠오른 3가지의 방법

1. iOS 위젯에 있는 Timeline을 사용

iOS 위젯은 TimelineProvider를 통해 언제 위젯을 업데이트하고 싶은지 제공할 수 있다.
- 특정 시간에 WidgetKit에서 TimelineProvider의 method를 호출해 새로운 Timeline을 요구하고 이 때 method에서 받아오는 데이터로 위젯을 render한다
WidgetKit은 다음과 같은 생애주기를 가진다
- 사용자가 위젯을 추가할 때는 getSnapshot request를 통해 snapshot 데이터를 보여준다
- 사용자가 위젯을 추가한 이후로는 timeline request를 통해 실제 데이터를 보여준다
- Timeline을 만들 때 각각 TimelineReloadPolicy를 지정해주어야한다.(Apple 공식문서) 간단하게 설명하면 다음과 같다
  
  .atEnd : 모든 timeline의 요청이 끝나고 요청 (default) .after(Date) : 첫 after policy timeline 요청으로부터 next timeline 요청까지의 date를 정할 수 있음, 이후의 timeline은 버려짐. .never : 요청 안함 (static한 위젯에 필요할 것 같음)
자세한 설명은 Apple 공식문서에 그림과 함께 나와 있어요 !

❗️그런데 말입니다...

우리는 RN에서 상태값이 변할 때마다 위젯의 새로운 Timeline을 만들고 싶어! 시간을 예측할 수 없어! 그래서 해당 방법은 탈락 ❌

2. Observable 객체를 만들고 해당 객체를 위젯에서 구독

RXJS에서 Observable을 사용해보았기 때문에 위젯에서 Observable 객체를 구독하고, RN에서 또 하나의 Native Module을 만들어서 Observable 객체의 값을 변경해주면 구독하고 있던 위젯의 Timeline이 새롭게 만들어지지 않을까?
❗️그런데 말입니다...
위젯에서 Observable을 구독해도 의미가 없다라는 글을 읽었다 😳 그리고 굳이 2개의 객체를 같은 동작을 위해 만들면 유지보수 측면에서도 나중에 다른 개발자가 Observable은 왜 필요하지?라고 생각할 것 같아서 탈락 ❌

3. WidgetCenter.shared.reloadAllTimelines() 사용

Apple 공식문서 발췌

Requesting a Reload of Your Widget’s Timeline

Changes in your app’s state may affect a widget’s timeline. When this happens, you can tell WidgetKit to reload the timeline for either a specific kind of widget or all widgets. For example, your app might register for push notifications based on the widgets the user has configured. When your app receives a push notification that changes the state for one or more of your widgets, requesting a reload of their timelines updates their display.

If you only need to reload a certain kind of widget, you can request a reload for only that kind. For example, in response to a push notification about a change in a game’s status, you could request a reload for only the game status widgets:

WidgetCenter.shared.reloadTimelines(ofKind: "com.mygame.gamestatus")

To request a reload for all of your widgets:

WidgetCenter.shared.reloadAllTimelines()

(번역)

위젯의 타임라인 다시 로드 요청

앱의 상태가 변경되면 위젯의 Timeline에 영향을 줄 수 있습니다. 이 경우 WidgetKit에 특정 종류의 위젯 또는 모든 위젯에 대한 Timeline을 다시 로드하도록 지시할 수 있습니다. 예를 들어 사용자가 구성한 위젯에 따라 앱이 푸시 알림을 등록할 수 있습니다. 앱이 하나 이상의 위젯 상태를 변경하는 푸시 알림을 수신하면 위젯 timeline을 다시 로드하도록 요청하면 위젯의 값이 업데이트됩니다.

특정 종류의 위젯만 다시 로드해야 하는 경우 해당 종류에 대해서만 다시 로드를 요청할 수 있습니다. 예를 들어 게임 상태 변경에 대한 푸시 알림에 응답하여 게임 상태 위젯에 대해서만 다시 로드를 요청할 수 있습니다:

WidgetCenter.shared.reloadTimelines(ofKind: "com.mygame.gamestatus")

모든 위젯에 대해 다시 로드를 요청하는 방법:

WidgetCenter.shared.reloadAllTimelines()

우선 우리 앱의 위젯은 하나 뿐이라 reloadAllTimelines()를 RN Native Module에서 UserDefaults를 Write 할 때 함께 호출하여 값이 변하면 새로운 Timeline을 가져올 수 있도록 하였다!

[React Native / iOS] TextInput 커서 이동 입력 시 이슈 해결

Sat, 18 Mar 2023 07:00:00 GMT

문제

React Native v0.67.3 이전 버전에서 한글을 포함한 cjk(chinese japanese korean) 폰트에서 TextInput 사용할 때, 작성 중간에 커서를 이동하여 작성을 하면 글자가 깨지는 이슈가 있다. (동영상 참고)

방법

가장 간단한 해결책은 React Native의 버전을 올리는 것이었다. 하지만 많은 프로젝트들이 그러하듯, 이미 사용하고 있는 React Native 버전과 의존성을 가지는 패키지들이 많을 것..😭 최대한 외부 의존성을 줄이며 개발한다고 해도 쉽지 않다..그래서 해당 이슈도 노운 이슈로 남겨져 있었다..
그렇다면 해당 이슈를 해결한 PR을 찾아서 React Native의 해당 부분만 수정하여 patch-package를 통해 npm install / yarn install 시 업데이트 되지 않도록 하자!

해결

관련 이슈를 구글링하다보니 어렵지 않게 머지된 PR을 찾을 수 있었다! 더더욱 반가웠던 건 contributor가 한국분!! 펄-럭 🇰🇷 친절하게도 patch-package를 위해 PR을 바로 찾아갈 수 있도록 이슈 코멘트를 남겨두셨다! @kmsbernard 버나드님 감사합니다!

삭제된 코드의 이유를 묻는 코멘트에 대한 버나드님의 답변삭제된 코드에서는 문자열 비교하는 메소드 호출을 피하는 동작이 있다. 한글도 다른 중국어, 일본어 처럼 비교하는 동작이 필요하다.

마무리

개발 중인 프레임워크, 라이브러리의 버전을 올리기 위해서 함께 버전을 올려야 할 의존성을 가진 패키지가 너무 많다면 patch-package를 이용해 버전을 올려보는 것도 괜찮은 해결책인 것 같다 🥰

React Native Android static image 이슈

Sun, 12 Mar 2023 14:22:59 GMT

문제

프로젝트 내에서 static image를 import 하여 사용하는 경우가 많다. 어느 날부터 회사 내에서 안드로이드 기기에서 이상한 이미지가 보여지고 있다는 버그 리포트가 생겼다.

문제의 이미지

원래 보여져야한 이미지

재현 경로

해당 문제는 React Native로 구현된 앱을 Android에서 업데이트 설치 시 발생하였다. 조금 찾아보니 facebook의 fresco 2.6.0 버전에서 이상하게 static image를 mapping하는 이슈가 있다고 하였다.

해결

해결책 1

위 이슈 링크를 보면 알 수 있는 것 처럼, fresco 2.6.0 버전으로 올리며 발생한 문제이다. 따라서 fresco를 2.5.0 버전으로 다운그레이드하면 해결 될 것이라고 생각했다.

해결책 2

s3에 이미지를 올리고 static image가 아닌 remote image를 source:{uri:[이미지 URL]}로 수정하면 해결될 것이라고 생각했다.

따라서

처음에 해결책 1로 해결하려고 했다. 단순히 버전만 다운그레이드하여서 새로운 빌드로 확인해보았다. 하지만 이는 해결책이 되지 못했다. 예상컨데 다른 react-native android 관련 라이브러리에서 fresco 2.6.0 버전을 사용하는 것 같다. 배포 빌드가 몇 시간 남지 않아서 해결책 2를 통해 임시로 해결하고 빌드를 올렸다.

하지만 이렇게 찜찜하게 빌드를 올리니 찜찜했고, 모든 static image에 리스크를 두면서 해당 이미지만 해결하기는 싫었다 😭

그래서

조금 찾아보니 build.gradle에 dependencies를 직접 커스터마이징할 수 있는 문법이 있었다! 그래서 바로 적용하였다 ! 참고

android/app/build.gradle

...
configurations.all {
        resolutionStrategy {
            force "com.facebook.fresco:fresco:2.5.0"
            force "com.facebook.fresco:animated-gif:2.5.0"
    }
}

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    //noinspection GradleDynamicVersion
    ...

회사 프로젝트에서는 static image 중 gif 확장자도 사용하고 있기 때문에 fresco의 animated-gif 라이브러리도 사용하고 있다. 그래서 fresco의 fresco와 animated-gif의 버전을 강제로 2.5.0으로 맞춰주었다!

그랬더 재현경로에서도 해결 완료 !!! 🥳

왜?

이슈를 올린 분의 commit은 다음과 같다

imagepipeline/src/main/java/com/facebook/imagepipeline/request/ImageRequest.java

As-is

    mRequestPriority = builder.getRequestPriority();
    mLowestPermittedRequestLevel = builder.getLowestPermittedRequestLevel();
    mCachesDisabled = builder.getCachesDisabled(); // 삭제
    mIsDiskCacheEnabled = builder.isDiskCacheEnabled();
    mIsMemoryCacheEnabled = builder.isMemoryCacheEnabled();
    mDecodePrefetches = builder.shouldDecodePrefetches();

To-be

    mRequestPriority = builder.getRequestPriority();
    mLowestPermittedRequestLevel = builder.getLowestPermittedRequestLevel();

    mIsDiskCacheEnabled = builder.isDiskCacheEnabled();

    int cachesDisabledFlags = builder.getCachesDisabled(); // 추가
    if (!mIsDiskCacheEnabled) {
      // If disk cache is disabled we must make sure mCachesDisabled reflects it
      cachesDisabledFlags |= CachesLocationsMasks.DISK_READ | CachesLocationsMasks.DISK_WRITE;
    } //분기 추가
    mCachesDisabled = cachesDisabledFlags; //추가

    mIsMemoryCacheEnabled = builder.isMemoryCacheEnabled();
    mDecodePrefetches = builder.shouldDecodePrefetches();

해당 commit의 주석에 따르면 disk cache가 불가능한 상태이면 mCachesDisabled에도 반영해야하는데 이전에는 반영하고 있지 않았던 것 같다.

하지만..

하지만 facebook은 fresco repository를 더 이상 관리하지 않는지 해당 개발자가 해결하여 PR을 올렸고 main에 머지가 되었지만 2.6.1 버전을 아직 배포해주지 않고 있어서, 현재로서는 2.5.0 fresco version을 사용하는 것이 유일한 해결책인 것 같다 ..

그래도 임시 방편으로 해결함에 그치지 않고 서칭을 통해서 근본적인 원인을 찾아서 해결하여 회사 내의 버그를 해결한 좋은 경험이었다 🥰

Remix + supabase

Sat, 04 Mar 2023 11:56:07 GMT

Supabase

Supabase is an open source Firebase alternative providing all the backend features you need to build a product. Learn more about Supabase, follow a quickstart for an overview, or dive straight into the different products and APIs.

팀원 중 한 분이 나에게 Supabase라는 것을 소개시켜주었다. Firebase와 비슷하게 Storage, DB, Auth 등을 제공하는데 공식문서를 확인해보니

NoSQL DB를 제공하는 Firebase와는 다르게 postgresql DB를 제공해주고 DB Table도 GUI로 제공하는 것이 편리하게 느껴졌다.
API_KEY로 init하면 바로 메소드를 사용할 수 있는 것이 간편하다고 느껴졌다.
서버 없이 혼자 개발할 사이드프로젝트이고 Remix에서 제공하는 loader에서 DB에 직접 접근하여 Server Side에서 데이터 fetch를 하고 Client Side에서는 렌더만 하기에 용이하다고 생각했다.

하지만

공식문서에는 Remix와 관련된 문서를 제공하지 않는다. 그래서 NextJS 문서를 참고하며 개발하였다.

처음엔..

처음에는 Prisma를 이용하여 Supabase에서 제공하는 DB에 접근하여 ORM을 통해 데이터를 받아올까 했었다. 몇차례 시도 후 이는 필요 없다는 판단을 하였다. 이유는 supabaseClient 객체에서 DB에서 데이터에 접근할 수 있는 CRUD를 제공하고 있기 때문이다.

Supabase DB 데이터 접근 method

공식문서의 Database Functions

Fetch
```
const { data, error } = await supabase.from('[테이블명]').select();
```
테이블에 해당하는 데이터를 가져올 수 있고, error 상황에 대해서도 핸들링할 수 있다.
Insert
```
const { data, error } = await supabase.from('[테이블명]').insert({title:'타이틀명'});
```
테이블에 해당하는 row를 생성한다. supabase에서 테이블을 생성할 때 아래 그림과 같이 자동 생성될 column을 지정할 수 있다. (Is Identity 체크) 추가로 Primary Key, Unique 값 설정 등도 간단하게 GUI로 할 수 있다.

bulk create

const { data, error } = await supabase.
                            from('[테이블명]').
                            insert([
                                 {title:'타이틀명1'},
                                 {title:'타이틀명2'} ...
                               ]);

create and return

const { data, error } = await supabase.from('[테이블명]').insert({title:'타이틀명'}).select();

Update
Upsert(Update + Insert => 중복되는 값이 있으면 Update, 없으면 Create)
Delete

등등 메소드도 지원한다.

Supabase + Remix ?

그래서 Remix에서 위에서 상세설명한 두 가지 메소드에 대해 어떻게 구현하였는지 설명한다.

Fetch

Fetch를 통해 데이터를 가져오는데 이것을 ServerSide에서 하여 브라우저에 이미 데이터가 존재하는 html을 다운로드 받게 하고 싶었다. 그래서 Remix에서 제공하는 Server Side function인 loader에서 데이터를 fetch하여 Client Side로 전달했다.

...
export const loader = async () => {
    const { data, error } = await supabase.from('[테이블명]').select(); // serverside의 supabase 객체
      return json({
        data
    });
}
...

Insert, Upsert, Update, Delete

DB에 데이터를 추가하거나 수정하는 상황에서는 Remix에서 제공하는 Server Side function인 action에서 데이터를 supabase의 DB로 데이터를 추가/수정하였다. 또한 onClick 함수를 구현하는 것이 아닌 Remix가 의도한
을 이용하여 데이터를 Server Side로 넘겨줍니다. 저는 form의 post method를 이용하여 action 함수를 호출하였습니다.
```
...
export const action = async ({request}) => {
const { data } = Object.fromEntries(await request.formData());
const { error } = await supabase
  .from('[테이블명]')
  .insert({ body: String(data) });

if (error) {
  console.log(error);
  return json( { success: false; } );
}
return json( { success: true; } );
};
```

...

```

Remix와 Supabase를 통해 Supabase에서 제공하는 DB CRUD하는 방법에 대해 간단히 알아보았습니다. 아직 해쳐나가야할 관문이 많을 것 같아 또 돌아오겠습니다..!

Remix 시작기 (NextJS와 비교하며)

Sun, 19 Feb 2023 12:44:23 GMT

들어가며

Remix에 대한 소개글은 너무 많기에, 실제 사용하면서 느낀 점을 작성하였습니다.
기존에 사용하던 NextJS와 비교가 다수 있습니다.
Remix 공식 홈페이지

왜 Remix인가?

개발을 혼자서 할 사이드 프로젝트를 진행함에 있어서 두 가지 선택지가 있었다.

기존에 사용하던 NextJS를 사용할까?

새로운 React 프레임워크인 Remix를 사용할까?

Remix를 선택하였다.

Remix는 DB에 직접 접근하여 Server side에서 데이터를 가져올 수 있다.

기존에는 NextJS를 사용하였으나 SSR을 제대로 활용하지 못하는 것 같다는 고민이 있었다.

하던 것만 하기 보다는 새로운 것을 사용하여 개발하고 싶었다.

시작

눈에 띈 것

디렉터리 구조

프로젝트를 init한 Remix 프로젝트는 디렉터리 구조가 다음과 같았다.
```
Remix
```

app ⌙root.tsx ⌙entry.client.tsx ⌙entry.server.tsx ⌙routes ⌙index.tsx

NextJS src ⌙pages ⌙index.tsx ⌙_app.tsx ⌙_document.tsx

- 개인적으로 느낀 점은 NextJS의 `_app.tsx` + `_document.tsx`와 Remix의 `root.tsx`와 비슷하다는 것이다. 이유는 `root.tsx`에서 ``, ``, `

jiwoo-include.log

[Next.js 13] Parallel Routes Hard Navigation Intercepting Routes

문제

Parallel Routes

해결

Parallel Routes Navigation

Soft Navigation / Hard Navigation

Intercepting Routes

회고

Next.js 13 Elastic Beanstalk 자동 배포

들어가며

왜 자동배포를 하였는가?

구현

branch 배포 전략

배포 실행

jobs/set-eb

속도 개선

개선 전 (평균 4m 20s)

개선 후(평균 2m 30s)

➡️ 평균 1m 50s 속도 개선

후기

[React Native] iOS 위젯 - 구현

들어가며

1. Create React Native App

2. 간단한 Todo 앱 작성

3. 위젯 만들기

3-1. Widget Target 만들기

3-2. 데이터를 공유할 UserDefaults group 만들기

3-3. UserDefaults를 Write할 수 있는 React Native의 Native Module 만들기

4. React Native에서 UserDefaults Write하기

5. Widet에서 UserDefaults Read하기

Github Repository

느낀 점

[React Native] iOS 위젯 - 설계

React Native에서 위젯을 개발해야한다

설계

큰 틀

❗️하지만

1. iOS 위젯에 있는 Timeline을 사용

❗️그런데 말입니다...

2. Observable 객체를 만들고 해당 객체를 위젯에서 구독

❗️그런데 말입니다...

3. WidgetCenter.shared.reloadAllTimelines() 사용

Requesting a Reload of Your Widget’s Timeline

(번역)

위젯의 타임라인 다시 로드 요청

[React Native / iOS] TextInput 커서 이동 입력 시 이슈 해결

문제

방법

해결

마무리

React Native Android static image 이슈

문제

문제의 이미지

원래 보여져야한 이미지

재현 경로

해결

해결책 1

해결책 2

따라서

그래서

왜?

하지만..

Remix + supabase

Supabase

하지만

처음엔..

Supabase DB 데이터 접근 method

Supabase + Remix ?

Fetch

Insert, Upsert, Update, Delete

Remix 시작기 (NextJS와 비교하며)

들어가며

왜 Remix인가?

시작

눈에 띈 것

디렉터리 구조