vscode 에서 rn을 작성하고있다보면 보이는 이 js 파일 로고...

이걸 굳이 jsx로 확장자를 변경해보면 

이런 멋진! 리액트 로고가 된다.

굳이 해줄 필요는 없어 보이나

난 이 로고로 작성해나가고 싶어서 jsx 파일 지원에 대한 글을 작성해본다.

 

우선 rn프로젝트 루트에서 지원되는 확장자를 따로 작성해줘야한다.

 

metro.config.js 파일에 해당 내역을 작성해주면된다.

 

참고로 sourceExts영역은 md파일이라던가 뭔가 다른 확장자를 가진 애를 가져올때 적어주면된다.

 

module.exports = {
  transformer: {
  	...
  },
  resolver: {
    sourceExts: ['jsx', 'js'], //add here
  },
};

 

사실 이 metro설정에도 우선 적용되는 단계가 있다고한다만 그냥 여기다가 적자...

만약 해당 파일이 없으면

package.json 파일에 metro영역을 만들어 적용해주자

 

자세한 방법은 공식 도큐먼트를 봅시다...

https://facebook.github.io/metro/docs/configuration/#resolver-options

 

Configuring Metro | Metro

A Metro config can be created in these three ways (ordered by priority):

facebook.github.io

 

 

A Metro config can be created in these three ways (ordered by priority):

  1. metro.config.js
  2. metro.config.json
  3. The metro field in package.json

You can also give a custom file to the configuration by specifying --config <path/to/config> when calling the CLI.

 

 

 

'React Native' 카테고리의 다른 글

rn fcm messaging error code 번역  (0) 2023.04.26
rn 에서 android 뷰 사용하기.  (0) 2022.03.02
UI Test를 위해 Detox를 적용해본다. -iOS  (0) 2021.12.15
npm install을 주의하라  (0) 2021.10.22
npm version downgrade  (0) 2021.07.12

https://github.com/uber/RIBs/wiki/iOS-Tutorial-1

'메모' 카테고리의 다른 글

링크 NestJS로 배우는 백엔드 프로그래밍  (0) 2022.03.30
Decodeable ????????????????????????????????????  (0) 2022.03.21
Git: Sourcetree에서 커밋이 안된다.  (0) 2022.02.07
단어저장용2  (0) 2020.04.14
저장용...  (0) 2020.04.14

회사에서 작성한 프로젝트를 집 맥에서 돌리려고 하니 아래와 같은 에러가 발생했다.

This version of the Android Support plugin for IntelliJ IDEA (or Android Studio) cannot open this project, please retry with version 2021.1.1 or newer.

 

안드로이드는 튜토리얼도 제대로 따라해본적이 없는 문외한이라 어찌 해줘야할지 막막하다 그냥 프로젝트 구성문제 이겠지 하고 

프로젝트 자체를 새로 생성해서 소스를 옴겨 돌리자 생각했다.

 

그러자 아래와 같은 에러가 났다.

 

Could not find method dependencyResolutionManagement()

 

...

 

프로젝트 생성 초기인데 이래도 되는건가

 

스택오버플로우에서는 아래와 같은 답벼이 있었다.

https://stackoverflow.com/questions/67009832/android-studio-arctic-fox-2020-3-1-canary-14-could-not-find-method-dependencyr

 

Android Studio Arctic Fox | 2020.3.1 Canary 14 Could not find method dependencyResolutionManagement() for arguments

I am trying to create a new project(Test8) on Android Studio Canary 14 using new project wizard with BasicActivity template but am running into build error. Here is the log of error Settings file '...

stackoverflow.com

 

전부 하나같이 gradle-wrapper.properties의 수정을 하고있어서 따라해줬더니

해당 파일의 distributionUrl  를

distributionUrl=https\://services.gradle.org/distributions/gradle-7.0-rc-1-bin.zip

 

 

로 설정해줬다.

 

그랬더니 이젠 

> Failed to apply plugin 'com.android.internal.version-check'.
   > Minimum supported Gradle version is 7.0.2. Current version is 7.0-rc-1. 

라고 에러가 뜬다....

 

힘들다

 

gradle버전을 변경해주려고해도 버전명이 어떻게 되는지 모르니

결국 해당 사이트들어가서 목록을 확인후 아래와같이 변경해줬다.

https://services.gradle.org/distributions/

 

Gradle Distributions

 

services.gradle.org

참고로 7.0.2 버전이라고 적힌것들은 이것들이다

 gradle-7.0.2-wrapper.jar.sha256 14-May-2021 14:12 +0200 64.00B

 gradle-7.0.2-docs.zip 14-May-2021 14:12 +0200 36.71M

 gradle-7.0.2-docs.zip.sha256 14-May-2021 14:12 +0200 64.00B

 gradle-7.0.2-src.zip 14-May-2021 14:12 +0200 39.45M

 gradle-7.0.2-src.zip.sha256 14-May-2021 14:12 +0200 64.00B

 gradle-7.0.2-bin.zip 14-May-2021 14:12 +0200 106.87M

 gradle-7.0.2-bin.zip.sha256 14-May-2021 14:12 +0200 64.00B

 gradle-7.0.2-all.zip 14-May-2021 14:12 +0200 147.19M

 gradle-7.0.2-all.zip.sha256 14-May-2021 14:12 +0200 64.00B

 

 

distributionUrl=https\://services.gradle.org/distributions/gradle-7.0.2-all.zip

 

좋았어 이제 에러가 안보인다!

 

빌드 클린을 하고 이제 작업을 시작해보려고한다.

 

라 했으나 클린을 누르니 아래와 같은 에러가 뜬다

 

Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8.

 

그만하고 싶어진다

 

도대체 프로젝트가 막 생성되었는데 뭐이리 방해가 많은지

분명 이전까지만 해도 다른 프로젝트들은 잘 돌리면서 왜그런지 다 때려치고 도망가고싶어질때 일단 돈받고 일하는거니

java버전도 변경해주자

 

난 맥환경이다.

상단 메뉴의(Android Studio) -> Preferences -> Build, Execution, Deployment -> Build Tools -> Gradle

에서 Gradle JDK 버전을

11로 변경해줬다.

설치한 기억은 없으나 왠지 모르게 설치 되어있으니 

이제 빌드 클린을 해보면

 

와 돌아간다!

이제서야 코드를 옴겨서 돌려봐야겠다.

UI Test의 자동화를 추가 해보려고했다.

 

Appium을 먼저 시도를 했으나 이상하게도 시뮬레이터에서 어마어마게 지연현상이 일어나고 이러면 그냥 손으로하는게 더빠르겠다 싶어서 포기한적이 있었다. 

무엇이 문제였는지는 아직도 모르겠다.

 

그리고 이제 다시 Detox로 해보려고 한다.

 

사실 디톡스의 홈페이지에 방법이 적혀있다

디톡스를 적용해볼 사람은 굳이 이글을 읽지말고

https://wix.github.io/Detox/docs/introduction/getting-started/ 

 

Getting Started | Detox

Getting Started

wix.github.io

를 보는게 좋다고 본다.

 

일단 필요한 도구들을 설치해준다.

npm install -g detox-cli

npm install detox --save-dev

디톡스들을 설치해주고

설정은 나중에 할거다.

 

그전에 문서에 이러한 항목이 있다.

Tip: Remember to add the node_modules folder to your git ignore file (e.g. .gitignore).

gitignore에 무시항목을 꼭 넣어주라는 말인데 

이걸 안해주면 모든 파일이 깃에 추가되어 특히 라이브러리들이 많은 리엑트 네이티브에서는 깃관리의 헬이 벌어진다.

프로젝트의 루트폴더에 .gitignore 라는 숨긴파일이 있을것이고 

해당 내용을 수정해주면된다.

폴더 자체를 관리 안할수도있고

파일 확장자별로도 관리 안할 수도 있고

여러가지가 있다.

 

 

디톡스를 설정하기전  나는 프로젝트가 제대로 시뮬레이터상에서 동작하는지 확인을 해야한다고 생각한다.

그래서 첫단계는

1. npm i 

로 라이브러리 먼저 설치한다.

여러가지 버전 문제로 실제로나는

 

npm i --force

 

의 명령어를 프로젝트 루트 폴더에서 실행시켰다.

 

그 다음은 ios 의 라이브러리를 설치한다.

cd ios && pod install --repo-update

 

왜 레포지토리의 업데이트도 같이 하는지는 내 프로젝트에서 사용중인 firebase 관련 라이브러리들이 이상하게 버전이 계속 어긋난다.

이럴때 --repo-update 옵션을 붙이니 잘맞게 설치가 되었다.

 

이제 iOS시뮬레이터로 돌아가는지 테스트를 해본다.

 

npx react-native run-ios --simulator="iPhone 12 mini"

 

시뮬레이터 옵션을 붙이는 이유는 맥북의 용량이 적기에 필요한 시뮬레이터만 남기고 죄다 삭제해버렸다.

그래서 기본으로 잡히는 시뮬레이터가 존재하지않는다는 에러를 뱉기에 따로 지정해줬다.

 

안드로이드는.... 결론만 말하자면 실패했다 이에 대해서는 후반부에 다시 적을 것이다.

iOS가 정상적으로 돌아가기에 이제 설정해줬다

 

detox init

를 실행한다.

 

디톡스에대한 설정을 package.json에 설정해줘도 된다고 적혀있지만

난 .detoxrc.json에 설정해줬다.

아래는 공식문서에 적힌 형식이다.

{
  "devices": {
    "simulator": {
      "type": "ios.simulator",
      "device": {
        "type": "iPhone 12 Pro Max"
      }
    }
  },
  "apps": {
    "ios.release": {
      "name": "YourProject",
      "type": "ios.app",
      "binaryPath": "ios/build/Build/Products/Release-iphonesimulator/YourProject.app",
      "build": "xcodebuild -project ios/YourProject.xcodeproj -scheme YourProject -sdk iphonesimulator -derivedDataPath ios/build"
    }
  },
  "configurations": {
    "ios.sim.release": {
      "device": "simulator",
      "app": "ios.release"
    }
  }
}

뭔가 많다.

release라고 뒤에 붙은 애들과 따로 debug용으로 나눌수 있어서 이렇게 한것으로 보이나

난 디버그용이면 충분하다고 생각한다.

 

그래서 나는 아래와 같이 설정했다.

{
    "testRunner": "jest",
    "runnerConfig": "e2e/config.json",
    "skipLegacyWorkersInjection": true,
    "apps": {
      "ios": {
        "name":"<AppName>",
        "type": "ios.app",
        "build": "xcodebuild -workspace ios/<ProjectName>.xcworkspace -scheme <ProjectName> -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
        "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/<ProjectName>.app"
      }
    },
    "devices": {
      "simulator": {
        "type": "ios.simulator",
        "device": {
          "type": "iPhone 12 mini"
        }
      },
      "emulator": {
        "type": "android.emulator",
        "device": {
          "avdName": "Pixel_API_28_AOSP"
        }
      }
    },
    "configurations": {
      "ios": {
        "device": "simulator",
        "app": "ios"
      },
      "android": {
        "device": "emulator",
        "app": "android"
      }
    }
  }

 

ios는 여타 다른 설정이 굳이 필요하지 않다

바로 e2e폴더에 테스트 코드를 넣고 돌리면 된다.

 

예제용 코드

describe("First UI test1", () => {

  it("should show Step One", async () => {
    await device.launchApp();
    await expect(element(by.text("Step One"))).toBeVisible();
  });

  it("should show Debug", async () => {
    await expect(element(by.text("Debug"))).toBeVisible();
  });

  it("should show \"Learn More", async () => {
    await expect(element(by.text("Learn More"))).toBeVisible();
  });
});

주의점은

if가 아니라 it이라는것과

여러 it이 있지만 하나라도 뭔가 이상하면 테스트가 없다고 에러가 날수 있다는점과

해당 코드들 기본으로 쓰이는 expect나 it , element 등등에 대한 import가 위에 적용될시 에러가 날 수 있다는점이다.

이런한 점때문에 시간을 참 많이 날렸다.

 

 

테스트를 돌릴려면 빌드가 필요하다.

detox build --configuration <your configuration name>

를 프로젝트 루트에서 실행해서 에러를 잡으면된다

 

나는

detox build --c ios

로 돌렸다.


configuration 을 c로도 동작한다는게 공식페이지에선 보이지 않는다.

 

테스트 코드를 실행하려면

detox test --configuration <your configuration name>

로 실행을 하면 기존 설치된앱이 삭제되고 새로 깔리며 실행된다.

 

나는

detox test -c ios 

로 돌렸다.

 

 

추가적인 팁을 적자면

 

각 파트별을 컴포넌트화 하여 임포트 시켜 사용할 수 있다.

난 긴 명령어를 간단하게 작성하려고 컴포넌트화를 시켜서 사용했다

다른 라이브러리를 임포트하여 ( axios )네트워크 통신도 넣어볼수있다.

- 어디선가 본 글에는 이러한 네트워크 통신을 테스트코드에 넣지말고 임의로 값을 반환해서 마치 값을 잘 받아온것처럼 하라고 하여서 서버 부담을 없애야한다고 했다. 만 나는 그냥 돌렸다.

 

 

 

iOS - 끝!

 

다음글은 결국 실패하고 기약을 알 수 없이 미뤄버린 안드로이드에대한 글이다.

 

'React Native' 카테고리의 다른 글

rn 에서 android 뷰 사용하기.  (0) 2022.03.02
굳이 jsx를 사용하고싶다.  (0) 2022.01.05
npm install을 주의하라  (0) 2021.10.22
npm version downgrade  (0) 2021.07.12
SafeAreaView의 상단을 참조안하는 방법에 대해  (0) 2021.07.07
  • This will unstage all files you might have staged with git add:
  • git reset
  • This will revert all local uncommitted changes (should be executed in repo root):You can also revert uncommitted changes only to particular file or directory:Yet another way to revert all uncommitted changes (longer to type, but works from any subdirectory):
  • git reset --hard HEAD
  • git checkout [some_dir|file.txt]
  • git checkout .
  • This will remove all local untracked files, so only git tracked files remain:WARNING: -x will also remove all ignored files, including ones specified by .gitignore! You may want to use -n for preview of files to be deleted.
  • git clean -fdx

To sum it up: executing commands below is basically equivalent to fresh git clone from original source (but it does not re-download anything, so is much faster):

git reset
git checkout .
git clean -fdx

Typical usage for this would be in build scripts, when you must make sure that your tree is absolutely clean - does not have any modifications or locally created object files or build artefacts, and you want to make it work very fast and to not re-clone whole repository every single time.

 

 

https://stackoverflow.com/questions/14075581/git-undo-all-uncommitted-or-unsaved-changes

 

git undo all uncommitted or unsaved changes

I'm trying to undo all changes since my last commit. I tried git reset --hard and git reset --hard HEAD after viewing this post. I responds with head is now at 18c3773... but when I look at my local

stackoverflow.com

 

 

 

 

 

이전 커밋 상태로 돌아가는게 아니라 그냥 관리하지않는 내역을 전부 삭제해버리는거였다.

결국 그냥 폴더 지우고 깃에서 다시 다운로드 받고 새롭게 라이브러리 설치.

https://devhyun.com/blog/post/8

 

당신이 npm install을 사용하지 말아야할 때 - 데브현

아래는 Qiita에 개재된 「あなたがnpm installをしてはいけない時」를 번역한 내용입니다. 다소 의역이 있어 어색한 부분이 있어도 양해 부탁드립니다. 🙉 개요 여러분은 평소에, 무의식적으로 npm

devhyun.com

새로운 회사로 입사한후로 어언 반년이 지나 일주년을 바라보고 있습니다.

이 회사에서는 앱개발을 RN으로 하기에 처음 접해보는 자바스크립트 개발환경에 당황을 하면서 어찌어찌 개발을 이어나가고 있습니다.

그러던중 블로그에서 시키는대로, 책에서 시키는대로 프로젝트 시작시에는 npm i 를 입력하고 들어가고있었는데

요즘 노드 버전 업데이트로 고군분투 하던중 lock파일의 필요성과 lock파일을 사용방법에 대해 글을 우연히 접하게 되어 이렇게 링크를 남깁니다.

 

요약 -

npm install 로 설치되는 패키지.json 파일의 ^1.x.x 는 현재 1.01 버전일지라도 나중에 뒤에 마이너버전 업데이트가 될시에 최신버전으로 설치해라는 뜻

그러니 이전 개발 환경과 동일하게 설치하고 싶다면 lock파일에 기술되어 있는데로 설치하는 npm ci로 설치를 하도록.

https://github.com/morizotter/KeyboardObserver

 

GitHub - morizotter/KeyboardObserver: For less complicated keyboard event handling.

For less complicated keyboard event handling. Contribute to morizotter/KeyboardObserver development by creating an account on GitHub.

github.com

 

매번 Notification으로 받고 하는게 뭔가 안좋아보여서 참고할 오픈소스....

 

나중에 보자

https://xho95.github.io/swift/programming/language/grammar/2017/02/28/The-Swift-Programming-Language.html

 

Swift 5.5: Swift Programming Language (스위프트 프로그래밍 언어)

 

xho95.github.io

애플 공식 swift 5.5 문서를 번역하는 블로그.

'iOS > swift' 카테고리의 다른 글

메모. 스위프트 알고리즘  (0) 2022.01.12
KeyboardObserver~  (0) 2021.10.19
UIPickerView 의 텍스트 색상 변경하는 방법  (0) 2021.06.17
프로그래머스 - 프린터  (0) 2021.05.06
프로그래머스 - 기능개발  (0) 2021.05.05

+ Recent posts