[25.05.27 TIL] Flutter 1주차 강의(기초 문법과 개념)

김영민·2025년 5월 27일

사전캠프 2일차
1일차에는 개발 환경을 세팅했다면,
2일차인 오늘은 1주차 강의 Dart 기초 문법과 개념을 배웠다.


1주차 강의(기초 문법과 개념)

앞서 Dart는 flutter의 공식언어로 Dart의 기초 문법과 개념을 학습해야했다.

1. 변수 선언

var author = "hayancode";
  • var로 변수를 Velog 이름을 선언해보았다.
String velogName = "하얀코드";
int day = 250527;
bool studying = true;
  • 이런식으로 String에는 Velog의 한글 이름, int에는 오늘 날짜, 공부중인 상태로는 bool을 썼다.
List<int> page = [];
  • List에는 숫자를 타입으로 하여, 임의의 page라는 List 변수를 생성했다.
    그 외에도 double, List, Set, Map이 있는데 오늘 강의에서는 List정도만 사용했다.
    예전 지식으로는 double은 소숫점자리까지의 숫자로 알고있다.

2. 반복문

반복문은 말 그대로 반복되는 귀찮은 작업을 처리할 수 있게 해주는 문법이다.

void main() {
	var sum = 1+2+3+4+5;
    print(sum);
}
  • 우선 리턴값이 필요 없는 void를 쓰고, sum으로 숫자 1부터 5까지의 숫자를 더했다.
    그리고 print로 값을 출력까지 완료하는 식이지만,
void main() {
	var sum = 0;
    for(var i = 0; i<=5; i++){
    	sum+=i;
    }
    print(sum);
}
  • 동일하게 작성하되 for라는 반복문을 써줬고, sum을 0으로 세팅했다.
    <=를 사용해 숫자를 5로 작성했지만 i<6 같은 방법도 있다.

3. 함수

우선 함수는 아래와 같은 구성인데,

반환타입 함수이름(매개변수A, 매개변수2, ...) {
	///로직
    return 반환값;
}

반환타입

- 변수타입과 동일하며, 반환값이 없을 경우 void를 사용한다.

함수이름

- 호출할 때 사용해야 하니 대표적인 용어로 작성한다.

매개변수

- 함수가 입력받는 값이며 ,를 사용해 여러개 작성할 수 있다.

로직

- 함수가 작업을 수행할 코드이다.

반환값

- return으로 반환하며 함수가 작업을 완료 후 호출한 곳으로 돌려준다.
반환타입과 같은 타입의 데이터를 반환해야 하니 주의가 필요하다.


3-1 포지셔널 파라미터 (positional parameters)

int add(int a, int b) {
	int sum = a+b;
    return sum;
}
void main(){
	int result = add(1, 2);
    print('값=$result');
}
  • 변수 a, b에 포지션을 주어 1, 2라는 값을 주어 더한 값을 출력했다.
    여기서 더한 값을 반환해야하니 반환타입을 int로 설정했고, return까지 잊지 않고 썼다.

3-2 네임드 파라미터(named parameters)

앞에 required를 사용하여 지정한다.
이는 이름을 지정해서 숫자를 전달하기 때문에 값의 순서가 바뀌어도 동일하게 전달된다.

3-3 옵셔널 파라미터 (optional parameters)

포지셔널과 네임트 파라미터는 값이 꼭 필요하지만,
옵셔널 파라미터는 값이 있어도 되고, 없어도 된다.

우선 여기서는 2가지 파라미터를 사용했는데,

int add({required int frontValue,required int endValue, int? expansionValue}) {
  int sum = frontValue + endValue + (expansionValue??0);
  return sum;
}
void main() {
  int result = add(frontValue : 3, endValue : 5);
  int result2 = add(frontValue : 3, endValue : 5, expansionValue : 3);
  print('결과: $result');  // 출력: 결과: 8
  print('결과: $result2');  // 출력: 결과: 11
}
  • 매개변수 작성 시 타입 뒤에 ?를 입력하는데,
    ❔ (매개변수)??0으로 입력한 이유는 아마 값이 들어오지 않을 경우, 0으로 설정하라고 컴퓨터에게 입력하는 것 같다.

4. 조건문

4-1 if/else

void main() {
	int number = 5;
    if(number < 10) {
    	print('number<10');
    } else {
    	print('number>10');
    }
} 
  • 이런 식으로 조건을 설정하여 해당될 경우 A 로직 진행, 아닐 경우 B 로직을 진행하게 작성했다.

4-2 switch

void main(){
	int number = 3;
	switch(number) {
    	case 1:
        	print('number=1');
            break;
		case 2:
        	print('number=2');
            break;
		case 3:
        	print('number=3');
            break;
        default:
        	print('number≠1~3');
    }
}
  • case에 해당하지 않으면 deault라고 사용한다.
    switch는 익숙하지 않은데, :와 break를 사용하는 점을 주의해야 될 것 같다.

5. 동기와 비동기

5-1 동기(Synchronous)

직렬적으로 하나의 작업이 끝나야 다음 작업이 순차적으로 처리되는 방식이다.
보통의 코드가 그렇듯 위에서 아래로 흘러가는 흐름인 것 같다.

void main() {
  print('작업A 시작');
  performTask();
  print('작업A 완료');
}
void performTask() {
  print('작업B 실행');
}
///출력
작업A 시작
작업B 실행
작업A 완료

5-2 비동기(Asynchronous)

하나의 작업이 끝나지 않아도 다른 작업을 시작하는 병력적 방식이다.
따로 설정을 해줘야하는데 이 오류처리나 코드가 복잡하다고 한다.

void main() {
  print('작업A 시작');
  performTask();
  print('작업A 완료');
}
Future<void> performTask() async {
  await Future.delayed(Duration(seconds: 2));
  print('작업B 실행');
}
//출력
작업A 시작
작업A 완료
(2초뒤에)
작업B 실행
  • 이런 식으로 2초의 딜레이를 주는 것인데, 예제가 하나라 개념만 알고 지나가야 될 것 같다.

5-3 async/await

비동기 방식을 동기처럼 처리해야 될 때 사용한다.

void main() async{
  print('작업A 시작');
  await performTask();
  print('작업A 완료');
}
Future<void> performTask() async {
  await Future.delayed(Duration(seconds: 2));
  print('작업B 실행');
}
///출력
작업A 시작
(2초뒤에)
작업B 실행
작업A 완료
  • main() 뒤에 async를 넣고 해당되는 로직 앞에 await를 넣어주면 되는 것 같다.
    대표적으로 서버로부터 데이터를 요청할 때,
    데이터를 요청하고 그 데이터를 받아야 화면에 결과를 출력할 수 있어,
    결과값을 받기 전까지 기다리는 상황을 만드는 데 async와 await 문법이다.

6. Widget Tree

  • 다음은 Widget Tree인데, 해당 강의는 예제를 통해 코드를 수정하는 식이라 따로 개념 정리 할 것은 없어보인다.
  • 보통의 위젯 구조와 이벤트가 발생하는 영역과 그렇지 않은 영역들을 구분해놓는 것 같다.

위의 1-13 강의가 제일 어려웠던 것 같다.
해당 강의는 문법보다 위젯과 그 구조에 대해 다룬 느낌이다.

코드를 붙여 넣고 프로젝트 파일에서 수정하고 위젯을 연결하는? 그리고 반응을 설정하는 방법이라 추가적인 공부나, 재시청이 필요한 것 같다.


마지막 14강 클래스 객체까지 들으려고 했으나, 면담도 있었고, TIL 작성이 처음이라 시간 분배가 어려웠던 점, 하루에 들은 강의의 내용이 많았다는 점이 문제였다.

3일차인 내일 해당 강의를 들어 1주차 강의 완강과 1주차 과제를 제출하는 것이 목표이다.
또한, 2주차 강의도 열심히 들어야겠다.

profile
💻 [25.05.26~] Flutter 공부중⏳

0개의 댓글