전비의 개발일기

기존에 EAS build에서는 api key, banner id 등을 안전하게 사용하기 위해 EAS Secrets를 활용하여 그 값들을 저장 및 활용하였습니다. 그러나, EAS Update에서는 24년 7월 기준 그 값들이 적용되지 않으며 로컬환경에 .env파일이 있어도 역시 적용되지 않는 문제가 있습니다.

EAS Update시 secrets 적용 안 됨

오늘은 그 문제를 해결하기 위한 방법을 소개합니다.

dotenv-cli 설치하기
.env파일의 환경 변수 값을 가져오기 위해 dotenv-cli 패키지를 설치합니다.

 로컬에 존재하는 .env 파일 활용한 update

package.json에 스크립트 작성하기

EAS Update Secrets 적용 불가 문제

들어가기에 앞서

EAS로 빌드하고 배포하기 - Android편

사전 준비

1. Google Play 개발자 계정이 필요합니다. 
2. 앱 제출 프로세스를 자동화하려면 Google 서비스 계정 이메일과 JSON 키가 필요합니다. 

Google Play Console 앱 등록

구글 플레이 콘솔에서 개발자 계정으로 로그인 후 홈 > [앱 만들기]를 선택합니다.

앱 이름, 기본 언어 등 상세정보 입력합니다.

들어가기에 앞서

최근 Microsoft가 2025년 3월 31에 App Center의 지원을 종료할 것이라는 발표를 하였습니다. 그 대안으로서, Expo와 Expo Application Services(EAS)를 소개합니다.

사전 준비

 Apple 계정 및 Developer 멤버십 가입
팀으로 개발할 경우 Testflight 등록 및 초대
Expo 계정과 expo.dev에서 프로젝트 생성 완료

IOS 앱 등록 후 Expo로 빌드하고 배포하기

제일 먼저 애플 디벨로퍼에서 Identifier를 등록해야 합니다. 버튼을 눌러 App IDs를 선택해주세요.

App를 선택합니다.

EAS로 빌드하고 배포하기 - IOS편

Expo와 EAS란?

React Native와 Expo

Expo는 React Native 앱을 구축하고 유지 관리하는 데 도움을 주는 도구를 제공하는 오픈 소스 프로젝트입니다.

App Center의 지원 종료와 Expo 및 EAS로의 전환

들어가기에 앞서

Zustand는 가볍고, 사용하기 쉬운 상태 관리 라이브러리로, 리액트 애플리케이션에서 상태를 관리하는 데 유용합니다. 이 글에서는 Zustand를 사용하여 다양한 상태를 관리하는 간단한 예제를 소개합니다. 아래 코드를 기반으로 각 상태와 상태 변경 함수를 설정하는 방법을 살펴보겠습니다.

Zustand 가볍게 사용해 보기

1. Zustand 설치

우선, Zustand를 설치해야 합니다. npm 또는 yarn을 사용하여 설치할 수 있습니다.

2. 상태 정의

Zustand 사용해보기

들어가기에 앞서

이 글은 production이 아닌 development 환경을 기준으로 admob 추가 방법을 소개하는 글입니다. 앱 스토어에 등록된 앱에 admob을 추가하시려면 Google AdMob에서 계정을 생성하고 앱을 추가하셔야 합니다.

expo 프로젝트에 admob 추가하기

시작하기에 앞서

마지막으로, Google AdMob에서 발급 받은 키들은 모두 환경 변수로 관리하셔서 외부에 노출되는 일이 없도록 하셔야 합니다. 이 글에서 나온 키들은 오직 테스트용으로써 화면에 보이게 하는 용도일 뿐, 실제 production 레벨에서는 사용하시면 안 됩니다.

admob App ID 추가하기

expo 앱에 admob 배너 광고 추가하기

들어가기에 앞서

앱을 개발하던 도중 만나게 된 에러입니다. 신기하게도 제 맥북 M2프로 환경에서는 해당 에러가 발생하지 않았지만, 윈도우 노트북에서는 발생하였습니다.

발생 원인

추정되는 원인으로는 babel.config.js의 @babel/preset-env와 babel-preset-expo의 프리셋 충돌로 인하여 에러가 발생한 것 같습니다.

해결 방법

Property 'require' doesn't exist react native metro bundler

들어가기에 앞서

WebView를 이용한 지도 컴포넌트 렌더링 테스팅 중 아래와 같은 에러를 만났습니다.

발생 원인

추정되는 원인으로는 jest가 'RNCWebView' 모듈을 찾지 못했기 때문에 위 에러가 발생하는 것 같습니다.

해결 방법

'RNCWebView' could not be found

들어가기에 앞서

먼저 아래 명령어를 통해 패키지를 설치합니다. 추가적인 jest 매처를 사용하기 위해 jest-native도 설치합니다.

패키지 설치

타입스크립트로 작성된 react컴포넌트는 ts-jest로 테스트를 진행할 것이므로 ts-jest도 설치합니다.

jest 및 babel 환경설정

React Native Jest 환경 구축 & ES6 Syntax Error

들어가기에 앞서

스토리북을 사용하는 목적은 여러가지가 있겠으나, 제가 생각하는 주요 목적은 컴포넌트 테스트 및 문서화입니다. 스토리북을 사용하면 컴포넌트를 독립적으로 테스트할 수 있으며, 각각의 스토리는 특정 상황이나 상태에서 컴포넌트가 예상대로 작동하는지 확인할 수 있습니다. 또한, 각각의 스토리는 특정 컴포넌트의 사용법, 속성 등을 문서화여 보여줄 수 있습니다.

스토리북을 사용하는 주요 목적

이를 통해 시각적으로 컴포넌트를 테스트하고 디자인의 일관성을 유지할 수 있는 이점을 누릴 수가 있습니다.

기본적인 스토리 작성 방법

스토리북은 공식 문서에서 언급하길 CDD방법론을 따릅니다. 작은 컴포넌트(버튼, 텍스트 등)부터 작성하여 점차적으로 복잡한 컴포넌트를 개발하는 상향식 개발방식으로, 처음엔 러프한 디자인으로 틀을 잡고 조금씩 원하는 로직을 수행하는 컴포넌트를 리팩토링을 거쳐 구현하는 방식이 TDD 방법론과 유사하다고 할 수 있습니다.

리액트 네이티브 스토리북 파헤치기

들어가기에 앞서

DFS(깊이 우선 탐색)는 그래프에서 노드를 탐색하는 알고리즘 중 하나입니다. 이 알고리즘은 가능한 한 깊이 있게 그래프를 탐색하며, 더 이상 진행할 수 없을 때 되돌아가(백트레킹) 다른 경로를 탐색합니다.

Depth First Search

예를 들어, 미로 탐색에서 한 방향으로 계속 진행하다가 막다른 길에 도착하면 다시 되돌아가서 다른 길을 찾아 나서는게 DFS의 작동 방식과 유사합니다.

DFS는 스택(Stack)이나 재귀(recursion)를 사용하여 구현할 수 있습니다. 스택을 사용하는 경우에는 방문한 노드를 스택에 저장하고, 재귀를 사용하는 경우에는 해당 노드를 방문하고 인접한 노드를 재귀적으로 방문합니다.

DFS는 주로 그래프 탐색, 미로 찾기, 그래프의 연결 여부 확인, 위상 정렬 등의 문제에서 활용됩니다.

문제 풀어 보기

DFS와 leetcode 988,

들어가기에 앞서

TDD - 프로젝트에 적용해보기

들어가기에 앞서

"failed to remove ‘file’/: Device or resource busy”

linux에서 rm -rf 명령어가 작동하지 않는다면?

특정 파일을 삭제하려고 할 때, 이런 메시지가 나오는 이유는 일반적으로 파일이나 디렉토리가 현재 사용 중이거나 접근 권한이 없어서 삭제할 수 없기 때문입니다. 이 경우에는 lsof나 fuser와 같은 도구를 사용하여 현재 작업 중인 프로세스가 있는지 확인해야 합니다.

lsof (List Open Files):

fuser (File User):

위 도구들을 통해 프로세스 ID를 알았다면 kill -9 12345(프로세스 ID) 명령어를 입력하시고 rm -rf로 삭제를 다시 진행하시면 됩니다.

"failed to remove ‘file’/: Device or resource busy”

들어가기에 앞서

Gitlab CI/CD 구축에 있어서 가장 먼저 해야하는 일은 CI/CD 작업을 실행하는 데 사용되는 도구인 Gitlab Runner 설치입니다. 이 글은 공식문서의 linux 설치(Ubuntu) 기준으로 작성했습니다. 아래 공식 문서의 설치 방법을 참고 바랍니다.

Gitlab Runner

Install GitLab Runner using the official GitLab repositories | GitLab

GitLab product documentation.

https://docs.gitlab.com/runner/install/linux-repository.html

설치한 runner는 /usr/local/bin 에서 확인 가능합니다.

gitlab runner 등록

Gitlab CI/CD 파이프라인 구축하기

들어가기에 앞서

React Native로 UI를 개발하던 중 Xcode Simulator 상에서 보이던 화면과 제 아이폰에서 보이는 화면이 다른 것을 발견했습니다. 해당 문제는 기기 내의 텍스트 크기 설정이 앱에도 적용되는 현상이라고 합니다.

텍스트 크기 설정에 따른 UI 크기 조절 문제

아이폰 설정 중 텍스트 크기를 최대로 한 모습

해결 방법

React Native - 기기 설정에 따른 UI 확대 문제

들어가기에 앞서

순수 함수는 입력을 받아서 출력을 내놓는 특별한 종류의 함수입니다. 그리고 이 함수는 외부의 어떤 것도 바꾸지 않으며, 입력이 같으면 항상 같은 출력을 반환합니다.

순수함수란? 불변성과 사이드 이펙트와의 연관 관계

예를 들어, 순수 함수를 설명하려면 "사과를 자르는 절단기"를 생각해보세요. 이 절단기는 사과를 입력으로 받아서 자르고, 그 결과로 자른 사과를 반환합니다. 이때, 절단기는 사과를 자르는 작업만 수행하고, 주변 환경에는 아무런 영향을 주지 않습니다. 절단기가 작동할 때마다 사과를 주면 항상 같은 방식으로 자르게 됩니다.

순수 함수는 두 가지 중요한 키워드를 갖고 있는데요, 바로 불변성(Immutability)과 사이드 이펙트(Side Effects)입니다.

불변성(Immutability):

순수함수와 선언형,명령형 프로그래밍

들어가기에 앞서

간단한 타입스크립트 코드를 테스트하더라도 위와 같은 에러를 만날 수 있습니다. —isolatedModules 에러는 위 컴파일 에러 메시지에서도 확인할 수 있듯이 해당 코드가 전역 네임스페이스로 관리되기에 발생합니다. 전역으로 관리되는 이유는 타입스크립트가 import/export 키워드가 없는 파일은 레거시 파일 취급하며 모듈로 다루지 않기 때문입니다.

isolatedModules 에러는 왜 발생하는가?

해당 에러를 고치려면 메시지에서 제시한 방법대로 import,export 키워드를 붙이거나, 비어있는 export{}문을 상단에 작성하면 됩니다.

혹은 테스트하려는 코드가 있는 폴더의 tsconfig.json에 아래처럼 "isolatedModules": false, 옵션을 추가하면 더이상 에러 메시지가 나오지 않습니다.

TSError cannot be compiled under ‘—isolatedModules’

들어가기에 앞서

Fastify는 Node.js 기반의 웹 애플리케이션 및 API를 개발하는데 사용되는 웹 프레임워크입니다. 같은 Node.js 기반의 웹 프레임워크인 Express.js와는 달리, 이름 그대로 속도에 중점을 둔 프레임워크이며 Express.js보다 빠르고 경량화되어 있습니다. 하지만, 여전히 Express.js는 서버 개발에 있어서 안정적인 선택지 중 하나이며 10년이 넘는 역사를 가진만큼 Fastify보다 많은 자료를 보유하고 있고 커뮤니티 또한 좀 더 활성화되어 있습니다.

Fastify와 Express.js

Fastify의 주요 기능과 개념

Plugin:

Fastify 핵심 개념 파헤치기

들어가기에 앞서

자바 애플리케이션의 메인 메소드가 실행되면 JVM 프로세스가 시작되고 main thread가 생성됩니다. JVM은 운영 체제에서 할당받은 자원을 이용하여 자바 프로그램을 실행합니다. 이 JVM은 여러 개의 스레드를 생성하여 자바 프로그램의 동시성을 지원하고, 이 스레드들은 JVM의 관리하에 있습니다.

프로세스와 스레드

프로세스(Process):

스레드(Thread):

자바의 프로세스와 스레드

[Java]프로세스와 스레드

들어가기에 앞서

동적 계획법(이하 DP)은 큰 문제를 작은 문제로 나누어 해결하는 방법입니다. 이때, 작은 문제들의 해결책을 저장하고 활용하여 중복 계산을 피합니다. 이런 특징으로 인해 DP는 “기억하며 풀기” 라고도 불립니다. DP는 주로 최적 부분 구조와 중복 부분 문제의 조건을 만족하는 문제에 적용됩니다.

동적 계획법이란?

1) Overlapping Subproblems(중복 부분 문제) - 동일한 작은 문제들이 반복해서 나타나는 문제

2) Optimal Substructure(최적 부분 구조) - 부분 문제의 최적 결과 값을 사용해 전체 문제의 최적 결과값을 구할 수 있는 경우

동적계획법(Dynamic Programming)

들어가기에 앞서

오류에 대한 지적 사항은 언제든지 환영합니다. 부디 댓글로 알려주시길 바랍니다. 감사합니다.

HashTable?

HashTable은 key와 value형태로 데이터를 저장하는 자료구조입니다. Hashtable은 key를 해시 함수에 입력하여 해시 코드를 생성하고, 이 해시 코드를 배열의 인덱스로 사용하여 value를 저장하거나 검색합니다.

Hashtable은 효율적인 검색을 위한 자료구조이지만, 몇 가지 단점도 있습니다. 예를 들어, 해시 함수가 서로 다른 key에 대해 같은 해시 코드를 생성할 수 있습니다. 이를 해시 충돌(Hash Collision)이라고 하며, 이를 해결하기 위한 방법들이 있지만, 추가적인 시간과 공간이 필요합니다. 또한, Hashtable은 key의 순서를 보장하지 않습니다. 즉, key를 삽입한 순서대로 value를 얻을 수 없습니다. 이러한 경우에는 다른 자료구조를 사용해야 합니다.

Hashtable 해쉬테이블 이해하기

들어가기에 앞서

오류에 대한 지적 사항은 언제든지 환영합니다. 부디 댓글로 알려주시길 바랍니다. 감사합니다.

jhipster 설치 도중 java 17 ~ 21 버전이 필요하다고 하여 버전도 변경하는 겸 정보를 공유하고자 합니다.

설정된 자바 버전 확인

제일 먼저 현재 메인으로 설정된 자바의 버전 확인부터 합니다. 아래 명령어는 윈도우/맥 공통입니다.

[Mac] Java 버전 변경하기

들어가기에 앞서

오류에 대한 지적 사항은 언제든지 환영합니다. 부디 댓글로 알려주시길 바랍니다. 감사합니다.

리액트 훅(React Hooks)은 리액트에서 상태(state)와 생명주기 함수(lifecycle functions)를 함수 컴포넌트 안에서 사용할 수 있게 해주는 기능입니다. 클래스 컴포넌트가 가지고 있는 상태 관리 및 생명주기 관련 기능을 함수 컴포넌트에서도 사용할 수 있도록 해주는 것이 주요 목적입니다. 이 글에서는 리액트 훅의 기본 개념과 주요 특징에 대해 살펴보겠습니다.

1. 리액트 훅의 기본 개념

앞서 리액트 훅은 “상태(state)와 생명주기 함수(lifecycle functions)를 함수 컴포넌트 안에서 사용할 수 있게 해주는 기능”이라고 하였습니다. 저는 처음에 이 개념들이 안 와닿아서 이해가 잘 되지 않았습니다. 그러므로, 이 두 개념에 대해 보다 상세히 설명해보겠습니다.

React hook에 관하여

들어가기에 앞서

오류에 대한 지적 사항은 언제든지 환영합니다. 부디 댓글로 알려주시길 바랍니다. 감사합니다.

MonoRepo의 개념과 구축 이유

Monorepo를 한마디로 정의하면, '한 레포지토리 내에 독립된 여러 프로젝트를 넣어서 관리하는 것'을 말합니다.

이로 인해 여러 패키지(프로젝트) 사이의 참조 관계나, 관리의 용이성을 살림으로써 코드 재사용이 용이해지고 중복 코드 가능성이 낮아지게 되는 효과를 얻을 수 있습니다.

즉, MonoRepo는 모듈화가 핵심 개념이라고 할 수 있습니다. 물론, 모듈화 자체는 기존의 저장 방식인 MultiRepo(PolyRepo)로도 잘 구축할 수 있지만, MonoRepo의 각 패키지 작업에 대한 제한 사항이 없고 서로 참조하기가 쉽다는 특징 때문에 MonoRepo로 구축하였습니다.

MonoRepo와 NPM 그리고 lerna

포스팅_리스트

Name

Created time

Last edited time

tag

EAS Update Secrets 적용 불가 문제

2024/07/08 05:18

2024/07/08 23:40

EAS로 빌드하고 배포하기 - Android편

2024/07/07 08:01

2024/07/07 23:52

EAS로 빌드하고 배포하기 - IOS편

2024/07/03 04:04

2024/07/03 06:04

Next.js - 라우팅 방식에 따른 page생성과 layout

2024/06/15 04:57

2024/07/26 08:52

App Center의 지원 종료와 Expo 및 EAS로의 전환

2024/06/14 05:42

2024/07/08 07:43

Zustand 사용해보기

2024/06/04 11:58

2024/07/08 03:53

expo 앱에 admob 배너 광고 추가하기

2024/05/19 06:09

2024/06/04 00:43

Property 'require' doesn't exist react native metro bundler

2024/04/24 05:05

2024/05/29 02:08

'RNCWebView' could not be found

2024/04/24 01:19

2024/05/29 01:50

React Native Jest 환경 구축 & ES6 Syntax Error

Jest

2024/04/23 08:23

2024/04/25 06:14

Jest

리액트 네이티브 스토리북 파헤치기

2024/04/23 07:44

2024/05/28 01:34

Storybook

DFS와 leetcode 988,

2024/04/18 00:27

2024/04/25 11:55

알고리즘 & 자료구조

TDD - 프로젝트에 적용해보기

"failed to remove ‘file’/: Device or resource busy”

2024/04/11 08:05

2024/04/18 08:39

개발방법론

2024/04/09 06:21

2024/04/13 11:43

Linux

Gitlab CI/CD 파이프라인 구축하기

React Native - 기기 설정에 따른 UI 확대 문제

2024/04/07 14:16

2024/06/15 14:14

CI/CD

2024/04/03 08:43

2024/06/15 14:13

순수함수와 선언형,명령형 프로그래밍

TSError cannot be compiled under ‘—isolatedModules’

2024/03/23 05:52

2024/04/02 04:10

JavaScript/TypeScript

2024/03/16 07:33

2024/03/25 00:02

JavaScript/TypeScript

Fastify 핵심 개념 파헤치기

2024/02/28 08:16

2024/03/11 05:14

Node.js

[Java]프로세스와 스레드

동적계획법(Dynamic Programming)

2024/02/21 00:16

2024/02/21 03:38

JAVA

2024/02/19 23:38

2024/02/20 00:25

2024/02/06 23:41

2024/04/18 23:38

2024/02/05 08:06

2024/02/17 08:28

JAVA

React hook에 관하여

2024/01/28 04:37

2024/04/04 02:18

MonoRepo와 NPM 그리고 lerna