개요

최소 구현 모델인 MVP 로
우리는 OpenSea 를 오마주한 마켓플레이스를 구현하고자 한다.

기획했던 팀 프로젝트에 사용되는 스택으로
React-Native 가 채택되어 사용해야하는 상황이었다.

하지만,
현재 구성된 팀원으로는
프론트1 백엔드1 컨트랙트1 기획 & 디자인1 이었고,

결과물로 제출할만한 시간이 충분하지 않은 시간이었다.

회의를 통해
이번 프로젝트는 하이브리드 앱으로 구현하기로 결정했고,
앱과 웹을 동시에 띄우는 작업을 해야만 했다.

마침 사용하려던 Expo Docs 를 살펴보니,
웹 용 Next.js 를 지원하는 템플릿이 존재하여 이를 테스트 해 보려고 한다.

세팅 및 환경설정

공식문서를 참조하여 Expo 앱에 Next.js 를 설치하려한다.
https://docs.expo.dev/guides/using-nextjs/

npx create-expo-app -e with-nextjs

해당 명령어를 통해 설치된 프로젝트의 파일 구조는 이러하다.

Next.js 로 init 을 한 경우와 다소 차이가 있다.

에러가 발생한 경우

npx create-expo-app -e with-nextjs

위 명령어를 통해 프로젝트를 생성하려고 입력하니 다음과 같은 에러가 발생했다.

입력한 프로젝트 이름을 가진 디렉토리가 생성되어
내부 파일구조를 살펴보니 ./node_module 이 없이 설치되어있었다.

이를 해결하기 위해
에러 메세지에 나와있듯 npm install 부분에서 발생하였기 때문에,
yarn install 명령을 통해 추가 패키지들을 설치 해 주었다.

Bare Workflow

설치된 프로젝트의 파일 구조를 살펴보면
Expo 앱의 형태인것을 확인할 수 있다.

Expo 는 실제 개발에 사용될 수 있는 환경이 아니다.
즉, 설치가 가능한 독립형 앱(Real app)이 아니라는 뜻 이다.

이를 보완하기 위해 Bare Workflow 를 사용할 것이다.

Bare Workflow 는 Expo 이지만,
React-Native 와 조금 더 가까운 템플릿 이라고 할 수 있다.

Expo 에서 React-Native 용 라이브러리를 사용할 수 없는 문제 등을 해결하기 위해 베어워크플로우를 사용

설치된 Expo 프로젝트를 Bare Workflow 모듈로 변환하기 위해

expo eject

명령어를 입력해 실행한다.

해당 명령어를 통해 Expo Cli 가 프로젝트 설정을 Bare Workflow 로 업데이트 하고,
필요한 파일과 폴더 등을 생성해 준다.

expo install

해당 명령어를 통해 Expo Bare Workflow 프로젝트를 초기화 한다.

Expo Cli 가 Package.json 파일을 확인하고,
Bare Workflow 프로젝트에 필요한 종속성을 자동으로 설치 -> Android 폴더 생성

생성된 파일 구조 확인

모든 세팅을 마치고,
프로젝트를 실행하여 w 옵션과 a 옵션을 통해
웹 과 앱을 동시에 띄워보고,
그 안의 내용을 수정하여 정상적으로 반영됨을 확인하였다.



Reference

https://velog.io/@soominchoi/Expo-with-NextJS
https://docs.expo.dev/guides/using-nextjs/