Build a Full Stack Chat App using Socket.io & Expo Router #2 - Create App
- Expo Router를 사용하여 앱을 초기화하고 기본 템플릿 코드를 제거하여 깨끗한 상태에서 시작합니다. 🚀
- 반응형 디자인을 위해
react-native-size-matters
라이브러리 대신 직접 작성한 스케일링 함수를 사용합니다. 📐
- 앱의 테마, 색상, 간격, 반지름 등을 정의하는
theme.ts
파일을 생성하여 일관성을 유지합니다.🎨
- TypeScript를 사용하여 앱에서 사용할 모든 데이터 유형을 정의하는
types.ts
파일을 생성합니다. ⌨️
- 스플래시 화면을 만들고,
useEffect
훅을 사용하여 1.5초 후에 환영 페이지로 자동으로 이동합니다.⏱️
- iOS의 노치 영역 문제를 해결하기 위해 모든 화면을 감싸는
ScreenWrapper
컴포넌트를 생성하고, 배경 패턴을 추가합니다.📱
- 앱 전체에서 사용할 텍스트 스타일을 정의하는
Typo
컴포넌트를 생성하여 일관된 타이포그래피를 유지합니다. 🆎