AR삽질러

React.js

아랑팡팡 — Wed, 28 Aug 2024 20:43:14 +0900

React.js

1. React.js란

https://ko.wikipedia.org/wiki/%EB%A6%AC%EC%95%A1%ED%8A%B8_(%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC)

리액트 (자바스크립트 라이브러리) - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서[2] 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공

ko.wikipedia.org

- Meta(Facebook)에서 개발한 오픈소스 JavaScript라이브러리로 대규모 웹 서비스의 UI를 . 더편하게 개발하기 위해 만들어진 기술

- React.js는 컴포넌트 기반 아키텍처를 사용해 복잡한 UI를 작은 컴포넌트 단위로 나누어 관리할 . 수있어 효율적인 렌더링을 위해 Virtual DOM을 도입해 웹 애플리케이션의 성능을 최적화한다.

대표 서비스별 기술 사용 예시

Web Server	Mobile App	Desktop App
Netflix, Airbnb	Facebook	Slack, Discord

2. React의 기술적인 특징

2-1. 컴포넌트(Component)를 기반으로 UI를 표현한다.

- 화면을 구성하는 독립적인 UI 요소로 각각의 컴포넌트는 자신의 상태와 로직을 관리하며 UI의 일부분을 담당한다.

2-2. 화면 업데이트 구현이 쉽다.

- React의 선언형 프로그래밍 : React의 선언형 프로그래밍 과정은 생략하고 목적만 간결하게 명시하는 방법으로 무엇을 할 것인지를 명시적으로 선언하는 방식이다. UI가 특정 상태에 따라 어떻게 보여야 하는지 선언하고 React가 내부적으로 이것을 처리하기 위해 자동으로 화면을 업데이트 한다.

2-3. 화면 업데이트가 빠르게 처리된다.

- Virtual DOM 기술을 사용해 화면 업데이트를 효율적으로 처리한다. React에서는 상태변화가 발생핼 때 이 가상의 DOM에서 변경 사항을 계산하고 그 결과를 실제 DOM에 초소한의 작업만 반영함으로써 화면 업데이트를 효율적으로 처리할 수 있다.

JavaScript - 동기와 비동기(19)

아랑팡팡 — Sun, 25 Aug 2024 22:28:39 +0900

JavaScript - 동기와 비동기(19)

1. 동기(Synchronous)와 비동기(Asynchronous)

- 동기와 비동기는 코드가 실행되는 방식을 설명하며 실행 흐름과 처리방식에 영향을 미치게된다.

console.log(1);
setTimeout(() => {
  console.log(2);
}, 3000);

console.log(3);

동기

- console.log(2), console.log(3)은 순서대로 실행되는 동기작업

비동기

- setTimeout(() => { console.log(2); }, 3000); 는 비동기 함수로 JavaScript엔진에 의해서 호출된 후 내부적으로 타이머가 설정된다.

2. 동기(Synchronous)

- 동기 방식에서는 코드가 순차적으로 실행된다.

- 하나의 작업이 완료되기 전까지는 다음 작업이 실행되지 않기 때문에 각 작업은 이전 작업이 끝날 때까지 기다린 후 실행되어 코드가 위에서 아래로 차례대로 실행된다.

특징

- 작업이 블로킹되어 이전 작업이 완료될 때까지 다음 작업이 실행되지 않는다.

- 코드의 흐름이 예측 가능하다.

단점

- 동기 방식은 작업이 오래 걸리거나 시간이 지연되는 경우 전체 프로그램이 문제가 될수 있다. 예로 UI가 멈추가나 웹앱이 응답하지 않는 문제가 발생할 수 있다.

3. 비동기(Asynchronous)

- 작업이 동시에 실행될 수 있도록 관리되며 특정 작업이 완료될 때까지 기다리지 않고 다음 작업을 바로 실행한다. 콜백함수나 Promise 등을 사용해 비동기 작업이 완료된 후에 동작을 정의한다.

특징

- 작업이 블로킹 되지 않는다. 특정 작업이 완료되기를 기다리지 않고 다음 작업이 즉시 실행된다.

- 작업완료 후 처리. 비동기 작업이 완료되면 해당 작업의 결과를 처리한다.

- 시간이 오래 걸리는 작업(네트워크 요청)등이 있을 경우 다른 작업이 먼저 실행될 수 있어 프로그램이 멈추가 않는다.

4. 비동기 - 콜백

- 콜백 함수는 다른 함수에서 인수로 전달되는 함수로 비동기 작업이 완료되었을 때 해당 콜백 함수가 호출되며 비동기 작업이 끝난 이후 실행될 동작을 정의하는데 사용된다.

콜백함수의 특징	비동기 작업을 처리하기 위한 기본적인 방법
	중첩된 콜백 함수를 사용할 수 있다.
	콜백 함수가 중첩되면 콜백 지옥 문제가 발생한다.

function add(a, b, callback) {
  setTimeout(() => {
    const sum = a + b;
    callback(sum);
  }, 3000);
}

add(1, 2, (value) => {
  console.log(value);
});

add(a, b, callback)

- a, b 에서 숫자를 받아 callback에서 두수를 더해 콜백 함수로 처리한다.

콜백 함수의 역할

- add함수가 호출될 때 세번째 인수로 전달되는 익명함수 (value) => { console.log(value)};가 콜백 함수로 사용되고 sum값을 인수로 받아 해당 값을 콘솔에 출력하는 역할

비동기 작업을 연속적으로 실행

function orderFood(callback) {
  setTimeout(() => {
    const food = "치킨";
    callback(food);
  }, 3000);
}

function deliveryFood(food, callback) {
  setTimeout(() => {
    const delivery = 주문하신 ${food} 이 배달되었습니다.;
    callback(delivery);
  }, 2000);
}

function review(food, callback) {
  setTimeout(() => {
    const reviewMessage = ${food} 은 맛있었나요? 리뷰를 작성해주세요!;
    callback(reviewMessage);
  }, 1500);
}

orderFood((food) => {
  console.log(food);

  deliveryFood(food, (delivery) => {
    console.log(delivery);

    review(delivery, (reviewMessage) => {
      console.log(reviewMessage);
    });
  });
});

orderFood(callback)

- 3초뒤에 "치킨"을 준비하고 콜백함수로 전달해 출력한다.

deliveryFood(food, callback)

- orderFood() 함수의 결과인 food를 받아 2초후 메시지를 생성하고 콜백함수로 전달한다.

review(food, callback)

- deliveryFood() 함수의 결과인 배달 메시지를 받아 1.5초 후 메시지를 생성하고 콜백함수로 전달한다.

비동기

orderFood(food)

- 콜백으로 전달된 food 값을 받아 출력한후 deliveryFood() 함수가 실행된다.

deliveryFood()

- 콜백에서 메시지를 출력한 후 review()함수가 실행된다.

4-1. 콜백지옥

- 위 코드는 비동기 작업들이 연속적으로 실행되기 때문에 콜백 함수가 중첩되어있다. 이와 같은 상황을 콜백지옥이라고 부른다.

콜백지옥의 특징	중첩된 구조
	복잡성 증가
	가독성 문제

5. 비동기 - Promise

- Promise는 비동기 작업을 감싸는 객체로 비동기 작업의 성공 또는 실패 여부를 표현하고 이를 처리하는 방식으로 콜백지옥 문제를 해결할 수 있다.

Promise의 특징	상태관리
	체이닝
	에러처리

Promise의 3가지 상태	대기(Pending)	아직 작업이 완료되지 않은 상태
	성공(Fulfilled)	비동기 작업이 성공적으로 마무리 된 상태
	실패(Rejected)	비동기 작업이 실패한 상태

Promise 체이닝

- 여러 개의 비동기 작업을 순차적으로 실행할 수 있도록 해준다.

- then()메서드로 새로운 Promise객체를 반환해 다음 then()에서 이를 받아 또 다른 비동기 작업을 실행할 수 있도록한다.

promise
  .then((result) => {
    console.log(result);
    return addNumber(result);
  })
  .then((result) => {
    console.log(result);
    return addNumber(null);
  })
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error);
  });

Promise

function addNumber(num) {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      if (typeof num === "number") {
        resolve(num + 10);
      } else {
        reject("num은 숫자가 아닙니다.");
      }
    }, 3000);
  });
  return promise;
}

const p = addNumber(0);
p.then((result) => {
  console.log(result);
  return addNumber(result);
})
  .then((result) => {
    console.log(result);
    return addNumber(null);
  })
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error);
  });

addNumber(num)

- promise객체를 생성해 반환한다. Promise는 3초뒤 resolve(), reject()반환하는 비동기 작업이다.

- resolve() 는 num 숫자이면 호출되어 num + 10 결과를 반환한다.

- reject()는 num이 숫자가 아닐때 호출되어 오류메시지를 반환한다.

체이닝의 장점

- 가독성

- 순차 처리

- 오류 처리의 일관성

6. 비동기 - async, await

- async, await를 사용해 비동기 코드를 동기 코드 처럼 작성할 수 있고 Promise체이닝보다 더 간결하고 직관적이게 코드를 작성할 수 있다.

6-1. async

- 함수를 비동기 함수로 만들어주는 키워드로 함수가 Promise를 반환하도록 변환해주는 키워드로 함수 앞에 async키워드를 붙여 자동으로 Promise를 반환하게 한다.

async function getDate() {
  return {
    name: "AR",
    id: "arangs",
  };
}
console.log(getDate());

getDate() 함수는 async()로 정의되어 있어 자동으로 Promise를 반환하고 이 결과는 then()으로 처리가 가능한다.

6-2. await

- Promise가 처리될 때까지 기다리는 역할로 await는 async함수 내부에서만 사용이 가능하다.

- await키워드는 Promise가 resolve될 때까지 기다린후 그 결과 값을 반환해 비동기 작업을 수행하고 await키워드를 사용해 동키 코드처럼 결과를 기다렸다가 다음 코드를 실행할 수 있도록 해준다.

async function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        name: "AR",
        id: "arangs",
      });
    }, 1500);
  });
}

async function printData() {
  const data = await getData();
  console.log(data);
}

printData();

async함수는 항상 Promise를 반환하며 함수 내에서 return을 사용해 해당 값이 Promise.resolve()로 감싸져 반환된다.

async함수 내에서는 await키워드를 사용해 비동기 작업을 기다린 후 결과를 처리할 수 있다.

await키워드는 함수 내부에서만 사용할 수 있다. 또, await키워드는 비동기 작업이 완료될때 까지 기다렸다가 결과를 반환한다. await는 Promise객체 앞에서 사용되며 비동기 작업의 완료를 기다린후에 다음 코드를 실행할 수 있다.

JavaScript - Date객체와 날짜(18)

아랑팡팡 — Fri, 23 Aug 2024 01:34:30 +0900

JavaScript - Date객체와 날짜(18)

1. Date객체와 날짜

- Date객체는 날짜와 시간을 다룰 수 있는 도구로 Date객체를 사용하면 현재 날짜와 시간, 특정 날짜와 시간을 생성하거나 날짜간의 차리를 계산하는 등의 작업이 가능하다.

1-1. 기본 생성

let now = new Date();
console.log(now);

1-2. 특정날짜로 생성

- month는 0부터 시작

- year는 4자리 숫자로 지정

- 나머지 매개변수는 생략가능하며 생략시 값은 0이 된다.

let date1 = new Date();
let date2 = new Date("2024/08/22");
let date2 = new Date("2024,08,22,12,00,00");
console.log(date1);
console.log(date2);

2. 타임 스탬프

- 1970년 01월 01일 00시 00분 00초 이후의 밀리초(타임스탬프)를 전달해 Date객체를 생성할 수 있다.

let ts1 = date1.getTime();
console.log(ts1);
let date4 = new Date(ts1);
console.log(date1, date4);

3. Date객체로 부터 시간 요소들을 추출하는 방법

- getMonth()의 경우 객체에서 월을 추출할때 0부터 시작하므로 실제 월을 얻기 위해서 1을 더해준다.

let year = date1.getFullYear();
let month = date1.getMonth() + 1;
let date = date1.getDate();
let hour = date1.getHours();
let minute = date1.getMinutes();
let seconds = date1.getSeconds();

console.log(year, month, date, hour, minute, seconds);

4. Date객체로 부터 시간 수정하기

- date객체에서 날짜와 시간을 변경할때는 set을 사용한다.

date1.setFullYear(2000);
date1.setMonth(2);
date1.setDate(20);
date1.setHours(22);
console.log(date1);

5. 시간 여러 포맷으로 출력하기

- toDateString()은 객체의 날짜를 사람이 읽을 수 있는 문자열 형식으로 반환한다.

- toLocalDateString()은 국가 및 언어 설정에 따라 다르게 반환된다.

console.log(date1.toDateString());
console.log(date1.toLocaleDateString());

JavaScript - 배열 메서드(17)

아랑팡팡 — Thu, 22 Aug 2024 22:29:46 +0900

JavaScript - 배열 메서드(17)

1. 배열

- 여러개의 값을 순서대로 저장할 수 있는 자료구조로 각 값에는 index로 접근할 수 있다.

- 배열의 각 요소는 어떤 타입이든 될수 있다.(숫자, 문자열, 객체 등)

배열의 특징

- 순서가 있는 데이터

- 다양한 자료형

- 가변길이

let arr = [1, 2, 3];
console.log(arr.length);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);

2. 배열 - 요소 조작

push메서드

- 배열의 끝에 요소를 추가한다.

let arr1 = [1, 2, 3];
const newLength = arr1.push(4, 5, 6, 7);

console.log(newLength);
console.log(arr1);

pop메서드

- 배열의 마지막 요소를 제거한다.

- 반환값 : 제거된 요소

let arr2 = [1, 2, 3];
const popedItem = arr2.pop();

console.log(popedItem);
console.log(arr2);

shift

- 배열의 첫번째 요소를 제거한다.

- 반환값 : 제거된 요소

let arr3 = [1, 2, 3];
const shiftedItem = arr1.shift();
console.log(shiftedItem, arr3);

unshift

- 배열의 앞에 요소를 추가한다.

- 반환값 : 배열의 새로운 길이

let arr4 = [1, 2, 3];
const newLength2 = arr4.unshift(0);
console.log(newLength2, arr4);

slice

- 배열의 일부분을 추출해 새로운 배열으로 반환한다.

- 원본의 배열은 변경되지 않는다.

- 반환값 : 추출된 부분이 포함된 새로운 배열

let arr5 = [1, 2, 3, 4, 5];
let sliced = arr5.slice(2, 5);
console.log(sliced);
console.log(arr5);

let sliced2 = arr5.slice(2);
console.log(sliced2);

let sliced3 = arr5.slice(-2);
console.log(sliced3);

concat

- 두개 이상의 배열을 결합해 새로운 배열을 반환한다.

- 반환값 : 결합된 새로운 배열

let arr6 = [1, 2];
let arr7 = [3, 4];
let concatedItem = arr6.concat(arr7);
console.log(concatedItem);

3. 배열 - 순회와 탐색

forEach

- 모든 요소를 순회하면서 각 요소에 특정 동작을 수행시키는 메서드

let arr1 = [1, 2, 3];

arr1.forEach(function (item, idx, arr) {
  console.log(idx, item * 2);
});

includes

- 배열에 특정 요소가 포함되어 있는지 확인하는 메서드

- 반환값 : boolean

let arr2 = [1, 2, 3];
let isInclude = arr2.includes(30);
console.log(isInclude);

indexOf

- 특정 요소의 인덱스(위치)를 찾아서 반환하며 요소가 없다면 -1을 반환한다.

- 반환값 : 첫번째로 일치하는 요소의 인덱스

let arr3 = [2, 2, 20];
let index = arr3.indexOf(20);
console.log(index);

findIndex

- 조건을 만족하는 첫번째 요소의 인덱스를 반환한다. 조건을 만족하는 요소가 없으면 -1을 반환한다.

- 반환값 : 첫번째로 조건을 만족하는 요소의 인덱스

let arr4 = [1, 2, 3];
const findedIndex = arr4.findIndex((item) => {
  if (item % 2 !== 0) return true;
});
console.log(findedIndex);

find

- 조건을 만족하는 첫번째 요소를 반환한다. 조건을 만족하는 요소가 없으면 undefind를 반환한다.

- 반환값 : 첫 번째로 조건을 만족하는 요소

let arr5 = [{ name: "AR" }, { name: "arang" }];
const finded = arr5.find((item) => item.name === "AR");
console.log(finded);

4. 변형

filter

- 기존 배열에서 조건을 만족하는 요소들만 필터링해 새로운 배열로 반환한다.

- 반환값 : 각 요소에 대해 주어진 함수의 반환값으로 이루어진 새로운 배열

let arr1 = [
  { name: "피카츄", type: "전기" },
  { name: "파이리", type: "불" },
  { name: "이상해씨", type: "풀" },
];

const pokemon = arr1.filter((item) => item.type == "전기");
console.log(pokemon);

map

- 배열의 각 요소에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. 원본 배열은 변경되지 않는다.

- 반환값 : 각 요소에 대해 주어진 함수의 반환값으로 이루어진 새로운 배열

let arr2 = [1, 2, 3];
const mapResult1 = arr2.map((item, idx, arr) => {
  return item * 2;
});

let names = arr1.map((items) => items.name);
console.log(names);

sort

- 배열을 사전순으로 정렬하는 메서드

let arr3 = ["a", "c", "b"];
arr3.sort();
console.log(arr3);

오름차순 정렬

let arr3 = [10, 3, 5];
arr3.sort((a, b) => {
  if (a > b) {
    return 1; // b가 a앞에
  } else if (a < b) {
    return -1; // a가 b 앞에
  } else {
    return 0; // 자리 유지
  }
});
console.log(arr3);

내림차순 정렬

let arr3 = [10, 3, 5];
arr3.sort((a, b) => {
  if (a > b) {
    return -1; // b가 a앞에
  } else if (a < b) {
    return 1; // a가 b 앞에
  } else {
    return 0; // 자리 유지
  }
});
console.log(arr3);

toSorted

- 정렬된 새로운 배열을 반환하는 메서드

- sort와 동일하게 배열을 사전순을 정렬하지만 정렬된 새로운 배열을 반환하는 메서드

let arr5 = ["c", "a", "b"];
const sorted = arr5.toSorted();

console.log(arr5);
console.log(sorted);

join

- 배열의 모든 요소를 문자열로 결합한다.

- 반환값 : 결합된 문자열

let arr5 = ["c", "a", "b"];
const sorted = arr5.toSorted();

console.log(arr5);
console.log(sorted);

let arr6 = ["hello", "jini", "woo"];
const joined = arr6.join(" ");
console.log(joined);

JavaScript - 원시타입과 객체타입(16)

아랑팡팡 — Thu, 22 Aug 2024 12:47:39 +0900

JavaScript - 원시타입과 객체타입(16)

1. 원시타입(Primitive Type)과 객체타입(Object Type)

자료형

원시타입 : Number, String, Boolean, Null, Undefind

객체타입 : Object(Array, Function, RegexExp)

- JavaScript에서 값은 두가지로 나뉘며 두 타입은 메모리에서 값이 어떻게 저장되고 처리되는지에 차이가 있다.

2. 원시타입(Primitive Type)

- 원시타입은 변경할 수 없는 값을 나타내며, 메모리에 직접 저장되어 값 자체로써 변수에 저장되고 복사된다.

- 불변값으로 메모리 값 수정이 불가능

let a = 10;
let b = a;
b = 20;
console.log(a);
console.log(b);

3. 객체타입(Object Type)

- 참조 방식으로 저장되어 참조값을 통해서 변수에 저장되고 복사된다.

- 가변값으로 메모리 값 수정 가능

let obj1 = { name: "AR" };
console.log(obj1.name);
let obj2 = obj1;
obj2.name = "Arang";
console.log(obj1.name);
console.log(obj2.name);

- obj1과 obj2는 같은 객체를 참조하고 있기 때문에 obj2의 속성을 변경하면 obj1의 속성도 변경된다.

얕은 복사

- 객체의 참조값을 복사한다.

- 원복 객체가 수정될 수 있어 위험하다.

let o1 = {name: "AR"}
let o2 = 01;

깊은 복사

- 새로운 객체를 생성하면서 프로퍼티만 따로 복사한다.

- 원본 객체가 수정될 일이 없어 안전하다.

let o1 = {name: "AR"}
let 02 = {...o1};

JavaScript - Spread연산자와 Rest매개변수 (15)

아랑팡팡 — Tue, 20 Aug 2024 19:11:04 +0900

Spread연산자와 Rest매개변수

1. JavaScript - Spread연산자와 Rest매개변수란

- 문법적으로 동일한 ...을 사용하지만 목적과 용도가 다르다.

2. Spread연산자

- 배열이나 객체의 요소들을 개별적으로 펼쳐서 다른 배열이나 객체에 복사하거나 함수의 인수로 전달할 때 사용된다.

let arr1 = [1, 2, 3];
let arr2 = [4, ...arr1, 5, 6];
console.log(arr2);

...arr1는 arr1배열의 요소들인 [1, 2, 3]을 개별 요소로 펼친다.

배열 arr2의 다른 요소들과 결합되어 [4, 1, 2, 3, 5, 6]이라는 새로운 배열이 생성된다.

let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3, c: 4 };
console.log(obj2);

...obj1객체의 속성들을 펼쳐서 새로운 객체 obj2에 복사한다.

최종적으로 { a: 1, b: 2, c: 4} 객체가 출력된다.

function funcA(p1, p2, p3) {
  console.log(p1, p2, p3);
}

funcA(...arr1);

...arr1의 요소들인 [1, 2, 3,]을 개별 인수로 펼쳐서 함수 funcA에 전달한다.

한수 funcA는 p1 = 1, p2 = 2, p3 =3 인수로 받게되고 결과적으로 1 2 3이 출력된다.

3. Rest 매개변수

- Rest 매개변수는 함수 정의에서 사용되는 문법으로 함수가 전달받은 나머지 인수들을 하나의 배열로 모아주는 역할을 한다. 나머지, 나머지 매개변수

function funcB(one, ...rest) {
  console.log(rest);
}
funcB(...arr1);

funcB 함수는 one을 받고 나머지 인수들은 rest라는 배열로 모으게 되는데 one에 첫번째 인수가 할당되면 그외 나머지 인수들은 모두 rest배열에 담긴다.

funcB(...arr1)

- arr1 배열의 값이 [1, 2, 3]일때 funcB(one에 1을 할당하고 나머지 2, 3을 rest배열로 받게된다.

JavaScript - 구조분해할당(Destructuring Assignment) (14)

아랑팡팡 — Tue, 20 Aug 2024 17:59:41 +0900

JavaScript - 구조분해할당(Destructuring Assignment)

1. 구조분해할당(Destructuring Assignment)란?

- 배열이나 객체 등 복합적인 데이터 구조에서 개별 요소를 추출해 변수에 쉽게 할당하는 방법이다.

let ary = [1, 2, 3];

let [one, two, three, four = 4] = ary;
console.log(one, two, three);
console.log(one, two);
console.log(one, two, three, four);

- 구조분해할당을 사용해 배열의 각 요소를 개별 변수로 추출할 수 있다.

- 배열에 없는 네 번쨰 요소는 기본값인 4가 할당되고 기본값이 설정되지 않은 요소는 undefined가 추출된다.

2. 객체의 구조분해할당

- 객체의 속성이름과 다른 변수이름으로 할당할 수 있다.

let person = {
  name: "AR",
  age: 22,
  hobby: "운동",
};

let { age: myAge, hobby, name, talk = "hello" } = person;
console.log(name, myAge, hobby, talk);

- age: myAge는 person객체의 age속성값을 myAge변수에 할당한다.

- talk속성은 person객체에 없기 때문에 기본값인 hello가 할당된다.

3. 객체 구조 분해 할당을 이용한 함수의 매개변수를 받는 방법

let person = {
  name: "AR",
  age: 22,
  hobby: "운동",
};

let { age: myAge, hobby, talk = "hello" } = person;

const func = ({ name, age: myAge, hobby, talk = "hi" }) => {
  console.log(name, myAge, hobby, talk);
};

func(person);

구조분해할당 후 함수 호출

- func(person) 호출시 person객체에서 구조분해 할당으로 필요한 속성을 추출한뒤 name, age, hobby, talk 값을 콘솔에 출력한다.

JavaScript - 단락평가(Short-circuit Evaluation) (13)

아랑팡팡 — Tue, 20 Aug 2024 11:28:16 +0900

단락평가(Short-circuit Evaluation)

1. 단락평가(Short-circuit Evaluation)란

- 논리연산자 &&, || 가 평가 도중에 불필요한 연산을 생락하는 것으로 성능을 최적화하고 코드를 간결하게 작성하는데 유용하다.

- 논지연산자가 좌항의 값만으로 결과를 결정할 수 있을 경우 우항의 표현식은 평가하지 않고 결과를 반환하는 것을 의미한다.

let varA = false;
let varB = true;

console.log(varA && varB);
console.log(varA || varB);

varA && varB
- varA가 false이기 때문에 varB는 평가되지 않고 결과는 false가 된다.
varA || varB
- varA가 false이기 때문에 varB가 평가되고 결과는 true가 된다.
&&(AND) 연산자는 좌항이 Falsy 값일 경우, 우항을 평가하지 않고 바로 좌항의 값을 반환합니다. 좌항이 Truthy 값일 경우, 우항을 평가하여 그 결과를 반환합니다.
||(OR) 연산자는 좌항이 Truthy 값일 경우, 우항을 평가하지 않고 바로 좌항의 값을 반환합니다. 좌항이 Falsy 값일 경우, 우항을 평가하여 그 결과를 반환합니다.

2. || (OR) 연산자의 단락 평가

function returnFalse() {
  console.log("False함수");
  return false;
}

function returnTrue() {
  console.log("True함수");
  return true;
}

console.log(returnFalse() && returnTrue());

- returnFalse 함수가 먼저 호출되어 False함수 메시지를 출력후 false를 반환한다.

- 좌항이 Falsy값이기 때문에 우항을 평가하지 않아 returnTrue()함수는 호출되지 않는다.

console.log(returnTrue() && returnFalse());

- returnTrue 함수가 먼저 호출되어 True함수 메시지를 출력한 후 true를 반환한다.

- && 연산자는 좌항이 Truthy값일 경우 우항을 평가해 returnFasle() 함수도 호출된다.

function returnFalse() {
  console.log("False함수");
  return undefined;
}

function returnTrue() {
  console.log("True함수");
  return 100;
}

console.log(returnTrue() || returnFalse());

returnFalse()

- False함수 메시지를 출력하고 undefined를 반환한다.

returnTrue()

- True함수 메시지를 출력하고 100을 반환한다.

returnTrue()함수가 먼저 호출되고 True함수 메시지를 출력한후 100을 반환하는데 좌항이 Truthy값이라면 우항을 평가하지 않는다. 100은 Truthy값으로 returnFalse함수는 호출되지 않는다.

3. 단락평가 예제

function printUserName(person) {
  const name = person && person.name;
  console.log(name || "person의 값이 없습니다.");
}

printUserName();
printUserName({ name: "AR" });

person && person.name

- persion이 전달되었을 때만 persion.name을 사용한다.

- name이 없다면 person의 값이 없습니다. 라는 기본 메시지를 출력하게된다.

printUserName();

- person을 전달하지 않아 undefined가 된다.

&&연산자

- person && person.name 에서 person이 존재하면 person.name의 값을 그렇지 않을 경우 undefined로 처리된다.

||연산자

- console.log(name || "person의 값이 없습니다."); 에서 name이 없다면 메지시를 출력하게된다.

JavaScript - Truthy와 Falsy (12)

아랑팡팡 — Thu, 15 Aug 2024 18:46:47 +0900

JavaScript - Truthy와 Falsy (12)

1. Truthy & Falsy란

- JavaScript에서 값이 Boolean일때 어떻게 평가되는지 나타내며 참이나 거짓을 의미하지 않는 값이라도 조건문 내에서 참이나 거짓으로 평가하는 특징

2. Falsy한 값

- Falsy값은 불리언 문맥에서 false로 평가되는 값으로 if조건문이나 논리 연산에서 false처럼 동작한다.

false	boolean	""	빈 문자열
0	숫자 0	null	값이 없음
-0	음수	undefined	정의되지 않음
0n	Bigint 0	NaN	Not-a-Number

// 1. Falsy한 값
let f1 = undefined;
let f2 = null;
let f3 = 0;
let f4 = -0;
let f5 = NaN;
let f6 = "";
let f7 = 0n;

if (!f1) {
  console.log("falsy");
}

if (!f2) {
  console.log("falsy");
}

if (!f3) {
  console.log("falsy");
}

if (!f4) {
  console.log("falsy");
}

if (!f5) {
  console.log("falsy");
}

if (!f6) {
  console.log("falsy");
}

if (!f7) {
  console.log("falsy");
}

3. Truthy

- 7가지 Falsy한 값들을 제외한 나머지 모든 값

true	boolean	객체	모든 객체(배열 포함)
number	0이 아닌 모든 숫자	함수	모든 함수
string	빈 문자열이 아닌 모든 문자열	Bigint	0n 이 아닌 모든 Bigint

let t1 = "hello";
let t2 = "123";
let t3 = [];
let t4 = {};
let t5 = () => {};

if (t5) {
  console.log("Truthy");
}

4. Falsy한 값을 활용해 기본값을 설정하고 사용자 입력이 없을 경우 기본값을 출력하는 코드

function getUserName(person) {
  if (!person) {
    console.log("person의 값이 없습니다.");
    return;
  }
  console.log(person.name);
}

let person = { name: "AR" };
getUserName(person);
getUserName("");
getUserName();

getUserName(person)

- person이 Falsy인지 확인한다.

- person값이 undefined, null, 빈문자열, "", 0, NaN, false 같은 Falsy한 값이라면 설정된 값을 출력하고 함수를 종료한다.

초파 로봇 1, 2, 3, 4, 5호 (36)

아랑팡팡 — Tue, 30 Jul 2024 13:04:18 +0900

초파 로봇 1, 2, 3, 4, 5호 (36)

초파 로봇 1, 2, 3, 4, 5호

조립시간 : 약 1시간
가격 : 1, 2, 3, 4, 5호 9,600원 * 5

1. 초파 로봇 1호 쵸파 탱크

2. 초파 로봇 2호 쵸파 윙

3. 초파 로봇 3호 쵸파 잠수함

4. 초파 로봇 4호

5. 초파 로봇 5호 쵸파 드릴

쵸파 로봇 완성

JavaScript - 배열 (11)

아랑팡팡 — Sun, 30 Jun 2024 16:20:32 +0900

JavaScript - 배열 (11)

1. 배열

- 여러개의 값을 순차적으로 담을 수 있는 자료형으로 배열의 각 요소는 index로 식별된다.

- index는 0에서 부터 시작하고 값의 리스트를 저장하고 조작하거나 접근하는데 유용하다.

2. 배열의 생성

// 1. 배열 생성
let arr1 = new Array(); // 배열 생성자
let arr2 = [];

let arr3 = [1, 2, 3, true, "Hi", null, undefined, () => {}, {}, []];
console.log(arr3);

배열 생성자(Array Constructor) : new Array() 구문으로 배열을 생성할 수 있다.

배열 리터럴(Array Literal) : [ ] 를 사용해 배열을 생성할 수 있다.

배열은 number, string, null, undefined등 다양한 데이터 타입을 포함시킬 수 있다.

3. 배열 요소 접근

- 배열 요소는 인덱스를 사용해 접근할 수 있고 인덱스는 0에서 부터 시작한다.

let item1 = arr3[0];
let item2 = arr3[1];

arr3[0] = "Hello"; // 수정
console.log(item1, item2);
console.log(arr3);

4. 객체(Object)와 배열(Array)의 차이

객체(Object)
- key - value 로 구성된 비순차적 데이터 구조
- 속성- 값 쌍을 표현하는데 사용된다.
- 동적으로 프로퍼티를 추가, 수정, 삭제 할 수 있다.
- 키는 문자열과 심볼
- 값은 어떤 데이터 타입도 가능하다.
배열(Array)
- index - value 쌍으로 구성도니 순차적인 데이터 구조
- 주로 순서가 있는 리스트를 표현하는데 사용
- 배열 메서드를 통해서 요소를 추가, 삭제, 수정할 수 있다.
- 값은 어떤 데이터 타입도 가능하지만 동일한 타입의 데이터를 저장한다.

JavaScript - 객체 (10)

아랑팡팡 — Sun, 30 Jun 2024 16:07:59 +0900

JavaScript - 객체 (10)

1. 객체(Object)

- 원시 타입이 아닌 객체 타입의 자료형으로 여러가지 값을 동시에 저장할 수 있는 자료형을 의미한다.

자료형(DataType)

원시자료형(Primitive Data Types)

- Number, String, Boolean, null, undefined, Symbol

객체타입(Object Data Types)

- Object, Array, Function, Date, Map, Set

2. 객체생성

- 객체는 key - value쌍의 컬렉션으로 키는 문자열 또는 심볼, 값은 어떠한 데이터 타입도 올 수 있다.

let obj1 = new Object(); // 객체 생성자
let obj2 = {}; // 객체 리터럴

3. 객체 속성

let person = {
  name: "arang",
  age: 29,
  hobby: "보드",
};

4. 객체 속성을 다루는 방법

4-1. 점표기법, 괄호 표기법

let name = person.name;
console.log(name);

let age = person["age"];
console.log(age);

let property = "hobby";
let hobby = person[property];
console.log(hobby);

4-2. 프로퍼티를 추가하는 방법

person.job = "developer";
person["faveriteFood"] = "치킨";
console.log(person);

4-3. 프로퍼티를 수정하는 방법

person.job = "educator";
person["faveriteFood"] = "초콜릿";
console.log(person);

4-4. 프로퍼티를 삭제하는 방법

delete person.job;
console.log(person);

4-5. 프로퍼티의 존재 유무를 확인하는 방법(in 연산자)

let result1 = "name" in person;
console.log(result1);
let result2 = "job" in person;
console.log(result2);

5. 상수(Constant Object)

- const키워드로 선언된 객체의 속성은 자유롭게 추가, 수정, 삭제할 수 있다.

// 5. 상수객체
const animal = {
  type: "강아지",
  name: "리트리버",
  color: "black",
};

animal.age = 9; // 추가
animal.name = "골든리트리버"; // 수정
delete animal.color; // 삭제
console.log(animal);

6. 메서드

- 객체의 프로퍼티 값으로 저장된 함수로 특정 작업을 수행한다.

- 메서드는 점 표기법, 대괄호 표기법을 사용해서 호출할 수 있다.

// 6. 메서드
// 값이 함수인 프로퍼티

const person = {
  name: "arang",
  // 메서드 선언
  sayHello() {
    console.log("안녕하세요.");
  },
};

person.sayHello();
person["sayHello"]();

JavaScript - 스코프 (9)

아랑팡팡 — Sun, 30 Jun 2024 16:07:49 +0900

JavaScript - 스코프 (9)

스코프(Scope)

- 범위를 뜻하며 변수나 함수에 접근하거나 호출할 수 있는 범위를 말한다.

- 전역 스코프(Global Scope) 와 지역 스코프(Local Scope)로 나눌 수 있다.

1. 전역스코프(Global Scope)

- 전역 스코프는 어디에서나 전체 영역에서 접근 가능한 범위로 함수나 블록 밖에서 선언된다.

let a = 1; // 전역 스코프

2. 지역 스코프(Local Scope)

- 지역 스코프는 특정 영역에서만 접근 가능한 범위로 함수 안에서 선언된 변수는 함수 외부에서 접근할 수 없다.

function funcA() {
  let b = 2;
  console.log(a); // 지역 스코프

  function funcB() {}
}

funcA();
funcB();
console.log(b);

if (true) {
  let c = 1;
}

console.log(c);

function funcA()함수는 전역 스코프에 선언되어 전체 코드에서 호출 가능하다.

let b = 2; 변수 b는 funcA함수의 지역 스코프에 선언되어 funcA함수 내부에서만 접근이 가능한다.

function funcB()함수는 funcA함수내의 지역 스코프에 선언되어 있기 때문에 funcA 함수 내부에서만 접근이 가능하다.

JavaScript - 콜백함수 (8)

아랑팡팡 — Sun, 30 Jun 2024 16:07:36 +0900

JavaScript - 콜백함수 (8)

콜백함수

- 자신이 아닌 다른 함수의 인수로 전달되어 실행되는 함수를 의미하며 해당 함수 내부에서 호출되는 함수로 주로 비동기 작업(이벤트처리, 타이머, 네트워크 요청 등)과 배열에서 자주 사용된다.

function main(value){

}

function sub(){
	console.log("sub");
}

콜백함수의 활용

function repeat(count, callback) {
  for (let idx = 1; idx <= count; idx++) {
    callback(idx);
  }
}

repeat(5, (idx) => {
  console.log(idx);
});

repeat(5, (idx) => {
  console.log(idx * 2);
});

repeat(5, (idx) => {
  console.log(idx * 3);
});

repeat함수는 count, callback 두개의 매개변수를 받는다.

repeat는 for로 1부터 전달받은 count까지 반복한다.

각 반복에 callback함수를 호출해 현재 인덱스에 idx를 인수로 전달해 출력한다.

JavaScript - 함수표현식과 화살표함수 (7)

아랑팡팡 — Thu, 27 Jun 2024 12:03:30 +0900

JavaScript - 함수표현식과 화살표함수 (7)

1. 함수표현식

- 함수 표현식은 함수 선언과 다르게 함수의 이름을 생략하고 변수에 익명함수를 할당하는 방식이다.

// 1. 함수표현식
function funcA() {
  console.log("funcA");
}

let varA = funcA;
varA();

2. 익명함수

- 이름이 없는 함수로 주로 함수 표현식에서 사용된다.

let varB = function(){
	console.log("funcB");
}

3. 화살표 함수 (Arrow Function)

- 화살표 함수는 ES6에서 도입된 간결한 함수 표현식으로 일반 함수표현식보다 짥은 문법을 제공한다.

// 2. 화살표 함수
let varC = (value) => value + 1;

console.log(varC(10));

(value) => value + 1 : value를 매개변수로 받아 1을 더한 값을 반환하는 화살표 함수

let varC = (value) => value + 1 : 화살표 함수를 varC변수에 할당한다.

console.log(varC(10)) : varC함수를 호출해 결과를 출력한다.

let varD = (value) => {
  console.log(value);
  return value + 1;
};

console.log(varC(10));

(value) => { .. } : 여러 줄의 코드가 필요한 경우 중괄호 {} 를 사용해 블록 바디를 정의한다.

return value + 1 : value에 1을 더한 값을 반환한다.

console.log(varD(10)); : varD함수를 호출해 결과를 출력한다.

JavaScript - 함수 (6)

아랑팡팡 — Thu, 27 Jun 2024 11:56:56 +0900

JavaScript - 함수 (6)

함수

- 함수는 특정 작업을 수행하는 코드 블록으로 함수를 사용하면 코드의 재사용성을 높이고 가독성을 향상시킬 수 있다.

1. 함수 호출

// 함수선언
function greeting() {
  console.log("안녕하세요");
}

console.log("함수 호출 전");
greeting();
console.log("함수 호출 후");

2. 직사각형의 넓이를 구하는 함수

- 매개변수와 반환값

function getArea(width, height) {// 매개변수
  function hello() { // 중첩함수
    console.log("함수호출");
  }

  hello();
  let area = width * height;

  return area; // 반환값
}

let area1 = getArea(10, 20); // 인수
console.log(area1);

let area2 = getArea(20, 20); // 인수
console.log(area2);

let area3 = getArea(100, 20); // 인수
console.log(area3);

3. 호이스팅

- 함수선언은 코드의 맨 위로 끌어올려져 함수 호출이 선언보다 먼저 있어도 동작하는데 문제가 없다.

console.log("함수 호출 전");
greeting();

// 함수선언
function greeting() {
  console.log("안녕하세요");
}

console.log("함수 호출 후");

JavaScript - 반복문 (5)

아랑팡팡 — Thu, 27 Jun 2024 11:56:42 +0900

JavaScript - 반복문 (5)

반복문(Loop, Iteration)

- 어떠한 동작을 반복해서 수행할 수 있도록 만들어주는 문법으로 조건이 참일때 코드를 반복적으로 실행한다.

1. for

- 반복 횟수가 명확할 때 주로 사용된다.

// 1. 반복문
for (let idx = 1; idx <= 5; idx++) {
  if (idx % 2 === 0) {
    continue;
  }
  console.log(idx);

  if (idx >= 5) {
    break;
  }
}

2. while

- 주어진 조건이 참인 동안 코드를 반복해서 실행한다. 조건이 거짓이 될경우 반복을 종료한다.

// 2. while
let i = 1;
while (i <= 5) {
  console.log(i);
  i++;
}

let i = 1 : 초기화

while(i <= 5) : i가 5보다 작은 동안 반복을 수행

i++ : 반복이 끝날 때마다 i를 1씩 증가

3. do while

- 조건이 거짓이더라도 코드 블록은 최소 한번이상 실행된다.

let j = 1;
do {
  console.log(j);
  j++;
} while (j <= 3);

do while(i <= 3) : do 코드를 먼저 실행하고 while조건이 참인 동안 반복을 실행한다.

JavaScript - 조건문 (4)

아랑팡팡 — Thu, 27 Jun 2024 11:55:13 +0900

JavaScript - 조건문 (4)

조건문

- 특정 조건을 만족했을 때 실행되는 코드를 작성하기 위한 문법으로 if, switch 조건문이 대표적이다.

1. if

- if 조건문은 주어진 조건이 참일때 특정코드를 실행하며 else if, else 를 사용해 여러 조건을 처리할 수 있다.

// 1. if 조건문
let num = 1;

if(num >= 10){
    console.log("num은 10 이상입니다.");
}
else{
    console.log("num은 10 이하입니다.");
}

// 1. if 조건문
let num = 6;

if(num >= 10){
    console.log("num은 10 이상입니다.");
}else if(num >= 5){
    console.log("num은 5이상입니다.");
}else{
    console.log("조건이 거짓입니다.");
}

- num이 10 이상인 경우 "num은 10 이상입니다."

- num이 10이하인 경우 "num은 10 이하입니다."

- else if num이 5이상인 경우 "num은 5이상입니다."

- else 앞의 모든 조건이 거짓인 경우 "조건이 거짓입니다."

2. switch 문

- 변수의 값에 따라 여러 코드중 하나를 실행할수 있으며 case블록과 default블록을 사용한다.

- if문과 기능은 동일하지만 다수의 조건을 처리할 때 if보다 더 직관적이다.

// 2. switch문
let animal = "dog";
switch (animal) {
  case "dog": {
    console.log("강아지");
    break;
  }
  case "cat": {
    console.log("고양이");
    break;
  }
  case "bear": {
    console.log("곰");
    break;
  }
  case "snake": {
    console.log("뱀");
    break;
  }
  case "tiger": {
    console.log("호랑이");
    break;
  }
  default: {
    console.log("잘못된 값입니다.");
  }
}

JavaScript - 연산자 (3)

아랑팡팡 — Thu, 27 Jun 2024 11:54:53 +0900

JavaScript - 연산자 (3)

연산자(Operator)

- 프로그래밍에서 다양한 연산을 위한 기호, 키워드(+, -, * , /, %)

1. 대입연산자

- 변수에 값을 할당하는데 사용된다.

// 1. 대입연산자
let var1 = 1;

2. 산술연산자

- 숫자간의 산술 연산을 수행

let num1 = 5 + 2;
let num2 = 5 + 2;
// * / % 는 + - 보다 우선순위가 높다.
let num3 = 5 * 2;
let num4 = 5 / 2;
let num5 = 5 % 2;
let num6 = 5 + 2 * 10;
console.log(num6);

3. 복합대입연산자

- 연산과 할당을 동시에 수행

// 3. 복합 대입 연산자
let num7 = 10;
num7 += 20;
num7 -= 20;
num7 *= 20;
num7 /= 20;
num7 %= 20;
console.log(num7);

4. 증감 연산자

- 변수의 값을 1씩 증가 또는 감소시킨다.

let num8 = 10;
num8++; // 후위연산: 해당 라인이 끝난 후 1 증가
++num8; // 전위연산: 바로 1 증가
--num8;
num8--;
console.log(num8);

5. 논리 연산자

- 논리적인 연산을 수행

let and = true && false;
let or = true || false;
let not = !true;
console.log(and, or, not);

6. 비교 연산자

- 두값을 비교해 해당 결과를 불리언 값으로 변환

let comp1 = 1 === '2';
let comp2 = 1 !== 2;
console.log(comp1, comp2);

let comp3 = 2 > 1;
let comp4 = 2 < 1;
console.log(comp3, comp4);

let comp5 = 2 >= 2;
let comp6 = 2 <= 2;
console.log(comp5, comp6);

7. null병합 연산자

- 존재하는 값을 추려내는 기능으로 null, nudefined가 아닌 값을 찾아내는 연산자

let var1; // undefind
let var2 = 10;
let var3 = 20;

let var4 = var1 ?? var2;
let var5 = var1 ?? var3;
let var6 = var3 ?? var2;
console.log(var4);
console.log(var5);
console.log(var6);

let userName = "arang";
let userNickName = "AR";

let display = userName ?? userNickName;
console.log(display);

8. typeof연산자

- 값의 타입을 문자열로 반환하는 기능을 하는 연산자

// typeof 연산자
// 값의 타입을 문자열로 반환하는 기능을 하는 연산자
let var7 = 1;
let t1 = typeof var7;
console.log(t1); // number

let var8 = "hello";
let t2 = typeof var8;
console.log(t2); // string

let var9 = true;
let t3 = typeof var9;
console.log(t3); // boolean

9. 삼항 연산자

- 항을 3개 사용하는 연산자로 조건식을 이용해서 참 혹은 거짓일 때의 값을 다르게 반환한다.

// 삼항 연산자
// 항을 3개 사용하는 연산자로 조건식을 이용해서 참 혹은 거짓일 때의 값을 다르게 반환한다.
let var10 = 10;
let res = var10 % 2 == 0 ? "짝수" : "홀수";
console.log(res);

JavaScript - 형변환 (2)

아랑팡팡 — Thu, 27 Jun 2024 11:54:40 +0900

JavaScript - 형변환 (2)

1. 형 변환(Type Casting)

- 어떤 값의 타입을 다른 타입으로 변경하는 과정으로 형변환은 묵지적 형변환과 명시적 형변환이 있다.

묵시적 형 변환(암묵적 형변환)

- 개발자가 직접 설정하지 않아도 자바스크립트 엔진이 형변환을 하는것

// 1. 묵시적 형 변환
// 자바스크립트 엔진이 형 변환을 하는것
let num = 10;
let str = "20";

const result = num + str;
console.log(result);

명시적 형 변환

- 개발자가 직접 함수 등을 이용해서 형 변환을 한다.

// 2. 명시적 형 변환
// 개발자가 내장함수 등을 사용해 직접 형 변환을 명시한다.
let str1 = "10";
let strNum = Number(str1);
console.log(10 + strNum);

let str2 = "10개";
let strNum2 = parseInt(str2);
console.log(strNum2);

// 숫자 -> 문자열
let num1 = 20;
let numStr1 = String(num1);
console.log(numStr1 + "입니다.");

JavaScript - 자료형Type (1)

아랑팡팡 — Thu, 27 Jun 2024 11:54:10 +0900

JavaScript - 자료형Type (1)

1. 원시 타입(Primitive Types)

숫자형(Number)

- 정수 및 실수 형태의 숫자를 포함한다.

// 원시타입(Primitive Types)
// 1. Number Type
let num1 = 30;
let num2 = 3.5;
let num3 = -20;

console.log(num1 + num2);
console.log(num1 - num2);
console.log(num1 * num2);
console.log(num1 / num2);
console.log(num1 % num2);

문자형(String)

- 텍스트 데이터를 포함하며 '', "", ``으로 감싸서 표현한다.

let name = "arang";
let age = '29';

// 템플릿 리터럴
let intro = `저의 이름은 ${name}이고 나이는 ${age}입니다.`;
console.log(intro);

불리언형(Boolean)

- 참 또는 거짓 값을 가진다.

// 원시타입(Primitive Types)
// 3. Boolean Type
let isOn = true;
let isOff = false;

undefind

- 값이 할당되지 않은 변수의 기본이 되는 값

// 원시타입(Primitive Types)
// 5. undefined
let none;
console.log(none);

null

- 의도적으로 값이 없다는것을 나타내는 값

// 원시타입(Primitive Types)
// 4. Null
let empty = null;

JavaScript - 변수와 상수 (0)

아랑팡팡 — Thu, 27 Jun 2024 11:53:24 +0900

JavaScript - 변수와 상수 (0)

1. 변수 var, let

let 동일한 변수 이름은 다시 선언할 수 없다.

// 1. 변수 let
let age = 29;
console.log(age);

age = 30;
console.log(age);

var 동일한 변수 이름을 다시 선언할 수 있다.

// 2. 변수 var
var name = "Arang";
console.log(name);

var name = "AR";
console.log(name);

2. 상수 const

- 상수는 선언과 동시에 초기화를 해줘야한다.

// 3. 상수
const number = 3;
number = 5;

3. 변수 네이밍 규칙

1. camelCase

- 변수명은 소문자로 시작하고 단어의 첫글자는 대문자로 사용한다.

- 의미 있는 변수명 사용

let userNamel
let currentAge;

- 숫자로 시작하지 않는다.

let 1num;
let num1;

- 특수문자 _, $ 를 제외한 특수문자를 사용하지 않는다.

let _Value;
let $Value;

Flutter 기초 - Theme (25)

아랑팡팡 — Fri, 24 May 2024 16:37:24 +0900

Flutter 기초 - Theme (25)

1. Theme

- 테마를 사용해 App전체에 일관된 시각적 스타일을 적용하여 사용자경험 UX를 향상시킬 수 있다.

2. ThemeData

- MaterialApp의 theme속성에서 제공되고 앱 전체에서 공통 스타일을 적용한다.

void main(){
  MaterialApp(
    theme: ThemeData(
      primary: Colors.indigo,
      secondary: Colors.green,
      teriary: Colors.yellow
    ),
  );
}

primaryColor	앱의 기본색상으로 툴바, 탭바 등
accentColor	버튼, 액션 버튼, 체크박스 등 사용자와 상호작용하는 요소에서 사용되는 색상
brightness	앱의 전체적인 밝기를 설정한다.
textTheme	앱 내 텍스트의 스타일을 정의하고 글꼴 크기, 색상, 글꼴 등을 조정할 수 있다.

3. 테마 적용 방법

Container(
	color: Theme.of(context).accentColor,
    chiled: Text(
    	'Welcome to Flutter',
        style: Theme.of(context).textTheme.headline6,
    ),
)

4. Material Design 3

https://m3.material.io/styles/color/system/overview

Color – Material Design 3

Create accessible, personal color schemes communicating your product's hierarchy, state, and brand

m3.material.io

final customTheme = ThemeData(
  colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
  textTheme: const TextTheme(
    bodyLarge: TextStyle(fontWeight: FontWeight.normal, fontSize: 10)
  ),
  useMaterial3: true,
);

ColorScheme.fromSeed

- ColorScheme.fromSeed는 seedColor를 기반으로 전체 색상 스키마를 생성한다. Colors.indigo 색을 기반으로 관련된 색생을 생성해 버튼, 배경, 텍스트 등 요소에 사용한다.

TextTheme

- textTheme 은 앱 내의 텍스트 스타일을 정의한다. bodyLarge는 기본 텍스트 타일로 크기와 굵기를 설정한다.

UserMaterial3: true

- 애플리케이션에서 MaterialDesign3 디자인을 사용하도록 설정해 스타일과 컴포넌트를 활성화시킨다.

Flutter 기초 - 페이지이동2 (24)

아랑팡팡 — Fri, 24 May 2024 16:37:08 +0900

Flutter 기초 - 페이지이동2 (24)

1. 페이지 이동 및 네비게이션

- Navigator Widget을 사용해 Navigator 앱 내에서 페이지 간의 이동을 관리한다.

Navigator.push	새로운 화면을 현재의 네비게이션 스택에 푸쉬한다.
Navigator.pop	스택의 가장 위에 있는 라우트를 제거하여 이전 페이지로 돌아간다.

2. MaterialPageRoute

- 디자인의 페이지 전환 애니메이션을 제공하는 라우트로 페이지 이동 시 표준적인 머티어리얼 디자인 애니메이션을 제공한다.

3. 새로운 페이지로 이동

Navigator.push(
	context,
    MaterialPageRoute(builder: (context) => const NewPage()),
);

4. 이전 페이지로 이동

Navigator.pop(context);

5. Navigotor.popUntil

Navigator.popUntil(context, (route) => route.isFirst);

6. 네비게이션, 라우트

MaterialApp(
	routes: {
    	'/': (context) => HomeScreen(),
        '/second': (context) => SecondScreen(),
    },
);

1. HomeWidget

class HomeWidget extends StatefulWidget {
  const HomeWidget({super.key});

  @override
  State<HomeWidget> createState() => _HomeWidgetState();
}

class _HomeWidgetState extends State<HomeWidget> {
  late int index;

  @override
  void initState() {
    super.initState();
    index = 0;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('App Bar'),
      ),
      body: Center(
        child: TextButton(
          child: const Text('Go to Page'),
          onPressed: () {
            Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => const NewPage())
            );
          },
        ),
      ),
    );
  }
}

HomeWidget은 기본 화면을 설정하고 사용자가 'Go to Page'를 클릭하면 NewPage로 이동한다.

- Navigator.push(context, MaterialPageRoute(builder: (context) => const NewPage())는 새로운 페이지로 이동할 때 사용되고 현재의 컨텍스트와 새로운 페이지 위젯을 MaterialPageRoute 생성자에 전달하여 호출된다.

2. NewPage

class NewPage extends StatelessWidget {
  const NewPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('This is New Page'),
      ),
      body: Center(
        child: Column(
          children: [
            TextButton(
              child: const Text('Go to Back'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
            TextButton(
              child: const Text('Go to New Page2'),
              onPressed: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => const NewPage2()));
              },
            ),
          ],
        ),
      ),
    );
  }
}

NewPage에서 사용자가 'Go to Back'벝ㄴ을 클릭하면 Navigator.pop(context)메소드를 사용해서 현재 페이지를 네비게이터 스택에서 제거한다.

'Go to New Page2'를 클릭하면 Navigator.push(context, MaterialPageRoute(builder: (context) => const NewPage2로 이동한다.

3. NewPage2

class NewPage2 extends StatelessWidget {
  const NewPage2({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('This is New Page2'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: [
            TextButton(
              child: const Text('Go to Back'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
            TextButton(
                child: const Text('Go to Home'),
                onPressed: () {
                  Navigator.popUntil(context, (route)=> route.isFirst);
    })
    ],
        ),
      ),
    );
  }

NewPage2에서 'Go to Back' 버튼을 사용해 바로 이전의 페이지로 돌아간다.

'Go to Home' 버튼은 Navigator.popUtil(context, (route) => route.isFirst)로 모든 중간 페이지를 건너뛰고 처음 페이지로 돌아간다.

Flutter 기초 - Callback (22)

아랑팡팡 — Thu, 23 May 2024 20:35:37 +0900

Flutter 기초 - Callback (22)

1. Callback

- 함수나 메서드를 다른 함수나 메서드의 인자로 전달하는 기법으로 특정 이벤트나 조건이 만족되었을때 지정한 코드를 실행할 수 있다.

2. Gesture

- 사용자의 터치입력으로 GestureDetector 위젯을 사용해 탭, 더블탭, 드래그, 핀치 등의 이벤트를 처리할 수 있다.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: HomeWidget()));
}

class HomeWidget extends StatelessWidget {
  const HomeWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return const SafeArea(
      child: Scaffold(
        body: Body(),
      ),
    );
  }
}

class Body extends StatefulWidget {
  const Body({super.key});

  @override
  _BodyState createState() => _BodyState();
}

class _BodyState extends State<Body> {
  @override
  Widget build(BuildContext context) {
    return const TestWidget();
  }
}

class TestWidget extends StatefulWidget {
  const TestWidget({super.key});

  @override
  State<TestWidget> createState() => _TestWidgetState();
}

class _TestWidgetState extends State<TestWidget> {
  int value = 0;

  void addCounter() {
    setState(() => ++value);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Center(
          child: Text('Count : $value', style: const TextStyle(fontSize: 30)),
        ),
        TestButton(addCounter),
      ],
    );
  }
}

class TestButton extends StatelessWidget {
  const TestButton(this.callback, {super.key});

  final VoidCallback callback;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 8),
      width: double.infinity,
      child: GestureDetector(
        onTap: callback,
        child: Center(
            child: Container(
                padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
                decoration: BoxDecoration(border: Border.all()),
                child: const Text(
                  'Up Counter',
                  style: TextStyle(fontSize: 24),
                ))),
      ),
    );
  }
}

TestWidget

- addCounter함수에서 버튼이 클릭되어 호출되었을때 value를 증가시키고 UI를 업데이트한다.

- Text위젯을 통해서 화면에 증가된 값이 표시되고 TestButton을 통해서 사용자 입력을 받아 카운터를 증가 시킨다.

TestButton

- 버튼이 탭될때마다 주어진 콜백을 실행하고 GestureDetector를 사용해 이벤트를 감지한다. 탭이 될때 callback함수가 실행되어 _TestWidgetState의 addCounter메소드가 호출되 카운터 값이 증가한다.

Flutter 기초 - 페이지이동1 (23)

아랑팡팡 — Thu, 23 May 2024 20:34:39 +0900

Flutter 기초 - 페이지이동1 (23)

class _HomeWidgetState extends State<HomeWidget> {
  late int index;

  @override
  void initState() {
    super.initState();
    index = 0;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('App Bar'),
      ),
      body: homeBody(),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'User'),
        ],
        currentIndex: index,
        onTap: (newIndex) {
          setState(() {
            index = newIndex;
          });
        },
      ),
    );
  }

  Widget homeBody() {
    switch (index) {
      case 1:
        return const Center(child: Icon(Icons.search, size: 100));
      case 2:
        return const Center(child: Icon(Icons.person, size: 100));
      case 0:
      default:
        return const Center(child: Icon(Icons.home, size: 100));
    }
  }
}

Scaffold

- 상단 앱바 AppBar

- 본문 Body

- 하단 탭 bottomNavigationBar

BottomNavigationBar

- 하단 탭바로 BottomNavigationBar는 사용자가 탭할 수 있는 여러개의 항목을 포함한다.

currentIndex

- 현재 선택된 인텍스를 나타낸다.

onTap

- 사용자가 탭을 클릭할때 호출되며 선택된 탭의 인덱스로 index를 업데이트한다.

homeBody

- 현재 선택된 탭에 따라 다른 내용을 표시한다. 각 탭에 해당하는 아이콘을 크게 표시한다.

Flutter 기초 - PopupMenu (21)

아랑팡팡 — Wed, 22 May 2024 19:24:53 +0900

Flutter 기초 - PopupMenu (21)

1. PopupMenu

- itemBuilder속성을 통해서 메뉴 항목을 생성한다. 각 메뉴 항목에서 PopupMenuItem Widget을 사용해 정의하고 onSelected콜백에서 처리된다.

class TestPopupMenu extends StatefulWidget {
  const TestPopupMenu({super.key});

  @override
  State<TestPopupMenu> createState() => _TestPopupMenuState();
}

class _TestPopupMenuState extends State<TestPopupMenu> {
  TestRadioValue selectValue = TestRadioValue.test1;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(selectValue.name),  // 현재 선택된 값을 화면에 표시
        PopupMenuButton<TestRadioValue>(
          onSelected: (TestRadioValue value) {
            setState(() {
              selectValue = value;
            });
          },
          itemBuilder: (BuildContext context) {
            return TestRadioValue.values.map((e) =>
                PopupMenuItem<TestRadioValue>(
                  value: e,
                  child: Text(e.name),
                )
            ).toList();  // toList() is now correctly placed outside the map function
          },
        ),
      ],
    );
  }
}

TestPopupMenu

- StateWidget으로 사용자의 작용에 따라 상태가 변할 수 있다.

PopupMenuButton Widget

- PopupMenuButton<TestRadioValue> : 제네릭 타입으로 TestRadioValue를 사용해 팝업 메뉴의 항목이 TestRadioValue열거형의 값을 가지도록 설정한다.

- onSelected : 팝업 메뉴에서 항목을 선택했을때 실행되는 콜백 함수로 선택된 값을 selectValue에 할당하고 setState()를 호출해 UI를 업데이트 한다.

- itemBuilder : 팝업 메뉴 항목을 동적으로 생성해 TestRadioValue.values를 이용해서 열거형의 모든 값을 순회하며 각 값에 대해서 PopupMenuItem<TestRadioValue>를 생성한다.

Flutter 기초 - Switch (20)

아랑팡팡 — Wed, 22 May 2024 19:24:43 +0900

Flutter 기초 - Switch (20)

1. Switch

- 사용자가 토클할 수 있는 스위치 컨트롤러를 제공해 설정을 키고 끄는 상태를 전활할때 사용도니다.

2. Switch Widget 기본 사용법

value	스위치의 현재 상태를 나타낸다.(true, false)
onChanged	스위치의 값이 변경될 때 호출되는 콜백 함수로 스위치를 토글할 때마다 함수에 새로운 상태가 전달된다.

class TestSwitch extends StatefulWidget {
  const TestSwitch({super.key});

  @override
  State<TestSwitch> createState() => _TestSwitchState();
}

class _TestSwitchState extends State<TestSwitch> {

  bool value = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Switch(value: value, onChanged: (newValue)=> setState(() => value = newValue)),
        CupertinoSwitch(value: value, onChanged: (newValue)=> setState(() => value = newValue))
      ],
    );
  }
}

_TestSwitchState

value : 스위치의 현재 상태를 나타낸다.

onChanged : 스위치의 값이 변경될 때 마다 실행되는 콜백함수로 새로운 값(newValue)로 value를 업데이트한다.

CupertinoSwitch

value와 onChange속성은 Switch위젯과 동일하게 작동하며 ios에서 주로 사용된다.

Flutter 기초 - Slider (19)

아랑팡팡 — Wed, 22 May 2024 19:24:34 +0900

Flutter 기초 - Slider (19)

1. Slider

- Slider Widget은 사용자에게 시각적인 피드백을 제공하면서 값의 범위를 조정할 수 있는 인터페이스를 제공한다.

value	현재의 슬라이더 값으로 min, max의 사이어야 한다.
onChanged	슬라이더를 움직일때 호출되는 콜백함수로 조작시 현재 슬라이더 값이 전달된다.
min, max	슬라이더의 최소값, 최대값
divisions	사용자가 선택할 수 있는 값의 수로 값을 설정하므로써 눈금표시와 특정 눈금에 위치시킬 수 있다.
label	사용자가 슬라이더를 조작할 때 보여줄 수 있는 텍스트 레이블로 현재 값을 표시하는데 사용된다.

class TestSlider extends StatefulWidget {
  const TestSlider({super.key});

  @override
  State<TestSlider> createState() => _TestSlider();
}

class _TestSlider extends State<TestSlider> {
  double _currentVolume = 20;

  @override
  Widget build(BuildContext context) {
    return Slider(
      value: _currentVolume,
      min: 0,
      max: 100,
      divisions: 10,
      activeColor: Colors.red,
      label: _currentVolume.round().toString(),
      onChanged: (double value) {
        setState(() {
          _currentVolume = value;
        });
      },
    );
  }
}

TestSlider는 StateWidget 선언되어 현재 값을 기준으로 사용자의 작용에 의해 변할 수 있는 상태이다.

CreateState()메서드는 _TestSlider클래스의 인스턴스를 반환하고 이는 슬라이더의 상태를 관리하는 역할을 수행한다.

Slider Widget

value : 슬라이더의 현재 값을 나타내며 _currentVolume 변수에 의해 동적으로 관리된다.

min, max : 슬라이더에 나타낼 최소, 최대값

division : 전체를 10으로 나누어 10단위로 조정할 수 있다.

activeColor : 슬라이더의 색상(현재값 ~ 마지막값)

label : 슬라이더를 조정할 때 나타나는 풍선 도움말에 현재 값의 정수 부분을 문자열로 표시한다.

onChanged : 슬라이더의 값이 변할때마다 호출된다. 콜백 함수는 새로운 슬라이더 값(value)를 받아 _currentVolume을 업데이트하고 setState를 호출해 위젯을 다시 빌드한다.

Flutter 기초 - RadioButton (18)

아랑팡팡 — Wed, 22 May 2024 19:24:23 +0900

Flutter 기초 - RadioButton (18)

1. Radio버튼

- 사용자에게 옵션들중 하나만 선택할 수 있게하는 위젯으로 라디오 버튼은 서로 연관된 그룹안에서 단 하나의 항목만을 선택할 수 있도록 제한하기 때문에 설정 혹은 조정 에서 여러 옵션중 하나를 선택해야할때 유용하게 사용할 수 있다.

2. Radio버튼 기본구조

value	라디오 버튼의 고유한 값으로 열거형(enum)을 사용해 각 옵션을 명시한다.
groupValue	현재 그룹에서 선택된 값을 나타내며 value값과 같을 경우 해당 라디오 버튼이 선택된 것으로 표시된다.
onChanged	라디오 버튼의 값이 변경될때 실행할 콜백함수로 사용자가 라디오 버튼중 하나를 탭할 때 마다 호출된다.

3. RadioButton동작방식

oValue { test1, test2, test3 }

class TestRadioButton extends StatefulWidget {
  const TestRadioButton({super.key});

  @override
  State<TestRadioButton> createState() => _TestRadioButtonState();
}

class _TestRadioButtonState extends State<TestRadioButton> {
  TestRadioValue? selectValue;
  final Map<TestRadioValue, String> labels = {
    TestRadioValue.test1: "라디오 1",
    TestRadioValue.test2: "라디오 2",
    TestRadioValue.test3: "라디오 3",
  };

  @override
  Widget build(BuildContext context) {
    return Column(
      children: TestRadioValue.values.map((value) {
        return ListTile(
          leading: Radio<TestRadioValue>(
            value: value,
            groupValue: selectValue,
            onChanged: (TestRadioValue? newValue) {
              if (newValue != null) {
                setState(() {
                  selectValue = newValue;
                });
              }
            },
          ),
          title: Text(labels[value]!),
          onTap: () {
            setState(() {
              selectValue = value;
            });
          },
        );
      }).toList(),
    );
  }
}

TestRadioButton

- 라디오 버튼을 구현하는 StatefulWidget으로 TestRadioValue에 열거형으로 정의된 값중 하나를 선택할 수 있다.

_TestRadioButtonState

- selectValue : 현재선택된 라디오버튼의 값을 저장하는 변수

- lables : 라디오 버튼과 연결된 레이블을 저장하는 맵으로 라디오 버튼의 value와 사용자에게 보여줄 문자열을 연결한다.

Column내부에서 TestRadioValue.values.map을 사용해 각 라디오 값에 대한 ListTile을 생성하고 ListTile은 사용자 인터렉션을 쉽게 만들어주는 위젯 .

Radio Widget

- value : 라디오 버튼 값 (TestRadioValue.test1, test2, test3)

- groupValue : 현재 그룹에서 선택된 값(selectValue)가 value와 같다면 라디오버튼은 선택된 것으로 표시된다.

- onChanged : 라디오 버튼을 탭할 때 호출되는 콜백으로 새 값을 받아 selectValue를 업데이트하고 setState를 호출해 UI를 갱신한다.

Flutter 기초 - CheckBox (17)

아랑팡팡 — Wed, 22 May 2024 19:24:10 +0900

Flutter 기초 - CheckBox (17)

1. Checkbox

- 사용자가 설정을 켜거나 끄는 요소로 Boolean (false | true) 로 변경하고 UI에 나타낼 수 있다.

2. CheckBox사용방법

value

- 체크박스의 현재 상태를 나타내며 true, false, null 이 될수 있다.

- null은 체크박스가 선택 가능한 상태를 표시하지만 아직 선택되지 않았을때에는 null로 입력도니다.

onChanged

- 체크박스의 값이 변경될때 호출되는 콜백함수로 사용자가 체크박스를 탭했을 경우 함수가 호출되고 체크박스의 새로운 상태가 매개변수로 전달된다.

import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  runApp(
    const MaterialApp(home: HomeWidget()),
  );
}

class HomeWidget extends StatelessWidget {
  const HomeWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return const SafeArea(
      child: Scaffold(
        body: Body(),
      ),
    );
  }
}

class Body extends StatefulWidget {
  const Body({super.key});

  @override
  _BodyState createState() => _BodyState();
}

class _BodyState extends State<Body> {
  @override
  Widget build(BuildContext context) {
    return const Column(
      children: [
        TestCheckbox(),
      ],
    );
  }
}

class TestCheckbox extends StatefulWidget {
  const TestCheckbox({super.key});

  @override
  State<TestCheckbox> createState() => _TestCheckboxState();
}

class _TestCheckboxState extends State<TestCheckbox> {
  late List<bool> values;

  @override
  void initState() {
    super.initState();
    values = [false, false, false];
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Checkbox(
            value: values[0],
            onChanged: (value) => changeValue(0, value: value)),
        Checkbox(
            value: values[1],
            onChanged: (value) => changeValue(1, value: value)),
        Checkbox(
            value: values[2],
            onChanged: (value) => changeValue(2, value: value)),
      ],
    );
  }

  void changeValue(int index, {bool? value}) {
    setState(() {
      values[index] = value!;
    });
  }
}

class TestRaioButton extends StatefulWidget {
  const TestRaioButton({super.key});

  @override
  State<TestRaioButton> createState() => _TestRaioButtonState();
}

class _TestRaioButtonState extends State<TestRaioButton> {
  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

HomeWidget

- Flutter App의 루트 위젯역할로 HomteWidget내부에는 SafeArea, Scaffold로 구성된 레이아웃이 포함되어 있다.

SafeArea

- 화면의 상 하단에 안전하지 않은 영역에 콘텐츠가 침범하는것을 방지하여 사용자의 디바이스에서 안전한 영역 내에서 랜더링 되도록 보장한다.

Scaffold

- Material Design의 사각적 레이아웃 구조를 제공하는 위젯으로 앱의 기본적인 시각 구성 요소를 포함할 수 있따.

Body

- Body에서 SatefulWidget(변경 가능한 상태)를 가질수 있는 위젯으로 정의되어 상태를 가지는 위젯은 사용자의 인터렉션에 따라 상태가 변경되고 UI가 업데이트 될 수 있다.

_BodyState

- Column은 자식 위젯들을 수직으로 배열한다.

TextCheckbox

- TestCheckbox는 StatefulWidge(변경 가능한 상태)를 사용해 사용자가 체크박스의 상태를 변경할 수 있는 위젯이다.

_TestCheckboxState

- List<bool> values : 각 체크박스의 선택 상태를 저장하는 boolean 리스트로 초기값은 false이다.

- Checkbox : 세 개의 체크박스를 표시하고 각 체크박스는 values리스트의 해당 인덱스에 저장된 값을 사용해 현재 상태를 표시한다.

- onChanged : 체크박스를 탭할 때 호출되는 콜백함수로 changeValue를 호출해 체크박스의 값을 변경하고 setState를 통해서 UI를 업데이트 한다.

Flutter 기초 - Stateful, Stateless (16)

아랑팡팡 — Sun, 19 May 2024 14:50:42 +0900

Flutter 기초 - State Basic (16)

StatelessWidget

상태가 없는 위젯으로 생성될 때 한번 설정되고 데이터에 따라 동적으로 변하지 않는 의미로 StateWidget은 입력 데이터나 내부 상태의 변화 없이 동일한 정보를 표시할 때 사용한다.

- 초기화시 입력된 파라미터를 기반으로 UI를 렌더링 한다.

- 위젯의 속성이 변경되지 않는다.(불변성을 가진다)

- 애니메이션, 데이터 변경에 반응해 상태를 변경할 필요가 없는 경우 적합하다.

StatefullWidget

동적인 상태를 가질 수 있는 위젯으로 데이터의 변경에 따라 내부 상태가 변할 수 있고 변화된 상태에 따라 UI가 업데이트된다. StatefulWidget은 State객체를 생성하고 상태를 관리해 setState()메소드를 통해 상태가 변경되었을때 UI를 다시 빌드한다.

- 위젯의 동적 상태 관리를 관리하기 위해 State클래스가 필요하다.

- StatefulWidget은 생성 업데이트, 소멸 등의 라이프사이클을 가진다.

import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  runApp(
    MaterialApp(
      home: HomeWidget(),
    ),
  );
}

class HomeWidget extends StatelessWidget {
  const HomeWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return const SafeArea(
      child: Scaffold(
        body: Body(),
      ),
    );
  }
}

class Body extends StatelessWidget {
  const Body({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      ExampleStateless(),
      ExampleStateful(index: 3),
    ]);
  }
}

class ExampleStateless extends StatelessWidget {
  const ExampleStateless({super.key});

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 1,
      child: Container(
        color: Colors.red,
      ),
    );
  }
}

class ExampleStateful extends StatefulWidget {
  final int index;

  const ExampleStateful({required this.index, super.key});

  @override
  State<ExampleStateful> createState() => _ExampleStatefulState();
}

class _ExampleStatefulState extends State<ExampleStateful> {
  late int _index;
  late TextEditingController textEditingController;

  @override
  void initState() {
    super.initState();
    _index = widget.index;
    textEditingController = TextEditingController();
  }

  @override
  void dispose() {
    textEditingController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 1,
      child: GestureDetector(
        onTap: () {
          setState(() {
            if (_index == 5) {
              _index = 0;
              return;
            }
            _index++;
            print(_index);
          });
        },
        child: Container(
          color: Colors.blue.withOpacity(_index / 5),
          child: Center(
            child: Text('$_index'),
          ),
        ),
      ),
    );
  }
}

HomeWidget

- 상태가 없는 위젯(StatelessWidget)으로 앱의 기본화면을 구성하며 Scaffold를 사용해 앱의 기본 레이아웃을 설정하고 내부 Body위젯을 포함한다.

Body

- StatelessWidget이며, 두개의 자식 위젯을 Column으로 배치한다.

- 첫번째 자식위젯 : ExampleStateless

- 두번째 자식위젯 : ExampleStateful

ExampleStateless

- 확장된 빨간색 컨테이너를 나타내며 동적인 상태 변화 없이 일관된 색상을 유지한다.

ExampleStateful

- 상태가 있는 위젯(StatefulWidget)은 사용자 상호작용에 반응해 내부 상태를 변경한다. 아래의 탭을 클릭할때 마다 _index가 증가해 특정값에 도달하면 0으로 리셋된다.

Flutter 기초 - Widget Stack (15)

아랑팡팡 — Sun, 19 May 2024 12:35:09 +0900

Flutter 기초 - Widget Stack (15)

Widget Stack

- Stack위젯은 자식 위젯들을 겹쳐서 배치할 수 있게 해주는 위젯으로 Stack의 자식들은 기본적으로 왼쪽 상단 모서리에서 시작하여 쌓고 다른 위젯과 달리 각 자식 위젯들은 서로의 위치를 고려하지 않고 독립적으로 배치된다.

- Stack은 가장 먼저 선언된 Container가 가장 아래에 위치하고 이후 선언된 위젯들은 위로 쌓이게 된다.

Stack - Align

- Align위젯은 Stack내에서 특정한 위치에 자식을 배치하고자 할때 사용되며 Stack전체 공간 내에서 자식 위젯의 정확한 위치를 조정하고 alignment속성을 통해서 결정한다.

Stack - Align - alignment

- alignment속성은 Align위젯 내에서 자식을 정렬하는 방법을 결정한다.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Flexible and Expanded'),
      ),
      body: Body(),
    ),
  ));
}

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          width: 500,
          height: 500,
          color: Colors.blue,
        ),
        Container(
          width: 400,
          height: 400,
          color: Colors.red,
        ),
        Container(
          width: 300,
          height: 300,
          color: Colors.black,
        ),
        Align(
            alignment: Alignment(0.5, -0.5),
            child: Container(
              width: 200,
              height: 200,
              color: Colors.yellow,
            )),
      ],
    );
  }
}

Flutter 기초 - Widget 비율 (14)

아랑팡팡 — Sun, 19 May 2024 12:34:57 +0900

Flutter 기초 - Widget 비율 (14)

Flexible, Expanded

- Flutter에서 Container공간 내의 공간비율을 조정할 때 사용되며 두 위젯은 비슷한 기능을 수행하지만 공간 할당 방식에서 약간의 차이가 존재한다.

1. Flexible

- 자식 위젯에게 남은 공간을 어떻게 분배할지 결정한다.

- Flexible의 속성을 통해서 제어가 가능하다.

- 여러 자식간의 크기 비율을 조금더 세밀하게 조정하고 싶을 경우 사용

Flex	flex값이 다른 위젯 들과 비교해 공간의 분배 비율을 결정한다.
Fit	기본값은 FlexFit.loose로 자식 위젯이 필요한 만큼의 공간만 차지하게 되어 할당된 공간을 최대한 채우도록 강제한다.

2. Expanded

- fit속성을 FlexFit.tight로 설정해 할당된 공간을 강제로 채운다.

- 자삭이 가능한 많은 공간을 차지하도록 하고 싶을 때 사용

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Flexible and Expanded'),
      ),
      body: Body(),
    ),
  ));
}

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Flexible(
          flex: 1,
          child: Container(
            height: 100,
            color: Colors.red,
            child: Center(child: Text('Flexible 1')),
          ),
        ),
        Flexible(
          flex: 2,
          child: Container(
            height: 100,
            color: Colors.blue,
            child: Center(child: Text('Flexible 2')),
          ),
        ),
        Expanded(
          child: Container(
            color: Colors.blue,
            child: Center(child: Text('Expanded')),
          ),
        )
      ],
    );
  }
}

Flutter 기초 - SingleChildScrollView (13)

아랑팡팡 — Thu, 16 May 2024 23:16:14 +0900

Flutter 기초 - SingleChildScrollView (13)

SingleChildScrollView

- 단일 자식 위젯에 스크롤 기능을 추가할 수 있도록 해주는 위젯으로 수직 스크롤과 수평 스크롤 두가지 사용방식이 있다.

1. SingleChildScrollView (Vertical Scroll)

- 수직 스크롤은 Column위젯과 함께 사용되며 목록, 이미지, 텍스트 등의 요소들을 수직 방향으로 스크롤할 수 있도록 한다.

- SingleChildScrollView의 기본 스크롤 방향으로 Column위젯을 사용해 위젯을 수직으로 나열한다.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Vertical Scroll Example'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: List.generate(20, (index) =>
              Card(
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Text('Item $index', style: TextStyle(fontSize: 24)),
                ),
              ),
          ),
        ),
      ),
    ),
  ));
}

2. SingleChildScrollView (Horizontal Scroll)

- 수평 스크롤은 Row위젯과 함께 사용되며 이미지 갤러리, 메뉴바, 카드 리스트 등에서 여러 개의 요소를 가로 방향으로 배열하고자 할때 사용한다.

- 스크롤 방향을 수직과는 다르게 수평으로 설정하려면 scrollDirection속성에 명시적으로 Axis.horizontal로 설정해야 자식 위젯을 수평 방향으로 스크롤을 가능하게 한다.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Horizontal Scroll Example'),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          children: List.generate(10, (index) =>
          Container(
            width: 160,
            height: 160,
            color: Colors.blue,
            child: Center(
              child: Text(
                'Box &index',
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
            ),
          ),
        ),
      ),
    ),
    )));
}

Flutter 기초 - Widget상하 좌우 배치 (12)

아랑팡팡 — Thu, 16 May 2024 22:17:03 +0900

Flutter 기초 - Widget상하 좌우 배치 (12)

Column과 Row는 수직 및 수평 방향으로 자식 위젯들을 정렬하고 배치하는데 사용된다.

1. Column

- 자식들을 수직 방향으로 배열한다.

mainAxisSize	Column높이를 결정한다. MainAxisSize.min MainAxisSize.max
mainAxisAlignment	주축(수평)에 대한 자식 위젯들의 정렬 방식을 결정한다. MainAxisAlignment.start MainAxisAlignment.end MainAxisAlignment.center MainAxisAlignment.spaceBetween
crosAxisAlignment	교차 축(수직)에 대한 자식 위젯들의 정렬 방식으로 결정한다. CrossAxisAlignment.start CrossAxisAlignment.end CrossAxisAlignment.center CrossAxisAlignment.stretch

2. Row

- 자식들을 수평 방향으로 배열한다.

mainAxisSize	Row의 너비를 결정한다. MainAxisSize.min MainAxisSize.max
mainAxisAlignment	주축(수평)에 대한 자식 위젯들의 정렬 방식을 결정한다.
crossAxisAlignment	교차축(수직)에 대한 자식 위젯들의 정렬 방식을 결정한다.

Container(
  width: double.infinity,  // 가로 방향으로 무한대의 너비를 가짐
  //child: Row(
  child: Column(
    mainAxisSize: MainAxisSize.max,  // 수직 방향으로 가능한 모든 공간을 차지
    mainAxisAlignment: MainAxisAlignment.center,  // 수직 방향 중앙에 자식 위젯 배치
    crossAxisAlignment: CrossAxisAlignment.center,  // 수평 방향 중앙에 자식 위젯 배치
    children: [
      Container(
        width: 100,
        height: 80,
        color: Colors.red,
        child: Text('Container1'),
      ),
      Container(
        width: 100,
        height: 80,
        color: Colors.green,
        child: Text('Container2'),
      ),
      Container(
        width: 100,
        height: 80,
        color: Colors.blue,
        child: Text('Container3'),
      ),
    ],
  ),
);

Flutter 기초 - Container, Center Widget (11)

아랑팡팡 — Thu, 16 May 2024 14:54:34 +0900

Flutter 기초 - Container, Center Widget (11)

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Study to Container'),
        ),
        body: CustomContainer(),
      ),
    ),
  );
}

class CustomContainer extends StatelessWidget {
  const CustomContainer({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300,
        height: 300,
        padding: EdgeInsets.fromLTRB(10, 12, 10, 12),
        decoration: BoxDecoration(
          color: Color(0xFF85D07B),
          border: Border.all(color: Colors.red, width: 5, style: BorderStyle.solid),
          borderRadius: BorderRadius.circular(100),
          boxShadow: [
            BoxShadow(color: Colors.black.withOpacity(0.3), offset: Offset(6, 6), blurRadius: 10, spreadRadius: 10),
            BoxShadow(color: Colors.blue.withOpacity(0.3), offset: Offset(-6, -6), blurRadius: 10, spreadRadius: 10),
          ]
        ),
        child: Center(
          child: Container(
            color: Colors.yellow,
            child: Text('Hello Container'),
          ),
        ),
      ),
    );
  }
}

1. Container

크기 조정	width, height 로 크기 지정
Padding	내부 자식 위젯과 Container 경계 사이의 공간을 설정
Decoration	배경색, 테두기, 둥근 모서리, 그림자 등을 지정

width, height : 300 정사각형

pading: EdgeInstets.fromLTRB : 모든 방향에 패팅을적용

decoration: BoxDecoration : 배경색, 테두리, 모서리, 그림자

2. Center Widget

- 자식 위젯을 자신의 중앙에 위치시키는 레이아웃 위젯으로 주로 정렬 목적으로 사용되며 크기에 상관없이 중아에 배치한다.

Flutter 기초 - MaterialApp, Scaffold (10)

아랑팡팡 — Thu, 16 May 2024 14:54:23 +0900

Flutter 기초 - MaterialApp, Scaffold (10)

1. MaterialApp

- 앱의 최상위 레벨에 위치하며 Material Design앱을 만드는데에 필요한 여러 설정과 기능을 제공한다.

네비게이션	Navigator를 이용해 화면간의 라우팅 관리를 한다. (홈 화면, 상세 화면 등)
테마	전체 애플리케이션에 일관된 테마(색상, 폰트, 아이콘 스타일 등)를 적용해 앱의 외관을 통일할 수 있다.
로케일	다국어 지원을 위한 로케일 설정

void main(){
  runApp(MaterialApp(
    home: Scaffold(
      
    ),
  ))
}

- main함수에서 시작해 MaterialApp 위젯을 앱 전체를 감싸 MaterialApp 위젯이 최상위 컨테이너 역할 을 수행한다.

- home속성으로 Scaffold를 사용해 앱이 실행될때 처음 보여지는 화면을 나타내고 Scafflod 위젯은 기본적인 레이아웃 구조를 제공한다.

2. Scaffold

- Material Design의 레이아웃 구조를 구현하는 위젯으로 다양한 UI요소를 손쉽게 추가하고 관리할 수 있도록 한다.

AppBar	화면 상단에 위치하는 앱바(툴바)로 제목, 네비게이션 아이콘, 액션 버튼 등을 포함할 수 있다.
Body	실제 앱의 내용이 표시되는 영역으로 주요 위젯을 배치한다.
FloatingActionButton	동작 버튼으로 중요한 액션을 유도하는데 사용된다.
Drawer	옆에서 슬라이드하여 나오는 메뉴로 앱의 네비게이션 링크를 포함할 수 있다.
BottomNavigationBar	화면 하단에 위치하는 메뉴 바

AppBar

- title: Text 위젯을 사용해 앱 바의 제목을 표시한다.

- contentTitle 위젯은 제목의 위치를 결정하고 false로 설정할 경우 왼쪽에 위치하게 된다.

- actions 위젯은 앱바에서 수행할 수 있는 액션을 배열 형태고 정의한다.

void main(){
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        contentTitle: false,
        title: Text('This is App bar'),
        actions: [
          IconButton(icon: Icon(Icons.home), onPressed: (){
            print('Tab!');
          })
          Icon(Icons.play_arrow),
        ],
      ),
    ),
  ));
}

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
          actions: [
      IconButton(icon: Icon(Icons.home), onPressed: () {
        print('Tab!');
    }, ),
      Icon(Icons.play_arrow),
      ],
        centerTitle: false,
        title: Text('This is App bar'),
    ),
    body: TestWidget(),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.bug_report),
        onPressed: (){
          print('Tab! FAB!');
        },
      ),
  ),
  ),);
}

class TestWidget extends StatelessWidget {
  const TestWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
        child: Text(
          'Hello, Flutter',
          style: TextStyle(
            fontSize: 60,
            color: Colors.lightBlue,
          ),
        ),
      ),
    );
  }
}

Flutter 기초 - Hot restart, Hot reload (9)

아랑팡팡 — Wed, 15 May 2024 11:14:45 +0900

Flutter 기초 - Hot restart, Hot reload (9)

Hot restart

- 앱을 재시작하는 형태로 앱의 모든 상태가 초기화 되고 변경사항을 반영할 수 있다.

작동 방식	전체 앱을 다시 컴파일하여 기존의 상태를 초기화후 앱을 다시 실행한다. 앱 빌드 시간이 걸리지만 Hot Reload보다 포괄적인 코드 적용이 가능하다.
사용 시기	전역 변수, 초기화 코드, 앱의 실행 흐름을 변경했을때 필요하며 Hot Reload에서 해결되지 않는 문제가 발생했을 때 유용하다.
한계	애플리케이션의 상태가 완전히 초기화되어 데이터나 이전 상태는 모두 반영되지 않는다.

Hot reload

- 앱을 재실행하지는 않지만 코드의 변경 사항을 반영하는 기능으로 앱의 상태를 유지한 상태로 코드의 수정사항을 확인해 빠른 개발이 가능한다.

작동 방식	개발자가 코드내에서 UI 또는 로직을 변경하게 되면 변경된 부분만 즉시 빌드하여 실행 중인 애플리케이션에 푸시하게된다. 이 때 앱의 상태는 유지되어 사용자가 입력한 데이터 값이나 앱의 상태가 초기화 되지 않는다.
사용 시기	UI레이아웃, 스타일, 애니메이션, 위젯 등 수정이 있을 경우
한계	전역 분수 혹은 초기화 단계를 변경했을 경우에는 Hot Reload가 반영되지 않는다.

번개 표시를 클릭하면 Hot reload가 실행되어 변경사항이 즉시 반영된다.

옆에 박스번개를 클릭하면 Hot restart가 실행되어 상태를 초기화하고 변경사항을 반영할 수 있다.

Flutter 기초 - Widget (8)

아랑팡팡 — Wed, 15 May 2024 11:14:28 +0900

Flutter 기초 - Widget (9)

Flutter State Basic

- Flutter에서 상태(State)는 앱이 실행될 때 동적으로 변경될 수 있는 정보로 상태는 기본적으로 State Widget에서 관리된다.

StatefulWidget

- 변할 수 있는 상태를 가진 위젯으로 변경사항에 따라 내용이 변할 수 있다. Stateful Widget은 State객체를 생성해 상태를 관리하고 상태가 변경될때 마다 위젯을 다시 빌드하도록 한다.

StatelessWidget

- 불변의 상태를 가지는 위젯으로 위젯 생성 시점에 전달된 구성 정보를 기반으로 UI를 구성해 변경되지 않고 간단한 UI표현에서 주로 사용된다.

Flutter Architecture

- 위젯, 렌더링엔진, 패키지 매니저 이 요소는 UI를 구성하는 기본요소로 Flutter엔진은 Dart코드를 네이티브 코드로 변환하여 렌더링 한다.

Flutter Gesture

- GestureDetector위젯을 통해 이루어지며 위젯을 사용해 탭, 드래그, 핀치 등의 다양한 사용자 입력을 감지하고 응답할 수 있다.

Flutter Setting

- 개발 환경 설정, 플랫폼 특화설정, 테마 및 로케일 설정 등이 포함되며 Setting메뉴나 구성 파일을 통해서 사용자의 요구에 맞도록 동작방식 등을 조정 할수 있다.

Flutter Navigator

- 위젯간의 화면 전환을 관리하며 Navigator를 사용하면 스택 기반의 네비게이션 시스템을 구현할 수 있고 화면 간의 데이터를 전달하면서 앱 내에서 전환할 수도 있다.

Dart 기초 - 레코드 (9)

아랑팡팡 — Wed, 15 May 2024 10:37:45 +0900

Dart 기초 - 레코드 (9)

1. 레코드란

- Dart3.0 이상 부터 사용할 수 있는 새로운 타입으로 포지셔널 파라미터(positional parameter), 네임드 파라미터(named parameter)가 이 두 방식은 함수에 값을 전달할 때 유연성과 명확성을 제공한다.

2. 포지셔널 파라미터(Positional Parameter)

- 포지셔널 파라미터는 값을 전달할 때 순서에 따라 결정되므로 표시한 타입의 순서를 지켜야한다.

필수 포지셔널 파라미터 : 함수를 호출할 때 반드시 값을 제공해야 한다.

선택적 포지셔널 파라미터 : 대괄호 [ ] 를 사용해 정의하며 호출시 값을 생략할 수 있다.

void main(){
  (String, int) arang = ('아랑', 25);
  print(arang);
}

- 만약 레코드에 정의한 타입의 순서와 입력값이 다르면 에러가 발생한다.

void main(){
  (String, int) arang = (25, '아랑');
  print(arang);
}

3. 네임드 파라미터(Named Parameter)

- 네임드 파라미터는 각 파라미터에 이름을 지정해 함수를 호출할 때 해당 이름을 명시해야한다. 순서는 자유롭게 사용하고 중괄호 { } 를 사용해 정의한다. 필수로 네임드 파라미터를 정의하기 위해서는 required키워드를 사용한다.

void main(){
  arang(name: '아랑');
}

void arang({required String name, int? age}){
  print('이름 : $name 나이 : $age');
}

Dart 기초 - 비동기 프로그래밍 (8)

아랑팡팡 — Tue, 14 May 2024 21:38:22 +0900

Dart 기초 - 비동기 프로그래밍 (8)

1. 동기 프로그래밍(Synchronous)

- 동기 / 비동기는 프로그램의 작업의 실행순서나 방식에 대한 특성을 나타낸다.

동기(Synchronoous)
 - 동기 프로그래밍은 순차적으로 실행되는 방식
 - 하나의 작업이 끝나고 나서 다음 작업이 시작된다.
 - 하나씩 실행되기 때문에 순서가 명확하고 예측하기 쉽지만 작업시간이 많이 요소되는 어떠한 작업이 있을 경우 전체적인
 프로그램의 효율이 저하될수 있다.
 
 ex)
  웹 페이지에서 광고를 로딩하는 경우 광고가 완전히 불러와지기 전까지는 다른 웹 페이지가 차단될 수있다.

import 'dart:io';

void main(){
  print("동기 시작");
  time();
  print("동기 완료");
}

void time(){
  sleep(Duration(seconds: 3));
  print('3초 작업 완료');
}

2. 비동기 프로그래밍(Asynchronous)

비동기(Asynchronous)
 - 특정 작업의 처리 결과를 기다리지 않고 다음 작업을 수행할 수 있도록한다.
 - 여러 작업을 처리할 수 있어 효율적인 작업 수행이 가능하고 시간이 많이 걸리는 작업은 백그라운드로 처리해 완료 여부에
 따라 콜백 함수나 이벤트를 통해 결과를 처리할 수 있다.
 
ex)
 광고가 다른 기능들과는 독립적으로 재생될수 있어 광고가 로드 되는동안 페이지 내에서 다른 기능을 이용할 수 있다.

import 'dart:io';

void main() async{
  print("작업 시작");
  time();
  print("작업 완료");
}

Future<void> time() async{
  print('비동기 시작');
  await Future.delayed(Duration(seconds: 3));
  print('비동기 완료');
}

Dart 기초 - 예외처리 (7)

아랑팡팡 — Tue, 14 May 2024 21:38:11 +0900

Dart 기초 - 예외처리 (7)

1. 예외란?

프로그램 실행 중 발생하는 오류로 잘못된 프로그램의 결과값(사용자입력, 실패요청, null값 등)으로 발생할 수 있는
요소로 예외처리를 통하여 프로그램을 효율적으로 구현할 수 있다.

2. 예외처리 try-catch

void main(){
  try{
    int result = 10 ~/ 0;
  }catch (e){
    print('에러 : $e ');
  }
}

- 0으로 는 나눌 수 없기 때문에 try에서 예외가 발생되고 catch에서 예외가 잡혀 메시지가 출력된다.

3. 특정 예외처리 try - catch - on

void main(){
  try{
    int result = 10 ~/ 0;
  }on IntegerDivisionByZeroException{
    print('0으로 나누기 불가');
  } catch(e){
    print('에러 : $e');
  }
}

Dart에서 on키워드를 사용해 특정한 예외처리가 가능한다.

- on 키워드를 사용해 예상 가능한 예외를 특장하고 나머지 예외는 catch에서 처리한다.

4. finally

void main(){
  try{
    int result = 10 ~/ 0;
  }on IntegerDivisionByZeroException{
    print('0으로 나누기 불가');
  } catch(e){
    print('에러 : $e');
  } finally{
    print('final은 항상 실행');
  }
}

finally는 예외 발생 여부와 상관없이 항상 실행되는 코드로 주로 파일닫기 혹은 리소스해제 등에 사용된다.

Dart 기초 - 반복문 (6)

아랑팡팡 — Sun, 12 May 2024 22:47:55 +0900

Dart 기초 - 반복문 (6)

1. 반복문 Loop Statements

- 반복문은 특정 조건이 만족되는 동안 해당 조건의 코드를 반복적으로 실행하는 역할로 for, for in, while, do-while문을 사용할수 있다.

1-1. For Loop

- for 반복문은 반복횟수가 명확할때 주로 사용되며 초기화, 조건검사, 증감으로 구성되어 활용된다.

for (기존 변수; 조건식; 가변치){
	조건식이 참일 경우 반복하는 코드
}

- 초기화 : 반복문이 시작할때 처음으로 실행되는 변수

- 조건 : 조건이 true일때 블록이 실행되고 반복문이 끝난뒤 다시 실행된다.

- 증감 : 코드 블록이 실행된 후에는 실행되는 부분으로 변수의 값을 증감 혹은 감소 시킨다.

void main(){
  for(int i = 0; i < 5; i++){
    print("i값 : $i");
  }
}

1-2. For in

- 컬렉션의 요소들을 for-in은 데이터 컬렉션을 순차적으로 순회할 때 사용되며 List, Set, Map 등을 다룰때 사용하고 인덱스를 직접 관리할 필요가 없다.

for(단일 변수 in 컬렉션 (List, Set, Map){
	컬랙션 내의 요소들의 수 / 변수 만큼 사용될 반복문
}

List

- 순서가 있는 요소의 집합으로 중복된 요소를 포함할 수 있고 인덱스를 통해 요소에 접근이 가능하다.

void main(){
 List<String> lists = ['apple', 'banana', 'cherry'];
 for(var list in lists){
   print(list);
 }
 print(lists.length);
 print(lists[0]);
}

Set

- 중복되지 않는 요소의 집합으로 순서가 없고 유일성을 보장해야할때 사용된다.

void main(){
  Set<String> colors = {'red', 'blue', 'green', 'yellow'};
  for(var color in colors){
    print(color);
  }
  
  colors.add('white');
  print(colors);
}

Map

- key와 value 쌍으로 구성된 집합으로 각 키는 유일해야하고 해당 키는 하나의 값을 가진다.

void main(){
  Map<String, int> members = {
    'Arang' : 25,
    'Hana' : 33,
    'hyunie' : 28
  };

  for(var member in members.entries){
    print('이름 : ${member.key}, 전화번호 : ${member.value}');
  }

  print(members['Arang']);

  members['Arang'] = 30;
  print(members);
}

for, for-in의 차이점
for	반복 횟수가 명확하거나 복잡한 조건을 제어할 때 사용한다.
for-in	모든 요소를 순화할때 사용하여 간결한 코드를 사용한다.

List	순차적인 요소 접근이 필요할 때
Set	중복이 없는 요소를 관리할 때
Map	키-값 싸으로 데이터를 관리할 때

1-3. while

- 조건이 true인 동안 코드 블록을 반복하여 실행하는데 사용된다.

while(조건식){
	조건식이 참일 경우 실행되는 반복문
}

void main(){
  int i = 1;
  while(i < 5){
    print(i);
    i++;
  }
}

- i의 초기값이 1이고 i가 5보다 작을 동안 조건은 true가되어 계속 실행된다. 각 반복마다 i가 출력되고 i의 값은 1씩 증가하고 6이되면 false가되어 반복문이 종료된다.

1-4. do while

- 조건이 true인 동안 코드 블록을 반복하여 실행하는데 사용되며 while과 달리 do-while은 코드 블록을 먼저 실행한 후 조건을 검사한다.

void main(){
  do{
    // 실행할 본문
  }while(조건문);
}

void main(){
  int i = 1;
  do{
    print(i);
    i++;
  }while(i <= 5);
}

- i의 초기값은 1로 do{ 의 코드가 먼저 실행되어 i가 출력된다. }, i가 출력되고 i는 1씩 증가하여 다음 while조건문에서 검사되고 조건이 true인 동안에 반복된다.

1-5. break, continue

- break, continue 키워드는 반복문을 제어할 때 사용되며 break, continue키워드를 사용해 반복문의 흐름을 변경하여 특정한 조건이 충족될때 반복문을 중단하거나 건너뛸수 있다.

break	루프를 완전히 종료한다.
continue	continue키워드를 만나는 조건의 반복문을 건너뛴다.

break

- 반복문이 break를 만났을때 반복문을 종료한다.

void main(){
  int i = 1;
  while(i <= 10){
    print(i);
    if(i == 5){
      break;
    }
    i++;
  }
  print('반복문종료');
}

continue

- continu를 만났을때 해당 반복을 건나뛰어 실행되지 않는다.

void main(){
  for(int i = 1; i <= 10; i++){
    if(i % 2 == 0){
      continue;
    }
    print(i);
  }
}

- i가 짝수일 경우 continue 키워드를 사용해 해당 반복문을 건너뛸 수 있다.

Dart 기초 - 분기문 (5)

아랑팡팡 — Fri, 26 Apr 2024 18:19:53 +0900

Dart 기초 - 분기문 (5)

1. 분기문 Conditional Statements

if	if문이 참일 경우
else if	첫번째 if 문이 거짓일 경우
else	모든 조건이 거짓일 경우
siwch	값에 따라 다양한 케이스의 조건을 실행할 수 있다.

1-1. if, else if, else

void main(){
  int num = 90;

  if(num >= 90){
    print("90이상입니다.");
  } else if(num >= 90){
    print("80이상입니다.");
  } else {
    print("값이 이상합니다..");
  }
}

1-2. switch

- 모든 case 블록의 끝에는 break를 포함시켜야하고 default케이스는 어떤 케이스도 일치하지 않을 경우 실행된다.

void main(){
  String score = 'B';

  switch(score){
    case 'A':
      print("굿굿굿");
    case 'B':
      print("굿굿");
    default:
      print("잘못된 결과..");
  }
}

Dart 기초 - 함수와 메서드 (4)

아랑팡팡 — Fri, 26 Apr 2024 15:12:41 +0900

Dart 기초 - 함수와 메서드 (4)

1. 함수 Function

- 특정작업을 수행하는 코드블록으로 입력을 받아 처리하고 결과를 반환할 수 있어 재사용이 가능하다.

함수의 특징
재사용성	한번의 정의로 여러번 호출하여 사용할 수 있다.
모듈성	복잡한 코드단을 작은 코드단으로 나누어 구분할 수 있다.
독립성	다른 코드와 독립적으로 존재할 수 있다.

void main(){
	int num1 = 10;
    int num2 = 20;
    int sum = add(num1, num2);
    
    print(sum);
}

int add(int num1, int num2){
	return num1 + num2;
}

2. 메서드 Method

- 클래스 내부에 정의된 함수로 특정 객체의 데이터와 연관된 작업을 수행한다.

메서드의 특징
연관성	특정 객체와 연관되어 객체의 속성과 메서드를 묶어 클래스로 정의한다.
접근제어	객체의 상태를 외부에서 직접 접근하는 대신 메서드를 통해서 접근함으로써 데이터를 보호할 수 있다.
상속성	부모 클래스의 메서드를 재사용할 수 있다.
다형성	같은 이름의 메서드가 다른 동작을 수행할 수 있도록 오버라이딩이 가능하다.

void main(){
	Calc calc = Calc();
    int sum = calc.add(10, 20);
    print(sum);
}

class Calc{
	int add(int num1, int num2){
	    return num1 + num2;
}

3. 함수와 메서드의 차이

함수 : 클래스나 객체가 독립적으로 존재해 전역 또는 로컬함수로 사용할 수 있다.

메서드 : 클래스의 일부로 클래스의 인스턴스를 통해 호출된다.

Dart 기초 - 클래스, 생성자 (3)

아랑팡팡 — Thu, 25 Apr 2024 12:23:42 +0900

Dart 기초 - 클래스, 생성자 (3)

1. Class 클래스

- class는 객체를 만들기위한 템플릿으로 class를 활용해 데이터와 코드를 그룹화해 관련된 코드를 유지하고 복잡한 문제를 관리 및 재사용성, 유지보수성을 높이는데 효율적이다.

Class의 구성요소
Fields	클래스 내에 선언된 변수들로 객체의 상태나 특성을 저장해 각 인스턴스마다 고유값을 가질 수 있다.
Methods	클래스에서 정의된 함수로 객체가 수행할 수 있는 행동으로 데이터 조작, 계산 등의 결과를 수행하고 반환한다.
Constructor	클래스에서 객체를 생성할때 호출되는 메서드로 생성자는 객체의 초기상태를 설정해 사용한다.
Getters Setters	필드에 접근을 제어하는 메서드로 getter는 필드의 값을 반환하고 setter는 필드의 값을 설정한다.
Inheritance	클래스가 다른 클래스의 필드나 메서드를 상속받을 수 있다. 해당 상속을 통해서 기존의 코드를 재사용하고 확장할 수 있다.

void main(){
  Point point = Point(3, 3);
  print(point);
  print(point.x);
  print(point.y);
  
  Point aPoint = Point(2, 5);
  print(aPoint.x);
  print(aPoint.y);
  Point bPoint = Point(3, 10);
  print(bPoint.x);
  print(bPoint.y);
}

class Point{
  double? x;
  double? y;
  
  Point(this.x, this.y);
}

2. Constructor 생성자

- 생성자는 클래스의 인스턴스를 생성하고 초기화하는 함수로 클래스 명을 사용하여 다양한 형태로 정의 가능하다.

Default Constructors 기본생성자

- 매개변수가 없는 생성자로 클래스 내에서 명시적으로 정의하지 않았다면 컴파일러가 자동으로 제공하여 매개변수가 없는 기본 생성자를 만든다.

class Car{
	Car(){
    	print("이것은 디폴트 생성자");
    }
}

Redirecting Constructors 리다이렉팅 생성자

- 목적이 동일한 생성자로 생성자의 본문은 비어 있지만 전달 된 생성자에 대한 초기값 등을 구현할 때 활용한다.

class Car{
	String model;
    int year;
    
    Car(this.model, this.year);
    Car.namedConstructor(String model) : this(model, 2024);
}

Named Constructors 이름이 있는 생성자

- 이름이 있는 생성자는 클래스에 여러 옵션을 제공한다.

class Car{
	String model;
    int year;
    Car(this.model, this.year);
    Car.named(String model){
    	this.model = model;
        this.year = DateTime().now().year;
    }
}

Const Constructors 상수 생성자

- 컴파일 시점에서 상수로 선언된 객체를 생성하며 모든 필드는 final이어야 한다.

class Num{
	final int x, y;
    const Num(this.x, this.y);
}

Factory Constructors 팩토리 생성자

- 생성자가 새로운 객체의 인스턴스를 반환하지 않도록 한다.

class Num {
	static Num? _instance;
    Num._instance();
    factory Signleton(){
    	return _instance ??= Singleton._internal();
    }
}

Dart 기초 - 연산자 (2)

아랑팡팡 — Wed, 24 Apr 2024 14:45:21 +0900

Dart 기초 - 연산자 (2)

1. 연산자

- 하나 이상의 변수나 값을 가지고 수행할 연산을 나타내는 단위로 데이터를 조작하고 비교하는데 사용된다.

2. 산술 연산자

덧셈 + , 뺄셈 - , 곱셈 *, 나눗셈 /, 나머지 %

void main(){
    int num1 = 10;
    int num2 = 20;

    print(num1 + num2);
    print(num1 - num2);
    print(num1 * num2);
    print(num1 / num2);
}

3. 대입연산자

+=, -=, *=, /=, %=

void main(){
	int num1 = 10;
    int num2 = 20;
    
	int num3 += num1;
    print(num3);
}

4. 비교 연산자

==	같다	<	보다 작다
!=	같지 않다	>=	크거나 같다
>	보다 크다	<=	작거나 같다

void main(){
	int num1 = 10;
    int num2 = 20;
    
    print(num1 == num2);  // false
    print(num1 != num2);  // true
    print(num1 >= num2);  // true    
}

5. 논리 연산자

&&	논리곱(AND)
\|\|	논리합(OR)
!	논리부정(NOT)

void main(){
	bool bool1 = true;
    bool bool2 = false;
    
    print(bool1 && bool2);  // false
	print(bool1 || bool2);  // true
}

void main(){
	bool bool1 = true;
    print(!bool1);  // false
}

6. 삼항 연산자

논리연산 ? 참일경우 : 거짓일 경우

String answer = 10 < 20 ? '참' : '거짓';
print(answer);

7. Null Safety

- Null Safety란 변수가 절대 null이 되지 않도록 보장함으로써 웹 앱의 안정성을 향상시키고 런타임 오류를 줄일 수 있다.

- Null을 허용하는 타입은 변수 뒤에 ? 을 붙여서 활용한다.

ex) int? double? bool? String?

int? age;
String? name;

8. Non-nullable Type

- Null을 비허용하는 타입으로 변수뒤에 !를 붙여서 활용한다. 만약 값이 null인 경우에는 에러가 발생한다.)

ex) int!, double!, bool!, String!

void main(){
	int? num1;
    int num2 = 10;
    
    num1 = 10;
    
    print(num1 != num2);
    print((num1 ?? 5) + num2!);
}

Dart 기초 - 변수와 타입 (1)

아랑팡팡 — Wed, 24 Apr 2024 13:49:43 +0900

Dart 기초 - 변수와 타입 (1)

1. 변수란

- Dart언어로 프로그래밍할 때 가장 기본이 되는 단위로 특정한 값을 담아두는 그릇

- Dart에서 변수를 선언할때 타입을 명시할 수도 있고 var키워드를 사용해 타입추론을 할수도 있다.

int age = 25;
double pi = 3.14;
String name = "arang";
bool isBoo = true;

2. 타입

- 데이터의 유형

Flutter에서의 타입
기본형	bool int double String null
자료형	List Set Map
확장형	Object Enum Future Stream

- 참 거짓 bool

bool isTrue = true;

- 정수 int

int num = 100;

- 실수 double

double num2 = 3.14;
double num3 = 3;

- 문자 String

String string = 'Hello World';

- Null

Null thisIsNull = null;

3. 타입추론

- var 변수 선언지 타입을 명시하지 않고 var를 사용하면 컴파일러는 할당된 값에 따라 타입을 자동으로 추론한다.

var age = 25;
var height = 181.9;
var name = "arang";
var isboo = false

4. 동적타입

- dynamic 어떠한 타입의 값도 저장할 수 있는 변수를 선언할 때 사용되며 dynamic변수의 타입은 런타임에 결정된다.

dynamic anythig = "hello";
anything = 100;

5. 상수

final

- 한번 값을 할당한 후에 값이 변하지 않는 것이 상수로 객체의 속성이 변경될 수있지만 객체 자제는 변경할 수 없다.

final String nickname = "AR";

const

- 컴파일 시점에 결정되는 상수로써 런타임에 값을 변경할 수 없고 const로 선언된 객체는 불변의 객체이다.

const double pi = 3.141592;

Dart 기초 - Dart와 Flutter (0)

아랑팡팡 — Wed, 24 Apr 2024 13:49:31 +0900

Dart 기초 - Dart와 Flutter (0)

1. Dart

- Google에서 디자인안 멀티플랫폼 프로그래밍언어로 JavaScript를 대체가능하며 크로스플랫폼(CrossPlatform) 프로그래밍 언어를 목표로 설계되었다.

https://ko.wikipedia.org/wiki/%EB%8B%A4%ED%8A%B8_(%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D_%EC%96%B8%EC%96%B4)

다트 (프로그래밍 언어) - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전.

ko.wikipedia.org

Dart언어의 특징
객체지향 및 타입의 안정성	Dart는 객체지향 프로그래밍언어로 Class기반 상속과 인터페이스를 지원한다.
컴파일 및 인터프리트의 실행	JIT(Just-In-Time)컴파일을 통해서 개발 중에 빠르게 테스트가능하며 AOT(Ahead-Of-Time)컴파일로 빠른 프로덕션 코드를 작성할 수 있다.
효율적인 개발	Dart는 Flutter와 함께 사용될 때 핫 리로드 기능을 제공하여 변경된 코드를 실시간으로 앱에 반영할 수 있도록 한다.
표준 라이브러리	파일시스템, 네트워킹 등 다양한 기능을 지원하는 라이브러리를 가지고 있다.

2. Flutter?

- Google에서 개발한 크로스 플랫폼 개발 프래임워크로 Web과 IOS와 Android 모바일 플랫폼에서 지원되는 Cross Platform으로 알려져 있고 현재 Windows / MacOS / Linux 등 Desktop Application과 Web Application 모두 Flutter로 구현할 수 있다.

Flutter
쉽다	난이도가 낮은 Dart언어를 사용해 난이도가 낮고 다른 프레임워크에 비해 쉽다. Widget들의 조합과 배치로 레이아웃을 구성할 수 있다.
높은 생산성	Flutter는 생산성이 높아 하나의 코드로 여러 플랫폼을 동시에 개발가능하며 재사용이 용이하다. 작은 모바일 기기부터 태블릿 PC, Web, Desktop을 위한 큰 사이즈의 모니터까지 대다수의 디스플레이에서 각각의 레이아웃을 제공할 수 있다.
		성능	JIT(Just-In-Time)개발 단계에서 빠른 개발속도와 AOT(Ahead-Of-Time)컴파일로 배포시 높은 성능을 휴지할 수 있다.

3. Cross Platform?

- 클로스플랫폼(cross-platform) 혹은 멀티플랫폼(multi-platform)은 컴퓨터 프로그램, 운영체제, 컴퓨터언어, 프로그래밍언어, 소프트웨어 등 여로 종류의 컴퓨터 플랫폼에서 동작할 수 있는 것을 뜻하는 용어로 두개 이상의 플랫폼에서 실행할 수 있다.

크로스플랫폼의 장점
효율성	하나의 코드를 여러 플랫폼에서 사용할 수 있어 개발시간과 비용을 절약할 수 있다.
사용자경험	일관된 디자인과 기능을 사용할 수 있다.
시장 접근	여러 플랫폼의 앱을 배포해 많은 사용자가 사용할 수 있게된다.
유지보수	하나의하나의 코드베이스에서 버그 수정이나 업데이트시 모든 플랫폼의 애플리케이션이 동시에 갱신되어 유지보수 작업이 간소화 될 수 있다.