mac m1에 mongodb를 설치하는 과정에

작은 불편함을 겪었다.

각자 원하는 버전 혹은 권장버전의

mongodb 사이트에 접속한 뒤 아래의 과정을 밟아보자.

https://www.mongodb.com/docs/v4.4/tutorial/install-mongodb-on-os-x/

1. homebrew가 설치되어 있어야한다.

2. Install the Xcode command-line tools by running the following command in your macOS Terminal

xcode-select --install

3. Tap the MongoDB Homebrew Tap to download the official Homebrew formula for MongoDB

brew tap mongodb/brew

4. To update Homebrew and all existing formulae

brew update

5. To install MongoDB

// 자신이 원하는 버전
brew install mongodb-community@4.4

6. 

brew --prefix

7. 

brew info mongodb-community@4.4

---> 결과
echo 'export PATH="/opt/homebrew/opt/mongodb-community@4.4/bin:$PATH"' >> ~/.zshrc
라는 메시지 확인가능

8. zshrc 수정

export PATH="/opt/homebrew/opt/mongodb-community@4.4/bin:$PATH"

9. 실행

brew services start mongodb-community@4.4

10. 몽고 connect

mongo

react-native 개발을 하다보니

zulu jdk11 버전으로 jdk를 변경하게 되었다

jdk1.8등 기타 버전이 아닌

zulu jdk11을 설치하는 방법을 알아본다.

1.

brew tap mdogan/zulu

2.

brew install zulu-jdk11

3. 설치 완료 확인

java --version

4.

nano ~/.zshrc

// zshrc 맨 하단
export JAVA_HOME=`/usr/libexec/java_home -v 11`
export PATH=$PATH:$JAVA_HOME/bin

5. 변경된 zsh 적용

source ~/.zshrc

6. 잘 적용됐는지 확인

echo $JAVA_HOME

M1 맥을 새로 샀다.

homebrew를 설치하려니 인텔맥에서는 경험하지못한 에러가 발생했다.

"Warning: /opt/homebrew/bin is not in your PATH."

검색해 본 결과 M1 맥에서 발생하는 

설치오류 였고, 간단히 추가적인 입력으로 해결가능했다.

M1 맥에서 Homebrew설치하기

1. https://brew.sh/index_ko 접속

2. 코드라인 복사

3. 터미널에 입력

4. 패스워드 입력

5. return키 Press

6. 완료되면, 아래의 절차 이어서 진행

7. 

// 여기서 [user]에는 각 사용자 계정을 입력
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/[user]/.zprofile

8.

eval "$(/opt/homebrew/bin/brew shellenv)"

9. 설치 완료 확인

brew --version

채널톡이 그 영향력을 상당히 넓히고있다.

앱에서도 호환성이 제법 훌륭해서 회사에서도

2개 서비스 연속으로 채널톡을 쓰고있다.

이 전에는 겪지 못했지만

이번에 빌드 관련해서 이슈를 겪어 문제를 기록

ipatool failed with an exception: #<CmdSpec::NonZeroExitException: 
$ /Users/user/Desktop/Xcode.app/Contents/Developer/usr/bin/python3 
/Users/user/Desktop/Xcode.app/Contents/Developer/usr/bin/bitcode-build-tool -v -t 
/Users/user/Desktop/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin -L 
/var/folders/r0/5sczfh113kdczqhflxskvq080000gn/T/ipatool20220722-31944-15jg3ll/thinned-out/arm64/Payload/[project].app/Frameworks --sdk 
/Users/user/Desktop/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS15.2.sdk -o 
/var/folders/r0/5sczfh113kdczqhflxskvq080000gn/T/ipatool20220722-31944-15jg3ll/thinned-out/arm64/Payload/[project].app/Frameworks/ChannelIOFront.framework/ChannelIOFront 
--generate-dsym /var/folders/r0/5sczfh113kdczqhflxskvq080000gn/T/ipatool20220722-31944-15jg3ll/thinned-out/arm64/Payload/[project].app/Frameworks/ChannelIOFront.framework/ChannelIOFront.dSYM 
--strip-swift-symbols /var/folders/r0/5sczfh113kdczqhflxskvq080000gn/T/ipatool20220722-31944-15jg3ll/thinned-in/arm64/Payload/[project].app/Frameworks/ChannelIOFront.framework/ChannelIOFront

Status: pid 32693 exit 1
Stdout:
SDK path: /Users/user/Desktop/Xcode.app/Contents/Developer/Platforms

시뮬레이터로 실행할때는 문제가 없었지만

ADHOC 빌드를 할 때 위와같은 이슈가 발생했다.

이슈를 추적한 결과

원인

아직 뚜렷한 원인이 밝혀진것은 아니나,
Xcode 12 이상의 버전을 사용하려는 경우, 특정 프레임워크와의 외부 종속성 문제로
프로젝트에서 비트코드를 비활성화하는 것 같다고 함.
따라서, 비트코드가 YES로 되어있는경우 빌드 에러가 발생.

해결책

[xcode]
Turn off Bitcode in Targets > Build Settings > Enable Bitcode.

제목 그대로의 상황이다.

방치해둔 서버의 용량이

각종 로그와 aws관련 버저닝 파일들로 인해 100%가 되어버렸다.

mongo는 더이상 저장이 불가능하자

다운되어 버렸다.

나중에 서버의 용량을 확보했지만

이미 다운된 몽고는 돌아오지 않았다.

다양한 방법의 실행 끝에

아래와 같은 방법을 통해 해결했다.

1. 로그 확인

/var/log/mongodb/mongod.conf

위 경로에서 로그를 확인할 수 있다.

나는 아래와 같은 에러 로그들을 볼수있었따.

WARNING: Using the XFS filesystem is strongly recommended with the WiredTiger storage engine
Failed to start up WiredTiger under any compatibility version.
Reason: 13: Permission denied

mongo, mongo status 체크를 할때도

아래와 같은 로그를 확인했었다.

Error: couldn't connect to server 127.0.0.1:27017, connection attempt failed: SocketException: Error connecting to 127.0.0.1:27017 :: caused by :: Connection refused

2. 해결책

의외로 해결책을 한 한국인 분의 블로그에서 확인할 수 있었다.

chown -R mongodb:mongodb /var/lib/mongodb
chown mongodb:mongodb /tmp/mongodb-27017.sock

재실행

systemctl restart monogd

systemctl status mongod

mongo

애니메이션 뷰는 정말 다양한 상황에

유용하게 쓰인다.

구현 방법 또한

상당히 간단해서 누구든 쉽게 구현할수있다.

import React, { ReactChild, useEffect, useState } from 'react';
import { Animated } from 'react-native';

export function FadeDownView({ duration, children }: { duration?: number; children: ReactChild }) {
  const value = new Animated.Value(0);

  useEffect(() => {
    Animated.timing(value, {
      toValue: 1,
      duration: duration || 500,
      useNativeDriver: true
    }).start();
  }, [])

  return (
    <Animated.View
      style={{
        opacity: value,
        transform: [{
          translateY: value.interpolate({
            inputRange: [0, 1],
            outputRange: [-24 , 0]
          })
        }]
      }}
    >
      { children }
    </Animated.View>
  )
}

export function FadeLeftView({ duration, children }: { duration?: number; children: ReactChild }) {
  const value = new Animated.Value(0);

  useEffect(() => {
    Animated.timing(value, {
      toValue: 1,
      duration: duration || 500,
      useNativeDriver: true
    }).start();
  }, [])

  return (
    <Animated.View
      style={{
        opacity: value,
        transform: [{
          translateX: value.interpolate({
            inputRange: [0, 1],
            outputRange: [-50 , 0]
          })
        }]
      }}
    >
      { children }
    </Animated.View>
  )
}

export function FadeRightView({ duration, children }: { duration?: number; children: ReactChild }) {
  const value = new Animated.Value(0);

  useEffect(() => {
    Animated.timing(value, {
      toValue: 1,
      duration: duration || 500,
      useNativeDriver: true
    }).start();
  }, [])

  return (
    <Animated.View
      style={{
        opacity: value,
        transform: [{
          translateX: value.interpolate({
            inputRange: [0, 1],
            outputRange: [50 , 0]
          })
        }]
      }}
    >
      { children }
    </Animated.View>
  )
}

export function FadeUpView({ duration, children }: { duration?: number; children: ReactChild }) {
  const value = new Animated.Value(0);

  useEffect(() => {
     Animated.timing(value, {
      toValue: 1,
      duration: duration || 500,
      useNativeDriver: true
    }).start();
  }, [])

  return (
    <Animated.View
      style={{
        opacity: value,
        transform: [{
          translateY: value.interpolate({
            inputRange: [0, 1],
            outputRange: [24 , 0]
          })
        }]
      }}
    >
      { children }
    </Animated.View>
  )
}

이런식으로 상,화,좌,우 Fade In 효과를 만들 수 있다.

사용한다면 아래와 같이 쓸수 있을것이다.

function SampleView() {
  const [fire, setFire] = useState(false);
  
  return (
    <View>
    <TouchableOpacity onPress={() => { setFire(true); }}>
      <Text>Fire!!!</Text>
    </TouchableOpacity>
    
    {
      !!fire &&
      <FadeDownView duration={300}>
        <Text>위에서 아래로</Text>
      </FadeDownView>
    }
    </View>
  )
}

* What went wrong:
Could not determine the dependencies of task ':app:mergeDebugAssets'.
> Could not resolve all task dependencies for configuration ':app:debugRuntimeClasspath'.
   > Could not find com.yqritc:android-scalablevideoview:1.0.4.
     Searched in the following locations:
       - file:/Users/user/project/lll/node_modules/react-native/android/com/yqritc/android-scalablevideoview/1.0.4/android-scalablevideoview-1.0.4.pom
       - file:/Users/user/project/lll/node_modules/jsc-android/dist/com/yqritc/android-scalablevideoview/1.0.4/android-scalablevideoview-1.0.4.pom
       - https://repo.maven.apache.org/maven2/com/yqritc/android-scalablevideoview/1.0.4/android-scalablevideoview-1.0.4.pom
       - https://dl.google.com/dl/android/maven2/com/yqritc/android-scalablevideoview/1.0.4/android-scalablevideoview-1.0.4.pom
       - https://www.jitpack.io/com/yqritc/android-scalablevideoview/1.0.4/android-scalablevideoview-1.0.4.pom

react-native-video 설치 후

빌드 과정에서 위 에러가 발생했다.

먼저, 설치방법

yarn add react-native-video

cd io && pod install && cd ..

npx react-native link react-native-video

위 에러 해결을 위한 단서는

https://github.com/react-native-video/react-native-video/issues/2454

https://stackoverflow.com/questions/68835157/error-when-trying-to-run-my-react-native-app-on-android/68841906#68841906

위 링크에서 확인할 수 있었다.

// android/build.gradle
allprojects {
    repositories {
        .... # Keep the rest
        jcenter() {
            content {
                includeModule("com.yqritc", "android-scalablevideoview")
            }
        }
    }
}

새 프로젝트를 시작하려 하니

내 개발환경에서 아래와 같은 이슈로

빌드에 실패하였다.

Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8." in React Native

원인을 찾아보니

간단한 방법으로 해결할 수 있었다.

당연하게도 java version을 맞춰주는것이다.

먼저, 맥 사용자라면 아래의 가이드를

아니라면 직접  jdk 11 버전을 설치하자.

brew tap homebrew/cask-versions
brew install --cask zulu11

이제, 설치한 jdk를 적용해보자

nano ~/.zshrc
# export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_291.jdk/Contents/Home
export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-11.jdk/Contents/Home

이전에 있던 1.8 버전은 주석처리하고

새 sdk를 지정한다.

그리고 저장.

이렇게만 하면

pc에 변경 사항이 반영되지않는다.

source ~/.zshrc

그리고 원래 실행중이던 터미널이 있다면

터미널을 새로 열고 빌드를 재 시도하면

정상적으로 진행될것이다.

npm run android

[업데이트]

확인 결과 .mm 기준으로

.m 레퍼런스 코드를 설정해서 작업해도

문제가 없음이 확인되었다.

아래의 내용은 꼭 필요했던 사람들만 확인 후 이용하길 바람

확인한 부분

- react-native-firebase/app react-native-firebase/analysis

// bash
npm i @react-native-firebase/app @react-native-firebase/analysis

// AppDelegate.mm, add
#import <Firebase.h>

[FIRApp configure];

// bash
cd ios && pod install && cd ..
npm run ios

[이전 내용]

react-native에서 새프로젝트를 만들면

AppDelegate.mm 파일이 생성되기 시작했다.

이전에는 AppDelegate.m이었다.

.m은 Object-C 기반

.mm은 Object-C ++ 기반

이라는 차이가 존재한다.

터보 모듈을 붙여 앱 성능 향상하는 것을 목적으로

RN쪽에서 업데이트한것으로 보인다.

다만, 개발자의 입장에서는

라이브러리들을 붙여야하는데

대부분의 현재 레퍼런스는

.m 기준으로 나타나있다.

따라서, .mm을 .m으로 변환해

프로젝트를 운영하고자 했다.

작업 순서

1. 기존의 .mm파일을 지움

2. .m 베이스 파일을 추가

3. .m 파일에 약간의 코드 변경

.m 파일에 약간의 코드 변경

#import "AppDelegate.h"

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

#ifdef FB_SONARKIT_ENABLED
#import <FlipperKit/FlipperClient.h>
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
#import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>

static void InitializeFlipper(UIApplication *application) {
  FlipperClient *client = [FlipperClient sharedClient];
  SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
  [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]];
  [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]];
  [client addPlugin:[FlipperKitReactPlugin new]];
  [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
  [client start];
}
#endif


@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  
#ifdef FB_SONARKIT_ENABLED
  InitializeFlipper(application);
#endif

  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"여기는 앱 이름"
                                            initialProperties:nil];

  if (@available(iOS 13.0, *)) {
      rootView.backgroundColor = [UIColor systemBackgroundColor];
  } else {
      rootView.backgroundColor = [UIColor whiteColor];
  }

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  
  return YES;
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

@end

1) 앱 이름 부분을 개인 설정에 맞게 넣어줄 것

2) Bridge 파트의 변경

<기존 코드>
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"  fallbackResource:nil];

<변경 코드>
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];

해당 부분의 변경을 안해주면

No visible @interface for 'RCTBundleURLProvider' declares the selector 'jsBundleURLForBundleRoot:fallbackResource:'

라는 에러를 맞이하게 된다.

이미지 압축 및 s3 업로드는

정말 많이 쓰이지만 의외로 포스팅이 없어

간단히 정리해본다.

처리절차

1. 클라이언트 요청 (생략)

2. multer-s3로 aws 업로드

3. key로 s3 object를 불러와 압축 후 재 업로드

4. 기존 파일 key로 제거

1. 클라이언트 요청 (생략)

요청은 포스트맨(Postman)으로 요청,

테스트하면 됨으로 생략 (form-data 방식 활용)

2. multer-s3로 aws 업로드

express router에서 미들웨어 처리를 해줄것이다.

그전에 multer-s3 미들웨어를 만들어주자.

// aws.ts
const AWS = require('aws-sdk');
const multer = require('multer');
const multerS3 = require('multer-s3');

const aws_config = {
    accessKeyId: process.env.AWS_ACCESS_KEY,
    secretAccessKey: process.env.AWS_SECRET_KEY,
    region: 'ap-northeast-2',
    signatureVersion: 'v4',
};

export const s3 = new AWS.S3();

export const uploadImage = multer({
  storage: multerS3({
    s3,
    bucket: 'test.bucket',
    metadata: (req, file, cb) => {
      cb(null, { fieldName: file.fieldname });
    },
    key: (req, file, cb) => {
      const ext = path.extname(file.originalname);
      const timestamp = new Date().getTime().valueOf();
      const filename = 'test' + timestamp + ext;
      cb(null, filename);
    },
  }),
});

이제 사용자 요청을 받는 router부분에서

uploadImage를 미들웨어로 넣어주면 된다.

// image.router.ts
router.post('/image/upload', uploadImage.single('photo'), (req, res) => {
  ...
})

3. key로 s3 object를 불러와 압축 후 재 업로드 & 기존 파일 key로 제거

uploadImage 처리 후 req.file에서

업로드된 이미지 객체의 key를 확인할 수 있다.

이 key를 활용해 객체를 불러와

압축하여 재업로드 및 삭제를 진행할것이다.

// aws.ts
export const compressImageUploadByKey = async (key: string, width?: number) => {
  try {
    const compressedKey = `compressed_${key}`;
    const config = {
      Bucket: 'test.bucket',
      Key: key
    }
        
    let resizedConfig: any = {
      Bucket: 'test.bucket',
      Key: compressedKey
    }

    // fetch
    const imageData: any = await s3.getObject(config).promise();

    // resizing
    const imageBuffer = await sharp(imageData.Body).resize({ width: width || 640 }).toBuffer();
    resizedConfig.Body = imageBuffer;
    
    // upload
    await s3.putObject(resizedConfig).promise();

    // origin image delete
    await s3.deleteObject(config).promise();

    return compressedKey;
  } catch(error) {
    console.log('Get image by key from aws: ', error);
  }
}

불러오고, 압축하고, 업로드하고, 지우고

4가지 작업이 진행되었다.

새로 업로드된 이미지의 Key를

DB에 저장하거나 하는 작업을 

각 작업 환경에 맞게 진행하면 끝