모든 것은 작은 아이디어에서부터
안녕하세요! 사이드 프로젝트로 커뮤니티 기반의 소셜 앱을 만들어가는 과정을 기록하고 공유하기 위해 첫 개발 일지를 작성합니다.
"특정 관심사를 가진 사람들이 모여 소통하고 정보를 얻을 수 있는 깔끔한 앱이 있으면 어떨까?" 라는 생각에서 출발한 이 프로젝트는,
이제 막 아이디어 단계를 지나 실제 코드로 구체화되는 여정을 시작했습니다.
이 시리즈를 통해 제가 겪는 기술적인 도전과 해결 과정을 상세하게 공유하고자 합니다.
개발을 하고 배포를 하여 운영까지 바라보는 프로젝트이기 때문에 자세한 앱의 핵심 아이디어는 보호하면서 개발자로서의 성장 과정과 기술 중심으로 깊이있게 다루도록 하겠습니다.
기술 스택 선정: 왜 React Native와 Expo Router였을까?
앱 개발을 시작하기 전, 어떤 기술을 사용할지 결정하는 것은 매우 중요합니다. 저의 최우선 목표는 '빠른 프로토타이핑'과 '효율적인 유지보수'였고, 다음과 같은 이유로 기술 스택을 선택했습니다.
- React Native (with Expo)
- 크로스플랫폼: JavaScript와 React 기반으로 iOS와 Android 앱을 동시에 만들 수 있다는 점이 가장 매력적이었습니다. 'Write Once, Run Anywhere'는 1인 개발자에게 정말 큰 축복입니다.
- Expo의 편리함: 네이티브 모듈 설정이나 빌드 과정의 복잡함을 Expo가 대부분 해결해 줍니다. 특히 QR 코드로 실제 기기에서 바로 테스트할 수 있는 'Expo Go'는 개발 경험의 질을 수직으로 상승시켜 주었습니다.
- Expo Router (File-based Routing)
- 직관적인 구조: 이전에는
React Navigation라이브러리를 사용하며 복잡한 중첩 구조와 씨름해야 했습니다. 하지만 Expo Router는 Next.js처럼 폴더와 파일 구조가 그대로 앱의 내비게이션 경로가 됩니다.app/(tabs)/community.tsx파일이 곧 '커뮤니티' 탭이 되는 식이죠. 덕분에 프로젝트 구조가 훨씬 깔끔하고 예측 가능해졌습니다.
- 직관적인 구조: 이전에는
개발 환경 설정: 오류와의 첫 만남 (Troubleshooting Diary)
"시작이 반이다"라는 말처럼, 개발 환경 설정은 중요하지만 수많은 오류를 만나는 관문이기도 합니다.
저 또한 몇 가지 대표적인 오류들을 겪었고, 해결 과정을 공유합니다.
1. EACCES: permission denied - 권한 오류
npm install -g expo-cli 명령어를 실행했을 때 마주한 첫 번째 오류입니다.
- 원인: macOS나 Linux에서 시스템 디렉토리에 글로벌 패키지를 설치할 때 일반 사용자 권한으로는 접근이 거부됩니다.
- 해결: 명령어 앞에
sudo를 붙여 관리자 권한으로 실행하여 간단하게 해결했습니다.
# 관리자 권한으로 글로벌 패키지 설치
sudo npm install -g expo-cli2. EEXIST & EACCES - npm 캐시 권한 꼬임
sudo 사용 후, 이번엔 npx create-expo-app 명령어에서 다른 권한 오류가 발생했습니다.
- 원인:
sudo로 실행된 명령이 npm의 캐시 폴더(~/.npm)의 일부 파일 소유자를 'root(관리자)'로 변경해버린 것이 문제였습니다. 이후 일반 사용자 권한으로 캐시 폴더에 접근하려니 충돌이 발생한 것이죠. - 해결: 아래 명령어로
.npm폴더의 소유자를 다시 현재 사용자로 되돌려주어 해결했습니다.
# .npm 폴더의 소유자를 현재 사용자로 변경
sudo chown -R $(whoami) ~/.npm첫 결과물: Figma 디자인을 코드로 옮기기
환경 설정이라는 산을 넘고, 드디어 UI 구현을 시작했습니다. 사전에 Figma로 디자인한 화면을 React Native의 기본 컴포넌트(View, Text, ScrollView, TouchableOpacity 등)와 StyleSheet API를 사용해 하나씩 코드로 옮겼습니다.
컴포넌트 단위로 UI를 구현하고 StyleSheet로 스타일을 적용하는 과정
- 컴포넌트화: 배너, 카테고리, 인기 목록 등 각 섹션을 별도의 컴포넌트처럼 나누어
index.tsx파일에 배치했습니다. - 내비게이션 적용:
useRouter훅을 사용하여 각 '더보기' 버튼이나 아이콘을 눌렀을 때, Expo Router가 만들어준 경로 (/community,/counseling등)로 이동하도록 기능을 연결했습니다.
아직은 Mock 데이터를 사용하고 있지만, 드디어 화면이 살아 움직이기 시작했습니다.
다음 목표: Firebase 연동과 상태 관리
이제 UI의 뼈대는 잡혔으니, 다음 목표는 앱에 '데이터'를 불어넣는 것입니다.
- Firebase Firestore 연동: 현재 코드에 하드코딩된 Mock 데이터를 실제 데이터베이스인 Firestore로 옮겨서, 사용자가 작성하는 글이 실시간으로 저장되고 표시되도록 구현할 예정입니다.
- 상태 관리: 사용자의 로그인 상태나 앱의 전반적인 데이터를 효율적으로 관리하기 위해
Zustand나React Context같은 상태 관리 라이브러리 도입을 고려하고 있습니다.
이제부터가 진짜 시작이라는 생각이 듭니다. 다음 개발 일지에서는 Firebase 연동 과정과 그 과정에서 마주친 문제들을 공유해보겠습니다.
#1인개발 #사이드프로젝트 #앱개발 #React_Native #Expo #Expo_Router #개발일지 #오류해결
