다다의 프로그래밍

리액트 네이티브 환경변수를 설정하고 서버 URL이 변경되어 값을 변경하고 다시 빌드를 진행하였다 

(https://magicofdream.tistory.com/30)

안드로이드의 경우는 변경한 URL로 접속이 되었는데, IOS 시뮬레이터로 테스트 시 기존의 URL로 계속 접속이 되어 삽질을 하였다.

1. Metro서버에 캐시가 남아있어서 발생하는 문제라 생각하고.Metro 서버 종료 후 캐시 리셋을 하였다.

react-native start --reset-cache

하지만 여전히 IOS에서 기존 URL로 접속하고 있었다.

2. 시뮬레이터에 캐시가 남아 있을 수도 있어서..? 라는 이야기가 있어 시뮬레이터를 종료 후 다시 실행을 해보았으나, 여전히 Config데이터는 변경되지 않았다.

3. node_module에 데이터가 캐싱되어 있을수 있다는 생각을 하고 프로젝트에 node_modules 폴더를 삭제 후 npm install을 하고 pod install 진행 후 다시 앱을 빌드하였다. Config값은 정상적으로 바뀌었으나 모듈을 모두 삭제하고 다시 빌드를 진행하여 꽤 시간이 오래걸렸다.

rm -rf node_modules

npm install

cd ios && pod install

4. 빌드 시간을 줄이고자 react-native-config 모듈을 삭제 후 재설치 pod install을 진행하였다.

npm uninstall react-native-config

npm install react-native-config

cd ios && pod install

다시 빌드를 하고 실행하니, 정상적으로 되는 것으로 Config 값이 갱신 되었음을 확인하였다. 이 방법 말고 다른 방법을 찾다가 react-native-config github의 issue에서 다른 방법을 발견 하였다.

https://github.com/luggit/react-native-config/issues/591

5. Xcode에서 ios폴더의 프로젝트를 오픈하고 Product >> Clean Build Folder를 진행 후 다시 빌드한다.

실행이 되지 않을 시 pod install 후 다시 실행하니 Config 값이 변경이 적용되었다.

※ 빌드 시간이 오래 걸린다는 단점이 존재한다.

React-Native의 자바스크립트 코드에서 환경변수를 구성할 때  react-native-config를 사용한다.

react-native-config 모듈은 패키징을 할 때 데이터를 난독화 하거나 암호화 하지 않음으로 민감한 정보에 대해서는 값을 넣지 않는 것을 추천한다.

https://github.com/luggit/react-native-config

- 사용밥법

react-native-config npm 모듈 설치

npm install react-native-config

프로젝트 root에 .env파일을 생성하고 아래와 같이 환경변수 값을 설정하여 사용한다.(key=value)

API_URL=https://apiurl

사용하고자 하는 자바스크립스 소스에 import

import Config from 'react-native-config';

import 후에 아래와 같은 형식으로 사용하면 된다.

const url = Config.API_URL;

• Android

android/app/proguard-rules.pro 에 아래내용 추가

-keep class com.fooddeliveryapp.BuildConfig { *; }

android/app/build.gradle에 아래내용 추가

apply plugin: "com.android.application"

apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

...

    defaultConfig {

        ...

        resValue "string", "build_config_package", "com.fooddeliveryapp"

    }

• IOS

ios/podfile에 아래 내용추가

pod 'react-native-config', :path => '../node_modules/react-native-config/react-native-config.podspec'

pod install 실행 (프로젝트/ios 경로에서)

pod install

사이드 바 열고/닫기
Windows Ctrl + B
MacOS : Cmd + B


빠른 열기(파일이나 기호 탐색)
Windows Ctrl + P
MacOS : Cmd + P


모든 명령 표시 (에디터의 모든 명령에 접근)
Windows Ctrl + Shift + P
MacOS : Cmd + Shift + P


편집 닫기
Windows Ctrl + W
MacOS : Cmd + W

찾기 탐색
Windows Ctrl + F
MacOS : Cmd + F


찾기(검색)/바꾸기(대체)
Windows Ctrl + H
MacOS : Cmd + Alt(Opt)+ F 

줄 위로 이동할수
Windows Alt(Opt) + Up
MacOS : Alt + Up

줄 아래로 이동할수
Windows Alt(Opt) + Down
MacOS : Alt + Down

아래 줄 복사
Windows Alt(Opt) + Shift + Down
MacOS : Alt + Shift + Down

위에 줄 복사
Windows Alt(Opt) + Shift + UP
MacOS : Alt + Shift + UP

들여쓰기
MacOS : Tab
Widows : Tab

Node js는 chrome v8 javascript 엔진으로 빌드된 JavaScript 런타임 환경을 말한다.
※ 기본적으로 HTML, CSS, JavaScript으로만으로도 웹개발이 가능하지만, 효율적인 웹 개발을 위해 Node js를 사용한다.

Node js 설치 시 LTS(Long Term Supported) 버전과, 최신 버전이 존재한다.

보통 LTS버전은 짝수 버전 (ex:12.x.x,14.x.x,16.x.x 등) 최신버전은 홀수 버전(ex:11.x.x,13.x.x,15.x.x 등)으로 되어 있다.
LTS 버전은 장기적으로 안정되고 신뢰성이 높으며 안정적 지원이 보장된 버전이다. 주로 안정적인 유지/보수가 필요한 서버보안등에 사용된다.
최신 버전의 경우는 웹에서 사용되는 최신의 기술들을 사용할수 있지만, 안정적이지 않아 업데이트가 빈번하게 발생하는 등의 안전성 문제가 발생할수있어 테스트 용으로 사용된다.
실제 개발 시에는 LTS 버전 사용을 권장하며, 보통 개발 시 한개의 Node js만 설치하여 사용하는 것이 아니라 프로젝트 별로 여러 개의 Node js 버전을 사용하기 때문에 nvm(Node Version Manager)을 사용한다.

※ nvm(Node Version Manager) : node js를 버전별로 설치하여 필요한 버전으로 node js 버전을 변경할수 있음

프로젝트 빌드 환경에 따라 nvm을 이용하여 Node js 버전을 변경해가며 사용한다.

Node js를 사용하면, npm(Node Package Manager)을 사용할 수 있다.

※ npm (Node Package Manager) : node js 개발 시 전 세계의 개발자들이 만든 다양한 기능(패키지, 모듈)을 관리, 개발 시 필요한 기능을 설치하여 쉽게 사용할수 있다.

npm을 사용함으로 관리 효율증가와 손쉬운 기능 고도화가 가능하지만 구성이 복잡해지고, 기능에대한 학습의 난이도가 증가하는 Trade-off(상충관계)가 발생한다.