기획자가 바이브코딩 직접 해보기 [4. 바이브 코딩 해보기 (1) - 플러터로 작업환경(크롬창) 열기]

자. 제미니가 원하는 모든 환경을 구축했다.

이제 우리가 할 것은 ' 1단계: 프로젝트 설정 및 기본 UI 화면 만들기' 를 시작해보려고 한다.

 

 

먼저, 비주얼 스튜디오를 키고, 

뭘 할지 모르겠으니 제미니한테 물어본다.

다시 와써염

 

1. 프로젝트 생성

프로젝트 생성을 위해

① Terminal → New Terminal을 열어 새로운 터미널 창생성

② 아래 명령어에 

flutter create liar_game

을 입력하여 라이어 게임을 만들 파일 생성

그럼 이렇게 폴더가 생성되어있는 것을 확인할 수 있다.

 

2. 생성된 프로젝트 열기

① VS Code 화면 왼쪽 상단 메뉴에서 'file' 클릭

② (file 클릭된 상태) open folder → 만들었던 'liar_game' 폴더 선택 

③ 위에서 열었던 폴더 열기

④ 보안질문 물어보는데 'ㅇㅇ 나는 저작자를 신뢰합니다' 동의하기

 

3. 이렇게 하고 F5를 누르면 플러터가 실행되면서 예제 앱을 실행할 수 있다!

여기 flutter가 떠야 정상

 

근데 난 왜 안뜸?

 

그럼 바로 제미니 한테 질문 ㄱㄱ

아하! flutter를 아직 인식못하셨군요! 어제 설치 다했는데 왜 인식하질 못하니

 

이렇게 인식을 못했으면, 이제 왼쪽위 extension을 눌러 flutter를 직접, 별도로 설치해줘야 한다.

---

V/S Code의 extension을 이용하여  flutter 직접 설치하기

① 왼쪽 위 View 클릭

② Extensions 클릭

③ flutter 입력 후 엔터

④ 인스톨 (뭐 물음(Trust Publisher & Install)나오면 긍정 ㄱㄱ)

---

정상적이라면, 이제 Dart & Flutter가 뜬다.

 

돌다리도 두들겨 보고 건너기

이제 이 Dart & Flutter를 선택해주면

ㅋㅋ 안돼 돌아가

......... 이렇게 뜬다. 바로 제미니한테 질문 ㄱㄱ

 

이건 바로 쉽게 해결할 수 있는데, V/S코드 오른쪽 하단에 

- Windows라고 설정되어있는 상태

- Windows를 클릭하여 Chrome(web)을 선택

- 선택 후 F5키를 누르면

짜잔!

짠!!! 크롬창이 하나 열린다!!

 

 

오오... 이제 코드를 넣으면 여기 반영된다 이거지??

 

본격적인 코드 삽입은 다음 이 시간에........