밀래의 코딩북

k8s metrics-server 설치 및 running 되지 않을때..

밀래 — Tue, 9 Jul 2024 22:46:50 +0900

k8s metrics-server를 설치하고 적용 했는데 running 되지 않은 상태에서 막힌다면 다음을 해보시면 좋을 것 같습니다.

k8s metrics-server 설치

Metric-server를 설치하기 위해서는 아래 레파지토리에서 릴리즈 항목을 확인한 후 설치하면됩니다.

https://github.com/kubernetes-sigs/metrics-server

GitHub - kubernetes-sigs/metrics-server: Scalable and efficient source of container resource metrics for Kubernetes built-in aut

Scalable and efficient source of container resource metrics for Kubernetes built-in autoscaling pipelines. - kubernetes-sigs/metrics-server

github.com

아래 명령어는 릴리즈 항목에 들어가면 확인할 수 있는데 설치하고자 하는 환경에서 실행합니다.

kubectl apply -f https://github.com/kubernetes-sigs/metrics-server/releases/download/v0.7.1/components.yaml

Readiness probe failed: HTTP probe failed with statuscode: 500

kubectl top 명령어는 metrics-server의 기본 명령어 입니다.

그런데 아래와 같이 API를 사용할 수 없다고 나오면 어디를 체크해야할지 알기 힘든데요.

> kubectl top pod
error: Metrics API not available

그래서 다음 명령어를 처보면 Metrics Server가 설치는 되었지만 실행이 안된 것을 확인할 수 있습니다.

> kubectl get po -n kube-system
NAME                               READY   STATUS    RESTARTS       AGE
coredns-7db6d8ff4d-dr9vz           1/1     Running   0              5d8h
coredns-7db6d8ff4d-t2824           1/1     Running   0              5d8h
etcd-minikube                      1/1     Running   0              5d8h
kube-apiserver-minikube            1/1     Running   0              5d8h
kube-controller-manager-minikube   1/1     Running   0              5d8h
kube-proxy-sr2m6                   1/1     Running   0              5d8h
kube-scheduler-minikube            1/1     Running   0              5d8h
metrics-server-7ffbc6d68-g8clp     0/1     Running   0              3m21s
storage-provisioner                1/1     Running   1 (5d8h ago)   5d8h

왜 metrics-server가 실행안되는지 확인하려면 아래 명령어를 실행합니다.

> kubectl describe po -n kube-system metrics-server-7ffbc6d68-g8clp
...
...
...
Events:
  Type     Reason     Age                     From               Message
  ----     ------     ----                    ----               -------
  Normal   Scheduled  9m6s                    default-scheduler  Successfully assigned kube-system/metrics-server-7ffbc6d68-g8clp to minikube
  Normal   Pulling    9m5s                    kubelet            Pulling image "registry.k8s.io/metrics-server/metrics-server:v0.7.1"
  Normal   Pulled     9m                      kubelet            Successfully pulled image "registry.k8s.io/metrics-server/metrics-server:v0.7.1" in 5.648s (5.648s including waiting). Image size: 66896932 bytes.
  Normal   Created    8m59s                   kubelet            Created container metrics-server
  Normal   Started    8m59s                   kubelet            Started container metrics-server
  Warning  Unhealthy  3m56s (x32 over 8m36s)  kubelet            Readiness probe failed: HTTP probe failed with statuscode: 500

위와 같이 500 코드로 에러가 발생한다면 다음 커맨드를 추가 해주세요.

> kubectl edit deploy -n kube-system metrics-server

아래 항목에 맞춰서 추가해줍니다.

vi 에디터 다루 듯이 i를 누르고 "- --kubelet-insecure-tls" 를 추가 한뒤 wq를 눌러 저장합니다.

    spec:
      containers:
      - args:
        - --cert-dir=/tmp
        - --secure-port=10250
        - --kubelet-preferred-address-types=InternalIP,ExternalIP,Hostname
        - --kubelet-use-node-status-port
        - --metric-resolution=15s
        - --kubelet-insecure-tls # 추가 항목

[vscode] 파일 자동 저장 설정 하기

밀래 — Mon, 25 Dec 2023 14:59:32 +0900

vscode를 처음 시작하게 되면 파일을 수동으로 저장을 시켜줘야 합니다.

vscode를 자동 저장하기 위해서는 설정을 해줘야 하는데

다음과 같이 설정해주시면 가능합니다.

파일 자동 저장

1. 간편 설정 방법

- 기본 설정 되어 있는 자동 설정으로 자동 저장만 실행할 경우 아래와 같이 기능을 체크해주면 됩니다.

- File - Auto Save 체크

2. 상세 설정 방법

- 상세 설정을 하고 싶다면 설정 항목으로 들어가 설정 하면 됩니다.

- File - Preferences - Settings

- text Editor - Files - Auto Save

- Auto Save 에서는 총 4가지 설정이 가능

off : 자동저장 하지 않기
after delay : Auto Save Delay에서 설정한 시간이 지난 경우 자동저장
onFocusChange : 에디터 밖으로 포커스를 이동하면 자동 저장
onWindowChange : vscode 에디터 밖으로 포커스를 이동하면 자동 저장

- Auto save Delay는 after delay 일 때 필요한 값입니다.

기본 설정은 1000ms 마다 저장되며 변경 사항이 없을 경우 저장됩니다.

Chatgot - LLM (GPT) 여러 모델을 한 화면에서 사용하는 사이트

밀래 — Sun, 29 Oct 2023 12:57:58 +0900

LLM 관련 서비스가 많이 나오는데 각각의 사이트에서는 자신들의 모델만을 사용할 수 있게 만들고 있는데요.

이 사이트는 여러 회사의 모델들을 한번에 사용할 수 있게 만드는 사이트 입니다.

재미있기도 하고 이런 아이디어가 이제 필요한 것 같네요.

다양한 모델은 서비스 하는 업체의 사이트에서만 사용하는 것도 피로도가 높거든요.

더욱이 지금 물어보던걸 다른 사이트에 또 물어보려면 여러 스텝을 거쳐서 이동한 뒤에 물어봐야하니깐요.

만약, 히스토리가 있다면 그 히스토리도 다 천천히 물어봐야 합니다.

그렇게 생각하면 바로바로 모델을 바꿔서 이야기 할 수 있는게 좋은 것 같네요.

https://start-chat.chatgot.io/

Chatgot

start-chat.chatgot.io

수다쟁이라는 사이트 인데요. Chat got입니다.

화면은 다른 LLM 서비스와 동일하고 상단에 사용할 수 있는 모델들이 뜹니다.

현재는 베타 서비스라서 그런지 따로 인증을 하지는 않고 구글 로그인만 하면 됩니다.

@를 붙이면 같은 대화방에서 바로 모델로 전환 할 수 있습니다.

현재는 GPT 3.5, GPT 4, 클로드, 라마, Midiourney를 사용할 수 있습니다.

위 스샷은 자동 번역때문에 ㅎㅎ 중주기행으로 뜨네요.

위 화면처럼 간단하게 GPT3.5랑 이야기하다가 자연스럽게 GPT-4로 이동 가능합니다.

그리고 히스토리도 자연스럽게 이동해서 대화할 것 같네요.

참신하면서 다양한 모델들이 많아지는 지금에는 필요한 서비스가 아닌가 생각됩니다.

요즘은 커먼한 모든 것을 두루 아는 모델도 있지만 점점 전문 모델들도 많아지고 있기 때문에 LLM도 서로 대화하면서 특화된 내용을 전달해주는 서비스들이 계속 나오지 않을까 싶고 이 사이트는 그런 아이디어를 실현하기 위한 하나의 시작점 같네요.

괜찮은 서비스라서 한번 소개해보았습니다.

React Next.js 프로젝트 생성하기.

밀래 — Tue, 18 Jul 2023 20:06:17 +0900

React 프로젝트 생성하는 방법은 사용 용도에 따라 크게 4가지로 소개되고 있습니다.

일반적으로 front 독립적으로 운영되는 create-app cli를 활용한 방법을 활용합니다. 그리고 서버 사이드 랜더링 및 풀스택개발을 위한 Next.js를 기반으로 프로젝트를 생성할 수 있습니다.

이 포스팅에서는 Next.js를 활용하여 기본적인 프로젝트를 생성하는 방버에 대해 작성해보려고 합니다.

0. Next.js 란?

Next.js는 리액트를 기반으로 한 오픈소스 자바스크립트 웹 프레임워크로, 리액트에는 없는 서버 사이드 렌더링 (SSR), 정적 사이트 생성 (SSG), 증분 정적 재생성 (ISR)과 같은 다양하고 풍부한 기능을 제공합니다. 이를 통해 개발자는 클라이언트와 서버에서 아주 복잡한 작업을 별다른 노력 없이 쉽게 구현할 수 있습니다.

주요 이유와 장점

서버 사이드 렌더링 (SSR)의 이점:
- 로딩 시간 단축: 클라이언트 사이드 렌더링 (CSR)은 모든 JS 파일을 로드해야 하기 때문에 사용자는 웹 페이지를 보기까지 많은 시간을 대기해야 합니다. 반면, 서버 사이드 렌더링은 서버에서 자바스크립트를 로딩하므로 클라이언트 측에서 자바스크립트를 로딩하는 시간이 줄어듭니다.
- SEO 개선: CSR은 자바스크립트가 로드되지 않은 경우 검색 엔진이 페이지 내용을 인식하지 못하므로 SEO에 불리합니다. 반면 서버 사이드 렌더링은 검색 엔진이 자바스크립트, HTML, CSS를 읽을 수 있으므로 SEO가 개선됩니다.
정적 사이트 생성 (SSG):
- 성능 개선: 정적 사이트 생성은 사전에 페이지를 미리 렌더링하여 사용자에게 즉시 표시될 수 있도록 합니다. 이로 인해 웹 애플리케이션의 초기 로딩 속도와 성능이 향상됩니다.
- 서버 부하 감소: 정적 페이지는 서버 측에서 렌더링되기 때문에 서버 부하가 CSR에 비해 적습니다.
코드 분할 (Code Splitting):
- 성능 최적화: 코드 분할을 통해 각 페이지에서 필요한 자바스크립트 파일만 로드하여 로딩 속도를 향상할 수 있습니다.
자동 폴리필 (Polyfill) 적용:
- 브라우저 호환성: Next.js는 폴리필을 자동으로 적용하여 다양한 브라우저에서 호환성 문제를 최소화합니다.
이미지 최적화:
- 성능 개선: Next.js는 이미지 최적화를 지원하여 불필요한 데이터를 제거하고 빠르게 로드되도록 도와줍니다.
웹 애플리케이션의 국제화 지원:
- 다국어 지원: Next.js는 국제화를 쉽게 구현할 수 있도록 도와줍니다.
타입스크립트에 대한 기본 지원:
- 타입 안정성: Next.js는 기본적으로 타입스크립트를 지원하여 개발자가 더 안정적인 코드를 작성할 수 있도록 합니다.
성능 분석:
- 앱 성능 파악: Next.js는 앱의 성능을 분석할 수 있는 도구를 제공하여 개발자가 최적화를 진행할 수 있도록 도와줍니다.

Next.js의 강력한 기능과 편리한 사용성으로 인해 현재 넷플릭스, 트위치, 틱톡, 훌루, 나이키, 우버, 엘라스틱과 같은 유명 기업에서 널리 사용되고 있습니다.

단점

서버 사이드 렌더링 (SSR)의 단점:
- 서버 부하 증가: 서버 사이드 렌더링은 서버에서 페이지를 렌더링하는데, 많은 요청이 발생할 경우 서버 부하가 증가할 수 있습니다.
페이지 이동 시 깜빡거림:
- UX 측면에서 불리: 페이지 이동 시 새로운 HTML 파일을 불러올 때 화면이 깜빡거리는 현상이 발생하여 사용자 경험에 약간의 불편을 줄 수 있습니다.
공개 빌드된 파일들의 폴더:
- .next 폴더: Next.js를 사용하는 프로젝트의 공개 빌드된 파일들이 .next 폴더에 위치하여 프로젝트임을 알기 어렵게 만들 수 있습니다.

이러한 장점과 단점을 고려하여 Next.js를 사용할지 여부를 결정하면 웹 개발 프로젝트에 적합한 선택을 할 수 있을 것입니다.

1. 프로젝트 새성하기

Next.js 생성 방식은 다음과 같이 소개되고 있습니다.

Next.js는 풀 스택 React 프레임워크입니다. 이는 다양하며 대부분 정적인 블로그부터 복잡한 동적 애플리케이션까지 모든 규모의 React 앱을 만들 수 있도록 합니다.

가장 일반적인 방법이라고 생각하면 될 것 같습니다.

React를 설치하기 위해서 node를 환경에 따라 설치합니다.

그리고 아래 명령어를 실행하면 설치합니다.

npx create-next-app

그리고 아래와 같이 순차적으로 선택해 줍니다.

TailWind CSS 선택 부분이 있는데 생소할 수 도 있습니다.

TailWind CSS 기존에 CSS를 직접 작성하여 HTML 소스에 적용하던 것을 미리 정의해 놓고 사용할 수 있게 만든 Utility-First 컨셉을 가진 CSS 프레임워크입니다.

https://tailwindcss.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

tailwindcss.com

class에 미리 정의된 UI 배치에 대한 클래스를 입력하여 빠르게 UI 개발을 완료할 수 있도록 도와주는 프레임워크로 Class 이름 선언을 고민할 필요 없이 UI에 대한 class만 선언하기 때문에 편리합니다.

물론, Tailwind CSS가 지원하는 내용에 대해 러닝커브는 존재할 것 같습니다.

각자의 판다에 맞춰 적용을 하시면 될 것 같습니다.

2. React App Server 시작

설치가 완료되면 아래 명령어를 실행하여 React App Server를 시작해 줍니다.

npm run dev

포트는 기본적으로 3000으로 앱이 구동됩니다.

구동이 완료되면 Next.js의 기본 화면을 확인할 수 있습니다.

3. Next.js의 라우터 이해

이제 프론트 서버 구동은 완료했으므로 페이지를 생성하는 방법을 이해해야 합니다.

설치 시 App Router를 선택 했을 경우 Next.js의 기본 구조는 app 폴더에서 시작합니다. 만약, 설치시 No를 선택했다면 pages 폴더 기반으로 동작합니다. 이 포스팅은 app폴더를 기반으로 정리합니다.

출처 : next.js

app 폴더를 기반으로 폴더 구조를 바탕으로 router가 작동합니다.

app 폴더 밑에 dashboard 폴더를 생성했다면 localhost/dashboard 라우터가 생성됩니다. 그리고 폴더 밑에 page.jsx 파일 또는 page.js 파일을 생성한다면 해당 페이지가 기본 페이지가 되게 됩니다.

기본 설명을 했으니 한번 실전으로 변경해 봅니다.

app 폴더 밑에 about 폴더를 생성합니다. 그리고 해당 폴더 밑에 page.tsx파일을 만들고 아래 코드를 입력합니다.

export default function about() {
  return "Here. About Page"
}

그리고 주소창에 http://localhost:3000/about를 입력하면 아래 페이지가 뜨는 것을 확인할 수 있습니다.

이렇게 기본적인 Next.js를 활용한 React 프로젝트를 생성해 보았습니다.

기본적인 Route 기능도 살펴보았으니 이제 하나의 페이지를 구성해 보면 될 것 같습니다. :)

[JavaScript] User ID 정규식 - 첫 글자 영어, 영어/숫자/특수문자 허용.

밀래 — Sun, 19 Feb 2023 15:29:23 +0900

JavaScript에서 UserId를 체크하는 정규식 입니다.

첫 글자는 영어를 허용하며 영어/숫자/특수문자 ( . _ ) 두가지만 허용하며 최대 30글자까지 사용할 수 있습니다.

정규식

다음은 요구사항을 충족하는 JavaScript 정규식 패턴 입니다.

/^[a-zA-Z][a-zA-Z0-9._]{0,29}$/

위 정규식 패턴은 다음과 같이 구성됩니다.

^ : 문자열의 시작을 나타내는 메타 문자
[a-zA-Z] : 첫 글자는 영어 대소문자만 허용
[a-zA-Z0-9._]{0,29} : 이후 글자는 영어 대소문자, 숫자, 특수문자 .(점)와 _(밑줄)만 허용하며, 글자 수는 0부터 29까지 허용
$ : 문자열의 끝을 나타내는 메타 문자

예를 들어, 다음과 같이 사용할 수 있습니다.

const regex = /^[a-zA-Z][a-zA-Z0-9._]{0,29}$/;
const userid = 'Abc123._';
if (regex.test(userid)) {
  console.log('userid is valid');
} else {
  console.log('userid is invalid');
}

본 포스팅은 ChatGpt를 활용하여 작성하였습니다.

실제 코딩에 활용하는 필요한 요구사항들을 ChatGpt를 활용하는 방법을 체크하는 중입니다.

02. 리엑트 네이티브의 동작 방식 - 브릿지, 가상돔

밀래 — Sat, 31 Jul 2021 17:40:09 +0900

브릿지

출처 : https://brocoders.com/blog/react-native-interview-questions/

리엑트 네이티브는 JavaScript로 개발하는데 어떻게 Native 코드로 동작할까? 이 궁금증을 해소하기 위해서는 브릿지의 개념을 알아야 합니다. 그리고 그 브릿지와 동작하는 Thread 개념을 이해해야 합니다.

브릿지는 JavaScript 코드를 이용해 네이티브 계층과 통신하는 역할을 합니다. 브릿지는 JavaScript 스레드 정보를 받아 네이티브에 전달합니다. JavasScript 스레드는 JavaScript 코드가 실행되는 장소이며 보통 리엑트 코드로 구성되어 있습니다. 네이티브를 담당하는 Main 스레드가 있고 레이아웃을 계산하는 데 사용하는 백그라운드 스레드인 Shadow 스레드가 있습니다. 또한, 네이티브 모듈이 있는데 각 모듈에 자체 스레드가 있습니다.

Main Thread & Shadow Thread

- UI Thread라고 불리기도 하며 네이티브 안드로이드와 IOS UI 랜더링에 사용됩니다.

- 예를 들면 안드로이드에서는 measure/layout/draw 작업을 할 때 사용됩니다.

Native Modules Thread

- 네이티브 API를 사용할 때 사용됩니다.

- 각 모듈마다 스레드를 가지고 있습니다.

JS Thread

- 애플리케이션의 JavaScript 코드, API 호출, 터치 이벤트 등이 실행되는 스레드입니다.

- 네이티브 뷰에 대한 업데이트는 일괄 처리되고 JS 스레드의 각 이벤트 루프 끝에서 네이티브 측으로 전송됩니다.

- 성능 유지를 위해 랜더링 시간에 맞춰 업데이트 신호를 보냅니다.

- ios 경우 60 frame을 위해 16.67ms 마다 신호를 보내기 때문에 16.67ms 보다 길어지는 동작의 경우 느려 보임.

가상돔

출처 : https://www.oreilly.com/library/view/learning-react-native/9781491929049/ch02.html

리엑트 네이티브의 동작 방식을 이해하려면 데이터가 변할 경우 자동으로 화면을 다시 그리는 리엑트의 가상 DOM 개념을 이해해야 합니다. DOM은 우리가 바라보는 화면이라고 이해하면 됩니다. 화면에 표시되는 DOM이 있는데 React에서는 이 DOM을 바로 업데이트하지 않고 화면에 보이지 않는 가상 DOM을 만들어 실제 DOM과 비교하는 역할로 관리하게 됩니다.

그림에서 보는 것 같이 가상돔이 생성되고 만약, 데이터가 변경되었을 때 우선 가상 돔에 업데이트하게 되고 이를 실제 DOM과 비교하여 차이점을 계산한 뒤에 차이점에 대한 부분을 전달하여 실제 돔에 반영합니다.

이때, 가상 돔이 변경될 때마다 변경 사항을 전달하지 않고 일정 시간 동안 계산 한 뒤 한 번에 보내게 됩니다.

리엑트 네이티브 동작 방식

1. 앱이 실행되면 Main 스레드가 실행되고 JS bundles를 로딩합니다.

2. JS 번들 로딩이 완료되면 Main 스레드는 JS 스레드로 보냅니다.

JS 스레드가 무거운 작업을 진행하더라도 Main 스레드는 문제가 발생하지 않기 때문입니다.

3. React가 랜더링을 시작할 때 Reconciler가 "dffing"을 시작하고 새로운 가상 돔(Virtual Dom)을 생성한 뒤 변경사항을 다른 스레드 (Shadow Thread)로 전달합니다.

4. Shadow Thread가 layout을 계산 한 뒤 layout의 parameter / object를 Main Thread로 보냅니다.

5. Main Thread는 shadow thread가 보낸 레이아웃을 화면에 렌더링 합니다.

[참고 자료]

https://brocoders.com/blog/react-native-interview-questions/

https://www.codementor.io/@saketkumar95/how-react-native-works-mhjo4k6f3

처음 배우는 리액트 네이티브

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

01. 리액트 네이티브란?

밀래 — Sat, 31 Jul 2021 11:30:16 +0900

리액트 네이티브 란?

리액트 네이티브는 2015년 페이스북이 공개한 오픈소스 프로젝트로 리엑트에 기반을 두고 제작되었습니다. 리액트와 달리 IOS, Android에서 동작하는 네이티브 모바일 애플리케이션을 만드는 자바스크립트 프레임워크로 시작하였고 최근에는 Windows, Mac, Web까지 확장하고 있습니다.

또한, 2018년에는 React Native의 Github의 모든 레파지토리에서 두 번째로 많은 contributors를 기록했습니다. 현재는 Microsoft, Expo, Callstack, Infinite Red 그리고 Software Mansion 등 다양한 기업과 개인의 기부로 지원받고 있습니다.

React Native : https://reactnative.dev/

React Native Windows + macOS : https://microsoft.github.io/react-native-windows/

React Native for Web : https://necolas.github.io/react-native-web/

이외 : https://reactnative.dev/docs/out-of-tree-platforms

현재 페이스북, 인스타그램, 핀터레스트, 월마트, 에어비앤비, 우버이츠, 테슬라 등 다양한 기업에서 리액트 네이티브를 선택하여 앱을 개발하고 있고 페이스북은 자사의 모든 앱을 React Native로 전환하고 있습니다. 또한 수천 개의 앱이 리액트 네이티브로 제작되고 있습니다.

React Native Showcase : https://reactnative.dev/showcase

리액트 네이티브의 장단점

장점

1. 하나의 언어 JavaScript로 많은 플랫폼을 지원.

리액트 네이티브의 가장 큰 장점이라고 말 할 수 있는 하나의 언어(JavaScript)로 멀티 플랫폼을 지원한다는 것입니다. 앞서 정리한 것처럼 Android, IOS를 시작으로 Web, Windows, Mac까지 지원하고 있습니다. 그리고 리액트 네이티브는 JavsScript와 TypeScript를 지원하고 있습니다.

JavaScript는 Github 기준으로 가장 많이 PR이 발생하는 언어로 전세계에서 가장 관심이 많은 언어라고 할 수 있습니다. 또한, 몇 년 전부터 Front End 개발 언어에서 서버인 Node.js 까지 확장되었고 Native App까지 확장되어 하나의 언어로 모든 분야를 개발할 수 있는 언어로 관심을 받고 있습니다.

최근에는 자바스크립트의 확장된 언어인 TypeScript도 주목 받으면서 그 관심은 더욱 커지고 있고 GitHub 기준으로 두 개의 언어를 합치면 26%가 넘어 1/4 이상의 PR이 발생할 수 있다고 할 수 있습니다.

결국 ReactNative의 장점은 여러 분야로 확장하고 있는 JavaScript 언어를 기반으로 다양한 플랫폼을 개발 할개발할 수 있으며 이 언어를 개발할 수 있는 개발자도 점점 많아지고 있다는 점을 꼽을 수 있습니다.

2. Fast Refresh

리액트 네이티브는 JavaScript의 장점을 살린 저장하는 즉시 변경사항을 확인할 수 있는 Fast Refresh 기능을 제공 합니다. 일반적으로 앱을 만들 때 "수정 > 새로 고침" 또는 "수정 > 컴파일 > 새로고침"을 통해 반영된 기능을 확인합니다. 리액트 네이티브의 경우에는 이러한 작업들이 생략되어 반영돼 코드를 수정된 즉시 확인할 수 있습니다.

이러한 장점은 개발 하는 시간을 줄여주고 생산성을 증대하여 빠른 개발이 가능하게 해 줍니다.

3. 플랫폼 간에 동일한 사용자 경험 및 개발 기간 단축

리액트 네이티브로 앱을 개발하게 되면 IOS, Android 간 동일한 사용자 경험을 줄 수 있습니다. 기본 제공되는 UI 구성 요소를 각각의 유사한 네이티브 요소로 변환하기 때문에 사용자는 동일한 사용자 경험을 각각의 플랫폼에서 가능합니다.

React의 UI 패러다임 및 JavaScript로 네이티브 앱을 개발하기 때문에 기존 앱 개발팀이 훨씬 빠르게 두 플랫폼을 작업 가능하게 합니다.

단점

1. 네이티브의 새로운 기능을 빠르게 적용 불가.

Android, IOS의 Version이 변경되면서 생성되는 신규 API를 빠르게 지원하지 못합니다. 예를 들면 IOS 14 버전이 출시되면 새로운 API가 발표됩니다. 이 기능을 사용하기 위해서는 리엑트 네이티브 버전 업이 되길 기다리거나 커뮤니티에서 관련 API를 지원하는 라이브러리가 올라와야 사용이 가능합니다.

물론, Bridge를 통해 Native Api를 연계하는 라이브러리를 개발할 수 있는 방법은 있지만 Native에 기능을 알아야 가능하기에 학습이 필요한 부분입니다. JavaScript부터 접한 개발자라면 지원하기를 기다리는 것이 빠를 수 있습니다.

결론적으로, 신규 네이티브 API를 지원하려면 시간이 필요합니다.

2. Android, IOS에 대한 이해도 필요.

리액트 네이티브가 멀티 플랫폼을 지원하는 것이 장점이자 단점이 될 수 있습니다. UI는 ReactNative로 개발할 수 있겠지만 기능들을 개발하다 보면 플랫폼마다 차이점이 있고 문제 파악 시 어느 정도 Native에 대한 이해도가 필요합니다.

Android 앱을 릴리즈 빌드할 때는 Android 빌드에 대한 개념이 필요하면 IOS 앱을 빌드 할때는 IOS 빌드에 대한 개념이 필요합니다. 간단한 앱을 개발할 때는 큰 문제가 되지 않지만 각각의 Native 기능들을 살린 기능들이 들어가게 되면 빌드 실패가 발생하는데 이때마다 Debug시에는 해당 Native에 대한 학습이 필요합니다.

참고

https://reactnative.dev/

[react-native] iOS 빌드 실패 - library not found for -lreact-native-slider

밀래 — Tue, 6 Jul 2021 01:44:38 +0900

react-native에서 ios 빌드를 하다보면 library not found 이슈가 발생하곤 합니다.

정확히 어떤 이유인지 알 수 없어 라이브러리만 계속 재 설치 해보기도 하고 pod을 모두 삭제 했다가 설치 해보기도 하지만

한번 꼬인 설정은 이런 방법으로 해결 안되더라구요.

그래서 제가 library not found 관련하여 해결한 방법을 정리 해봅니다.

library not found 해결 방법.

저는 react-native-slider 라이브러리를 설치하고 발생했습니다.

yarn && pod install 를 한 뒤 build를 진행했는데 계속해서 위 문제가 발생했습니다.

여러가지로 검색 해보다가 pod install 할때 발생한 wanring 메세지가 눈에 들어왔습니다.

위 메세지를 읽어보니 LIBRARY_SEARCH_PATHS 관련하여 정상적으로 라이브러리 설치 경로가 주입되지 않은 것 같다는 판단.

그래서 xcode로 ios 폴더 프로젝트를 열고 라이브러리 경로를 찾아봤습니다.

우선 [Project] > Pods > Prods-[ProejctName].debug.xsconfig 파일을 열어 LIBRARY_SEARCH_PATHS에 있는 라이브러리의 경로를 확인합니다. 그리고 위에 메세지로 표시된 또는 설치한 라이브러리의 경로를 확인합니다.

저 같은 경우는 react-native-slider 라이브러리를 찾지 못해 발생한다고 위에 빌드 실패시 확인했기 때문에

해당 경로만 확인하여 우선 복사합니다.

그 다음 프로젝트의 xcodeproj 파일을 열고 Build Settings 메뉴을 오픈 합니다.

Build Settings > Library Search Paths를 찾습니다.

이제 Debug에서 build/Debug 하얀색 글씨로 된 부분을 더블 클릭합니다.

그리고 복사한 라이브러리 경로를 추가해줍니다.

그리고 다시 빌드..

저 같은 경우는 이와 같은 방법으로 해결하여 빌드 성공 했습니

Google Functions & Firestore 저장하기 1편 - Functions 프로젝트 생성 및 Deploy 하는 법.

밀래 — Wed, 23 Jun 2021 12:00:01 +0900

Google Functions & Firestore 저장하기

1편 - Functions 프로젝트 생성 및 Deploy 하는 법.

1. Google functions를 사용하는 이유

토이 프로젝트에서 크롤링 Firebase에 데이터를 쌓아야 하는 이유가 생겼습니다.

처음에는 AWS의 Lamdba를 고려하여 연결하려고 했지만 Firebase console에서 Google Function를 한 번에 확인할 수 있고 같은 데이터 센터라는 이점이 있기 때문에 Google Function를 사용하게 되었습니다.

이 포스팅에서는 Google Function를 활용하여 크롤링 데이터를 Firebase까지 데이터를 쌓는 방법을 정리하려고 합니다. 여러편을 통해 정리할 예정이고 1편에서는 Google Functions을 Deploy 하는 방법을 정리해볼게요.

2. Functions 프로젝트 만들기.

Firebase Project가 생성되었다는 가정하에 포스팅을 정리합니다.

#1 firebase tools 설치하기

firebase tools를 설치하면 firebase에 필요한 기본 프로젝트를 생성할 수 있습니다.

Goolge Functions 외에도 GCP에서 사용가능한 프로젝트 생성이 가능합니다.

아래 명령어를 통해 npm 전역으로 설치해주세요.

npm install -g firebase-tools

#2 firebase 인증하기.

firebase 프로젝트를 생성하기 위해서는 firebase 인증을 해야 합니다.

아래 명령어를 실행하시면 브라우저를 통해 인증하는 화면으로 이동합니다.

firebase login

#3 프로젝트 생성하기

이제 인증을 완료하면 프로젝트를 생성할수 있습니다.

프로젝트를 생성할 폴더를 만든 뒤에 터미널로 접속하여 아래 명령어를 실행합니다.

firebase init

Space bar로 Functions를 선택하고 진행합니다. 프로젝트는 기존에 있다면 기존 프로젝트를 설정하셔야 합니다.

(주의 : 요금제는 Blaze로 설정되어야 해당 Functions를 사용이 가능)

3. Functions Deploy 하기.

이제 생성된 프로젝트를 테스트 하기 위해서 Firebase Functions에 Deploy 해보겠습니다.

프로젝트 만들때 생성되었던 index.js를 아래와 같이 수정합니다.

const functions = require("firebase-functions");

exports.helloWorld = functions.https.onRequest((request, response) => {
  functions.logger.info("Hello logs!", {structuredData: true});
  response.send("Hello from Firebase!");
});

파일을 수정 완료 하였다면 아래 명령어를 통해 서버에 반영합니다.

firebase deploy

명령어를 입력하면 서버로 Deploy가 시작되고 완료되면 아래와 같이 표시됩니다.

4. Google Function API 호출하기

Firebase Console에서 Functions 메뉴를 들어가면 Deploy 된 함수를 확인할 수 있습니다.

트리거에 표시되는 API를 브라우저에 입력하면 정상 호출되는지 확인 가능합니다.

Function의 경우 기본 us-central1으로 설정됩니다.

만약, Region을 이동하고 싶다면 아래와 같이 함수에 설정하여 다시 반영해야 합니다.

const functions = require("firebase-functions");

exports.helloWorld = functions.region("asia-northeast3").https.onRequest((request, response) => {
  functions.logger.info("Hello logs!", {structuredData: true});
  response.send("Hello from Firebase!");
});

"asia-northeast3"는 서울 리전입니다.

리전에 대한 리스트는 아래 링크로 참조하세요.

https://firebase.google.com/docs/functions/locations?hl=ko

Cloud Functions 위치 | Firebase

Cloud Functions는 리전을 기반으로 합니다. 즉 Cloud 함수를 실행하는 인프라가 특정 리전에 있으며 해당 리전 내의 모든 영역에서 중복으로 사용할 수 있도록 Google이 관리합니다. 함수를 실행할 지

firebase.google.com

다음 편에는 Google Function을 활용하여 Firestore에 데이터를 저장하는 방법을 정리하겠습니다.

AWS Lambda로 크롤링 데이터 Firebase에 데이터 쌓는 법 ( 로컬 테스트 ) - 2편

밀래 — Tue, 22 Jun 2021 16:52:38 +0900

AWS Lambda로 크롤링 데이터 Firebase에 데이터 쌓는 법

1편 - Lambda 설정

2편 - 로컬 테스트

이제 설정은 끝났고 firebase에 데이터 쌓는 방법을 시도해보겠습니다.

Lambda에 올리기 전에 로컬에서 테스트하는 방법을 작성해보도록 할게요.

1. 로컬에서 Lambda에 올릴 함수 테스트

package.json에 아래와 같이 scripts를 추가합니다.

{
    "name": "firebase-lambda",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
        "locally" : "node -e \"console.log(require('./index').handler({}));\""
    },
    "dependencies": {
        "firebase-admin": "9.6.0"
    }
}

index.js의 handler 함수를 실행하고 결과를 출력해주는 함수입니다.

package.json에 위와 같이 입력한 뒤 로컬에서 아래와 같은 명령어를 실행하면 테스트가 가능합니다.

npm run locally

2. Firebase에 Collection 생성 및 데이터 추가 테스트

Firebase Cloud firestore에 "exchanges" 컬랙션을 생성하였습니다.

이제 exchanges에 data를 추가하는 코드를 작성해보도록 할게요.

const admin = require('firebase-admin')
const serviceAccount = require('./serviceAccountKey.json')

admin.initializeApp({
    credential: admin.credential.cert(serviceAccount)
});

const db = admin.firestore()
const COLLECTION_NAME = "exchanges"

exports.handler = (event, context, callback) => {
  
    const test_data = {
        currency : 'USD',
        price : 1000
    }

    db.collection(COLLECTION_NAME).add(test_data).then((ref) => {
        console.log(ref);
    }).catch((err) => {
        console.log(err);  
    })
    
    return test_data
}

index.js에 위와 같이 작성합니다.

컬랜션 이름은 생성하신 이름으로 대체하시면 됩니다.

이제 로컬에서 아래 명령어로 해당 함수를 호출합니다.

npm run locally

함수를 실행하고 firestore에 해당 데이터가 입력되었는지 확인합니다.

정상적으로 들어왔다면 firebase에 데이터를 저장할 수 있게 되었습니다.

이제 index.js를 실제 활용할 함수로 만들면 되겠죠?

3편에서는 환율 정보를 가져와서 데이터를 쌓는 방법을 작성해보도록 하겠습니다.

다음 포스팅에서 이어갈게요.

AWS Lambda로 크롤링 데이터 Firebase에 데이터 쌓는 법 (Lambda 설정)- 1편

밀래 — Tue, 22 Jun 2021 15:58:29 +0900

AWS Lambda로 크롤링 데이터 Firebase에 데이터 쌓는 법

1편 - Lambda 설정

2편 - 로컬 테스트

토이 프로젝트에서 클로링으로 Firebase에 데이터를 쌓아야 하는 작업이 필요 했습니다.

Spring Boot Batch를 사용하여 서버를 띄워서 크롤링을 할가 고민도 했었는데 그렇게 되면 항상 서버를 구동해야 하는 문제가 생겼습니다.

비용도 아끼고 필요할 때만 사용하면 어떨까 고민 했는데 AWS Lambda를 사용하면 되지 않을까 생각이 들었고 그 방법을 정리해 보려고 합니다.

이번 장에서는 Lamdba를 이용하여 API를 호출하고 호출한 API에서 데이터를 정재하여 Firebase에 쌓는 방법을 정리해 보도록 하겠습니다.

01. AWS의 Lambda는 무엇인가?

AWS의 Lambda는 서버를 프로비저닝하거나 관리하지 않고도 코드를 실행 할 수 있는 컴퓨팅 서비스 입니다.

구동 시간에 따라 요금을 지불하기 때문에 필요할 때만 사용하는 클롤링 작업에서는 가장 좋은 서비스라고 생각합니다.

02. Firebase CloudStore 란?

Firebase의 Cloud Firestore는 Document 방식의 DB를 제공하는 클라우드 서비스 입니다.

Cloud Firestore는 클라이언트에서 서버 필요없이 바로 DB을 연결 할 수 있도록 SDK를 제공합니다.

03. Firebase와 Lambda 연결하기

본격적으로 두가지 서비스를 연동하여 데이터를 클로링 해보도록 하겠습니다.

이 페이지에서는 환율 정보를 1시간마다 저장하는 서비스를 개발할 예정이니 다른 서비스가 필요하다면 API와 데이터 파싱 부분만 수정하여 사용하시면 될 것 같습니다.

1) Firebase Auth Key 발급하기

이 프로젝트에서는 Firebase의 프로젝트를 생성하고 Cloud Firestore를 생성 했다고 가정하에 연동 방법을 작성합니다.

해당 부분이 준비가 되어 있지 않다면 살펴보시고 생성뒤에 따라오시면 될 것 같습니다.

생성한 프로젝트에 들어가시면 서비스 계정 메뉴를 확인 할 수 있습니다.

해당 메뉴에 들어가서 Firebase Admin SDK 확인합니다.

아래 새 비공개 키 생성 버튼을 크릭하여 json 파일을 다운로드 받습니다.

해당 파일이 있어야 Firebase에 연동이 가능합니다.

파일 이름이 길고 알아보기 힘들기에 예제에 있는 것처럼 serviceAccountKey.json으로 변경하면 좋습니다.

2) AWS Lambda 설정 파일 생성하기.

로컬에 Lambda에 업로드할 폴더 파일을 생성합니다.

mkdir firebase-lambda
cd firebase-lambda

그리고 package.json index.js 파일을 생성합니다.

{
    "name": "firebase-lambda",
    "version": "1.0.0",
    "main": "index.js",
    "dependencies": {
      "firebase-admin": "9.6.0"
    }
}

3) Firebase 연동 함수 생성

이제 생성한 index.js에 Firebase 연동하는 함수를 생성합니다.

(저는 firestore를 사용하는 방식을 정리합니다.)

const admin = require('firebase-admin')
const serviceAccount = require('serviceAccountKey.json')

admin.initializeApp({
    credential: admin.credential.cert(serviceAccount)
});

exports.handler = (event, context, callback) => {
    firebaseFirestore = admin.firestore();   
}

4) node_module 설치.

node를 실행하기 위한 node_module을 설치합니다.

package.json이 생성되어 있기 때문에 해당 폴더에서 아래 명령어를 설치합니다.

만약, npm이 설치되어 있지 않다면 먼저 설치 해주셔야 합니다.

npm install

폴더내에 node_modules 폴더가 정상적으로 생성되었는지 확인합니다.

그런 뒤 해당 폴더 root에서 zip 파일을 생성합니다.

파일 이름은 firebase-lamdba.zip 으로 생성합니다.

5) AWS Lamdba

AWS에서 Lambda를 검색하여 메뉴로 들어갑니다.

Lambda 메뉴에서 함수 생성을 클릭합니다.

함수 이름을 작성하시고 런타임 부분에서는 원하는 버전을 선택하시면 됩니다.

저는 node.js 12.x를 선택했습니다.

그런 뒤 함수 생성을 클릭합니다.

업로드 버튼을 클릭하여 .zip file을 선택합니다.

위에서 생성한 zip 파일을 업로드 합니다.

테스트 탭 메뉴를 선택하고 테스트 버튼을 클릭해봅니다.

함수가 정상적으로 호출 되는지 확인합니다.

아래와 같이 해당 함수가 정상적으로 호출 되면 성공 결과를 받을 수 있습니다.

이제 기본적인 설정 및 함수를 생성을 끝냈습니다.

이제 함수에서 firebase에 데이터를 넣는 방법에 대해서 다음 포스팅에서 이어가도록 할게요.

참고 : https://levelup.gitconnected.com/how-to-access-firebase-from-aws-lambda-f7f494dd435a

How to Access Firebase From AWS Lambda

A Comprehensive Step by Step Guide

levelup.gitconnected.com

[Spring Boot] Firebase 연동 방법.

밀래 — Sun, 20 Jun 2021 20:59:15 +0900

이번 포스팅은 Spring Boot에 Firebase 연동하는 방법을 정리하려고 합니다.

Firebase SDK를 활용한 기본 연동 그리고 컬렉션에 있는 정보를 가져오는 방법을 간단히 정리 하겠습니다.

00. 디펜던시 등록

https://mvnrepository.com/artifact/com.google.firebase/firebase-admin

gradle

implementation group: 'com.google.firebase', name: 'firebase-admin', version: '8.1.0'

maven

<dependency>
    <groupId>com.google.firebase</groupId>
    <artifactId>firebase-admin</artifactId>
    <version>8.1.0</version>
</dependency>

01. Firebase 연동 준비하기.

Firebase에 프로젝트 생성 및 Cloud Firestore은 사전에 생성하셔야 합니다.

Firebase 프로젝트 설정에서 "새 비공개 키 생성"으로 서비스 연결한 json을 다운로드 받아야 합니다.

프로젝트 설정 > 서비스 계정 메뉴로 들어 갑니다.

아래 Admin SDK 구성에서 "새 비공개 키 생성"을 클릭 합니다.

Firestore 연결 정보가 담긴 json을 다운로드 받게 됩니다.

해당 파일 이름을 알아 볼 수 있는 이름으로 변경합니다.

저는 serviceAccountKey.json으로 변경 했습니다.

그리고 이 파일을 spring boot 프로젝트에서 resources 폴더로 복사 합니다.

2. Spring Boot 설정

Spring Boot에 기본 설정 파일을 생성 합니다.

저는 config 패키지에 FirebaseConfig.class 를 생성 했습니다.

FirebaseConfig 파일은 아래와 같이 작성합니다.

@Configuration
public class FirebaseConfig {

    @PostConstruct
    public void init(){
        try{
            FileInputStream serviceAccount = 
            	new FileInputStream("src/main/resources/serviceAccountKey.json");
            FirebaseOptions options = new FirebaseOptions.Builder()
                    .setCredentials(GoogleCredentials.fromStream(serviceAccount))
                    .build();
            FirebaseApp.initializeApp(options);
        }catch (Exception e){
            e.printStackTrace();
        }
    }
}

3. 간단한 API 연동 해보기.

Firebase에는 Users 컬랙션을 생성 했습니다.

그리고 Spring Boot에는 User Entity를 생성합니다.

Getter, Setter는 lombok을 이용하여 어노테이션을 설정했습니다.

Firebase 컬랙션

User.class

@NoArgsConstructor
@Getter
@Setter
@ToString
public class User {

    private String id;
    private String name;
    private String email;

    // firebase timestamp type
    private Date create_dt;
    private Date update_dt;

}

이번에는 간단한 User에 있는 정보를 가져오는 API를 생성합니다.

UserController.class

@RestController
@RequiredArgsConstructor
@RequestMapping("/exam/svc/v1")
public class UserController {

    private final UserService userService;

    @GetMapping("/users")
    public ResponseEntity<Object>  getUsers() throws ExecutionException, InterruptedException {
        List<User> list = userService.getUsers();
        return ResponseEntity.ok().body(list);

    }


}

UserService.class & UserServiceImpl.class

public interface UserService {

    List<User> getUsers() throws ExecutionException, InterruptedException;

}

@Service
@RequiredArgsConstructor
public class UserServiceImpl implements UserService {

    private final UserDao userDao;

    @Override
    public List<User> getUsers() throws ExecutionException, InterruptedException {
        return userDao.getUsers();
    }
}

UserDao.class

@Repository
@Slf4j
public class UserDao {

    public static final String COLLECTION_NAME = "users";

    public List<User> getUsers() throws ExecutionException, InterruptedException {
        List<User> list = new ArrayList<>();
        Firestore db = FirestoreClient.getFirestore();
        ApiFuture<QuerySnapshot> future = db.collection(COLLECTION_NAME).get();
        List<QueryDocumentSnapshot> documents = future.get().getDocuments();
        for (QueryDocumentSnapshot document : documents) {
            list.add(document.toObject(User.class));
        }
        return list;
    }

}

컬랙션에 신규 데이터를 입력하고 API를 호출하여 데이터가 정상적으로 조회 되는지 확인 합니다.

http://localhost:8080/exam/svc/v1/users

  [{
    "id": "19dfsafadfkasfjlkZFDAdz",
    "name": "홍길동",
    "email": "test@gmail.com",
    "create_dt": "2021-06-16T10:30:23.662+00:00",
    "update_dt": "2021-06-16T10:30:23.662+00:00"
  }]

기본 연동은 위와 같이 확인하였습니다.

이제 CRUD를 구현해보도록 할게요.

다음 편에서 계속..

참고

서버에 Firebase Admin SDK 추가 | Firebase Documentation (google.com)

[DB] ORM, SQL Mapper 이란?

밀래 — Mon, 12 Apr 2021 22:38:29 +0900

ORM과 SQL Mapper의 개념을 정리하기전 영속성(Persistence)에 대해 먼저 정리해보겠습니다.

영속성(Persistence)

영속성이란 프로그램이 종료되어도 데이터가 사라지지 않는 특성을 말한다.

영속성을 갖지 못한 데이터는 메모리에만 존재하기 때문에 프로그램이 종료되면 사라지게 된다.

영속성은 파일 시스템, 관계형 데이터베이스 또는 객체 데이터 베이스를 활용하여 구현한다.

데이터가 영속성을 가지기 위해 Spring에서 사용하는 방법은 3가지가 존재한다.

1. JDBC (Java)

2. Spring JDBC

3. Persistence Framework

Persistence Framework

Persistence Framework는 JDBC를 사용하기 위한 복잡하고 번거로운 작업 없이 간다한 작업으로 데이터베이스와 연동할 수 있게 제공하는 프레임워크이다. 이 프레임워크를 사용하면 시스템을 빠르고 안정적으로 개발이 가능하다.

Persistence Framework에는 ORM과 SQL Mapper가 있다.

ORM : JPA, Hibernate

SQL Mapper : Mybatis

ORM (Object-Relation Mapping)

객체와 관계형 데이터베이스의 데이터를 자동으로 매핑시켜주는 프레임워크이다.

설정된 객체 간의 관계를 바탕으로 자동으로 SQL를 생성하여 실행한다.

SQL를 직접 작성할 필요가 없다.

장점

1. 객체 지향적인 코드로 직관적인 비지니스 로직을 작성할 수 있다.

2. DBMS 종속성이 줄어들고 종류에 관계 없이 빠르게 적용 가능하다.

3. 쿼리에 집중할 필요 없이 빠르게 개발이 가능하다.

4. 재사용 유지 보수 편리성이 증가 한다.

단점

1. 초기 적용에 러닝 커브가 어느 정도 있다.

2. 프로젝트의 복잡성이 커질경우 난이도가 올라간다.

3. 잘못 적용할 경우 속도 저하가 발생 할 수 있다.

4. 복잡한 SQL의 사용하지 못할 수 도 있다.

SQL Mapper

객체와 관계형 데이터베이스의 데이터를 개발자가 작성한 SQL로 매핑시켜주는 프레임워크이다.

개발자가 SQL을 직접 작성해야 하며 SQL문을 실행하고 얻은 데이터를 객체로 매핑시켜준다.

장점

1. SQL을 작성 할 줄 안다면 수월하게 사용이 가능하다.

2. 세부적인 SQL 변경시 편리하다.

단점

1. DBMS에 따라 SQL 문법이 다르기에 DBMS에 종속적이다.

2. 개발시 SQL를 작성해야 한다.

3. DBMS 변경시 SQL문의 재사용이 어렵다.

4. 2개 이상의 DBMS 지원시 유지 보수가 어렵다.

[React Native] Firebase Cloud Firestore 연결하기 #2 - Firestore 저장하기.

밀래 — Sat, 21 Nov 2020 23:53:05 +0900

이번 편을 보시기 전에 ReactNative 프로젝트에 Firebase 설정이 되어 있지않다면 아래 포스팅을 확인하고 오세요.

2020/11/19 - [React Native] - [React Native] Firebase Cloud Firestore 연결하기 #1 - 프로젝트 설정

[React Native] Firebase Cloude Firestore 연결하기 #1 - 프로젝트 설정

React Native에서 사용할 DB를 찾아보다 Firebase를 붙여 사용해 봐야 겠다는 생각이 들었습니다. 오프라인 일때는 로컬 DB를 사용하고 온라인이 되면 서버 DB와 동기화 되며 다양한 기능들을 사용할 수

firework-ham.tistory.com

프로젝트 설정이 끝났으니 Cloud Firestore을 설정해보겠습니다.

01. Firestore 설치

프로젝트에 아래 명령어로 Firestore를 설치합니다.

# Install & setup the app module
yarn add @react-native-firebase/app

# Install the firestore module
yarn add @react-native-firebase/firestore

# If you're developing your app using iOS, run this command
cd ios/ && pod install

설치가 완료되면 빌드를 진행합니다.

react-native run-android

만약, 아래와 같은 빌드 Error가 발생한다면 아래를 진행합니다.

step.1

/android/app/build.gradle 파일에 아래 설정을 추가합니다.

android {
    defaultConfig {
        // ...
        multiDexEnabled true // <-- ADD THIS in the defaultConfig section
    }
    // ...
}

dependencies {
  implementation 'androidx.multidex:multidex:2.0.1'  // <-- ADD THIS DEPENDENCY
}

step.2

android/app/src/main/java/.../MainApplication.java 파일에 아래와 같이 변경합니다.

// ... all your other imports here
import androidx.multidex.MultiDexApplication; // <-- ADD THIS IMPORT


// Your class definition needs `extends MultiDexApplication` like below
public class MainApplication extends MultiDexApplication implements ReactApplication {

그 다음 다시 빌드를 시작합니다.

react-native run-android

정상으로 프로젝트가 실행되었다면 완료.

02. 간단한 Todo 만들어보기

간단한 Todo를 만들어보면서 DB가 어떻게 동작되는지 확인해보겠습니다.

root 폴더에 Todos.js를 아래와 같이 생성합니다.

import React, {useState} from 'react';
import { ScrollView, Text } from 'react-native';

import firestore from '@react-native-firebase/firestore';
import { Appbar, TextInput, Button } from 'react-native-paper';


function Todos(){
    const [ todo, setTodo ] = useState('');
    const ref = firestore().collection('todos');

    return (
      <>
        <Appbar>
          <Appbar.Content title={'TODOs List'} />
        </Appbar>
        <ScrollView style={{flex: 1}}>
          <Text>List of TODOs!</Text>
        </ScrollView>
        <TextInput label={'New Todo'} value={todo} onChangeText={setTodo} />
        <Button onPress={() => {}}>Add TODO</Button>
      </>
    );
}

export default Todos;

그리고 index.js를 아래와 같이 수정합니다.

만약, index.android.js 와 index.ios.js로 나눠져 있다면 원하는 플랫폼에 변경합니다.

import { AppRegistry } from 'react-native';
import Todos from './Todos';

AppRegistry.registerComponent('MyAppName', () => Todos);

그러면 기본적인 화면이 빌드되면서 Todos List가 보입니다.

현재까지는 DB에 Collection만 생성하고 아무런 동작을 하지 않습니다.

이제 DB와 연동하는 동작을 넣어보겠습니다.

Todos.js에 아래와 같이 함수를 추가하고 버튼에 클릭시 함수가 호출하도록 변경합니다.

function Todos() {
  const [ todo, setTodo ] = useState('');
  const ref = firestore().collection('todos');
  // ...
  async function addTodo() {
    await ref.add({
      title: todo,
      complete: false,
    });
    setTodo('');
  }
  // ...
   return (
    <>
      {/* ... */}
      <Button onPress={() => addTodo()}>Add TODO</Button>
    </>
  );
}

이 동작은 FireStore에 저장하는 동작입니다.

이렇게 되면 Firestore에 데이터가 전송되게 됩니다.

Firebase Console에서 Cloud Firestore 선택하시면 ADD TODO를 눌렀을대 전송된 Todo List를 볼 수 있습니다.

만약, 보이지 않는 다면 Database 생성 버튼을 눌러 우선 Database를 생성해주세요.

Database가 생성되고 동작을 다시 진행하면 콘솔화면에서 아래와 같은 화면을 볼 수 있습니다.

위와 같은 화면이 나오면 정상 동작입니다.

이제 다음편에서는 저장된 Todo List를 가져와 보도록 하겠습니다.

[React Native] Firebase Cloud Firestore 연결하기 #1 - 프로젝트 설정

밀래 — Thu, 19 Nov 2020 23:26:00 +0900

React Native에서 사용할 DB를 찾아보다 Firebase를 붙여 사용해 봐야 겠다는 생각이 들었습니다.

오프라인 일때는 로컬 DB를 사용하고 온라인이 되면 서버 DB와 동기화 되며 다양한 기능들을 사용할 수 있을 것이라 기대 했기 때문이죠. 천천히 React Native에 Firebase를 붙여보는 과정을 정리해보려고 합니다.

00. Firebase 프로젝트 생성하기.

구글 콘솔에 접속해서 프로젝트를 먼저 생성해 주어야 합니다.

Firebase의 기능을 사용하려면 프로젝트가 먼저 있어야 하거든요.

https://console.firebase.google.com/

Firebase 콘솔에 접속하여 프로젝트를 추가 합니다.

안내에 따라 프로젝트를 생성하면 되니 따로 정리하지는 않겠습니다.

프로젝트를 생성하고 해당 프로젝트로 이동하빈다.

아래와 같은 화면으로 이동한다면 프로젝트 생성 완료.

Firebase에서 Cloud Firestore를 제공하는데 데이터베이스라고 이해하시면 됩니다.

두가지 종류로 제공하는데 아래 사이트에 자세히 설명되어 있으니 한번 확인해보시면 좋습니다.

https://firebase.google.com/docs/database/rtdb-vs-firestore?authuser=2

가격 정책도 꼭 한번 살펴보세요.

https://firebase.google.com/pricing?authuser=2

Firebase Pricing

무료로 Firebase를 시작하고 전 세계 수백만 명의 사용자로 확장하며 사용한 만큼만 비용을 지불합니다.

firebase.google.com

01. Firebase 설치

그럼 Cloude Firestore를 붙여보기 위해 가장 먼저할 것은 Firebase를 프로젝트에 설치하는 것이죠.

npm과 yarn 중 원하는 방법으로 설치 합니다.

# Using npm
npm install --save @react-native-firebase/app

# Using Yarn
yarn add @react-native-firebase/app

02. Firebase Project 연결하기

이제 ReactNative Project에 Firebase Project를 연결해주어야 합니다.

우선 Android에 연결시키는 방법으로 진행하겠습니다.

Firebase Console 초기 화면에 "앱에 Firebase를 추가하여 시작하기"아래 Android를 선택하여 추가 합니다.

Firebase 홈페이지에 있는 순서대로 진행하면 됩니다.

주의 할점은 Android Pakage name"은 local project와 동일해야 합니다.

/android/app/src/main/AndroidManifest.xml 파일에 manifest tag의 package 이름을 확인하세요.

그리고 google-services.json을 다운로드 받은 뒤 android/app 폴더에 복사해줍니다.

이제 google-services 플러그인을 프로젝트에 설정합니다.

/android/build.gradle 파일에 아래를 추가해주세요.

buildscript {
  dependencies {
    // ... other dependencies
    classpath 'com.google.gms:google-services:4.3.3'
    // Add me --- /\
  }
}

/android/app/build.gradle 에도 아래를 추가해주세요.

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // <- Add this line

이제 설정 완료 입니다.

설정이 완료되었다면 프로젝트를 재실행합니다.

재실행하면 ReactNative 0.60+ 버전에서는 autolinking을 지원하여 빌드만 다시 진행하면 됩니다.

# Android apps
npx react-native run-android

# iOS apps
cd ios/
pod install --repo-update
cd ..
npx react-native run-ios

빌드하여 프로젝트다 다시 정상 실행된다면 설정 완료.

다음편에서 Cloud Firestore를 연결을 이어가 보겠습니다.

참고 사이트

rnfirebase.io/

firebase.google.com/

[Spring Boot JPA] JPA를 사용하기 위해 꼭 필요한 Dialect(방언)에 대해 알아보자.

밀래 — Thu, 9 Jul 2020 12:01:19 +0900

Dialect(방언)이란?

Dialect 방언에 대해 알아보기전 기본 SQL을 이해 해야 합니다.

SQL은 표준 ANCI SQL이 있고 DBMS Vendor(공급업체)인 MS-SQL, Oracle, My-SQL, Postgre SQL에서 제공하는 SQL이 존재합니다. MS-SQL은 T-SQL, Oracle은 PL/SQL이 대표적입니다.
ANSI SQL은 모든 DBMS에서 공통적으로 사용이 가능한 표준 SQL이지만 DBMS에서 만든 SQL은 자신들만의 독자적인 기능을 추가 하기 위해 만든 것으로 사용하는 DBMS에서만 사용이 가능합니다.

이해를 돕기 위해 예를 들면 MYSQL에서는 ID 값을 증가 시키기 위해 Auto Increment를 사용할 수 있지만 Oracle에서는 이 기능을 제공하지 않고 Sequence를 사용하여 기능을 제공합니다. 동일한 기능을 제공하지만 서로 다르게 제공하는 것이죠. 이는 같은 DBMS라도 버전에 따라 달라질 수 있습니다.

Dialect (방언)

JPA는 기본적으로 어플리케이션에서 직접 JDBC 레벨의 SQL을 작성하지 않고 JPA가 직접 SQL을 작성하고 실행합니다. 그런데 DBMS 종류마다 사용하는 SQL이 다르다는 것을 우리는 앞에서 알아봤습니다. JPA가 해당 DBMS에 맞춰 SQL을 생성해야하는데 어떤 종류인지 알지 못한다면 문제가 발생 할 수 있습니다.
그래서 JPA에 어떤 DBMS를 사용하는 알려주는 방법이 방언을 설정하는 방법입니다. JPA에 Dialect를 설정할 수 있는 추상화 방언 클래스를 제공하고 설정된 방언으로 각 DBMS에 맞는 구현체를 제공합니다.

그래서 만약, MariaDB로 개발을 진행하면 Dialect에 MariaDB로 설정해 놓다가 어플리케이션을 설치할때 DBMS가 Oracle 이라면 Dialect을 Oralce로 설정하면 문제 없이 어플리케이션을 구동 할 수 있습니다.

MariaDB 10.3 버전 사용시

database-platform: org.hibernate.dialect.MariaDB103Dialect

Oracle 11g 버전 사용시

database-platform: org.hibernate.dialect.Oracle10gDialect

하이버네이트 Dialect 설정과 종류

Spring Boot에서 Dialect를 설정은 아래와 같이 할 수 있습니다.

spring:
  jpa:
    hibernate:
    database-platform: org.hibernate.dialect.MariaDB103Dialect

Spring Boot의 Dialect를 설정하기 위해서 hibernate 버전을 먼저 확인하는 것이 필요합니다.

Spring Boot의 버전마다 사용하는 hibernate 버전이 다르기 때문에 아래와 같이 확인하세요.

Spring-Boot 2.1 버전에서는 hibernate 5.3.X 버전을 사용합니다.
https://docs.spring.io/spring-boot/docs/2.1.5.RELEASE/reference/html/appendix-dependency-versions.html

Appendix F. Dependency versions

Appendix F. Dependency versions The following table provides details of all of the dependency versions that are provided by Spring Boot in its CLI (Command Line Interface), Maven dependency management, and Gradle plugin. When you declare a dependency on

docs.spring.io

Spring-Boot 2.2 버전부터는 hibernate 5.4.6.Final을 사용합니다.
https://docs.spring.io/spring-boot/docs/2.2.0.RELEASE/reference/html/appendix-dependency-versions.html

Dependency versions

The following table provides details of all of the dependency versions that are provided by Spring Boot in its CLI (Command Line Interface), Maven dependency management, and Gradle plugin. When you declare a dependency on one of these artifacts without dec

docs.spring.io

Spring-Boot 2.1을 사용한다면 방언은 아래를 참고하시면 됩니다.
https://docs.jboss.org/hibernate/orm/5.3/javadocs/org/hibernate/dialect/package-summary.html

org.hibernate.dialect (Hibernate JavaDocs)

Enum Summary Enum Description Database List all supported relational database systems. ResultColumnReferenceStrategy Defines how we need to reference columns in the group-by, having, and order-by clauses. Package org.hibernate.dialect Description This pa

docs.jboss.org

Spring-Boot 2.2을 사용하신다면 아래를 참고하시면 됩니다.
https://docs.jboss.org/hibernate/orm/5.4/javadocs/org/hibernate/dialect/package-summary.html

org.hibernate.dialect (Hibernate JavaDocs)

docs.jboss.org

TIP : Oracle 11g의 경우에는 Oracle 10g를 사용하면 됩니다.

[Docker] Window Docker mariadb 설치하기.

밀래 — Fri, 26 Jun 2020 18:39:18 +0900

개발할때 필요한 DB를 도커로 설치하는 방법을 정리 하겠습니다.

회사나 개인 컴퓨터에서 사용하면 상당히 유용합니다.

우선 준비 사항 윈도우 도커를 설치해야 합니다.

이 부분은 미리 준비 하셨다고 생각하고 진행 하겠습니다.

1. Pull MariaDB Image

mariaDB를 아래 명령어를 실행하여 Pull 받습니다.

버전을 명시하지 않았기 때문에 latest로 다운 받습니다.

docker pull mariadb

pull이 완료 되었으면 아래 명령어로 있는지 확인합니다.

docker image ls

2. MariaDB 실행하기

다운 받은 도커 이미지 기반으로 아래 명령어를 실행하여 도커 컨테이너를 실행합니다.

docker run --name mariadb -d -p 3306:3306 -e MYSQL_ROOT_PASSWORD=mariadb mariadb

--name : 컨테이너 이름

-d : 데몬 실행

-p : 로컬 port와 컨테이너 포트 연결

-e : 환경 변수 설정

실행이 완료되었으면 아래 명령어로 실행중인 도커를 확인합니다.

docker ps

혹시 mariadb 컨테이너에 커멘드 창에 접속 하고 싶으시다면 아래 명령어로 들어갈 수 있습니다.

docker exec -it mariadb /bin/bash

3. MariaDB 접속하기

mariadb에 접속하고 싶으시다면 아래 명령어를 통해 접속 가능합니다.

mysql -u root -p

설정한 비밀번호를 입력하여 접속 합니다.

그리고 한글이 깨질 수 있기 때문에 인코딩을 변경하겠습니다.

우선 vim 또는 nano를 설치하여 변경 할 수 있는 환경을 만들겠습니다.

아래 명령어는 nano와 vim을 모두 설치하는 하지만 원하시는 편집기만 설치하시면 됩니다.

apt-get update && apt-get install nano vim

이제 conf 설정을 추가해줍니다.

/etc/mysql/my.cnf 에 아래 내용을 추가해줍니다.

[client]
default-character-set = utf8mb4

[mysql]
default-character-set = utf8mb4

[mysqld]
character-set-client-handshake = FALSE
character-set-server = utf8mb4
collation-server = utf8mb4_unicode_ci

이제 exit 명령어로 도커를 빠져나와 재실행합니다.

docker restart mariadb

그리고 컨테이너에 접속하고 mysql에 접속하여 아래 명령어로 문자열 인코딩이 변경되었는지 확인합니다.

docker exec -it mariadb /bin/bash

mysql -u root -p

status

4. 클라이언트 접속해보기

저는 무료 툴인 DBeaver로 접속을 하겠습니다.

https://dbeaver.io/download/

Download | DBeaver Community

Download Tested and verified for MS Windows 7/8/10, Linux and Mac OS X. DBeaver requires Java 1.8 or higher. Windows and MacOS installers include OpenJDK 11 bundle. If you are on Mac OS X and you do NOT use PKG installer then you will need to setup Java. N

dbeaver.io

DBeaver를 설치한 뒤 실행하여 연결아이콘을 클릭합니다.

SQL -> MaraiDB를 선택합니다.

기본 세팅이 우리가 생성하 mariadb와 동일하기 때문에 root 계정에 비밀번호만 입력한뒤 아래 Test Connection을 클릭합니다.

아래와 같이 Connected가 뜨면 성공.

완료 버튼을 누른 뒤 생성된 Connection을 더블클릭하여 접속합니다.

완료!

[React Native] MacOS 개발 환경 설정 하기.

밀래 — Mon, 15 Jun 2020 09:57:55 +0900

맥에서 React Native를 개발하기 위한 개발 환경 설정하는 방법을 정리해 보도록 하겠습니다.

1. 홈브루 설치

홈브루는 맥에서 패키지를 설치하고 관리하는 맥용 패키지 관리자 입니다. 다양한 패키지를 간단하게 명령어로 설치 가능합니다.

홈브루를 만약에 설치 하셨다면 아래 명령어로 설치 되었는지 다시 한번 확인 합니다.

버전 확인

brew --version

Homebrew 2.2.11
Homebrew/homebrew-core (git revision b237e6; last commit 2020-04-05)
Homebrew/homebrew-cask (git revision a5780; last commit 2020-04-05)

만약 버전 표시가 되지 않거 알수 없는 명령어로 표시 된다면 아래 사이트에서 홈브루를 설치 합니다.

홈브루 설치 사이트 : https://brew.sh/

Homebrew

The Missing Package Manager for macOS (or Linux).

brew.sh

간단하게 brew 홈페이지에 있는 Install 명령어를 실행하면 설치 가능합니다.

설치 명령어

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

설치 완료 후 위에서 했던 버전 확인을 진행합니다.

자 이제 React Native를 개발하기 위한 패키지들을 설치 합니다.

2. node 설치 하기.

node는 brew로 설치 가능하지만 저는 nvm을 활용하는 것을 추천 드립니다.

nvm을 통해 설치하는 방법은 아래 포스팅을 확인하세요.

https://firework-ham.tistory.com/20

[node] nvm 설치하기, node, npm 설치하기.

nvm 활용하여 node, npm 설치하는 방법을 알아 보겠습니다. 1 설치 sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash 2 설정 설치 후 nvm 명령어가 실행이 되지 않는..

firework-ham.tistory.com

brew로 설치하고 싶으시다면 다음을 따라하여 설치하세요.

터미널을 열고 아래 명령어를 실행합니다.

brew install node

node, npm 버전을 확인하여 설치 되었는지 확인합니다,

node --version

npm --version

3. 왓치맨 설치

왓치맨은 특정 디렉토리나 파일을 감시해 변경이 발생하면 특정 동작을 실행하도록 합니다. react-native의 소스코드 변경이 발생하면 재로딩 하기 위해서 왓치맨을 사용합니다.

아래 명령어를 통해 왓치맨을 설치합니다.

brew install watchman

왓치맨도 버전을 확인합니다.

watchman --version

4. 리엑트 네이티브 CLI 설치

리엑트 네이티브로 개발할 때 공식 홈페이지에서는 expo cli와 react-natvie cli 두 가지 방법을 제시합니다. 저는 react-native cli를 추천하는데 그 이유는 expo의 단점이 명확하기 때문입니다.

expo cli를 사용하면 필요 하지 않는 라이브러리를 설치해야 하기 때문에 프로젝트 사이즈가 커지고 expo cli에서 제공하지 않는 부분은 사용하기 어렵거나 사용하려고 해도 여러 과정을 거쳐야 하기 때문에 어렵습니다.

그래서 리엑트 네이티브 CLI를 많은 분들이 추천하고 저도 추천합니다.

다음 명령어를 통해 설치합니다.

npm install -g react-native-cli

5. Xcode 설치

Xcode는 iOS 앱을 만들기 위해 필수적으로 설치 해야 합니다.

App Store에서 Xcode를 검색하여 설치 합니다. 용량이 크기 때문에 설치하는데 시간이 어느 정도 걸리니 참고하세요.

Xcode가 설치 되었다면 Command Line Tool을 설치해야 합니다.

Xcode를 설치 하고 아래 경로를 따라 가서 Command Line Tool이 설정 되었는지 확인 합니다.

Xcode > Preferences > Locations > Command Line Tools

6. 코코아포드 설치

코코아포드는 iOS 개발에 사용되는 의존성 관리자 입니다. 개발에 필요한 라이브러리를 설치하거나 관리할 때 사용되므로 아래 명령어를 실행하여 설치 합니다.

sudo gem install cocoapods

설치가 완료 되면 아래 명령어로 설치를 확인합니다.

pod --version

7. Java 설치

만약 자바가 설치 되어 있지 않다면 아래 명령어를 활용하여 자바를 설치합니다.

brew tap AdoptOpenJDK/openjdk

brew cask install adoptopenjdk8

자바 버전을 확인하여 설치를 확인합니다.

java -version

만약, Unkown command : cask 가 뜬다면 아래 명령어를 활용하여 설치하자.

brew install --cask adoptopenjdk8

8. 안드로이드 스튜디오

만약, iOS와 안드로이드를 모두 테스트 해보고 싶다면 안드로이드 스튜디오를 설치 합니다.

https://developer.android.com/studio

Download Android Studio and SDK tools | Android 스튜디오

developer.android.com

다운로드 후 실행하여 아래 화면이 뜨면 Application 방향으로 안드로이드 스튜디오 아이콘을 옮겨 설치합니다.

그리고 런처 패드에 등록된 안드로이드 스튜디오를 실행합니다.

실행 한뒤 Next를 눌러 넘어간뒤 아래 화면이 나오면 "Custom"으로 변경하고 넘어갑니다.

Android Virtual Device 옵션도 선택하여 설치 합니다.

나머지는 Next 후 완료 하여 설치를 진행합니다.

안드로이드 스튜디오 실행 한뒤 Configure > SDK Manager를 실행 한뒤 Android 9.0 (pie)를 추가로 설치합니다.

설치가 완료되면 안드로이드 path을 설정합니다.

export ANDROID_HOME=<설치된 sdk 경로>
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

터미널에서 아래 명령어가 먹히면 성공

adb

[React Native] 윈도우 개발 환경 설정 하기.

밀래 — Sat, 30 May 2020 20:43:58 +0900

윈도우에서 React Native를 개발하기 위해서는 노드, Python, 안드로이드 스튜디오, Java JDK 등을 설치해야 합니다.

Javascript를 활용하지만 궁극적으로 마지막에는 iOS, 안드로이드 앱을 배포해야 하기 때문에 그에 맞는 빌드 구성이 필요합니다. 그래서 IOS의 경우에는 MacOS가 아니면 빌드가 되지 않습니다. 왜냐하면 MaxOS에서 지원하는 Xcode 빌드 툴이 있어야지만 IOS용 앱을 빌드 할 수 있습니다. 그렇다고 IOS용 앱 테스트를 못하는 것은 아닙니다. 리액트 네이티브는 JavaScript로 개발해 웹툴로 개발의 전반적인 테스트가 가능하기 때문입니다.

그럼 윈도우에서 안드로이드 앱을 빌드 구성 및 개발 구성을 설치해 보겠습니다.

1.node 설치 방법

리액트 네이티브는 자바스크립트 기반으로 동작하기 때문에 자바스크립트 런타임인 노드가 필요합니다.

저는 nvm을 활용해서 node를 설치하는 것을 선호합니다.

동일한 pc에 다양한 node 버전을 사용하기 위해서입니다.

제가 이전에 정리한 nvm을 윈도우에 설치하는 방법은 아래 포스팅을 통해 확인할 수 있습니다.

https://firework-ham.tistory.com/69?category=868006

[node] windows nvm 으로 node 설치하기

MacOS나 리눅스에서 nvm으로 설치하는 방법은 이전에 살펴 보았습니다. 일반적인 컴퓨터라고 하면 Windows를 많이 사용하죠. 그래서 이번 포스팅은 windows에서 nvm을 설치하는 방법에 대해서 알아보겠

firework-ham.tistory.com

설치를 완료하였다면 아래 방법으로 한 번도 버전 체크를 해주세요.

node -v

npm -v

2. open jdk 설치 방법

안드로이드 앱을 빌드하기 위해 필요한 Java OpenJDK를 설치해보겠습니다.

https://www.azul.com/downloads/zulu-community/?version=java-8-lts&os=windows&architecture=x86-64-bit&package=jdk

Download OpenJDK Java Linux Windows macOS Alpine Java 11 Java 8

Download Java 11 Zulu OpenJDK Linux Windows macOS Solaris Update Java Alpine Java SE free download Java 8 Java 7 Java 6 JDK

www.azul.com

위 사이트에서 Java 8, Windows, 64-bit, JDK를 선택하시고 msi 다운로드를 진행합니다.

그리고 실행하여 설치를 진행하세요.

커맨드 창을 다시 닫았다 실행합니다.

다음 명령어를 실행하여 정상적으로 java 버전이 표시되는지 확인합니다.

java -version

3. python 설치

리액트 네이티브 빌드 시스템은 python에 의존합니다.

그래서 python을 먼저 설치해 주어야 합니다.

https://www.python.org/downloads/

Download Python

The official home of the Python Programming Language

www.python.org

파이썬 공식 홈페이지에서 최신 python을 다운로드하여 설치합니다.

python-3.8.3.exe를 실행하여 설치하고 cmd 창을 다시 열어 아래 커맨드로 정상 표시되는지 확인합니다.

python --version

4. 리액트 네이티브 CLI 설치

리액트 네이티브 CLI를 설치하기 위해 노드 패키지의 npm을 사용합니다.

npm install -g react-native-cli

-g 옵션은 전역으로 설치한다는 의미입니다.

설치가 완료되었다면 다음 명령어로 설치 확인합니다.

react-native --version

react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory

5. 안드로이드 스튜디오 설치

이제 안드로이드 앱 빌드를 위한 안드로이드 스튜디오를 설치합니다.

https://developer.android.com/studio/index.html

Download Android Studio and SDK tools | Android 스튜디오

developer.android.com

안드로이드 스튜디오 설치 파일을 다운로드합니다.

다운로드가 완료되면 바로 실행하여 설치를 진행합니다. 설치 파일을 실행하면 조금 늦게 화면이 뜰 수 있으니 기다려주세요. Next를 눌러주다 아래 화면이 나오면 설치하고자 하는 원하는 위치를 정하세요.

설치가 완료되고 Finish를 눌러주면 안드로이드 스튜디오가 실행됩니다.

Do not import settings 이 클릭되어 있는 상태에서 OK를 눌러줍니다.

Next를 눌러 진행합니다.

Custom을 누른 뒤 Next를 누릅니다.

위와 같이 아까 설치한 JDK 경로를 설정해 준 뒤 Next를 누릅니다.

테마는 원하는 테마를 선택해준 뒤 SDK Components Setup에서 모두 체크해주시고 SDK 경로는 원하시는 경로로 선택해주세요.

위와 같이 설정하고 Next 그리고 나머지는 모두 Next로 넘어갑니다.

설치가 완료되면 Android Studio 창이 뜹니다.

아래 Configure를 클릭하고 SDK Manager를 선택합니다.

여기서 원하는 Android 버전을 선택하여 적용하시면 되고 기본적으로 설치되어 있는 10.0을 사용할 예정이니 그대로 넘어갑니다.

이제 환경 변수를 등록해줍니다.

윈도우 탐색기에서 "시스템 환경 변수 편집"라고 검색하여 시스템 속성을 실행합니다.

환경 변수를 클릭하고 새로 만들기를 하여 아래 항목을 등록해줍니다.

변수 이름 : ANDROID_HOME

변수 값 : <sdk 지정한 폴더 경로>

그리고 Path 경로에 sdk 지정한 경로 밑에 platfrom-tools를 등록해줍니다.

<sdk 지정한 폴더 경로>/platfrom-tools

이제 터미널(cmd)를 실행하여 아래 명령어가 실행되는지 확인합니다.

adb --version

Android Debug Bridge version 1.0.41
Version 30.0.1-6435776
Installed as E:\programs\AndroidSdk\platform-tools\adb.exe

이제 리액트 네이티브를 개발하기 위한 준비는 끝났습니다.

리액트 네이티브는 JavaScript 개발 IDE로 개발이 가능합니다.

저는 개인적으로 비주얼 코드(Visual Code)를 추천드립니다.

MS에서 배포하는 IDE로 무료이고 다양한 플러그인도 많아 현재 많이 사용되고 있는 툴입니다.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

이상 리액트 네이티브 윈도우 개발 세팅이었습니다.

[2022-12-10 추가 수정 사항]

시스템 환경 변수에 아래와 같이 등록을 해주어야 초기 android 실행시 정상 구동 됩니다.

변수 : ANDROID_SDK_ROOT

값 : <SDK 설치 폴더>

Path에 아래와 같이 등록합니다.

%ANDROID_SDK_ROOT%

[React Native] 리액트 네이티브란? 장단점

밀래 — Thu, 28 May 2020 23:38:04 +0900

Front-End, Application 개발을 하는 분들이라면 한 번쯤 리액트 네이티브(React Native)라는 단어를 한 번쯤은 들어보셨죠? 페이스북에서 만든 오픈소스 모바일 애플리케이션 프레임워크로 Javascript를 알고 있는 개발자라면 안드로이드, IOS 앱을 만들 수 있는 크로스 플랫폼 (하이브리드 플랫폼)입니다.

이 페이지는 리액트 네이티브에 대해 알아보고 장단점을 적어보려고 합니다.

1. 리액트 네이티브란?

리액트 네이티브는 페이스북에서 만든 오픈소스 모바일 애플리케이션 프레임워크입니다. JavaScript로 개발이 가능하며 하나의 프로그래밍 언어로 IOS와 안드로이드 모바일 앱을 동시에 개발할 수 있는 크로스 플랫폼입니다.

애플리케이션을 개발한다고 한다면 Android는 Kotlin과 Java가 대표적이고 IOS는 Objective-C와 Swift로 개발하는 것이 일반적입니다. 이 일반적인 언어들로 개발하는 것은 각각의 OS에 최적화되어 있습니다.

하지만 각각의 언어로 개발하기 위해선 개발자들은 두 가지 언어와 OS를 모두 이해해야 합니다. 개발자도 필요하고 유지보수하는 비용도 많아지죠. 그래서 이를 해결하기 위해 등장한 것이 하이브리드 웹앱입니다.

웹을 구동하면 앱 화면은 웹(Web) 화면으로 표시하고 필요한 기능 웹 기술로 구현합니다. 초창기 하이브리브 웹 기술은 브라우저를 사용했기 때문에 브라우저에서 제공하는 성능 이상으로는 발휘할 수 없었습니다. 이를 보안하려는 시도가 나타났고 2015년 5월 페이스북은 웹 브라우저를 사용하지 않고 네이티브 브릿지(Native Bridge)를 사용하는 리액트 네이티브를 발표합니다.

리액트 네이티브는 네이티브 브릿지를 통해 네이티브 스레드(Native Thread)와 통신하면서 웹앱과 다르게 성능을 최적화시킵니다. 이런 웹을 사용하지 않고 네이티브와 통신하는 방법을 사용하는 것을 하이브리드 앱(Hybrid App)이라 블리며 자마린, 네이티브 스크립트, 플루터 등이 있습니다.

2. 리액트 네이티브의 장점

2.1 러닝 커브가 낮다.

리액트 네이티브의 가장 큰 장점이라고 할 수 있는 것은 앱을 만들기 위해 다른 언어를 학습하지 않아도 된다는 것입니다. 물론 JavaScript를 사용하지 않는 개발자라면 이야기는 다르지만 Front-End 개발자, Back-End Node 개발자 라면 바로 앱 개발을 할 수 있습니다.

JavaScript 기반으로 하기에 다른 하이브리드 앱인 자만리-C#, 플루터-Dart 보다 러닝 커브와 진입 장벽이 낮습니다.

2.2 소스 코드 재사용과 생산성.

페이스북의 리액트에서 파생되었기 때문에 그 방식을 그대로 사용했습니다. React는 Component 기반으로 기능들을 분리해 재사용할 수 있는 구조로 되어 있습니다. 또한 기존에 리액트로 개발된 사이트가 있다면 그 사이트의 Component 코드를 그대로 사용할 수 있기 때문에 재사용 가능하면 생산성은 더욱 올라갑니다.

또한 하이브리드 앱의 특징으로 두 개의 OS인 Android와 IOS 모두 한 번에 개발할 수 있기 때문에 개발을 효율적으로 할 수 있습니다.

2.3 비용 그리고 오픈소스

하나의 언어 그리고 하나의 코드로 두 개의 OS 앱을 개발할 수 있기 때문에 일반적인 네이티브 앱을 개발하는 것보다 두배 비용이 저렴하게 듭니다. 또한 기존에 JavaScript를 사용하는 개발자들이 많기 때문에 개발자들을 고용하는데도 좋고 쉽게 배울 수 있습니다.

또한 앱의 유지보수에도 하나의 코드만 수정하면 되기에 유지 보수 비용도 줄어듭니다.

리액트 네이티브는 오픈 소스로 커뮤니티가 활성화되어 있고 많은 블로그에서 정보를 찾아볼 수 있습니다. 오픈 소스의 장점으로 문제 해결하는 데 참고 자료가 많이 있어 생산성을 증대시키고 비용을 절약할 수 있습니다.

3. 리액트 네이티브의 단점

3.1 러닝 커브

러닝 커브는 장점이자 단점입니다. 기존에 OS 네이티브 앱을 개발하던 개발자는 새로운 JavaScript를 학습해야 합니다. 그리고 리액트를 접하지 않았던 개발자들은 새로운 개념인 jsx의 리액트 고유 방식을 이해하고 리액트가 사용하는 props, state 등의 개발 방식을 이해해야 합니다.

3.2 네이티브 보다 성능이 떨어진다.

리액트 네이티브는 네이티브 브릿지를 사용하여 네이티브 스레드를 연결시켜 동작하는 하이브리드 앱이기 때문에 네티이브 개발 방식보다는 당연하게 성능이 떨어집니다.
일반적인 애플리케이션을 만든다고 한다면 문제는 없지만 애니메이션 60 프레임 이상을 사용하거나 자바스크립트 스레드에서 5ms보다 시간이 걸리는 처리를 하게 된다면 성능 저하를 경험할 수 있습니다.

3.3 오픈 소스 그리고 네이티브 기능 개발

오픈 소스이기 때문에 업데이트가 자주 발생합니다. 또한 업데이트 시 수정되는 기능들 때문에 버그가 발생할 수 도 있습니다. 버전을 업그레이드는 출시되자마자 진행하지 않아도 되지만 이는 항상 생각하고 업그레이드를 진행해야 합니다.

또한 네이티브 기능을 개발하기 위해서는 리액트 네이티브에서 기능을 제공해야 합니다. 물론 기본적인 기능들을 제공되고 있지만 신규 기능을 개발하기 위해서는 리액트 네이티브가 지원해주어야 가능합니다.

네이티브의 기능을 연결하는 가이드는 제공하고 있지만 개발은 쉽지 않고 네이티브 지식을 요구하기 때문에 네이트브 언어를 공부하는 것과 같을 수 있습니다.

참고 도서

스무디 한잔 마시며 끝내는 React Native