개발하는 개구리

[EAS-iOS Build] expo 빌드 + 제출 과정에서 발생하는 다양한 에러 대응 방법

중규리 — Sun, 5 May 2024 18:11:41 +0900

에러 종류

EAS 빌드 과정 중 발생한 에러

[Application Loader Error Output]: Asset validation failed SDK version issue. This app was built with the iOS 16.1 SDK. All iOS and iPadOS apps must be built with the iOS 17 SDK or later, included in Xcode 15 or later, in order to be uploaded to App Store Connect or submitted for distribution.

Fastlane pilot failed fastlane exited with non-zero code: 1 Failed to submit the app to the store

Build failed: Your project requires a newer version of CocoaPods

# from /Users/expo/workingdir/build/TERMTERM/ios/Podfile:47

# -------------------------------------------

# > use_react_native!(

# :path => config[:reactNativePath],

# -------------------------------------------

Error: Cannot find module 'string-width'

const stringWidth = require('string-width');

등등...

발생 환경

Expo SDK 46

원인과 해결 방법

우선 Expo SDK는 iOS SDK와 직결되기 때문에 최신 버전을 따라가는게 베스트다.

만약 deprecated된 버전을 이용한다면 최신 버전의 시뮬레이터에서 실행이 안되고, 빌드가 되더라도 appstoreconnect에 submission할 수 없다.

최신 버전 업데이트 방법은 아래와 같다.

Upgrade Expo SDK

Learn how to incrementally upgrade the Expo SDK version in your project.

docs.expo.dev

웬만하면 문서의 모든 절차를 따라해서 모듈의 버전까지 잘 맞춰주도록 한다.

이후 SDK를 업데이트하면, 각종 에러와 만나게 될 것이다. 특히 모듈을 덕지덕지 가져다 쓴 프로젝트는 에러의 정도가 심할 것...

그게 바로 저예요...

여튼 이때 각종 문제가 발생하고 로그 길이는 몇만줄이고... 멘탈 가루가 되지만 빌드를 웹에 계속 올려서 돌려보지 말고 아래 순서를 따라 로컬에서 문제를 먼저 파악하는게 좋다.

npx react-native-clean-project
npx expo-doctor
npx expo install --fix
npx expo prebuild --clean
yarn ios

이 과정에서 에러가 뜨면 웬만하면 eas에서도 빌드가 안된다.

여기서 발생하는 에러를 잘 처리하면, 웬만하면 빌드가 된다.

SDK 49 - eas build ios failed on "run fastlane" · Issue #2109 · expo/eas-cli

Build/Submit details page URL https://expo.dev/accounts/johnfa/projects/carles-connect/builds/5f04dc92-7dbc-42c8-9f9f-bb1dac0c7b2c#run-fastlane Summary We started a new project with expo 49. It err...

github.com

SDK 업데이트하면서 빌드 지옥에 빠진 사람들이 아주 많다...

나같은 경우에는 string-width?라는 모듈에서 문제가 있었는데, 해당 모듈은 직접 사용한게 아니라 다른 모듈들의 peer 종속성이라 자동으로 설치된 경우여서... 뭐 내가 임의로 코드를 건들 수 있는 상황이 아니기 때문에 에러를 해결하는 데에 더더 더 더더더더더더 더더더더더더 오래걸렸다.

임의로 할 수 있는 해결 방법은 아래와 같다.

1. package.json에 아래 문구 추가

  "resolutions": {
    "jackspeak": "2.1.1"
  }

2. yarn.lock 제거

3. yarn install 실행

이후 다시 eas 빌드를 돌려보면 정상적으로 수행된다.

대신 시간이 엄청 오래걸리거나,

We've lost connection to the worker.

Two common reasons:
1. Worker ran out of memory.
Try running your build on a large worker. Learn more at https://docs.expo.dev/build/eas-json/#selecting-resource-class
2. Worker experienced a network issue.
This is most likely an intermittent problem. Try running the build again.

라면서 빌드를 취소해버리고 돈내라고 하는 경우가 있는데

침착하게 캐시지우고 rebuild해주면 운좋게 성공할 수 있다... 돈 안낼거면 CPU 안터지는 시간에 운에 기대서 빌드 돌려야할둣^^,,

후기

더이상 expo go와 EAS를 사용할 일은 제 인생에 없을 것입니다.

RabbitMQ(2) - RabbitMQ, GemFire 개념 및 등장 배경

중규리 — Wed, 17 Apr 2024 18:19:31 +0900

모놀리식 아키텍쳐

하나의 어플리케이션에 여러가지 비즈니스 서비스가 번들되는 형태

전통적인 모놀리식 아키텍쳐에선 개발팀의 규모가 컸다.
결합도가 너무 높았음 (리스크 높음)
- 개발자간 지식을 공유하는 것도 어려웠다.
- 데이터 거버넌스 세팅을 공유하는 것도
레거시 기술에 국한될 수 밖에 없음
- 신기술 도입이나, 레거시에 알맞는 개발자를 찾기도 어려움

모던 소프트웨어 아키텍쳐

독립적인 각각의 Micro Service를 구축해서, 상호 작용하도록 만든 형태

각각의 서비스는 본 서비스에 맞는 데이터베이스를 가져야함
비즈니스 서비스 간 결합도가 낮아짐
- 독립적으로 개발되고, 테스트되고, 배포되기 때문에 빠르다
데이터가 늘어나는 상황에서 서비스를 스케일업하는 데에 강점을 가짐
- 테스트나 배포도 마찬가지
인력이나 신기술 도입 면에서도 강점을 가짐

GemFire

key:value 형태의 응답 속도가 밀리세컨드 수준의 데이터 스토어

빠른 속도가 필요한 경우는 ux와 직결됨
- 실시간에 가까운 서비스의 경우, 액션이 즉각적으로 일어나길 기대하기 때문
MSA의 경우 독립적인 데이터베이스를 갖추고 있는데, 뱅킹 트랜잭션 같은 곳에서 상호간의 데이터를 참조하는 데에 시간을 줄일 수 있다.
예를 들어, 이상거래의 가능성을 밀리세컨드 수준으로 탐지할 수 있어야한다.
- 즉각적으로 알람이 가고, 트랜잭션을 막아버리는 행위가 진행될 수 있어야한다.
기존의 비즈니스 로직은 수정하기 어렵고, 기술적인 향상으로 성능을 이끌어내야하는 상황에서 도움이 됨
뱅킹 시스템 중 예시) 인출 장소 근처의 소비 장소를 추천해주는 형태
- 결국 전부 실시간성을 강조하고 싶은 것 같음

RabbitMQ

기본적으로 메시지 브로커이며, 정보를 전달하는 역할을 담당함.

다양한 매체와 디바이스에서 데이터를 전달하기 위한 미들웨어로 사용된다.
- 빠르고, 안전하고, 신뢰성있게 전달할 수 있다.
중요한 정보를 전달하는 상황에서, 여러 사용자와 매체, 상황에 대해 시스템 간 연결이 필요하다.
- 이런 모든 경우를 범용할 수 있는 공통의 언어를 제공한다.
- 한개의 메시지에 여러가지 액션이 붙어야하는 상황이 발생하기도 함.
빠르고 안전하게 메시지를 전달하기 위해
- 안정성도 있어야함 (공용 와이파이를 이용할 때에도 기밀성을 유지해야함)

RabbitMQ + GemFire

데이터를 빠르고 안전하게 전달하는 RabbitMQ

실시간으로 데이터를 분석하고 액세스하는 Gemfire

RabbitMQ(1) - RabbitMQ 기초, Kafka와 차이점

중규리 — Sun, 14 Apr 2024 22:05:45 +0900

이번에 회사에서 3일간 RabbitMQ 교육을 다녀오게 되었다.

내일부터 시작되는 교육 전, 사전에 학습한 내용을 정리해보았다.

기본

메시지 큐

RabbitMQ, Redis, Kafka.. 모두 메시지 큐 기반의 시스템이다.

메시지 큐란, 프로세스 또는 프로그램 인스턴스가 데이터를 교환할 때 사용하는 통신 방법이다.

크게 정보를 제공하는 Producer, 정보가 잠시 담겨있는 Queue, 정보를 제공받는 Consumer 가 있다.

메시지 큐의 장점은 아래와 같다.

비동기(Asynchronous)
- Queue가 있기 때문에 비동기 처리하며 병목현상 방지 가능
낮은 결합도(Decoupling)
- 정보를 제공하는 서비스와 받는 서비스가 분리되며 결합도가 낮아진다.
확장성(Scalable)
- 다수의 프로세스가 메시지 큐를 통해 메시지를 전달할 수 있기 때문에 확장성이 뛰어나다.
탄력성(Resilience)
- 메시지가 Queue에 담기기 때문에, 서비스가 중지되어도 Queue가 중지된 것은 아니기 때문에 Queue에 있는 메시지를 후에 다시 처리할 수 있다.
보장성(Guarantees)
- Queue에 보관된 메시지가 Consumer에게 전달된다는 보장을 제공한다.

메시지 브로커

기본적으로 RabbitMQ는 AMQP(Advanced Message Queuing Protocol) 기반의 메시지 브로커이다.

사용자가 많거나, 요청 처리 시간일 길 때, 해당 요청을 다른 API에게 넘기고 빠른 응답을 할 때 사용한다.

AMQP란, 메시지 지향 미들웨어를 위한 개방형 표준 응용 계층 프로토콜을 뜻한다. 쉽게 말해서, 메시지 큐(MQ) 오픈소스의 표준 프로토콜이라고 할 수 있다.

조금 빠른 것 같지만, RabbitMQ와 Kafka의 결정적인 차이점이 바로 RabbitMQ가 메시지 브로커라는 점이다.

RabbitMQ, Redis는 메시지 브로커이며, Kafka는 이벤트 브로커이다.

기본적으로 메시지 브로커는 이벤트 브로커의 역할을 할 수 없지만, 반대로 이벤트 브로커는 메시지 브로커의 역할을 할 수 있다.

메시지 브로커의 경우, 많은 기업의 대규모 메시지 기반 미들웨어 아키텍쳐에서 사용되어왔다. 기본적으로 큐에 메시지를 보내고 받으며 프로듀서와 컨슈머 간 네트워크를 구성하기 위해 사용되었다.

메시지 브로커의 특징은 메시지를 처리하면 즉시 또는 짧은 시간 안에 메시지가 삭제되는 구조라는 점이 있다.

이벤트 브로커의 경우, 이벤트(메시지, 레코드)를 하나만 보관하고 인덱스를 통해 개별 액세스를 관리한다.

또한 메시지 브로커와 다르게, 필요한 시간 동안 이벤트를 보존할 수 있다.

즉 메시지 브로커는 메시지를 보내고 처리하고 삭제하지만, 이벤트 브로커는 삭제하지 않는다는 점이 가장 큰 차이점이다.

본 포스팅은 Kafka가 아닌 RabbitMQ에 대한 내용이므로, 영상에서 언급되는 이벤트 브로커에 대한 자세한 내용은 생략했다.

개념

위 그림은 RabbitMQ의 전반적인 동작 방식을 나타낸 그림이다. 메시지 큐의 동작 방식 사이에 RabbitMQ만의 개념이 약간 추가되었다.

Producer
- 메시지 큐에서 다룬 키워드이지만, RabbitMQ에서는 Producer가 메시지를 Queue가 아닌 Exchange로 전달한다는 특징이 있다.
Exchange
- Producer로부터 전달 받은 정보를 어떤 Queue에 담을지 결정한다.
- 총 4가지 타입이 있으며, Router와 같다고 생각하면 된다.
  - Direct, Topic, Headers, Fanout
Binding
- Exchange에게 메시지를 라우팅할 규칙을 지정하는 행위이다.
- 특정 조건에 맞는 메시지를 특정 큐에 전송하도록 하며, Exchange의 타입에 맞게 설정되어야한다.
- Exchange와 Queue는 m:n 바인딩이 가능하다.
Queue
- 메시지(정보)를 일시적으로 저장하는 장소이다.
- Queue는 호스트의 디스크 용량 및 메모리에 한정된다.
Consumer
- 메시지를 수신하는 주체이며, Consumer들은 Queue에서 저장된 메시지를 읽는다.

Exchange Types

Exchange에는 총 4가지 타입이 있다.

1️⃣ Direct

메시지에 포함된 Routing Key를 바탕으로 Queue에 메시지를 전달한다.

여러 Queue에 같은 Routing Key를 지정해서 Fanout처럼 동작하도록 할 수 있다.

Default Exchange는 이름이 없는 Direct Exchange이며, RabbitMQ에서 생성되는 Queue가 자동으로 바인딩 되는데, 이때 각 Queue의 이름이 Routing Key로 설정된다.

2️⃣ Topic

Routing Key 패턴이 일치하는 모든 Queue에 메시지를 라우팅한다. 여러 Consumer에서 메시지 형태에 따라 선택적으로 수신해야하는 경우와 같이, Publish/Subscribe 패턴에서 사용될 수 있다.

라우팅 패턴이 여러개 일치하더라도 하나의 큐에는 한개의 메시지만 전달된다.

Binding Keyy는 온점(.)으로 구분된 단어의 조합으로 정의되고, (*)과 (#)을 사용할 수 있다.

(*) : 정확히 하나의 단어만 대체

(#) : 0개 혹은 여러 개의 단어 대체

(*)과 (#) 같은 와일드카드는 Direct에서 지원되지 않는다.

3️⃣ Headers

Topic과 유사하지만, Header를 이용하기 때문에 더 다양한 속성을 이용할 수 있다.

Routing Key 속성은 무시되지만, headers 속성이 바인딩 시 지정된 값과 같은 경우일 때 같은 경우에 일치하는 것으로 간주된다.

3️⃣ Fanout

Routing key에 관계 없이, 모든 Queue에 동일한 메시지를 전달하는 브로드캐스트 라우팅 방식이다.

Dispatching

다수의 Consumer가 1개의 Queue와 연결되어있다면, 라운드 로빈 방식으로 메시지를 분배한다.

이러한 특성으로 중복 처리를 방지하면서, 프로그램을 수평적으로 확장할 수 있다.

Fair Dispatching & Prefetch Count

하지만 다수의 Consumer가 2개 이상의 Queue와 연결되어있다면, 라운드 로빈 방식으로 효율성을 보장할 수 없다.

가령 홀수 번째 메시지 처리 시간이 매우 짧고, 짝수 번째 메시지 처리 시간이 매우 길다면 짝수 번째 메시지를 처리하는 Consumer에는 지속적으로 지연이 발생한다.

때문에 RabbitMQ에는 Prefetch Count라는 개념이 있다.

이는 Queue에 메시지를 Consumer의 메모리에 쌓아둘 수 있는 최대 메시지의 양으로, Prefetch Conut의 값이 1로 설정된다면 하나의 메시지가 처리되기 전에는 새로운 메시지를 받지 않기 때문에 작업을 분산시킬 수 있다.

Message 보존

RabbitMQ 서버가 재기동되면 Queue는 모두 제거된다.

이를 방지하기 위해 Queue 생성 시, Durable 옵션에 true를 설정하고,

Producer가 메시지를 발송할 때 PERSISTENT_TEXT_PLAIN 옵션을 주어야 메시지가 보존된다.

// Queue 생성, QueueName 다음이 durable option
rabbitmqChannel.queueDeclare(rabbitmqQueueName, true, false, false, null);

// 메시지 발송
rabbitmqChannel.basicPublish(exchangeName, routingKey, MessageProperties.PERSISTENT_TEXT_PLAIN, message.getBytes());

출처

https://www.cloudamqp.com/blog/what-is-message-queuing.html

https://somaz.tistory.com/119

https://wildeveloperetrain.tistory.com/317

https://velog.io/@cho876/%EC%B9%B4%ED%94%84%EC%B9%B4kafka-vs-RabbitMQ

https://www.cloudamqp.com/blog/part1-rabbitmq-for-beginners-what-is-rabbitmq.html

https://blog.devops.dev/rabbitmq-exchange-types-explained-5fd9086595f5

백준 16168 퍼레이드 Python

중규리 — Thu, 15 Feb 2024 17:36:45 +0900

문제 정보

16168번: 퍼레이드

첫 번째 줄에 지점의 개수 V, 연결 구간의 개수 E가 주어진다. (1 ≤ V ≤ E ≤ 3000) 이후 E개의 줄에 걸쳐 각 연결 구간이 연결하는 두 지점의 번호 Va, Vb가 공백을 사이에 두고 주어진다. (1 ≤ Va,

www.acmicpc.net

알고리즘

오일러 경로 (유니온 파인드 + 그래프 탐색)

⏱️ 풀이 시간

60m+ (중간에 오일러 경로의 조건을 찾아보느라 길어졌다.)

풀이

오일러 경로는 한 붓 그리기와 같다.

오일러 경로가 성립하기 위해서는 총 두가지 조건에 만족해야한다.

모든 정점이 연결되어있어야한다.
차수(연결된 노드 수)의 두 규칙 중 한개를 만족해야한다.
- 모든 노드의 차수가 짝수이다.
- 두 노드의 차수는 홀수, 나머지 노드는 짝수이다.

이 조건을 찾고 공부하느라 조금 늦어졌다ㅠㅠ

우선 모든 정점이 연결되어있는지 찾기 위해 유니온 파인드를 사용했고, 차수 규칙의 경우 일반 구현으로 풀었다.

‍ 나의 답

# pypy3

import sys
input = sys.stdin.readline

def find(x):
    if parent[x] != x:
        parent[x] = find(parent[x])
    return parent[x]

def union(a, b):
    a = find(a)
    b = find(b)
    if a < b:
        parent[b] = a
    else:
        parent[a] = b

v, e = list(map(int, input().rstrip().split()))
graph = [[] for _ in range(v + 1)]
parent = [i for i in range(v + 1)]
for _ in range(e):
    a, b = list(map(int, input().rstrip().split()))
    if find(a) != find(b): union(a, b)
    graph[a].append(b)
    graph[b].append(a)


# 모두 연결되어있고, 차수 규칙에 맞아야함
temp = find(parent[1])
if not all(find(el) == temp for el in parent[1:]): # 연결되지 않은 경우
    print('NO')
    exit()
nodes = [len(node) % 2 for node in graph[1:]]
if all(el == 0 for el in nodes) or (nodes.count(1) == 2): # 차수 규칙
    print('YES')
else:
    print('NO')

백준 21314 민겸 수 Python

중규리 — Thu, 15 Feb 2024 15:56:52 +0900

문제 정보

21314번: 민겸 수

민겸 수 하나가 주어진다. 민겸 수는 대문자 M과 K로만 이루어진 문자열이며, 길이는 3,000을 넘지 않는다.

www.acmicpc.net

알고리즘

그리디, 구현

⏱️ 풀이 시간

12.59m

풀이

예제를 직접 손으로 그려보면 그리디라는 것을 쉽게 파악할 수 있었다.

각각 최대값과 최소값을 찾는 순서는 아래와 같다.

둘다 기본적으로 주어진 입력에 대해 앞에서부터 순회한다.

최대값

M이 나오면 stack에 담는다.
K가 나오면 K를 포함한 stack의 길이(n) 만큼 5 * (10 ^ (n - 1))를 문자열로 바꿔 정답 문자열에 더해준다.
마지막에 stack에 담겨진 M을 모두 1로 치환하여 정답 문자열에 더해준다.

최소값

M이 나오면 stack에 담는다.
K가 나오면 현재까지 stack의 길이(n) 만큼 10 ^ (n - 1)를 문자열로 바꿔 정답 문자열에 더해준다.
마지막에 stack에 담겨진 M의 수(n) 만큼 10 ^ (n - 1)을 문자열로 바꿔 정답 문자열에 더해준다.

‍ 나의 답

# pypy3

import sys
input = sys.stdin.readline

nums = list(input().rstrip())

def minn():
    stack = []
    res = ''
    for num in nums:
        if num == 'K':
            if len(stack): res += str(10 ** (len(stack) - 1))
            res += '5'
            stack = []
        else:
            stack.append(num)
    if len(stack): res += str(10 ** (len(stack) - 1))
    return res

def maxx():
    stack = []
    res = ''
    for num in nums:
        if num == 'K':
            res += str(5 * (10 ** len(stack)))
            stack = []
        else:
            stack.append(num)
    for _ in stack:
        res += '1'
    return res

print(maxx())
print(minn())

백준 11279 최대 힙 Python

중규리 — Wed, 14 Feb 2024 15:44:40 +0900

문제 정보

11279번: 최대 힙

첫째 줄에 연산의 개수 N(1 ≤ N ≤ 100,000)이 주어진다. 다음 N개의 줄에는 연산에 대한 정보를 나타내는 정수 x가 주어진다. 만약 x가 자연수라면 배열에 x라는 값을 넣는(추가하는) 연산이고, x가 0

www.acmicpc.net

알고리즘

힙

⏱️ 풀이 시간

06.24m

풀이

heapq를 이용하면 간단히 풀 수 있는 문제였다.

파이썬 heapq는 최소힙 구조이기 때문에, 음수를 붙여서 저장하고 출력할때 다시 음수를 붙여서 원래대로 바꾸는 형태로 구현했다.

‍ 나의 답

# pypy3

import sys
import heapq
input = sys.stdin.readline

q = []
for _ in range(int(input().rstrip())):
    x = int(input().rstrip())
    if not x:
        if not q: print(0)
        else: print(-heapq.heappop(q))
    else:
        heapq.heappush(q, -x)

termterm : 가설 검증과 파일럿 프로젝트에 최적화된 마이크로 프론트엔드 환경 구축하기

중규리 — Wed, 14 Feb 2024 15:04:56 +0900

pnpm workspace 기반의 모노레포 가이드라인

왜 갑자기 리팩토링?

‎termterm

‎termterm은 IT 산업 전반에서 사용되는 용어를 정리하고 공유하며 학습할 수 있도록 하는 서비스예요. 처음 사회생활을 시작할 때 또는 프로젝트를 하며 우리는 각자의 전문 분야를 가진 다양한

apps.apple.com

기존에 expo-go 기반으로 개발한 termterm의 규모가 커지면서, 가설 검증의 플로우를 빠르게 하기 위한 새로운 OKR로 "웹뷰 기반의 하이브리드 앱으로 리팩토링하기"를 설정하였습니다.

소규모 팀인 termterm 팀에서는 환경의 문제로 인해 적용하지 못했던 각종 문제(푸시, 결제, GA 등)를 해결하고 파일럿 프로젝트에 빠르게 도전하여 실 사용자의 반응을 확인하기 위한 수단이 필요한 상황이었습니다.

때문에 오로지 React-Native 코드로만 관리하던 서비스를 최소 단위의 micro-frontend로 분리하고, 핵심 기능과 컨트롤러만 React Native CLI로 관리하자는 계획을 세우게 되었습니다.

본 시리즈의 목표는 한 개의 모노레포 속에서 다양한 JS 기반 서비스를 배포할 수 있는 worktree를 구축하는 것입니다.

유틸함수와 hook, ui를 분리하여, 최종적으로 모바일 앱 뿐 아니라, 웹, 익스텐션, 데스크탑 앱까지 개발할 수 있는 환경을 구축하고자 합니다.

root
├── common //공통 모듈
│   ├── libs //유틸
│   ├── hooks //react hook
│   ├── ui //pure ui
│   └── shared //scss token
└── packages
    └── ... //각종 프로젝트들

이 본문이 도움이 될거예요

하이브리드 앱 환경 구축
pnpm을 이용한 모노레포 환경 구축
typescript, rollup.js를 이용한 유틸 함수 모듈 구축
react, typescript, rollup.js를 이용한 React hook 모듈 구축
react, typescript, rollup.js, scss(saas), storybook을 이용한 React UI 모듈 구축
모노레포에서 워크스페이스 간 모듈 참조
기본적인 rollup.config.js 작성법

pnpm?

사실 yarn berry와 lerna, turborepo까지 시도해보며, termterm에서는 pnpm workspace 아키텍쳐가 가장 적합할 것이라 판단하게 되었습니다.

yarn berry의 경우 pnp가 가장 강력한 기능인데, 모노레포 도입 과정에서 pnp를 포기하게 되는 상황이 생각보다 자주 발생한다는 것을 알 수 있었습니다.

프론트엔드 프로젝트 최신화 - 1편 : Yarn berry

안녕하세요. 채널톡 웹팀 엔지니어 카를로스입니다 채널톡에서 진행하고 있는 프로젝트 최신화에 관해 소개해드리려 합니다. 들어가며 채널톡 웹팀에서는 많은 일들을 하고 있어요. 그래서

channel.io

위 채널톡의 기술 블로그 인상깊게 읽었는데, pnp를 포기하게 된 이유를 보고... 어쨌든 규모가 커져서 분리하는 것이 아닌 가설 검증을 위해 분리하는 termterm에서 굳이 yarn berry를 적용할 필요가 없다 느꼈습니다.

당장 node_modules를 이용하는 react native와 발생하는 심볼릭 링크 관련 충돌을 직접 겪으며 yarn berry 포기를 확신했습니다.

결국 pnp가 아니면서, workspace 기능이 훌륭한 pnpm이 채택되었습니다.

(lerna와 turborepo, nx의 경우 프레임워크의 성격이 짙다 느껴, 규모가 크지 않은 termterm에서는 배제하게 되었습니다.)

모노레포 환경 구축

루트 디렉토리를 생성하고 경로 이동 후 아래 명령어를 실행하여 퓨어한 package.json을 생성합니다.

pnpm init

기본적인 정보는 자유롭게 설정하되, 직접 수정해야하는 부분이 있습니다.

{
  "name": "termterm-monorepo",
  "version": "1.0.0",
  "description": "termterm hybrid web monorepo",
  "keywords": [],
  "author": ""
}

모노레포에서 이용할 워크스페이스를 구분하기 위해 우선 pnpm-workspace.yaml 파일을 생성하여, 워크스페이스를 등록합니다.

packages:
  - "common/*"
  - "packages/*"

termterm의 경우 common의 하위와 packages 하위에 여러 모듈 & 프로젝트가 위치되기 때문에 위와 같이 설정했습니다.

이후, 아키텍쳐를 구상한 대로 디렉토리를 생성합니다.

각 디렉토리 하위에서도 pnpm init을 통해 기본 package.json을 설정합니다.

이제 워크스페이스 별 name을 통해 루트에서 해당 모듈에 편하게 접근할 수 있도록 설정할 것입니다.

가령 common/libs의 경우 package.json을 아래와 같이 수정합니다.

{
  "name": "@termterm/libs",
  ...
}

루트의 package.json에서 아래와 같이 스크립트를 작성합니다.

...
  "scripts": {
    "libs": "pnpm -F @termterm/libs",
    ...
  },
...

루트에서 각 워크스페이스에 접근하여 cli를 입력하기 위해서는 pnpm -F 워크스페이스 이름 + cli 까지 입력해야해서 상당히 번거롭습니다. cd 명령어로 경로를 이동해서 작업할 수 있지만, 여러 워크스페이스를 동시에 작업해야하는 모노레포 특성 상 매번 경로를 움직이는 것은 상당히 귀찮을 수 있습니다.

때문에 위와 같이 해당 워크스페이스에 대한 접근 명령어를 스크립트로 작성해둡니다.

이후 루트에서 pnpm libs + cli 를 통해 @termterm/libs 워크스페이스에서의 작업을 모두 진행할 수 있습니다.

공통 typescript, eslint 설정

이 부분은 선택할 수 있지만, 본 프로젝트에서는 모든 워크스페이스에서 typescript가 사용되기도 하고 (공통으로 설정해야할 속성도 있고), 저 혼자 개발하는 것이 아니기 때문에 공용으로 사용되는 eslint를 설정했습니다.

eslint의 경우 상위 경로에서 설정한 것이 더 높은 우선순위를 갖기 때문에, 루트에서 설정하면 하위 워크스페이스에서는 설정할 필요가 없습니다.

pnpm add -w -D typescript
pnpm add -w -D eslint eslint-config-airbnb-typescript eslint-config-airbnb

eslint는 airbnb의 설정을 가져와 사용하였습니다.

tsc --init

이후 생성되는 tsconfig.js의 이름을 tsconfig.base.js로 변경하여 공용이라는 것을 명시합니다.

해당 파일 내부에 다른 속성은 크게 상관 없고, preserveSymlinks만 true로 수정합니다.

이는 pnpm에서 공용 모듈 간 자동 import 문제를 해결하기 위함으로, 공용 모듈을 사용하는 워크스페이스에서 해당 속성이 false라면 자동 import가 되지 않습니다.

VSCode auto complete/import not working · Issue #3671 · pnpm/pnpm

pnpm version: 6.13.0 Code to reproduce the issue: import React from 'react' export default function App() { useEffect(() => { console.log('Intellisense to import useEffect not working') }, []) retu...

github.com

루트에 .eslintrc.js를 생성하고 아래와 같이 입력하여 airbnb의 세팅을 사용합니다.

module.exports = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: "./tsconfig.json",
    tsconfigRootDir: __dirname,
    sourceType: "module",
  },
  plugins: ["@typescript-eslint/eslint-plugin"],
  extends: [
    "airbnb-base",
    "airbnb-typescript/base",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
  ],
  root: true,
  env: {
    node: true,
    jest: true,
  },
  ignorePatterns: [".eslintrc.js"],
};

공용 유틸 함수 모듈 환경 구축

typescript로 유틸함수를 작성하고, rollup.js로 번들링합니다.

pnpm libs add -D typescript tslib rollup @rollup/plugin-typescript

루트에서 위 명령어를 입력하여 @termterm/libs 워크스페이스에 필요한 모듈을 설치했습니다.

다음으로 rollup.config.js를 생성해서 번들링 옵션을 설정합니다.

const typescript = require('@rollup/plugin-typescript')
const fs = require('fs')
const path = require('path')

const options = {
  input: 'src/index.ts',
  output: [
    {
      file: 'dist/index.js',
      format: 'cjs'
    },
    {
      file: 'dist/index.es.js',
      format: 'es'
    }
  ],
  plugins: [
    {
      name: 'Erase Dist',
      buildStart() {
        fs.rmSync(path.resolve('dist'), { recursive: true, force: true })
      }
    },
    typescript({
      module: 'esnext',
      declaration: true,
      declarationDir: './dist'
    })
  ]
}

module.exports = options

index.ts에서 내보낸 함수를 dist 디렉토리 하위에 commonjs와 es module 형태로 내보냅니다.

이 과정에서 직전에 빌드한 기록을 지우기 위해 파일 시스템의 rmSync를 이용해 dist를 한 번 지워냅니다.

rollup 설정이 완료되었다면, 빌드 스크립트 작성을 위해 package.json을 수정합니다.

{
  "name": "@termterm/libs",
  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "declaration": "dist/index.d.ts",
  "scripts": {
    "start": "rollup -c rollup.config.js -w",
    "build": "rollup -c rollup.config.js"
  },
  "devDependencies": {
    "@rollup/plugin-typescript": "^11.1.6",
    "rollup": "^4.9.6",
    "tslib": "^2.6.2",
    "typescript": "^5.3.3"
  }
}

tsconfig.js 설정은 아래와 같이합니다.

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "skipLibCheck": true
  }
}

번들

간단한 유틸함수를 작성하여 src/index.ts로 가져옵니다.

export { default as add } from "./calculate/add";
export { default as minus } from "./calculate/minus";

이후 pnpm build로 작성한 유틸함수를 번들링합니다.

번들링된 모듈을 같은 모노레포의 다른 워크스페이스에서 참고하는 방법은 포스팅 최 하단에서 확인할 수 있습니다.

공용 React Hook 모듈 환경 구축

typescript와 React로 Custom Hook을 작성하고, rollup.js로 번들링합니다.

pnpm hooks add react react-dom
pnpm hooks add -D @babel/core @babel/preset-env @babel/preset-react
pnpm hooks add -D @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-typescript
pnpm hooks add -D @types/react rollup rollup-plugin-peer-deps-external tslib typescript

루트에서 위 명령어를 입력하여 @termterm/hooks 워크스페이스에 필요한 모듈을 설치했습니다.

다음으로 rollup.config.js를 생성해서 번들링 옵션을 설정합니다.

const typescript = require('@rollup/plugin-typescript')
const commonjs = require('@rollup/plugin-commonjs')
const nodeResolve = require('@rollup/plugin-node-resolve')
const external = require('rollup-plugin-peer-deps-external')
const babel = require('@rollup/plugin-babel').default
const fs = require('fs')
const path = require('path')

const options = {
  input: 'src/index.ts',
  output: [
    {
      file: 'dist/index.js',
      format: 'cjs'
    },
    {
      file: 'dist/index.es.js',
      format: 'es'
    }
  ],
  plugins: [
    external(),
    {
      name: 'Erase Dist',
      buildStart() {
        fs.rmSync(path.resolve('dist'), { recursive: true, force: true })
      }
    },
    nodeResolve(),
    commonjs(),
    babel({ babelHelpers: 'bundled' }),
    typescript({
      module: 'esnext',
      declaration: true,
      declarationDir: './dist'
    })
  ],
  external: ['react', 'react-dom']
}

module.exports = options

아무래도 유틸 함수보다는 조금 길어졌습니다.

rollup 설정이 완료되었다면, 마찬가지로 빌드 스크립트 작성을 위해 package.json을 수정합니다.

{
  "name": "@termterm/hooks",
  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "declaration": "dist/index.d.ts",
  "scripts": {
    "start": "rollup -c rollup.config.js -w",
    "build": "rollup -c rollup.config.js"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "@rollup/plugin-babel": "^6.0.4",
    "@rollup/plugin-commonjs": "^25.0.7",
    "@rollup/plugin-node-resolve": "^15.2.3",
    "@rollup/plugin-typescript": "^11.1.6",
    "@types/react": "^18.2.55",
    "rollup": "^4.9.6",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "tslib": "^2.6.2",
    "typescript": "^5.3.3"
  }
}

tsconfig.js 설정은 유틸함수 워크스페이스와 동일합니다.

번들

작성한 커스텀 훅을 전부 src/index.ts로 가져와 내보냅니다.

테스트를 위해 임시로 작성한 커스텀 훅입니다.

import React from "react";
import { useState } from "react";

const useCount = () => {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return { count, increment, decrement };
};

export default useCount;

import React, { ChangeEvent } from "react";
import { useState } from "react";

const useInput = () => {
  const [value, setValue] = useState("");

  const handleValue = (e: ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

  return { value, handleValue };
};

export default useInput;

export { default as useCounter } from "./input/useCounter";
export { default as useInput } from "./input/useInput";

이후 pnpm build로 작성한 커스텀 훅을 번들링합니다.

공용 UI 모듈 환경 구축

typescript와 React, SCSS로 공통 디자인 시스템을 작성하고, Storybook(webpack5)으로 UI 테스트 후 rollup.js로 번들링합니다.

pnpm ui install react react-dom style-inject classnames
pnpm ui install -D css-loader postcss rollup rollup-plugin-peer-deps-external rollup-plugin-postcss sass sass-loader style-loader tslib typescript
pnpm ui install -D @babel/core @babel/preset-env @babel/preset-react
pnpm ui install -D @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-typescript
pnpm ui install -D @types/react

루트에서 위 명령어로 typescript, react, rollup 개발 환경을 구성했습니다.

storybook은 storybookjs에서 지원하는 템플릿으로 빠르게 구성합니다.

cd common/ui
npx sb init //명령어 입력 후, webpack5 선택

storybook에서 scss를 사용하기 위해서는 추가적인 모듈이 필요합니다.

//경로가 루트라면 -F 필요함
pnpm add -D @storybook/preset-scss

이후, typescript와 rollup, babel, storybook에 대한 추가 설정 작업이 필요합니다.

tsconfig.js

{
  "compilerOptions": {
    "target": "es5",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "jsx": "react",
    "module": "ESNext",
    "sourceMap": false,
    "outDir": "./dist",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "removeComments": true
  },
  "exclude": [
    "./dist",
    "./node_modules",
    "./src/**/*.test.tsx",
    "./src/**/*.stories.tsx",
    "./src/**/*.test.ts",
    "./src/**/*.stories.ts"
  ]
}

rollup.config.js

import babel from "@rollup/plugin-babel";
import commonjs from "@rollup/plugin-commonjs";
import { nodeResolve } from "@rollup/plugin-node-resolve";
import typescript from "@rollup/plugin-typescript";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import postcss from "rollup-plugin-postcss";
import pkg from "./package.json" assert { type: "json" };
import { rmSync } from "fs";
import { resolve } from "path";

const extensions = ["js", "jsx", "ts", "tsx", "mjs"];

const config = [
  {
    external: [/node_modules/],
    input: "src/index.ts",
    output: [
      {
        dir: "dist",
        format: "cjs",
        preserveModules: true,
        preserveModulesRoot: "src",
      },
      {
        file: pkg.module,
        format: "es",
      },
      {
        name: pkg.name,
        file: pkg.browser,
        format: "umd",
      },
    ],
    plugins: [
      {
        name: "Erase Dist",
        buildStart() {
          rmSync(resolve("dist"), { recursive: true, force: true });
        },
      },
      nodeResolve({ extensions }),
      babel({
        exclude: "node_modules/**",
        extensions,
        include: ["src/**/*"],
      }),
      commonjs({ include: "node_modules/**" }),
      peerDepsExternal(),
      typescript({
        module: "esnext",
        declaration: true,
        declarationDir: "./dist",
      }),
      postcss({
        extract: false,
        inject: (cssVariableName) =>
          `import styleInject from 'style-inject';\nstyleInject(${cssVariableName});`,
        modules: false,
        sourceMap: false,
        use: ["sass"],
      }),
    ],
  },
];

export default config;

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

.stroybook/main.ts

import type { StorybookConfig } from "@storybook/react-webpack5";

import { join, dirname } from "path";

/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */
function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, "package.json")));
}
const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"], //경로 변경
  addons: [
    getAbsolutePath("@storybook/addon-links"),
    getAbsolutePath("@storybook/addon-essentials"),
    getAbsolutePath("@storybook/addon-onboarding"),
    getAbsolutePath("@storybook/addon-interactions"),
    getAbsolutePath("@storybook/preset-scss"), //추가
  ],
  framework: {
    name: getAbsolutePath("@storybook/react-webpack5"),
    options: {
      builder: {
        useSWC: true,
      },
    },
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;

경로를 src 하위의 index.ts로 바꾸었으므로, 아래와 같이 아키텍처를 구성합니다.

위 이미지의 Button은 테스트를 위해 임시로 제작한 컴포넌트로, src 하위의 아키텍처는 자유롭게 구성해도됩니다.

제작한 컴포넌트는 아래와 같이 index.ts에서 내보내야 번들링이 가능합니다.

export { default as Button } from "./components/Button";

이렇게 제작한 디자인 시스템은, pnpm storybook으로 테스트하고 pnpm build를 통해 번들링할 수 있습니다.

common 모듈 공유

위 방식으로 세팅한 모든 공통 모듈을 packages 하위의 프로젝트에서 공유하여 사용할 수 있어야합니다.

우선 packages 하위에 모듈을 테스트할 prototype 프로젝트를 생성했습니다.

아래 프로젝트의 경우, 원하는 스택으로 생성하면 됩니다. 본 포스팅에서는 vite와 react typescript 조합의 템플릿을 이용했습니다.

cd pacakges
pnpm create vite prototype

마찬가지로, package.json에서 프로젝트의 이름을 적절하게 수정하고 루트에 -F 과정을 생략할 스크립트를 추가합니다.

prototype/pacakge.json

{
  "name": "@termterm/prototype",
  ...
}

root/package.json

{
  "name": "termterm-monorepo",
  "version": "1.0.0",
  "description": "termterm hybrid web monorepo",
  "scripts": {
    "libs": "pnpm -F @termterm/libs",
    "hooks": "pnpm -F @termterm/hooks",
    "ui": "pnpm -F @termterm/ui",
    "prototype": "pnpm -F @termterm/prototype" // 추가
  },
  "keywords": [],
  "author": "",
  "devDependencies": {
    "eslint": "^8.56.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.1.0",
    "typescript": "^5.3.3"
  }
}

이후 prototype 프로젝트에 공통 모듈을 설치하여 테스트를 진행합니다.

pnpm prototype add @termterm/libs @termterm/hooks @termterm/ui

위 cli는, @termterm/prototype에 @termterm/libs @termterm/hooks @termterm/ui를 설치하겠다는 것을 의미합니다.

설치가 완료되면 pacakge.json에 아래와 같은 형식으로 모듈이 추가됩니다.

{
  ...
  "dependencies": {
    "@termterm/hooks": "workspace:^",
    "@termterm/libs": "workspace:^",
    "@termterm/ui": "workspace:^",
    ..
  },
  ...
}

node_modules에도 공통모듈이 올바르게 설치되었다는 것을 확인할 수 있습니다.

설치가 완료된 모듈은 이제 자유롭게 import하여 사용할 수 있습니다.

만약 자동으로 import되지 않는 문제가 발생한다면, 프로젝트의 tsconfig.js를 아래와 같이 수정하여 루트의 tsconfig를 상속받도록 수정합니다.

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "extends": "./../../tsconfig.base.json", //추가
  "references": [{ "path": "./tsconfig.node.json" }]
}

루트의 tsconfig.base.json을 설정할 때 봤던 preserveSymlinks를 상속받아 해당 문제를 해결합니다.

(번외) 공통 스타일 토큰 사용하기

scss의 강점이라고 하면, 빼놓을 수 없는 것이 바로 mixin과 변수입니다.

모든 프로젝트에서 하나의 스타일 토큰을 import하여 사용하기 위해 common 하위에 shared 디렉토리를 구성했습니다.

별도의 설정은 필요하지 않습니다.

common/shared/var.scss

...

$temp1: aqua;
$temp2: crimson;

이후 각 프로젝트의 scss 최상단에서 해당 토큰을 import합니다.

vite의 경우 config를 이용해서 해당 과정을 자동화할 수 있습니다. 이 과정은 다음 글에서 보여드리겠습니다.

@import "../../../common/shared/var.scss";

.temp-1 {
  background-color: $temp1;
  color: $temp2;
}

이렇게 하나의 IP를 공유하는 서비스 내부에서, 다양한 가설을 세우고 도입하며 사용자의 반응을 검증할 수 있는 환경 세팅이 마무리 되었습니다.

모노레포를 자주 사용했음에도, RN과 같은 툴이 끼면서 꽤 오랜 시간 고민하게 되었습니다.

최근 PS만하면서 개발과 조금 멀어졌다는 느낌이 있었는데, 확실히 성장이 멈췄다고 느낄 때에는 도전만큼 좋은게 없는 것 같습니다.

당분간 리팩토링 과정에서 관련 아티클이 자주 업로드될 예정입니다.

텀텀(termterm) 소개 페이지

텀텀(termterm) 앱스토어 다운로드

텀텀(termterm) 구글 플레이스토어 베타 테스터 신청

텀텀(termterm) 런칭기

백준 1027 고층 건물 Python

중규리 — Mon, 12 Feb 2024 17:54:00 +0900

문제 정보

1027번: 고층 건물

세준시에는 고층 빌딩이 많다. 세준시의 서민 김지민은 가장 많은 고층 빌딩이 보이는 고층 빌딩을 찾으려고 한다. 빌딩은 총 N개가 있는데, 빌딩은 선분으로 나타낸다. i번째 빌딩 (1부터 시작)

www.acmicpc.net

알고리즘

수학

⏱️ 풀이 시간

15.12m

풀이

단순한 스택 문제라고 생각했는데, 기울기를 비교해야하는 수학 문제였다.

오히려 스택보다 조건 자체는 쉽다.

오른쪽으로 이동하면서 이전까지 나왔던 최대 기울기보다 큰 기울기가 나와야만 1개를 추가해준다.

A와 B 빌딩 서로 볼 수 있기 때문에 두 요소 모두 1을 추가해야한다.

이런식으로 모든 요소를 탐색하면 되는 문제였다.

‍ 나의 답

# pypy3

import sys
input = sys.stdin.readline

n = int(input().rstrip())
nums = list(map(int, input().rstrip().split()))
res = [0] * n

for i in range(n - 1):
    temp = -sys.maxsize
    for j in range(i + 1, n):
        if temp < (nums[j] - nums[i]) / (j - i):
            res[i] += 1
            res[j] += 1
            temp = (nums[j] - nums[i]) / (j - i)

print(max(res))

백준 1342 행운의 문자열 Python

중규리 — Mon, 12 Feb 2024 17:15:43 +0900

문제 정보

1342번: 행운의 문자열

민식이와 준영이는 자기 방에서 문자열을 공부하고 있다. 민식이가 말하길 인접해 있는 모든 문자가 같지 않은 문자열을 행운의 문자열이라고 한다고 한다. 준영이는 문자열 S를 분석하기 시작

www.acmicpc.net

알고리즘

백트래킹

⏱️ 풀이 시간

14.41m

풀이

처음에 순열로 풀어야하는 문제라고 생각해서... 도대체 어떻게 풀어야하지?! 고민했는데

다시 천천히 생각해보니 그냥 Counter 써서 뒤에 뭐올지 백트래킹해도 될 것 같다고 느꼈다.

이유는 문자열 길이가 10까지밖에 안돼서...

이미 예제에 나와있는 경우가 최악의 경우였다.

‍ 나의 답

# pypy3

import sys
from collections import Counter
input = sys.stdin.readline

word = list(input().rstrip())
length = len(word)
letters = Counter(word)
res = set()

def bt(prev, cur):
    if len(cur) == length:
        res.add(cur)
        return
    for letter in letters:
        if (prev == letter) or (letters[letter] == 0): continue
        letters[letter] -= 1
        bt(letter, cur + letter)
        letters[letter] += 1

bt('-', '')

print(len(res))

백준 17141 연구소 2 Python

중규리 — Mon, 12 Feb 2024 16:53:40 +0900

문제 정보

17141번: 연구소 2

인체에 치명적인 바이러스를 연구하던 연구소에 승원이가 침입했고, 바이러스를 유출하려고 한다. 승원이는 연구소의 특정 위치에 바이러스 M개를 놓을 것이고, 승원이의 신호와 동시에 바이러

www.acmicpc.net

알고리즘

BFS

⏱️ 풀이 시간

30.20m

풀이

그냥 BFS로 절대 통과 못할 줄 알았는데... 시간이 간당간당하게 맞은 것 같다.

구현이랑 섞인 BFS의 대표적인 문제 같은 느낌이었다.

나의 경우, 바이러스를 올릴 수 있는 노드와, 벽의 노드를 입력 때 미리 저장해두고

바이러스를 올릴 수 있는 노드에서 m개 만큼의 조합으로 BFS를 돌린 후,

벽의 노드를 제외한 노드가 모두 방문처리 되었는지 확인했다.

코드가 꽤 복잡하게 짜여진 것 같..다..

하지만 BFS는..원래그..래ㄹ..걸..?

‍ 나의 답

# pypy3

import sys
from itertools import combinations
from collections import deque
input = sys.stdin.readline
INF = sys.maxsize

n, m = list(map(int, input().rstrip().split()))
graph = []
nodes = []
walls = []
dx = [0, 0, 1, -1]
dy = [1, -1, 0, 0]
res = INF

for i in range(n):
    row = list(map(int, input().rstrip().split()))
    for j in range(n):
        if row[j] == 2:
            nodes.append((i, j))
        elif row[j] == 1:
            walls.append((i, j))
    graph.append(row)

def bfs(frame):
    global res
    q = deque([])
    temp = 0
    for node in frame:
        q.append(node)
        times[node[0]][node[1]] = 0
    while q:
        px, py = q.popleft()
        for i in range(4):
            nx, ny = px + dx[i], py + dy[i]
            if (0 <= nx < n) and (0 <= ny < n) and (graph[nx][ny] != 1) and (times[px][py] + 1 < times[nx][ny]):
                times[nx][ny] = times[px][py] + 1
                temp = max(temp, times[nx][ny])
                q.append((nx, ny))
    flag = False
    for i in range(n):
        for j in range(n):
            if (i, j) in walls: continue
            if times[i][j] == INF:
                flag = True
                break
    if not flag:
        res = min(res, temp)

for frame in combinations(nodes, m):
    times = [[INF] * n for _ in range(n)]
    bfs(frame)

if res == INF:
    print(-1)
else:
    print(res)