Expo와 Next.js를 같이 둘 때 lint와 asset 타입을 맞추기

초기에는 웹 앱과 Expo 앱이 같은 저장소 안에 있었다. 이 구조는 빠르게 만들기에는 좋았지만, lint와 TypeScript 규칙이 서로 다른 세계를 동시에 보게 되는 문제가 있었다.

Next.js는 웹 접근성과 이미지 최적화 규칙을 강하게 보고, Expo 쪽은 폰트와 이미지 asset을 번들러가 다르게 처리한다. 그래서 같은 TypeScript 프로젝트 안에서 작은 타입 오류와 lint 경고가 쌓였다.

웹의 업로드 테스트 페이지에서는 일반 img 대신 Next Image를 쓰도록 바꾸고, 외부 업로드 URL 미리보기를 위해 필요한 옵션을 붙였다.

Expo 앱 쪽에는 ttf와 png asset 타입 선언을 추가했다. 폰트와 이미지 import가 런타임에서는 동작하더라도 타입스크립트가 모르면 빌드와 lint에서 계속 걸리기 때문이다.

또 Expo 쪽 eslint 설정을 mjs로 정리하고, 웹 루트의 lint가 모바일 앱 파일을 볼 때 불필요하게 막히지 않도록 예외 규칙을 조정했다.

웹과 모바일을 한 저장소에 둘 때는 코드 공유보다 설정 공유가 더 먼저 문제를 만든다. 각 앱이 어떤 빌드 도구와 타입 규칙을 쓰는지 명확히 나눠야 한다.

이후 apps/web과 apps/mobile로 구조를 재정리한 것도 이 경험과 연결된다. 기능이 늘어날수록 앱 경계와 설정 경계를 분명히 두는 편이 장기적으로 덜 헷갈린다.