[250218 Flutter 창업 6기DAY+6, 7] Flutter 학습 및 오류 해결 기록

 

 

 

오늘의 학습 키워드

---

📌  오늘 학습 하며, 느낀점 

✅ Flutter 개발 환경 설정 (SDK, Gradle, JDK 등)  

✅ VS Code에서 Flutter 프로젝트 구성 및 디버깅 

✅ PHP 디버깅 환경 설정 (Xdebug + VS Code)  

✅ Flutter 및 PHP 버전 호환성 문제 해결  

✅ Flutter StatelessWidget vs StatefulWidget 차이점 및 데이터 관리  

📌 내일 학습할 것

 

---

📌  오늘 학습 하며, 느낀점 

 

어제는 TIL을 못썼다. 
이유는.. 실업급여 때문에..
실업급여도 못 받고
집에서 공부만 한다는 것은
너무나 큰 사치..

 
인강도 듣고,
OT도 듣고,
정말 바쁜하루였다.
 

 
조금만 더,,
하고 TIL 써야지..써야지..
하다가 자정 넘기고..

 
오늘도... 역시 너무나 늦다..
관리해주시는 것은 좋지만..
급하다 급해..
역시.. 쭉정이? 겉절이?
못 따라간다고 놀려도 할 말이 없다.
 

 

그만해주세요.....

그만...

그만...

그래도 챙겨주는 것은 좋다..

 
 
오늘은 Flutter에서
위젯 간 상태를 관리하고
데이터 전달하는 방법을 배웠다.

처음에는 StatelessWidget을 사용해서
Header에 score와 tryCount 값을 넣었지만,
값이 바뀌어도
화면이 업데이트되지 않는 문제가 발생했다.

그래서 StatefulWidget에서
데이터를 관리하고,
setState()를 사용하여
UI를 갱신하는 방식을 적용했다.

또한, VS Code에서
JDK 설정 문제 및
Gradle 오류를 해결하면서
Flutter 프로젝트를 원활하게
실행할 수 있도록 수정했다.
 

---

✅ Flutter 개발 환경 설정 (SDK, Gradle, JDK 등)

 

📌 문제&에러에 대한 정의

• flutter run 실행 시 Gradle 빌드 오류 발생
• JAVA_HOME 환경 변수가 올바르게 설정되지 않아 JDK를 찾을 수 없다는 오류 발생
• flutter doctor 실행 결과에서 Android SDK와 Gradle이 제대로 감지되지 않음

 

🔍 내가 한 시도

• JDK 21을 설치했으나 Flutter에서 지원하지 않는 버전이라 오류 발생
• 환경 변수(JAVA_HOME)을 수동으로 설정
• flutter doctor를 실행하며 오류 원인을 분석

 

✅ 해결 방법

• JDK 17로 다운그레이드하여 Gradle과 호환되도록 수정
• JAVA_HOME을 올바르게 설정 후 환경 변수를 적용
• flutter config --android-sdk 명령어로 Android SDK 경로를 수동으로 지정

 

🌟 새롭게 알게 된 점

• Flutter는 최신 JDK(21)가 아닌 JDK 17을 권장하므로 지원되는 버전으로 설정하는 것이 중요하다.
• flutter doctor를 실행하여 설치된 SDK, Gradle, JDK가 정상적으로 감지되는지 확인하는 습관이 필요하다.

 

🔄 이 문제&에러를 다시 만나게 되었다면?

1. JDK 버전을 먼저 확인하고 Flutter 공식 지원 버전을 설치
2. flutter doctor를 실행하여 환경 변수(JAVA_HOME, ANDROID_HOME)가 정상적으로 설정되었는지 확인
3. Flutter 프로젝트를 클린(flutter clean)하고 Gradle 캐시 삭제 후 재빌드

 

---

✅ VS Code에서 Flutter 프로젝트 구성 및 디버깅

 

 

📌 문제&에러에 대한 정의

• Flutter 프로젝트에서 Android 에뮬레이터가 감지되지 않음
• flutter run을 실행하면 Gradle sync 실패 및 빌드 오류 발생
• settings.gradle에서 Flutter Gradle 플러그인 로드 실패

 

🔍 내가 한 시도

• VS Code에서 Flutter와 Dart 확장 플러그인을 다시 설치
• flutter clean 후 flutter pub get 실행하여 의존성 재설치
• android/app/build.gradle과 android/settings.gradle을 점검

 

✅ 해결 방법

• settings.gradle에서 pluginManagement 블록을 수정하여 Flutter Gradle 플러그인을 올바르게 로드
• android/app/build.gradle에서 Gradle 버전과 classpath를 최신 버전으로 업데이트
• AVD(Android Virtual Device)를 수동으로 생성하여 에뮬레이터가 감지되도록 설정

 

🌟 새롭게 알게 된 점

• VS Code의 Flutter/Dart 확장 플러그인을 최신 버전으로 유지하는 것이 중요하다.
• Flutter 프로젝트의 settings.gradle과 build.gradle이 올바르게 설정되지 않으면 Gradle 빌드에 실패할 수 있다.

 

🔄 이 문제&에러를 다시 만나게 되었다면?

1. flutter doctor를 실행하여 VS Code와 Android SDK가 정상적으로 감지되는지 확인
2. flutter clean 후 flutter pub get으로 프로젝트를 다시 초기화
3. Gradle 버전을 확인하고 Flutter 최신 버전에 맞는 버전으로 업데이트

 

---

✅ PHP 디버깅 환경 설정 (Xdebug + VS Code)

 

 

📌 문제&에러에 대한 정의

• VS Code에서 PHP Debug 플러그인을 설치했지만, 중단점(Breakpoints)이 작동하지 않음
• php -v 실행 시 PHP 버전이 다르게 출력되거나, PHP가 인식되지 않음
• launch.json 설정 후에도 Xdebug가 VS Code와 연결되지 않음

 

🔍 내가 한 시도

• php.ini에서 zend_extension=xdebug를 추가하고 설정 값 수정
• 환경 변수에서 PHP 경로를 확인하고 php -v로 정상적으로 인식되는지 확인
• launch.json에서 Xdebug 포트를 9003으로 수정

 

✅ 해결 방법

• PHP 버전을 8.4.4 → 8.1로 다운그레이드하여 VS Code의 PHP Debug 플러그인과 호환
• php.ini에서 Xdebug 확장 경로를 명시하고, xdebug.remote_enable=1 설정
• VS Code에서 디버깅 시 PHP 실행 경로를 명확하게 설정

 

🌟 새롭게 알게 된 점

• PHP의 Xdebug는 VS Code의 PHP Debug 플러그인과 버전이 맞지 않으면 정상적으로 동작하지 않는다.
• php.ini를 변경한 후에는 Apache 또는 PHP 서버를 재시작해야 설정이 적용된다.

 

🔄 이 문제&에러를 다시 만나게 되었다면?

1. php -v로 PHP 버전을 확인하고, VS Code와 호환되는 버전인지 체크
2. php.ini에서 Xdebug 설정이 올바르게 적용되었는지 점검
3. VS Code의 launch.json 설정을 확인하고, Xdebug 포트를 올바르게 설정

---

✅ Flutter 및 PHP 버전 호환성 문제 해결

 

 

📌 문제&에러에 대한 정의

• Flutter의 Gradle 빌드 과정에서 지원되지 않는 JDK 버전 오류 발생
• PHP 디버깅을 위해 Xdebug 설정을 했으나 VS Code에서 디버깅이 작동하지 않음

 

🔍 내가 한 시도

• Flutter와 Gradle의 호환성 문제를 해결하기 위해 JDK 버전을 다운그레이드
• PHP 버전을 최신으로 유지했으나, Xdebug 플러그인과 호환되지 않음

 

✅ 해결 방법

• JDK 21 → 17로 변경하여 Flutter Gradle 빌드 성공
• PHP 8.4.4 → 8.1로 변경하여 Xdebug 정상 작동 확인

 

 

🌟 새롭게 알게 된 점

• Flutter와 PHP는 최신 버전이 항상 호환되는 것이 아니므로, 공식 문서를 참고하여 버전을 맞추는 것이 중요하다.
• PHP의 경우 Xdebug와 VS Code 확장 플러그인의 호환성이 맞아야 디버깅이 가능하다.

 

🔄 이 문제&에러를 다시 만나게 되었다면?

1. Gradle 및 Flutter 버전이 JDK와 호환되는지 공식 문서를 확인
2. php -v 및 php -m | grep xdebug 명령어로 Xdebug 활성화 상태 확인

---

✅ Flutter StatelessWidget vs StatefulWidget 차이점 및 데이터 관리

 

📌 문제&에러에 대한 정의

• Header 위젯에서 score와 tryCount가 업데이트되지 않음
• 버튼을 클릭해도 값이 바뀌지 않고 초기 값(0)에서 변하지 않음

 

🔍 내가 한 시도

• Header 내부에서 직접 상태를 변경하려고 시도 (score += 10)
• setState() 없이 값을 변경하여 UI가 업데이트되지 않음

 

✅ 해결 방법

• 전반적인 코드 재검토

 

🌟 새롭게 알게 된 점

• 추후 블로그 포스팅 예정 

 

---

내일 학습할 것

 

아.. 내가 생각보다 못 따라가서
TIL에 조금 덜 시간을 쏟아야겠다.
형식을 바꾸고, 
공부에 집중할 수 있도록 해야지.

✅ 2주차 시작
✅ 1주차 정리 및 포스팅
✅ TIL 형식 고민

---

📌 오늘 정리하면서 느낀 점

 

오늘은 Flutter 개발 환경 설정 및 PHP 디버깅 환경 구축을 진행하면서
버전 호환성 문제를 해결하는 과정이 매우 중요하다는 것을 배웠다.
특히, Flutter UI가 상태 변경을 감지하고 업데이트되는 원리를 명확하게 이해해야
앞으로 더 복잡한 기능을 구현할 때 어려움을 줄일 수 있을 것 같다.
내일은 상태 관리를 더 깊이 공부하고 Provider를 활용한 구조화된 상태 관리를 연습해야겠다! 🚀