[SecureGen] 코딩 시작 - 프로젝트 초기화 및 화면 확인

Q : 이제 코딩을 시작하자.

---

 

좋아, 드디어 개발에 들어가는 거네! 🎉
우리가 앞에서 기획한 내용을 토대로, 첫 단계는 React Native 프로젝트 세팅부터 시작해보는 게 좋아. 아래는 개발 순서 제안이야:

---

🛠️ 1단계: 프로젝트 초기화

npx react-native init SecureGen
cd SecureGen
npx react-native run-android # 또는 run-ios

✅ 이 단계에서 앱이 기본 화면이라도 잘 실행되는지 확인해줘.

 

---

앱 인스톨 화면

명령어 실행 시 구동 화면

 

---

 

초기화 시 오류 발생

- 추가 해결을 위해, Gemini 로 변경하여 AI 활용

- Copilot으로는 해결 실패

 

2025.06.21 - [IT 정보/AI 활용 앱개발] - React-native 프로젝트 초기화 오류 : Gemini 활용한 해결

React-native 프로젝트 초기화 오류 : Gemini 활용한 해결

2025.06.21 - [IT 정보/AI 활용 앱개발] - 프로젝트 초기화 완료 (문제 발생 및 해결 방안 요약)

---

🧩 2단계: 기본 UI 구성

홈 화면 컴포넌트를 만들어서 아래 UI를 구성해보자:

• 슬라이더 → @react-native-community/slider
• 체크박스 / 토글 → react-native-paper 혹은 react-native-switch
• 버튼 / 출력 필드 → 기본 View, Text, TouchableOpacity
• 강도 평가 → 진행 바 형식 사용: react-native-progress

---

📦 3단계: 주요 패키지 설치

npm install @react-native-community/slider
npm install react-native-paper react-native-vector-icons
npm install react-native-progress

추가로 스타일링엔 styled-components를 써도 깔끔하게 관리할 수 있어.

---

이제 어느 단계부터 같이 해볼까? 예를 들면 홈 화면 UI 먼저 만들거나, 로직(비밀번호 생성 함수)부터 작성할 수도 있어.

Dalyoung의 선택은? 😎💻
원하면 내가 첫 화면 UI 코드를 샘플로 짜줄게! ✨