[Flutter] 스나이퍼팩토리 Flutter 기초과정 (1)

GONG·2023년 3월 22일
0
post-thumbnail

1일차 과제 링크 👉 1일차 과제

시작 전 용어 정리

HTTP (HyperText Transfer Protocal)

  • W3 상에서 정보를 주고받을 수 있는 프로토콜. 주로 HTML 문서를 주고받는 데에 쓰임
  • 클라이언트와 서버 사이에 이루어지는 요청/응답(request/response) 프로토콜
  • 데이터를 요청하는 방법과 받는 방법에 대해 규정되어 있음

HTML

  • 시각적으로 문서를 보여주기 위한 언어
  • 웹 문서를 보여주기 위한 필수적인 요소로 모든 웹은 HTML로 만들어짐

XML

  • 데이터를 정의하는 규칙을 제공하는 마크업 언어
  • HTML과 비슷하게 생겼지만, 데이터를 보여주는 목적이 아닌 데이터를 저장하고 전달하기 위해 만들어짐
  • 데이터 전송에 특화

JSON

  • 브라우저 통신을 위한 속성-값 또는 키-값 쌍으로 이루어진 데이터 포맷

    💡JSON과 XML의 공통점

    • 데이터를 저장하고 전달하기 위해 고안됨
    • 기계 뿐아니라 사람도 쉽게 읽을 수 있음
    • 계층적인 데이터 구조를 가짐
    • 다양한 프로그래밍 언어에 의해 파싱될 수 있음
    • XMLHttpRequest 객체를 이용하여 서버로부터 데이터를 전송받을 수 있음

    💡JSON과 XML의 차이점

API

  • 어떠한 응용프로그램에서 데이터를 주고 받기 위한 방법
  • 애플리케이션을 서로 연결하여 통신할 수 있음
  • 백엔드 개발자가 서버 구축 및 API 개발을 완성하면 프론트엔드 개발자가 정해진 API 함수를 통해 원하는 데이터를 쉽게 호출하여 사용할 수 있음
  • 개발된 API는 JSON형식으로 호출하여 파싱

왜 플러터?

💡프레임워크

  • 어떠한 서비스를 만들 때 사용되는 기본 틀
  • 개발자가 주로 신경쓰지 않아도 되는 부분을 해결하고 시작할 수 있음
  • 웹을 위한 프레임워크: React, Angular, Vue, Svelte
  • 앱을 위한 프레임워크: React Native, Xamarin, Flutter

Flutter

  • Google에서 개발 및 지원하는 오픈소스 프레임워크
  • 다수의 플랫폼에 대한 애플리케이션의 UI를 단일 코드로 구축할 수 있음.
  • IOS, Android, 웹, Windows, MacOS, Linux 지원

💡플러터의 장점

  • 네이티브에 가까운 성능
    Flutter는 프로그래밍 언어로 Dart를 사용하고 기계 코드로 컴파일합니다. 호스트 디바이스가 이 코드를 이해하므로 빠르고 효과적인 성능이 보장됩니다.
  • 빠르고 일관적이며 사용자 지정이 가능한 렌더링
    Flutter는 플랫폼별 렌더링 도구를 사용하지 않고, Google의 오픈 소스 Skia 그래픽 라이브러리를 사용하여 UI를 렌더링합니다. 따라서 애플리케이션에 액세스하는 데 사용하는 플랫폼에 관계없이 사용자에게 일관된 시각적 경험을 제공합니다.
  • 개발자에게 편리한 도구
    Google은 사용 편의성에 중점을 두고 Flutter를 만들었습니다. 개발자는 핫 리로드와 같은 도구를 사용하여 상태를 바꾸지 않고 코드 변경 내용을 미리 볼 수 있습니다. 위젯 검사기와 같은 다른 도구를 사용하면 UI 레이아웃 문제를 손쉽게 시각화하고 해결할 수 있습니다.

Dart 기초

모든 Dart 프로그램은 main()부터 시작된다.

→ 아무리 많은 코드가 있어도 void main(){}을 최우선으로 실행한다.

→ 문장의 끝에는 항상 세미콜론 ;

void main() {   // main 함수
	print("hello world");
}

출력문 print()

  • 괄호 안에 출력 대상을 설정할 수 있다.
void main() {   // 에러 발생. 서로 다른 타입의 데이터는 붙여서 사용할 수 없다.
	print(1번째줄);
	print(2번째줄);
	print(3번째줄);
	print(4번째줄);
	print("1"+"번째줄");  // 수정
}

개행

void main() {
	print("1번째줄\n2번째줄");   //  \n : 개행문자
	print("3번째줄");
	print("4번째줄");
	
	print("1번째줄\n2번째줄\n3번째줄\n4번째줄");
}

연산

void main() {
	print(3+5);  // 8
  	print(32-2); // 30
	print(2*4);  // 8
  	print(4/2);  // 2
}

연습

void main() {
	print(3923+592);    // 4515
  	print(59*32+5);     // 1893
	print(100-5923);    // -5823
  	print((10+10+10)*50);   // 1500
  	print((10+10+10)*(10-50*50)/2);   // -37350
}

데이터 타입(데이터형)

  • 정수형: int
  • 실수형: double
  • 문자형: String
  • 논리형: boolean
  • num: int와 double을 포함하는 타입
void main() {
	print("5103294"+"492934");  // "**5103294492934"**
	print("5103294"+5059);      // 에러 발생. 문자와 숫자는 서로 더할 수 없다.
  	print("5103294"+"5059");    // -> 수정 ("51032945059")
	print("200"-"100");         // 에러 발생. 문자형은 뺄셈 연산을 할 수 없다.
	print(200-100);             // -> 수정 (100)
  	print(12+3.4);              // 15.5
	print("200"*3);             // "200200200"
}

변수

  • 값을 저장할 수 있는 메모리 공간

  • 변수 선언: 데이터를 저장할 공간을 할당하고 이름을 붙이는 것
    → 선언 시 변수의 데이터 타입과 변수명을 지어주어야 함. 한 가지 타입의 값만 저장 가능

  • 변수 초기화: 선언된 변수에 값을 저장하는 것

  • 변수명 규칙

    • 예약어는 변수명으로 사용할 수 없다. (int, void, 문법에 사용되는 단어…)
    • 한글 변수명은 사용할 수 없다.
    • 첫 글자를 숫자로 시작할 수 없다.
    • 공백을 포함할 수 없다
  • 코드 컨벤션

    • *camelCase : 단어와 단어 사이를 대문자로 구분 (Dart에서 주로 사용)
      → myHeight, myWeight, myName, myGender …
    • snake_case : 단어와 단어 사이를 언더바로 구분
      → my_height, my_weight, my_name, my_gender …
void main() {
	// = : 대입연산자. 오른쪽의 결과를 왼쪽으로 대입한다.
	int example1;     // 변수 선언
    example1 = 3;     // 변수 초기화
    int example2 = 4; // 변수 선언과 초기화
    print(example1);  // 3
    print(example2);  // 4
}

연습

// int형 변수 활용 연습
void main() {
	int money = 1000000;
    print(money-150000);
    print(money-150000-400000);

    money -= 150000;    // money = money - 150000
    money -= 400000;    // money = money - 400000
    print(money);
}
// double형 변수 활용 연습
void main() {
	// pi 변수 만드는 예시
	double pi = 3.14;
  
	// 휴대폰 크기 변수를 만드는 예시
    double deviceHeight = 146.7;
    double deviceWidth = 71.55;

    // 나의 신체 정보 변수를 입력하는 예시
    double myHeight = 200.1;
    double myWeight = 10.3;
}
// bool형 변수 활용 연습
// boolean : 참과 거짓. 컴퓨터에게 참과 거짓으로 각각 어떻게 작동할지에 서술이 가능해짐
void main() {
	// 로그인 여부의 변수를 만드는 예시
	bool isLogined = true;
	
	// 부자인지에 대해 변수를 만드는 예시
	bool isRich = false;

	// 연산결과에 대한 변수선언(초기화)
	int money = 1000000;
	bool isRich = money > 5000000;    // > : 비교연산자, 아래 표 참고
	print(isRich);   // false
}

비교 연산자

연산자설명
a < bb가 더 큰가?
a > ba가 더 큰가?
a <= bb가 a보다 크거나 같은가?
a >= ba가 b보다 크거나 같은가?
a == ba랑 b가 같은가?
a != ba랑 b가 다른가?

1일차 끝

profile
우와재밋다

0개의 댓글