데이터 통신

Wook·2024년 8월 26일
js코드캠프

💫JavaScript

목록 보기
9/11
post-thumbnail

Geolocation

Geolocation API는 자바스크립트 프로그램이 사용자의 실제 위치를 브라우저에 요청할 수 있도록 해준다. 위치 정보는 GPS, Wi-Fi, IP 주소 등에서 알 수 있다. 브라우저가 지원하는 Geolocation API는 navigator.geolocation 으로 정의되어 있다.

navigator.geolocation.getCurrentPosition( )

사용자의 현재 위치를 호출
Geolocation API는 비동기적으로 동작함

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options)
// successCallback : geolocation 요청 성공시 호출할 콜백 함수
// errorCallback : geolocation 요청 실패시 호출할 콜백 함수
// options: 옵션명:값 형식으로 지정 ex) timeout, maximumAge, enableHighAccuracy

navigator.geolocation.getCurrentPostion(function(position){
  console.log(position);
  let latitude = position.coords.latitude;
  let longitude = position.coords.longitude;
  console.log("현재 위치: " + latitude + ", " + longitude);
});

navigator.geolocation.watchPosition( )

현재 위치를 요청하는 것은 동일하지만, 지속적으로 확인하여 사용자의 위치가 변경될 때마다 지정된 콜백 함수를 호출

navigator.geolocation.clearWatch( )

사용자의 위치 정보 수집을 중단
이 메서드의 전달인자는 watchPosition( )을 호출한 다음 반환받은 ID 값이어야 함

출처: inpa.tistory.com

API

어떤 프로그램에서 제공하는 기능을 사용자가 활용할 수 있도록 만들어 둔 인터페이스

예를 들어, 기상청의 소프트웨어 시스템에는 일일 기상 데이터가 들어 있을 때, 휴대폰의 날씨 앱은 API를 통해 기상청 시스템과 '대화'하여 휴대폰에 최신 날씨 정보를 표시할 수 있다.

HTTP 프로토콜

Hyper Text Transfer Protocol
서로 다른 서버 간에 문자 형식으로 데이터를 주고 받을 때 지켜야 하는 규약

Request Message

  • start-line: 가장 윗줄(GET /data/2.5/weather? HTTP/1.1)
    HTTP Method, 요청 URI(Uniform Resource Identifier), HTTP 버전이 담김
  • 요청 헤더: 그 아래의 Host부터의 정보
    요청 받는 서버의 이름, 서버의 버전, 전달하는 컨텐츠 타입, 요청을 보낸 컴퓨터 정보 등
  • 요청 바디: 서버로 전달하고자 하는 컨텐츠
    요청에 사용한 메서드에 따라 요청 바디를 담을 수 있는지 없는지 결정됨

Response Message

  • status-line: 가장 윗줄(HTTP/1.1 200 OK)
    HTTP 버전, 상태 코드(Status code), 응답 메시지가 담김
  • 응답 헤더: 두 번째 줄 부터의 정보
    응답 날짜, 응답을 전달한 서버의 이름, 서버의 버전, 컨텐츠 타입 등
  • 응답 바디: 응답 리소스 데이터가 담김

HTTP Request Method

  • GET : 서버의 데이터를 조회
  • POST : 서버에 데이터를 등록
  • PUT : 서버의 리소스를 Request body에 담긴 내용으로 수정
  • PATCH : 서버의 리소스의 일부를 수정
  • DELETE : 서버의 리소스를 삭제
  • OPTION : 서버에서 허용하는 Method의 목록을 알려줌

HTTP Status Code

요청에 대한 응답의 결과를 세자리의 번호로 나타냄

  • 1XX : 요청을 정상적으로 받았고, 계속해서 작업 중임을 의미
  • 2XX : 클라이언트의 요청을 수신, 승낙하였고 정삭적으로 요청이 수행될 것을 의미
  • 3XX : Redirection과 관련된 동작이 수행되었음을 의미
  • 4XX : 클라이언트가 보낸 요청이 잘못되었음을 의미
  • 5XX : 요청을 받아 수행하는 과정에서 문제가 생겼음을 의미

동기와 비동기

동기(Synchronous)

  • 요청과 그 결과가 동시에 일어남
  • 하나의 작업이 종료될 때까지 다음 작업은 기다리는 실행 방식
  • 순서에 맞춰 진행되는 장점이 있지만 여러 가지 요청을 동시에 처리 불가

비동기(Asynchronous)

  • 요청과 결과가 동시에 일어나지 않음
  • 하나의 요청을 즉시 처리하지 않아도, 대기시간 동안 다른 요청 처리 가능
  • 여러 개의 요청을 동시에 처리할 수 있지만 동기 방식보다 속도가 떨어질 수 있음

자바스크립트 실행 환경

  • stack : 먼저 들어온 함수, 데이터가 가장 마지막에 처리됨, LIFO(Last in First Out)
  • queue : 먼저 들어온 함수, 데이터가 가장 먼저 처리됨 , FIFO(First in First Out)
  • 기본적인 함수들은 모두 call stack에 쌓이고, 비동기 함수(Web APIs 포함)들은 모드 callback queue에 쌓임
  • callback queue에 쌓이 함수들은 call stack이 먼저 비워지면 call stack으로 하나씩 옮겨짐
setTimeout(() => {
	console.log("setTimeout call")
})

const func3 = function() {
	console.log("func3 call")
}

const func2 = function() {
	func3()
	console.log("func2 call")
}

const func1 = function() {
	func2()
	console.log("func1 call")
}

func1()

// 결과
// func3 call
// func2 call
// func1 call
// setTimeout call

Promise 객체

비동기 처리

자바스크립트는 싱글 스레드이기 때문에 한 번에 하나의 동작만 수행 가능(동기)
이후 비동기 작업을 수행하기 위해 callback 함수를 사용하게 됨

callback 함수 : 단지 함수를 등록하기만 하고, 어떤 이벤트가 발생하거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수

하지만 callback 함수가 여러 번 중첩되는 경우 가독성에서 심각한 손해를 보게되는 콜백 지옥(calback hell) 발생
각 함수마다 정상적인 동작에 대한 처리, 에러에 대한 처리가 필요하기 때문

const callback1 = function() {
  const callback2 = function() {
    const callback3 = function() {
      const callback4 = function() {
        const callback5 = function() {
          // ...
        }
      }
    }
  }
}

Promise

new Promise() 로 객체를 직접 생성 가능
현재는 얻을 수 없지만 이후 작업이 완료되면 받아올 수 있는 데이터에 대한 접근 수단

Promise 객체의 상태

  • 대기(Pending) : 비동기 처리가 아직 완료되지 않은 상태
  • 이행(Fulfilled) : 비동기 처리가 완료되어 결과값이 반환된 상태
  • 실패(Rejected) : 비동기 처리가 실패 혹은 오류가 발생한 상태
const promiseTest = function() {
  return new Promise((resolver, reject) => {
    setTimeout(()=>{
      resolver(100);
    }, 2000);
  })
}

promiseTest( )

// promiseTest() 라는 함수를 실행하고, 그 반환 값으로 Promise 객체를 돌려받음
// Promise 객체를 생성할 땐 내부에 함수를 인자로 넣을 수 있고,
// 내부 함수는 resolver, reject를 배개변수로 받음

// 비동기 처리가 완료되면 resolver가 호출됨 => Fullfilled
// 비동기 처리가 실패하면 reject가 호출됨 => Rejected

통신을 통해 응답을 받아오는 과정은 코드가 실행되는 과정보다 느린 경우가 많음
-> 통신도 비동기 처리가 필요
-> then( ), catch( ) 메서드를 사용

✅ fetch( ) : 원격 API를 간편하게 호출할 수 있도록 브라우저에서 제공하는 함수

fetch(url, options)
  .then((response => console.log("response : ", response))
  .catch((error) => console.log("error : " + error))       
)
// 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받아서 Promise 타입을 반환
// 반환된 객체는 API가 성공했을 경우 응답 객체를 resolve 하고,
// 실패했을 경우 예외 객체를 reject 함

fetch API의 응답 객체(response object)는 json( )메서드를 제공
-> 응답받은 JSON 데이터를 javascript 객체로 변환할 수 있다.

fetch(데이터를 요청할 서버 url)
 .then(response => response.json())
 .then((json) => {
   // 실행할 코드
  })

then( )

fetch(HTTP Request)
  .then((res) => {
  console.log(res)
})
  • fetch()를 사용한 후 응답이 올 때까지 기다리도록 fetch()에 붙여서 then()을 사용
  • then() 메서드는 Promise 객체를 돌려주는 함수라면 언제든지 사용 가능
  • 요청에 의한 통신이 완료되면 then( ) 메서드 내부로 코드의 실행이 옮겨짐
  • 통신의 결과로 받은 데이터를 then( ) 메서드 내부에 익명함수의 매개변수로 받을 수 있음

catch( )

fetch(HTTP Request)
  .then((res) => {
    console.log(res)
  })
  .catch((err) => {
    console.log(err) 
  })
  • then( ) 메서드에 붙여서 catch( ) 메서드를 사용
  • 통신 과정 중 문제가 발생하거나, then( ) 메서드 내에서 로직을 수행하다가 에러가 발생하면 catch( ) 메서드로 분기를 나눠줄 수 있음
  • error의 내용을 catch( ) 메서드 내부에 익명함수의 매개변수로 받을 수 있음
profile
Wook
Keep going
이전 포스트

스코프, 호이스팅

다음 포스트

구조분해할당

0개의 댓글