[Flutter] 스나이퍼팩토리 1일차

KWANWOO·2023년 1월 25일
fluttersniper factory
2

스나이퍼팩토리 플러터

목록 보기
1/51
post-thumbnail

스나이퍼팩토리 플러터 1일차

스나이퍼 팩토리 플러터 1일차에서는 기본적인 프로그래밍의 내용과 데이터타입에 대해 배우고, Dartpad를 사용해 변수 선언 등의 활동을 해 보았다. 아래는 학습한 내용들의 간단한 키워드들을 작성했다.

학습한 내용

  • 프론트엔드와 백엔드
  • 기본 용어 정리(HTTP, HTML, XML 등)
  • 플러터에 대해
  • 프로그래밍 기본 구조
  • 다양한 데이터타입(int, double, String, boolean, List)

1일차 과제

  1. 도메인과 DNS
  2. HTTP 매서드(method)
  3. HTML과 XML
  4. 코드 실행 연습
  5. Dart와 javascript의 데이터타입

1. 도메인과 DNS

도메인

도메인이란 웹 브라우저를 통해 특정 사이트에 진입할 때, IP 주소를 대신하여 사용하는 주소를 의미한다.

도메인을 사용하면 한 눈에 파악하기 힘든 IP 보다 훨씬 쉽고, 분명하게 나타낼 수 있다.

예시

  • IP 주소: 125.209.222.141
  • 도메인: www.naver.com

DNS(Domain Name System)

DNS는 Domain Name System의 약자로 도메인 이름을 IP주소로 변환하거나 IP주소를 도메인 이름으로 변환하는 일을 수행할 수 있도록 개발된 데이터베이스 시스템이다.

DNS는 범국제적 단위로 웹 사이트의 IP 주소와 도메인 주소를 이어주는 시스템이다.

즉, 웹 사이트에 진입하기 위해서 도메인 이름과 매칭된 IP 주소를 확인하는 작업을 수행하는 서버가 DNS 서버이다.

DNS 서버 종류

  • Local DNS 서버 : URL에 도메인 이름을 입력했을 때 가장 먼저 탐색하는 DNS 서버
  • Root DNS 서버 : ICANN이 직접 관리하는 서버로, TLD DNS 서버 IP들을 저장해 두고 안내하는 역할
  • TLD(Top Level Domain) DNS 서버 : 도메인 등록 기관이 관리하는 서버로 Authoritative DNS 서버 주소를 저장해 두고 안내하는 역할
  • Authoritative DNS 서버 : 실제 개인 도메인과 IP 주소의 관계가 기록/저장/변경 되는 서버
  • DNS 과정

2. HTTP 메서드(method)

HTTP 메서드란 클라이언트와 서버 사이에 이루어지는 요청과 응답 데이터를 전송하는 방식을 일컫는다. 9가지 종류의 HTTP 메서드가 있으며 주로 사용되는 메서드는 5가지 이다.

주요 HTTP 메서드

  • GET : 리소스 조회
  • POST: 요청 데이터 처리, 주로 등록에 사용
  • PUT : 리소스를 대체(덮어쓰기), 해당 리소스가 없으면 생성
  • PATCH : 리소스 부분 변경 (PUT이 전체 변경, PATCH는 일부 변경)
  • DELETE : 리소스 삭제

GET

  • 주로 리소스 조회에 사용된다.
  • 서버에 전달하고 싶은 데이터는 쿼리(Query)를 통해 전달한다.
  • 메세지 바디를 사용할 수 있지만 지원하지 않는 곳이 많아 권장하지는 않는다.

POST

  • 요청 데이터 처리
  • 메세지 바디를 통해 서버로 요청 데이터를 전송한다.
  • 서버는 요청 데이터를 처리한다. (메세지 바디를 통해 들어온 데이터를 처리하는 모든 기능을 수행)
  • 주로 전달된 데이터로 신규 리소스 등록, 프로세스 처리에 사용된다.

PUT

  • 리소스를 대체하는 매서드로 리소스가 있을 경우 대체하고 없을 경우 생성한다.
  • 업데이트가 아닌 덮어쓰기와 같은 기능을 수행한다. (Overwrite)

PATCH

  • PUT과 달리 리소스의 부분을 변경할 수 있다.
  • PUT과 보내는 양식은 비슷하지만, 서버에서는 PATCH로 전송된 경우 필요한 부분만 업데이트 해주는 방식으로 해야한다.

DELETE

  • 리소스를 제거할 때 사용한다.
  • 특정 리소스의 생성 Location을 DELETE로 보낸다면 서버에서는 해당 리소스를 삭제한다.

GET 메서드를 제외한 다른 메서드들은 리소스를 변경하기 때문에 안전하지 않은 메서드이다.

기타 HTTP 메소드

  • HEAD : GET과 동일하지만 메시지 부분(body 부분)을 제외하고, 상태 줄과 헤더만 반환
  • OPTIONS : 대상 리소스에 대한 통신 가능 옵션(메서드)을 설명(주로 CORS에서 사용)
  • CONNECT : 대상 자원으로 식별되는 서버에 대한 터널을 설정
  • TRACE : 대상 리소스에 대한 경로를 따라 메시지 루프백 테스트를 수행

3. HTML과 XML

HTML

HTML이란 Hyper Text Markup Language 약자로 웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 기능을 가진 문서를 만드는 언어이다.

구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며, 흔히 말하는 웹 페이지를 위한 마크업 언어라고 할 수 있다.

Hyper Text : 하이퍼 링크를 이용해 독자가 원하는 순서에 따라 기존 문서에서 다른 문서로 접근할 수 있는 텍스트
Markup 언어 : 태그를 이용하여 문서나 데이터의 구조를 명시하는 언어

  • HTML 예시
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>Hello</title>
    <link rel="stylesheet" type="text/css" href="css/service_name.css">
</head>
<body>

</body>
</html>

HTML은 위의 예시처럼 html 태그 뒤의 head 와 body 로 구성되어 있다.

meta 태그는 문서의 정보를 브라우저와 검색엔진에게 이 문서가 어떤 정보를 가지고 있는지 알려주는 것을 명시한다.

예시에서 title 태그를 보면 닫는 태그와 여는 태그로 감싸져 있고, Hello라는 밸류(value)를 가지고 있다. 이 전체를 하나의 엘리먼트(element)라고 한다.

마지막 body 태그 안에서 페이지의 컨텐츠 내용을 작성하게 된다.

XML

XML은 Extensible Markup Language의 약자로 사람과 기계가 읽을 수 있는 형식으로 문서를 인코딩하기 위한 규칙 집합을 정의하는 마크업 언어이다.

XML은 플랫폼 독립적인 마크업 언어이다.

XML은 데이터베이스, 프로그램 및 응용 프로그램, 모바일 응용 프로그램 등에서 다른 플랫폼간에 데이터를 교환하기 위해 사용된다.

HTML과 XML의 차이점

HTML은 웹 페이지 및 웹 응용 프로그램의 구조를 만들기 위한 표준 마크업 언어이고, XML은 사람과 기계가 읽을 수 있는 형식으로 문서를 인코딩하기 위한 규칙 집합을 정의하는 마크업 언어이다.

HTML은 웹 페이지 구조를 개발하는데 사용되고, XML은 다양한 플랫폼간에 데이터를 교환하는데 사용된다.

4. 코드 실행 연습

4-1

void main() {
 int test = '테스트';
 print(test);
}

결과 : 에러
int형 변수 test에 문자열을 저장하려고 해서 에러가 발생한다. test의 타입을 String으로 변경하면 올바르게 작동하며 테스트라는 문자열이 출력된다.

4-2

void main() {
 var test = '테스트';
 print(test.runtimeType);
}

결과 : String
test에 문자열 "테스트"가 저장되어 있기 때문에 test의 데이터타입인 String이 출력된다.

4-3

void main() {
 var test = '303'+'101';
 print(test);
}

결과 : 303101
"303"과 "101"모두 문자열의 형태이므로 합치면 303101의 String이 저장되고 출력된다.

4-4

void main() {
 var true = 'test';
 print(true);
}

결과 : 에러
true는 예약어이기 때문에 변수의 이름으로 지정할 수 없다. 변수의 이름을 변경해야 한다.

4-5

void main() {
 print(true.runtimeType);
}

결과 : boolean
true는 boolean 타입이기 때문에 runtimeType을 출력하면 boolean이 출력된다.

4-6

void main() {
 String const = 'test';
 print(const);
}

결과 : 에러
const는 예약어이기 때문에 변수의 이름으로 지정할 수 없다. 변수의 이름을 변경해야 한다.

4-7

void main() {
 var value = '303808' != '303'+'8'+'08';
 print(value);
}

결과 : false
"303", "8", "08" 모두 String으로 합치면 "303808이 된다. 따라서 value에는 false가 저장된다.

4-8

void main() {
 List list1 = [1,2,3,4];
 List list2 = [5,6,7];
 list1.add(list2);
 print(list1);
}

결과 : [1, 2, 3, 4, [5, 6, 7]]
add는 리스트에 원소를 추가하는 함수로 list2가 하나의 원소로 list1에 추가된다.

4-9

void main() {
 List list1 = [1,2,3,4];
 List list2 = [5,6,7];
 list1.addAll(list2);
 print(list1);
}

결과 [1, 2, 3, 4, 5, 6, 7]
addAll 함수는 모든 원소들을 추가하는 함수로 list1의 맨 뒤에 list2의 모든 원소들이 추가된다.

4-10

void main() {
 List list1 = ['a','b','d'];
 list1.insert(2,'c');
 print(list1);
}

결과 : [a, b, c, d]
insert는 특정 위치에 원소를 삽입하는 함수로 2번 위치에 c가 삽입된다.

4-11

void main() {
  List list1 = [5,4,3,2,1,0];
  list1.remove(0);
  print(list1);
}

결과 : [5, 4, 3, 2, 1]
remove는 특정 원소를 제거하는 함수로 list1에서 0이 제거된다.

4-12

void main() {
  List list1 = [5,4,3,2,1,0];
  list1.removeAt(0);
  print(list1);
}

결과 : [4, 3, 2, 1, 0]
removeAt은 특정 위치의 원소를 제거하는 함수로 0번째 원소인 5가 삭제된다.

4-13

void main() {
  List list1 = [5,4,3,2,1,0];
  list1.shuffle();
  print(list1);
}

결과 : [5, 4, 2, 0, 3, 1]
suffle은 리스트의 원소들을 랜덤하게 배치한다. 실행할 때마다 결과가 달라질 수 있다.

4-14

void main() {
  List list1 = [5,4,3,2,1,0];
  List list2 = [];
  list2.add(list1.isEmpty);
  list2.add(list1.isNotEmpty);
  list2.add(list1.length);
  list2.reversed;
  print(list2);
}

결과 : [false, true, 6]
isEmpty는 리스트가 비어있는지 확인하는 함수이고, isNotEmpty는 리스트가 비어있지 않은지 확인하는 함수이다. list1은 비어있지 않으므로 list2에 false와 true가 차례대로 저장되고 list1의 길이가 6이기 때문에 list2에 6이 저장된다. reversed는 리스트를 뒤집는 함수이지만 뒤집어진 리스트를 저장하지 않기 때문에 저장된 순서 그대로 출력된다. 리스트를 뒤집에서 list2에 저장하고 싶다면 reversed 함수를 아래와 같이 사용하도록 코드를 수정하면 된다.

list2 = list2.reversed.toList();

4-15

void main() {
  List list1 = [0, 1, 2, 3, 4, 5, true, false];
  List list2 = [];
  list2.add(list1.contains(list1[list1.length - 1]));
  list2.insertAll(0, ['a', 'b', 'c', 1, 2, 3]);
  list2.indexOf(true)-list2.indexOf(false);
  print(list2.indexOf(true)-list2.indexOf(false));
}

결과 : 7
list1[list1.lenght - 1]은 list1의 마지막 원소이므로 false이다. contains는 해당 원소가 포함되어 있는지를 확인하는 함수이고, list1에는 false가 포함되어 있으므로 list2에 true가 저장된다. insertAll은 특정 위치에 모든 원소를 저장하므로 list2의 0번째 위치에 원소들이 삽입되어 ['a', 'b', 'c', 1, 2, 3, ture]가 된다. indexOf는 해당 원소의 위치를 찾아주고 원소가 없으면 -1 을 반환하게 된다. 따라서 true의 원소는 list2의 6번째 위치이고 false는 없으므로 6+(-1) = 7이 결과로 출력된다.

Dart와 javascript의 데이터타입

Dart의 데이터타입

  • int : 정수형, 표현범위는 64비트
  • double : 실수형, 64비트 부동소수점을 사용
  • String : 문자열, 문자열 리터럴을 사용할 때는 큰 따옴표나 따옴표를 사용
  • boolean : 진리 값, 참과 거짓으로만 구분되는 값
  • Lists : 배열, [ ] 표시를 사용
  • Sets : 집합, 원소 사이에 순서가 없고, 각각의 원소는 유일한 값을 가짐
  • Maps : 키 값을 연결시키는 객체, 키 값은 반드시 한 객체에서 하나만 쓰일 수 있고, 동일한 키를 여러번 사용할 수 없음
// Map 예시
var student = {
	'first': 'Kim'
    'second': 'Lee'
}

javascript의 데이터타입

  • Number 타입 : Number 타입은 -(253-1) 과 253-1 사이의 숫자 값 하나를 가짐
  • String 타입 : 텍스트 데이터를 나타낼 때 사용
  • Boolean 타입 : true와 false 중 하나의 값을 가지는 논리적인 요소
  • Null 타입 : 빈 값을 뜻함
  • Undefined 타입 : 값도 없고 타입도 지정되지 않은 상태
  • Symbol 타입 : 유일하고 변경 불가능한 기본 값
  • Object(객체) : 식별자로 참조할 수 있는 메모리에 있는 값

Dart와 javascript의 데이터타입 차이

Dart와 javascript는 모두 String과 Boolean 타입을 가지고 있다. 하지만 숫자를 표현하는 자료형이 Dart는 int와 double로 나누어져 있고, javascript는 하나의 Number 타입을 가진다. 또한 Dart의 Maps은 javascript의 Object와 유사하다.

스나이퍼팩토리 플러터 과정 1일차 완료ㅠ

이번에 스나이퍼팩토리의 플러터 과정을 수강하게 되었다. 이번 프로그램을 계기로 거진 1년 동안 손 놓고 있던 블로그를 다시 작성하게 되었다ㅠㅠ 너무 오랜만에 작성하는 블로그라 조금 어색하긴한데 그래도 공부한 내용들을 정리해 볼 수 있어서 좋은 듯...ㅎㅎ 계속 진행하는 내용을 정리할 예정이다. 일단 오늘은 여기까지

📄 Reference

profile
KWANWOO
관우로그
다음 포스트

[Flutter] 스나이퍼팩토리 2일차

1개의 댓글

comment-user-thumbnail
박지훈
2023년 7월 17일

대박이다,, 너무 정성 가득한 글 보고 댓글을 안남길 수가 없어서 남기고 갑니다.

답글 달기