전비의 개발일기

플로이드-워셜 알고리즘은 그래프에서 최단 거리를 구하는 알고리즘입니다.

플로이드-워셜(floyd-warshall) 알고리즘이란?

이 알고리즘의 핵심원리는 A노드에서 B노드까지 최단경로를 구했을 때, 해당 경로 위에 C노드가 존재한다면 그 노드를 이루는 부분 경로 역시 최단 경로라는 것입니다. 즉, 전체 경로의 최단경로는 부분 경로의 최단 경로의 조합으로 이뤄진다는 뜻입니다.

이는 부분적인 경로를 이용하여 전체 경로를 구한다는 점에서 동적계획법의 bottom-up 형태를 연상할 수 있습니다. bottom-up 형태의 동적계획법은 점화식을 세워 문제를 해결하는데, 플로이드 워셜 알고리즘의 경우에는 다음과 같이 점화식을 도출할 수 있습니다.

distance[start][end] = Math.min(distance[start][end], distance[start][mid] + distance[mid][end])

플로이드워셜 알고리즘

들어가기에 앞서

하단의 참고한 자료를 바탕으로 개인의 생각을 정리한 글이므로 오류가 있을 수 있습니다.

Next.js는 app directory를 통해 동적 세그먼트 및 유연한 라우팅 방식을 제공합니다. 이 글에서는 동적 세그먼트를 정의하고 활용하는 방법과 함께, 소괄호(())를 사용한 라우팅 처리 방식에 대해 알아보겠습니다.

동적 라우팅 처리

동적 라우팅을 구현하려면 대괄호([ ])를 사용하여 폴더 이름을 동적 세그먼트로 정의합니다. 예를 들어, app/blog/[slug] 경로를 생성하면 slug 값에 따라 동적으로 페이지를 렌더링할 수 있습니다.

Next.js - 동적 라우팅 처리와 Route Group

들어가기에 앞서

기존에 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 앱 등록

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

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

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

들어가기에 앞서

Next.js에서는 두 가지 주요 라우팅 방식, 즉 App Router와 Pages Router를 제공합니다.

Page 생성과 Layout

Page 생성

Next.js 13에서 도입된 App Router 방식에서는 app 폴더의 하위 폴더 이름을 라우트로 정의합니다. 아래는 예시 구조입니다.

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

들어가기에 앞서

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

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 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]프로세스와 스레드

포스팅_리스트

Name

Created time

Last edited time

tag

DOM API

sh: tailwind: command not found

2025/03/20 08:24

2025/03/21 03:40

JavaScript/TypeScript

"/app/.next/standalone": not found

2025/02/12 10:41

2025/02/13 10:01

Nextjs

Next.js - 동적 라우팅 처리와 Route Group

2025/02/11 06:58

2025/02/11 07:17

2024/10/18 00:12

2024/10/18 04:43

알고리즘 & 자료구조

2024/07/26 08:10

2025/02/11 07:16

EAS Update Secrets 적용 불가 문제

Nextjs

2024/07/08 05:18

2024/07/08 23:40

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

2024/07/07 08:01

2024/10/18 05:54

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

2024/07/03 04:04

2024/07/03 06:04

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

2024/06/15 04:57

2025/02/11 07:17

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

Nextjs

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]프로세스와 스레드