Build a Full Stack Chat App using Socket.io & Expo Router #7 - User Profile
- 이 비디오에서는 Socket.io 및 Expo Router를 사용하여 풀 스택 채팅 앱을 빌드하는 과정 중 사용자 프로필 섹션을 구현합니다. 📱
- 배경 패턴 추가 및 불투명도 조정을 통해 화면 디자인을 개선합니다. 🎨
- 환영 메시지와 사용자 이름을 표시하는 헤더를 추가하고, 설정 아이콘을 통해 프로필 모델을 열 수 있도록 합니다. ⚙️
- Expo Router의 useRouter 훅을 사용하여 프로필 모델 화면으로의 네비게이션을 구현합니다. 🚀
- presentation 옵션을 'model'로 설정하여 프로필 모델을 모달 형태로 표시합니다. 🖼️
- 재사용 가능한 헤더 컴포넌트를 생성하여 뒤로 가기 버튼, 제목, 좌우 아이콘을 표시합니다. ◀️
- Android에서만 뒤로 가기 버튼이 보이도록 조건부 렌더링을 적용합니다. 🤖
- 사용자 프로필 정보를 업데이트할 수 있는 폼을 추가하고, 아바타 컴포넌트를 사용하여 사용자 아바타를 표시합니다. 👤
- expo-image 라이브러리를 사용하여 이미지 캐싱 및 부드러운 전환 효과를 구현합니다. 📦
- 이미지 서비스 함수를 통해 파일 타입에 따라 아바타 경로를 처리하고, 기본 아바타 이미지를 설정합니다. 🖼️
- 편집 아이콘을 아바타 하단에 추가하여 프로필 편집 기능을 제공합니다.✏️
- 이메일 주소를 표시하는 입력 필드를 추가하고, 편집 불가능하게 설정하여 사용자에게 정보를 제공합니다. 📧