JavaScript. day5

Math 빌트인 객체

: 수와 관련된 속성과 메소드를 가진 내장 객체이다.

Math.메소드()
Math.속성

• Math 메소드 및 속성
  • abs : 주어진 숫자의 절대값을 반환
  • floor : 주어진 숫자보다 작거나 같은 수 중에서 가장 큰 정수를 반환
  • pow : 주어진 첫 번쨰 숫자에 두 번째 수만큼 제곱해서 반환
  • random : 0 이상 1미만의 난수를 반환
  • sign : 주어진 숫자가 양수인지 음수인지 나타내는 부호를 반환
  • sqrt : 주어진 수의 제곱근을 반환
    
    

객체 리터럴

: 객체를 구성하는 속성(값이나 기능)의 이름과 실제 값을 한 쌍으로 묶어 표현하는 방법. 이때, 속성의 이름을 키(key), 속성의 실제값을 밸류(value)라 한다.
속성을 이용할 때 키를 사용하므로 키는 절대 중복될 수 없다. 그러나 값의 중복은 가능하다.

const cat = {
    name: "크림",
    town: "강서"
} // name과 town은 키, "크림"과 "강서"는 밸류

속성의 밸류로 함수가 주어지면, 이 속성은 메소드가 된다.

const cat = {
    name: "크림",
    town: "강서",
    eat: function(){
        console.log("츄르 먹는다냥")
    },
    scratch: function(){
        console.log("건드리면 할퀸다")
    }
}

객체 안의 속성 값을 참조할 때는(읽거나 쓸 때) 도트나 대괄호를 통해 사용할 수 있다.

console.log(cat.town)
cat.scratch()

console.log(cat['name'])
cat['eat']()

• 스프레드 연산자(...)
  : 객체 리터럴의 요소 목록을 펼칠 수 있다. 전개 구문, 전개 연산자 등으로 불린다.
  객체 리터럴에 대해 스프레드 연산을 수행하면, 구성 요소를 그대로 복사한다.

const bird = {
    parrot: "앵무새",
    chicken: "닭"
}

const animal = {
    ...bird, //여기서 bird에 들어있는 두 요소를 그대로 복사해옴.
    dog : "강아지"
}

console.log(animal)

{
    parrot: '앵무새',
    chicken: '닭',
    dog: '강아지'
}

스프레드 연산자는 배열의 요소를 복사할 때 아주 유용하게 사용할 수 있다.

const pet = ["강아지", "고양이"]
console.log(...pet) // => 강아지 고양이
console.log(pet) // => ['강아지', '고양이']

스프레드 연산자는, 사용된 자리에 개별 요소를 놓고 온다.

빌트인 객체 JSON

: 자바스크립트 객체 표기법(JavaScript Object Notation)을 뜻하며, 이는 자바스크립트 객체를 문자열로 표현하는 데이터 포맷이다.
주로 자바스크립트에서만 사용할 수 있는 객체 타입을, 다른 프로그래밍 언어에서도 사용할 수 있는 형태(문자열)로 변환하기 위해 사용된다.

JSON 형식은 자바스크립트 객체 리터럴 표기법에 기반을 두고 있다.
객체의 키와 문자열은 따옴표로 묶어야 하나, 나머지는 그대로 표기할 수 있다.

const gokuJSON = `{
    "name": "손오공",
    "race": "사이야인",
    "skills": [
        "에네르기파",
        "계왕권",
        "원기옥",
        "순간이동"
    ]
}`

JSON 표기를 도와주는 내장 객체 JSON의 두 메소드를 사용하면 객체를 JSON 형식 문자열로 변환하거나, 그 반대의 환원도 진행할 수 있다.

• stringify : 객체 to JSON , undefined, 함수 등은 생략되거나 null 로 반환한다.
• parse : JSON to 객체, 작은 따옴표, 후행 쉼표는 파싱이 불가하기도 한다.
  
  
  ## window.localStorage : 현재 도메인의 로컬 저장소에 접근할 수 있게 해준다. 로컬 저장소는 웹브라우저에서 각 도메인에 대해 할당해주는 저장공간으로, 여기에는 데이터를 영구적으로 보관할 수 있다. 데이터 보관 시에는 데이터의 이름과 데이터의 실제 값을 각각 지정하며, 이때 데이터 타입은 문자열 형태만 허용된다. 영구적 보관이 가능하기 때문에 브라우저를 끄거나 페이지를 새로고침해도 해당 도메인의 데이터가 남아 있도록 할 수 있다.

크롬 -> 개발자 도구 -> Apllication 탭에서 조회 가능하다.

• 로컬 스토리지로부터 데이터를 읽거나 쓸 때 사용하는 메소드
  • setItem : 키와 밸류를 전달받아 저장. setItem("key","value")
  • getItem : 전달받은 키에 해당하는 밸류를 반환. getItem("key")
  • removeItem : 전달받은 키에 해당하는 데이터를 삭제. removeItem("key")
  • clear : 모든 데이터 삭제. clear()

! 로컬 스토리지의 데이터 이름은 중복될 수 없다.
! 객체 리터럴을 스토리지에 저장하려면 JSON.stringify 를 이용하자.

배열의 메소드

• map : 배열의 각각의 요소에 대해 콜백을 호출한 결과를 모아 새로운 배열을 반환 => 콜백함수의 return 값들을 모아서 새로운 배열을 만든다.
• filter : 배열의 각각의 요소에 대해 콜백을 호출한 결과 중에서 true를 반환하는 모든 요소를 모아 새로운 배열을 반환
• 콜백함수란?
  : 함수나 메서드에 전달되는 함수를 일컫는다.

http

: HyperText Transfer Protocol의 준말로 웹 브라우저와 웹 서버가 데이터를 주고받을 수 있게 디자인된 통신 규약이다.
웹에서 이루어지는 모든 데이터 교환의 기초이며, 이 규약을 암호화하여 보안을 확보한 규약은 https이다.

• http 통신
  http에서는 클라이언트(사용자)가 서버(호스트)에 요청 메시지를 보내고 이에 대해 서버가 응답하는 메시지를 반환한다. 서버는 응답 메시지를 반환한 후에 초기 상태로 돌아간다.
  이러한 특징으로 인해 http를 stateless 규약이라고도 한다.
• http 요청과 응답
  • 요청
    : http 요청 메시지는 행, 헤더, 메시지 본문으로 구성된다
    • 요청 행 : 요청 메소드, url, http 버젼 정보 등을 포함한다.
    • 요청 헤더 : 메시지 정보, 메시지에 저장한 데이터 정보 등을 포함한다.
    • 메시지 본문 : 서버 측으로 보내는 데이터를 포함한다.
    • ! 요청메소드란?
      : GET, POST 등 데이터 송수신 방식을 지정한 것
  • 응답
    : http 응답 메시지는 행, 헤더, 메시지 본문으로 구성된다
    • 응답 행 : 상태 코드, 보충 메시지, http 버젼 정보 등을 포함한다.
    • 응답 헤더 : 메시지 정보, 메시지에 저장한 데이터 정보 등을 포함한다.
    • 메시지 본문 : 클라이언트 측으로 보내는 데이터를 포함한다.
      • 200 : OK , 요청 성공
      • 401 : unauthorized , 인증실패
      • 403 : Forbidden , 엑세스 허용되지 않음
      • 404 : Not Found , 요청한 리소스를 찾지 못함
      • 500 : Internal Server Error , 서버 내부 오류 발생
      • 503 : Server Unanailable , 서비스 일시적 사용 불가
        
        
    • ! 상태 코드란?
      : 요청이 성공적으로 완료되었는지를 나타내어주는 숫자 코드

XMLHttpRequest

: 서버와 상호작용하기 위해 사용하는 자바스크립트의 빌트인 생성자이다. 서버(URL)로부터 데이터를 받아와 전체 페이지의 새로고침 없이도 페이지의 일부만 업데이트하는 비동기 방식의 데이터 통신을 수행할 수 있다.
이러한 프로그래밍 기법을 Ajax(Asynchronous JavaScript And XML)라 한다.
Ajax는 웹 서버와 비동기로 통신하고 DOM을 이용하여 웹 페이지를 동적으로 갱신하는 프로그래밍 기법을 말한다.

• 사용 흐름
  1. XMLHttpRequest 객체 생성(new 연산자)
  2. 서버와 통신할 때 필요한 정보 및 처리 방법 등을 기입
  3. 요청을 전송해 통신을 시작한다.
• 이벤트 핸들링
  : 비동기 통신을 할 때는 서버와의 통신 상태를 감시할 수 있다. 이 때 발생하는 이벤트에 대한 이벤트 핸들러를 등록할 수 있다.
  아래는 XMLHttpRequest 객체의 주요 이벤트 몇가지를 정리한 것이다.
  • abort : 요청이 취소되었을 때
  • error : 요청이 실패했을 때
  • load : 요청을 성공하여 응답을 가져올 수 있을 때
  • progress : 데이터를 주고받는 중
  • timeout : 요청 시간을 초과했을 때
• 요청 초기화 및 전송
  : 서버에 요청을 보낼 때는 XMLHttpRequest 객체의 open 메소드로 요청을 초기화하고, 이후 send 메소드로 보내주는 순서로 작업을 수행한다.

const request = new XMLHttpRequest()
request.open("HTTP메소드","서버URL")
// 초기화하기
request.send()
// 요청보내기