🎲 코드팩토리 강의로 Flutter 프로젝트 만들기! (손코딩 후기)

📚 인프런 코드팩토리 강의 기반
📱 강의보다 프로젝트 직접 구현으로 공부!
3일 만에 완성! 생각보다 배운게 많았어요 😊

🎯 어떤 앱을 만들었나요?

코드팩토리 강사님의 랜덤 숫자 생성기 예제를 보고
강의 영상 안 보고 혼자 힘으로 구현해봤어요!

✨ 랜덤 숫자 3개 뽑기
✨ 최대값 설정 가능 (1,000~100,000)
✨ 예쁜 다크 테마
✨ 숫자가 이미지로 나와요!

📚 어떻게 공부했나요?

🎯 학습 방식

1. 인프런 코드팩토리 강의 커리큘럼 확인
2. 강의 영상 보지 않고 예제 설명만 보기
3. 혼자 힘으로 손코딩으로 구현
4. 막히는 부분만 강의 참고
5. 에러 해결하며 개념 체화

💡 왜 이 방식을 선택했나요?

• 🔥 실력 향상: 수동적 시청 vs 능동적 구현
• 🧠 문제 해결: 에러를 직접 마주하고 해결
• 💪 코딩 근육: 손코딩으로 기억에 남아요!
• ✨ 창의성: 내 방식으로 구현해볼 수 있어요

📸 완성된 모습

메인 화면

• 큼직한 숫자 3개
• 하단에 "생성하기!" 버튼
• 우상단 설정 버튼

설정 화면

• 슬라이더로 최대값 조정
• 실시간으로 숫자 미리보기
• 저장 버튼

💻 핵심 코드만 쏙!

1️⃣ 랜덤 숫자 만들기

void generateRandomNumbers() {
  var random = Random();
  Set<int> uniqueNumbers = {};
  
  while (uniqueNumbers.length < 3) {
    uniqueNumbers.add(random.nextInt(maxNumber));
  }
  
  setState(() {
    numbers = uniqueNumbers.toList();
  });
}

🔥 핵심: Set으로 중복 제거 + setState로 화면 새로고침!

2️⃣ 화면 이동하기

// 설정 화면으로 이동
Navigator.of(context).push(
  MaterialPageRoute(
    builder: (context) => SettingScreen(maxNumber: maxNumber),
  ),
);

// 뒤로가기 + 값 전달
Navigator.of(context).pop(maxNumbers.toInt());

💡 팁: push로 가고, pop으로 돌아와요!

3️⃣ 숫자를 이미지로 바꾸기

Row(
  children: number
      .toString()
      .split('')
      .map((e) => Image.asset('asset/img/$e.png'))
      .toList(),
);

😎 신기해요: 각 숫자마다 이미지 파일이 있어서 예쁘게 나와요!

🤔 혼자 만들면서 힘들었던 점들

❌ 처음에 이런 실수들 했어요

1. setState() 빼먹기 → 화면이 안 바뀜 😱
2. context 오류 → Navigator 쓸 때 에러 폭탄
3. late 변수 초기화 → 앱이 꺼져버림
4. Widget 구조 → 어디서 나눠야 할지 모르겠음

✅ 해결하면서 배운 것들

 

@override
void initState() {
  super.initState();
  maxNumbers = widget.maxNumber.toDouble(); // 여기서 초기화!
}

🔥 깨달음: 강의만 듣는 것보다 직접 에러를 만나고 해결하니까 더 오래 기억남!

📊 프로젝트로 배운 개념들

개념내가 이해한 방식언제 써요?

StatefulWidget	화면이 바뀌는 애들	버튼 눌러서 숫자 바뀔 때
StatelessWidget	화면이 안 바뀌는 애들	고정된 텍스트, 이미지
setState()	"야! 화면 바뀌었어!"	변수 값 바뀔 때마다
Navigator	페이지 이동하는 거	다른 화면으로 갈 때

💡 코드팩토리 강의의 장점: 이론만이 아니라 실무 패턴을 알려줘요!

🎨 디자인 포인트

다크 테마 색상표 🎨

backgroundColor: Color(0xFF121212)  // 진한 회색
primaryColor: Color(0xFFBB86FC)     // 보라색  
accentColor: Color(0xFFFF4081)      // 핑크색

왜 다크 테마?
👁️ 눈이 덜 아파요
🔋 배터리도 오래 써요
😎 요즘 트렌드예요!

🚀 다음에 만들어볼 것들

• 🎰 로또 번호 생성기
• 🎲 주사위 굴리기
• 🃏 카드 뽑기 게임
• 📊 통계 기능 추가

💬 솔직한 후기

강의 vs 프로젝트 구현 어떤 차이가 있었나요? 😊

📺 강의만 봤다면

• "아 그렇구나~" 하고 넘어감
• 코드 따라치기만 함
• 에러 나면 당황

🛠️ 프로젝트로 구현하니까

• 왜 이렇게 써야 하는지 이해됨
• 내 손으로 직접 만드는 뿌듯함
• 에러 해결 능력 늘어남
• 코드팩토리 강의 가치를 더 깊이 알게 됨

가장 어려웠던 점: Navigator 부분 (context 때문에 고생)
가장 재밌었던 점: 숫자가 이미지로 나오는 마법 ✨
가장 뿌듯했던 점: 혼자 힘으로 완성한 것!

🎯 코드팩토리 강의 추천 이유

• ✅ 실무 중심 커리큘럼
• ✅ 단계별 난이도 조절 완벽
• ✅ 프로젝트 기반으로 학습하기 좋음
• ✅ 이론과 실습 균형 맞춤

---

🙋‍♀️ 같이 공부해요!

Flutter + 코드팩토리 강의 듣고 계신 분들! 댓글로 소통해요 💬

• 🤝 프로젝트 구현 도전해보세요!
• 💪 막힌 부분 있으면 언제든 질문!
• 🎉 완성하신 분들 후기 공유해주세요!
• 📚 다음 프로젝트 뭘 해볼까요?

❤️ 도움이 되셨다면 좋아요와 이웃추가 부탁드려요!

📖 코드팩토리 강의: 인프런에서 찾아보세요!