오늘은 Expo 앱 만들기를 공부하기 위해 두 번째 프로젝트를 생성하면서 알게 된 것에 대해 작성해 보겠습니다.불과 1주일 전만 해도 분명히 문제없이 사용했던 아래 명령어를 동일하게 입력해 프로젝트를 생성했는데 평소에는 볼 수 없던 전혀 다른 프로젝트가 생성되었습니다.
프로젝트 생성 명령어 : “npx create-expo-app 프로젝트이름”
너무 당황스러워 Expo 공식 홈페이지를 들어갔지만 여전히 초기 프로젝트 생성 명령어는 동일했습니다. 혹시나 싶어 다시 생성해 봤지만 여전히 예전에 보던 프로젝트가 아닌 다른 유형의 프로젝트가 생성되었습니다. 프로젝트가 생성되는 속도도 오래 걸렸고 내부 파일들도 전혀 다른 파일들이 생성되었습니다. 너무 당황스러웠지만 공식 홈페이지를 천천히 읽어보니 SDK 51버전이 새롭게 출시된 것이 원인이라는 것을 알게 되었습니다. 오늘은 이렇게 최근에 업데이트된 버전에 대해 간략히 알아보겠습니다.
Expo SDK 51이란? Expo SDK 51은 24년 5월 8일 React Native 0.74 버전을버전을 기반으로 새롭게 출시된 버전입니다.
Expo SDK 51 버전 업데이트로 인해 변경된 점 첫 번째
SDK 51에서 변경된 주요 사항으로 가장 중요한 것은 아무래도 새로운 아키텍처라고 생각됩니다. 그러나 저는 아직 Expo 앱 만들기를 배우는 단계기 때문에 홈페이지에서 설명하고 있는 주요 변경사항에 대해 이해하기 위해서는 보다 많은 공부가 필요할 것 같아 홈페이지 원문 그대로 기입하고 넘어가려고 합니다. 보다 자세한 사항은 아래 공식 홈페이지를 참고부탁드립니다.
홈페이지 주소 : https://expo.dev/changelog/2024/05-07-sdk-51
본문내용 :
SDK 51 and React Native 0.74 represent a huge step forward in rolling out the long-awaited New Architecture for React Native.
We have added support for "bridgeless", one of the pillars of the New Architecture, to nearly all Expo modules and the Expo Modules API.
We worked in close collaboration with the React Native team at Meta and developers in the React Native ecosystem to ensure there would be support for the New Architecture in many of the most commonly used packages on EAS Build.
Expo SDK 51 버전 업데이트로 인해 변경된 점 두 번째
프로 개발자들이 봤을 때는 어이없을 수 있겠지만 초보 개발자 입장에서 봤을 때 가장 큰 변화는 프로젝트를 생성할 때 기본으로 생성되는 프로젝트의 템플릿이 새로워진다는 것이었습니다. 기존에는 프로젝트를 생성하는 명령어인 “npx create-expo-app 앱이름”를 입력하면 기본적인 파일로 구성된 프로젝트만 생성되었습니다. 그리고 생성된 파일 중 App.js를 수정하여 프로젝트 개발을 시작할 수 있었습니다. 그러나 SDK 51 이후부터는이후부터는 새 프로젝트를 생성하면 대부분의 프로젝트에서 필요하다고 생각되는 공통 dependencies과 구성이 포함되어 프로젝트가 생성됩니다. 기존 프로젝트와 주된 차이로 아래 두 가지가 있습니다.
첫 번째 디폴트로 expo-router 라이브러리가 설치된 프로젝트가 생성되며 아래와 같은 파일 구성을 갖고 있습니다.
1) App 폴더: 앱의 소스 코드와 리소스 파일이 포함되어 있는 주요 디렉터리로 화면, 컴포넌트, 라우터, 스타일시트, 리소스 파일 등이 들어 있습니다. 초기 프로젝트에서는 index.tsx와 explore.tsx, _layour.tsx파일이 위치하는 곳입니다.
2) components: 밝은 테마와 어두운 테마에서 앱의 색 구성표를 사용하는 텍스트 요소를 만드는 ThemeText.tsx와 같은 React Natvie 구성 요소가 들어있는 폴더입니다.
3) constants: 앱 전체의 색상 값 목록이 들어있는 Colors.ts와 같이 앱 전역에서 사용되는 상수 값들이 정의되는 디렉터리입니다.
4) hooks: React 컴포넌트에서 사용할 커스텀 훅 함수들이 정의되는 디렉터리입니다.현재 테마를 기반으로 색상을 반환하는 훅 함수인 useThemeColor()와 같은 함수들이 위치합니다.
5) scripts: 빌드 스크립트나 배포 스크립트 등의 프로젝트 관련 스크립트 파일들이 위치하는 디렉터리로 초기 프로젝트에는 프로젝트를 리셋하는 스크립트 파일이 들어있습니다
두 번째 기존에는 단순히 메인 화면에 한 줄 입력되어 있던 기본 화면에서 파일 기반 라우팅 방식으로 두 개의 탭으로 구성된 화면이 구현되어 있습니다. 아래 사진은 제가 직접 수행해 본 앱 실행 화면입니다.
첫 번째 홈화면(index.tsx)은 실제 변경된 화면을 바로 확인할 수 있도록 index.tsx 파일을 수정하라는 설명과, 두 번째 태인 Explore에 대한 간단한 설명, 마지막으로 기본으로 작성된 코드를 리셋해 불필요한 코드를 삭제하고 가장 기본적인 구성만 남기는 방법이 적혀 있습니다.
두 번째 화면은 Explore로 디폴트 프로젝트에서 구현되어 있는 아래 기능들에 대해 소개되어 있습니다.
1) File-based-routing : 파일 기반 라우팅 방식으로 앱은 두 개의 스크린을 갖고 있고 하나는 index.tsx 나머지 하나는 explore.tsx 파일입니다. app/(tabs)/_layout.tsx 레이아웃 파일에서 탭 내비게이션이 구성되어 있습니다.
2) Android, iOS, and web support: Android, iOS 그리고 웹에서 모두 열 수 있게 만들어져 있습니다.
3) Images: 다양한 화면에 대한 이미지를 제공합니다.
4) Custom fonts: 커스텀 폰트를 사용하는 법을 제공합니다,
5) Light and dark modes: 밝은 테마와 어두운 테마를 템플릿에서 제공하고 있습니다.
6) Animations: 애니메이션 API를 사용하여 손 흔들기 애니메이션을 예시로 볼 수 있습니다.
Blank 프로젝트를 생성하는 방법
변경된 사항에 대해서는 공식 홈페이지에서 소개한 대로 기존의 명령어 그대로 실행을 하면 프로젝트를 생성하고 앱을 만드는 것에는 문제가 없었습니다. 그러나 저는 처음 배우고 있기 때문에 수많은 예제들이 기본 프로젝트에서 시작하고 있어 기본프로젝트를 만들어야 했습니다. SDK 51로 업데이트한 지 얼마 지나지 않아서 인지 기존과 같은 방식으로 프로젝트를 생성하는 방법이 나오지 않았습니다. 계속 공식 홈페이지를 찾아보다 보니 아래와 같이 기존과 동일한 빈 프로젝트를 생성할 수 있는 명령어가 나와 있었습니다.
빈프로젝트 생성 명령어: npx create-expo-app StickerSmash --template blank
Tip. 저만 헤맸을 수 있지만 새로운 프로젝트를 생성 후 불필요한 요소들을 삭제하고 처음부터 앱을 만들기 위해 아래 명령어를 입력하도록 가이드되어 있습니다. 그러나 npx를 통해 해당 명령어를 입력하면 파일이 없다는 오류가 계속 발생합니다. 당연할 수 있지만 npx가 아닌 npm으로 해당 명령어를 수행하면 reset-project 스크립트가 실행되며 실행 후 만약 app_example 파일을 생성할 수 없다는 오류가 나오면 VS code를 관리자 권한으로 실행 후 해당 명령어를 실행하면 정상적으로 수행되는 것을 볼 수 있습니다.
마무리
저는 처음 Expo를 배우고 있는 사람이다 보니 프로젝트를 처음 생성해 보고 많이 당황했지만 이미 많은 지식을 갖고 있는 개발자라면 expo-router로 구성된 프로젝트임을 단번에 알았을 것 같습니다. Expo에서도 초기 디폴트 프로젝트를 expo-router 방식으로 고정했고 새로운 아키텍처를 도입해야 하는 이유에 대해 홈페이지에서 지속적으로 설명하고 있는 것으로 보면 앞으로 앱 개발은 expo-router 방식을 통해 개발하는 방향으로 변화해 나가야 할 것이라는 생각이 듭니다. 아직은 초보 단계의 앱 만드는 법을 공부 중이지만 후에는 expo-router 방식 구현도 공부해 포스팅하겠습니다.