플러터 학습기 (4) - final과 const, chat gpt로 코딩해보기

초보자도 프로처럼 만드는 플러터 앱 개발(링크) 3주 차를 완료했다. 3주 차 마지막에 상태 관리 부분과 Provider 관련한 내용이 나왔는데 어찌어찌 따라 할 수 있었던 앞부분과 달리 이해하기가 어렵다ㅠ 그래서 병행해서 보고 있는 코딩셰프 강좌를 다시 켰다. 순한맛을 보고 조금 따라 하다가 진도가 느린 것 같아서 책으로 다시 넘어왔는데, 상태관리 부분까지는 강의 몇십 개의 갭이 있다. 뭔가 기초를 잘 다지고 가지 않아서 나중에 고생할 것 같은 느낌이 든다.

 

어쨌든 예제를 좀 따라하면서 레이아웃에 대한 이해를 조금 더 넓혔고, 오늘 상태 관리에 대한 영상 이전 내용을 훑어보다가 기본적인 내용 중 아직 모르는 부분이 많다는 것을 깨닫고 나중에 알아보기로 했던 const에 대한 내용을 공부했다. 관련 강좌를 보니 const와 final을 비교해서 설명하고 있다.

---

const & final

const는 final과 비교해서 이해할 수 있다(공식문서)

공통점

둘다 변수를 선언하면 바꿀 수 없다(immutable). var 대신 상수를 선언하기 위해 사용한다(상수화된 변수)

 

final name = 'Bob'; // Without a type annotation
final String nickname = 'Bobby';

const String personConst = 'Jeroen';

 

'Bob'이라는 값을 할당한 name 변수에 다른 값을 넣으면 에러가 발생한다. const 변수도 마찬가지.

 

name = 'Alice'; // Error: a final variable can only be set once.
personConst = 'Bob'; // Not allowed

 

차이점

final

• final 변수는 프로그램 실행 시 초기화되며, 1회만 할당 가능하다.(run-time constant)
• 객체 생성시 외부 데이터를 받아 생성자를 통해 객체를 초기화하는 식으로 1회 변경할 수 있다.
• 상태가 업데이트되면, final 변수를 포함해 build 안의 모든 메소드가 초기화된다. 밸류값을 바꾸려면 rebuild 해야 한다.

class Person{
  final int age;
  string name;
    
  Person(this.age, this.name);
}
    
void main(){
  Person p1 = new Person(21, "John");
  print(p1.age);
}

 

▶ Person 클래스에서 Person 생성자를 만든 후 main 함수에서 p1 객체를 만들고, 생성자를 통해 age 파이널 변수에 21을 할당하여 초기화한다.

 

const

• const 변수는 컴파일 시 초기화되며(선언과 동시에 초기화), 실행 시 이미 할당되어 있다.(compile-time constant)
  
  • const 변수에 compile 이후 값이 저장되어야 하는 value를 할당하면 에러가 발생한다.
• 클래스 내에서 const 변수를 정의할 수 없고, 함수 내에서는 가능하다.
• 상태가 업데이트되어도 빌드 메소드 내의 const 변수는 초기화되지 않는다.
• 런타임시 const 변수는 변하지 않는다.

void main(){
  const time = DateTime.now()
} // Error

 

▶ 현재시간은 계속 변하기 때문에 runtime시 상수 값이 되는 const 변수를 DateTime을 사용해서 초기화하면 에러가 발생한다.

▶ const를 final로 변경하면 에러가 사라진다.

 

컴파일과 런타임 개념도 아직 머릿속에 잘 안 잡혀 있어서 헷갈린다. 기초를 더 잘 다져야겠다는 생각이 든다.

 

---

 

어느 정도 플러터 코드에 익숙해지다 보니 만드려고 하는 앱 페이지 구조가 간단할 것 같아 chat gpt로 코딩해 보면 어떨까 하는 생각이 들었다. 아래와 같이 프롬프트를 넣어보았다.

플러터로 습관 이름, 디스크립션, 주간 반복 횟수 설정(7일중 몇일), 매주 습관 반복 여부 설정하는 페이지 코드 짜줘

 

처음부터 꽤 그럴듯하게 화면을 짜주었지만 주간 반복 횟수 선택 버튼이 1부터 7까지 나와있고 단일 선택이 가능한 형태를 생각했는데, 생각하지 않았던 슬라이더가 나오고 반복 횟수를 중복 선택 가능했다(아래 이미지).

 

 

슬라이더는 쉽게 없앴지만 반복 횟수 선택을 단일 선택 가능한 필버튼으로 바꾸는데 꽤나 씨름해야 했다. 단일 선택을 요청하니 드롭다운으로 바꿔주었는데, 아무리 필버튼으로 바꿔달라 해도 팝업과 드롭다운을 계속 왔다 갔다 하는 결과물을 내주었다.

팝업도 아니고 드롭다운도 아니야. 아무것도 클릭하지 않아도 7개 선택지가 항상 보이게 해줘

10번 정도 핑퐁하다가 요렇게 짜증을 내고 나서야 원하는 결과물을 주었다. 이후에도 선택한 숫자가 따로 보이기도 하고, 필버튼 안의 선택 숫자가 사라지기도 해서 마이너한 수정을 몇번 거치고 아래와 같은 결과물이 나왔다.

 

 

 

 

chat gpt로 주니어 개발자 정도의 결과물은 낼 수 있다던데 과연..? 하긴 내가 처음부터 만드려면 최소 10시간은 더 공부해야 할 거 같긴 하다. 친한 개발자에게 chat gpt 멍청하다고 했더니 질문을 잘해야 똑똑하다는 답변을... 그래서 프롬프트 엔지니어링이 중요한 것이군!

어쨌든 기초도 잘 다지면서 chat gpt 잘 쓰는 방법도 익히는 것으로..