24. 07. 19 TIL

TIL

24. 07. 19 TIL

효ㄷi 2024. 7. 19. 21:46

2

1. 객체

키와 값의 쌍으로 구성된 데이터 구조.

1-2. 객체 선언

let user = {
  name: "르탄이",
  age: 30,
  isAdmin: true,
  printHello: () => console.log("hello!")
};

1-3. 객체 접근

점 표기법

console.log(user.name);  // 르탄이
console.log(user.age);   // 30
user.printHello();       // hello!

괄호 표기법

console.log(user['name']);  // 르탄이
console.log(user['age']);   // 30

let attribute = "name";
console.log(user[attribute]); // 르탄이

1-4. 객체 속성 추가 및 수정

user.email = "john.doe@example.com"; // 새로운 속성 추가
user.age = 31;                      // 기존 속성 수정
console.log(user);

1-5. 속성 삭제

delete user.email;

2. 배열

2-1) 접근, 수정

console.log(numbers[0]); // 배열 접근하기
numbers[2] = 10; // 배열 수정하기
console.log(numbers); // [1, 2, 10, 4, 5]

3. 주요 메서드

(객체)

1. object.keys()

객체의 키만을 추출해 배열로 반환

const user = { name: "르탄이", age: 30, isAdmin: true };
const keys = Object.keys(user);
console.log(keys);  // ["name", "age", "isAdmin"]

2. object.values()

객체의 값만을 추출해 배열로 반환

const values = Object.values(user);
console.log(values);  // ["르탄이", 30, true]

3. object.entries()

객체의 키와 값을 쌍으로 하는 배열을 반환

const entries = Object.entries(user);
console.log(entries); // [["name", "르탄이"], ["age", 30], ["isAdmin", true]]

4. object.assign()

하나 이상의 출처 객체로부터 대상 객체로 속성 복사

const userDetails = { occupation: "개발자" };
Object.assign(user, userDetails);
console.log(user); // {name: "르탄이", age: 30, isAdmin: true, occupation: "개발자"}

(배열)

1. push, pop

push -> 배열의 끝에 하나 이상의 요소 추가

pop -> 배열의 마지막 요소 제거

map -> 배열 내의 모든 요소 각각에 대해 주어진 함술르 호출한 결과를 모아 새로운 배열을 반환

filter -> 주어진 함수의 테스를 통과하는 모든 요소를 모아 새로운 배열로 반환

reduce -> 배열의 각 요소에 대해 주어진 함수를 실행하고, 결과물을 누적시켜 반환

sort -> 배열의 요소를 적절한 위치에 정렬하고 배열을 반환

// 기본 사용법
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
console.log(fruits);  // ["Apple", "Banana", "Mango", "Orange"]

// 숫자 배열 정렬
const numbers = [40, 100, 1, 5, 25];
numbers.sort((a, b) => a - b);
console.log(numbers);  // [1, 5, 25, 40, 100]

// 내림차순 정렬
numbers.sort((a, b) => b - a);
console.log(numbers);  // [100, 40, 25, 5, 1]

3

1. 템플릿 리터럴

백틱 사용

2. destructuring (구조 분해 할당)

객체, 배열 속성을 보다 쉽게 추출할 수 있게 해주는 문법

const { name, price } = item;
console.log(name);  // 커피
console.log(price); // 4000

1-2) 함수 매개변수에서의 사용

function greet({ name, age }) {
  console.log(`안녕하세요, 제 이름은 ${name}이고 나이는 ${age}살입니다.`);
}
greet({ name: "르순이", age: 28 });

2) 배열 destructuring

let colors = ["red", "green", "blue"];
let [firstColor, secondColor] = colors;
console.log(firstColor);  // red
console.log(secondColor); // green

배열의 요소를 위치에 따라 변수로 할당한다.

3. spread operator 스프레드 연산자

1) 객체에서의 사용

객체의 속성을 다른 객체로 복사하거나 확장할 때 사용

const originalUser = { name: "르탄이", age: 28 };
const updatedUser = { ...originalUser, location: "한국" };
console.log(updatedUser);  // { name: "르탄이", age: 28, location: "한국" }

2) 배열에서의 사용

두 배열을 간편하게 합칠 때 사용

const first = [1, 2, 3];
const second = [4, 5, 6];
const combined = [...first, ...second];
console.log(combined);  // [1, 2, 3, 4, 5, 6]

4. rest operator

함수 매개변수, 객체 리터럴, 배열 리터럴에서 사용되며, 나머지 값을 하나의 변수로 그룹화하는 데 사용됨

주로 함수에서 여러 인수를 배열로 그룹화하거나,

객체 분해 할당에서 특정 속성을 제외한 나머지 속성들을 새 객체로 그룹화할 때 사용됨.

1) 함수 매개변수

function sum(...numbers) {
    return numbers.reduce((acc, current) => acc + current, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

여러 인수를 배열로 그룹화할 수 있다.

1-2) 객체 분해 할당

const person = {
    name: "John",
    age: 30,
    country: "USA",
    occupation: "Developer"
};

const { country, ...rest } = person;
console.log(rest); // { name: "John", age: 30, occupation: "Developer" }

특정 속성을 제외한 나머지 속성들을 새로운 객체로 그룹화할 수 있다.

(ex. country 속성을 제외한 나머지 속성들이 rest 객체에 저장됨)

4

단축평가

1. optional Chaning ?.

-> 객체의 속성에 접근할 때 해당 경로에 속성이 존재하지 않아도 에러를 발생시키지 않고 대신 undefinced를 반환함

2. null 병합 연산자 ??

-> 좌변이 null, undefined일 경우에만 우변을 평가.

null 또는 undefined가 아닌 falsy 값들을 유효한 값으로 처리하고 싶을 때 사용

5

모듈

모듈은 재사용 가능한 코드 조각을 캡슐화하고 다른 자바스크립트 파일에서 쉽게 재사용할 수 있게 해준다.

export 키워드 사용

고급 묘듈 기능

1. 별칭 사용

import 시 특정 요소에 별칭을 지정해 충돌을 방지하거나 명확성을 높일 수 있다.

import { square as sqr } from './utils.js';
console.log(sqr(4));  // 16

2. 기본 내보내기와 가져오기

한 모듈에서 하나의 기본값을 내보내고 이를 쉽게 가져올 수 있다.

모듈당 하나의 주요 기능을 내보낼 때 유용하다.

export default를 통해 내보낸 모듈은 import시 이름 변경이 가능하다.

// math.js
export default function multiply(x, y) { return x * y; }

// app.js
import multiply from './math.js';
console.log(multiply(6, 7));  // 42

6

비동기 작업

동기 작업 -> 한 번에 한 가지 일만 할 수 있다. 그래서 그 작업이 끝날 때까지 다른 작업을 할 수 없다.

비동기 작업 -> 비동기 작업은 여러 가지 일을 동시에 할 수 있다. 그 작업이 끝나지 않아도 다른 작업을 할 수 있다.

promise -> 자바스크립트에서 비동기 작업을 처리하는 방법 중 하나

예를 들면 웹사이트에서 데이터를 서버로부터 가져오는 작업이 이에 해당됨

이때 promise는 그 작업이 끝나면 알려주는 일종의 약속

promise는 세 가지 상태가 있는데

1. pending (대기 중) : 작업이 아직 끝나지 않은 상태

2. fulfilled (이행됨) : 작업이 성공적으로 끝난 상태

3. rejected (거부됨) : 작업이 실패한 상태

async, await

-> async가 붙은 함수는 반드시 promise를 반환한다.

비동기 작업을 더 쉽게 쓸 수 있게 해주는 방법

async = 함수 앞에 붙여서 그 함수가 비동기 작업을 할 거라고 알려줌

await = async 함수 안에서만 쓸 수 있음

fetch, then

-> promise 객체를 반환한다.

promise는 두 개의 메서드를 사용할 수 있는데 then과 catch이고, 둘 다 콜백 함수를 받는다.

웹사이트에서 데이터를 가져올 때 사용하는 함수

서버에서 데이터를 받아오고, 그 데이터를 처리할 수 있게 도와줌

fetch = 데이터를 가져옴

then = 데이터가 준비되면 then을 사용해서 데이터를 처리함, 오류가 발생하면 catch로 처리함

axios

-> fetch와 비슷하지만 더 사용하기 편리한 라이브러리

주로 서버에서 데이터를 가져오거나 보낼 때 사용

역시 promise를 반환하고 then과 함께 사용해 데이터를 처리함

정리

Promise와 then/catch

promise를 사용하면 비동기 작업이 끝난 후의 처리 방법을 resolve(성공)와 reject(실패)를 통해 명시한다.

then은 resolve가 호출되었을 때 실행되는 함수, catch는 reject가 호출되었을 때 실행되는 함수다.

const myPromise = new Promise((resolve, reject) => {
  let 성공 = true; // 비동기 작업이 성공했는지 여부
  if (성공) {
    resolve('성공!'); // 작업이 성공했을 때
  } else {
    reject('실패!'); // 작업이 실패했을 때
  }
});

myPromise
  .then((message) => {
    console.log(message); // '성공!' 출력
  })
  .catch((error) => {
    console.error(error); // '실패!' 출력
  });

async/await

async. await는 비동기 작업을 동기적으로 작성할 수 있게 해준다.

async 키워드가 붙은 함수는 항상 promise를 반환하고

await 키워드는 promise가 해결될 때까지 기다린다.

이 방법을 사용하면 promise 객체와 resolve, reject를 직접 사용할 필요가 없다.

async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data'); // 비동기 작업을 기다림
    let data = await response.json(); // 데이터를 JSON으로 변환
    console.log(data); // 데이터를 출력
  } catch (error) {
    console.error('데이터를 가져오는 중에 오류가 발생했어요.', error); // 오류 처리
  }
}

fetchData();

axios

비동기 작업을 처리하기 위한 http 클라이언트 라이브러리

더 쉽고, 추가 기능이 있고, 브라우저와 노드js에서 모두 사용 가능하다.

즉, fetch는 브라우저 내장 함수고, axios는 외부 라이브러리다.

비동기 작업은 시간이 오래 걸리는 작업을 처리할 때 사용됨

1. 네트워크 요청 -> api 호출, 파일 다운/업로드

2. 파일 입출력 -> 파일을 읽거나 쓴느 작업

3. 타이머 관련 작업 -> 특정 시간 동안 대기, 주기적으로 반복되는 작업

4. 대량 데이터 처리

5. 사용자 인터페이스 작업 -> 버튼 클릭시 데이터 가져오기, 폼 제출 시 데이터 처리

등