[JavaScript] Fetch API
·
Frondend/JavaScript
IntroFetch APIFetch API는 네트워크 요청을 보내고 데이터를 가져오는 인터페이스이며, 기존의 XMLHttpRequest보다 간결하고 강력한 비동기 요청 방식이다.특징Promise 기반으로 비동기를 더 쉽게 다룬다.(응답값으로 Promise 객체를 반환)Http 기본 요청 방식은 GET이며, 두번 째 인자값 안에서 method 속성을 통해 다른 메서드를 사용할 수 있다.응답 객체의 body는 ReadableStream 형태이므로, 본문을 확인하기 위해서는 JSON형태로 변환해야한다.기본 문법  및 사용 예시fetch(url, options) .then(response => response.json()) // JSON 변환 .then(data => console.log("응답 데이터 :"..
[Network] 다양한 API 설계 방식(REST, GraphQL, gRPC)
·
CS/Network
1. REST APIREST API는 자원을 중심으로 설계된 API 아키텍처 스타일로, HTTP 프로토콜을 활용하여 요청과 응답을 처리하며, REST는 Representational State Transfer의 줄임말로, 웹 API를 구축하는 방법에 대한 일련의 규칙 및 지침입니다1 - 1. 특징HTTP 프로토콜 기반으로 표현URI를 사용하여 자원을 명확히 표현무상태성(Stateless)응답 데이터 형식은 주로 JSON이나 XML 사용1 - 1 - 1. HTTP 메서드GET : 데이터를 조회POST : 데이터를 생성PUT, PATCH : 데이터를 수정DELETE : 데이터를 삭제1 - 2. 장점표준화된 설계REST는 명확하고 직관적이며 전 세계적으로 널리 사용됩니다다양한 환경에서 사용 가능브라우저, 모..
[Vue.js] Options API vs Composition API
·
Frondend/Vue.js
Options API Options API를 사용하여 옵션의 data, methods 및 mounted 같은 객체를 사용하여 컴포넌트의 로직를 정의합니다. 옵션으로 정의된 속성은 컴포넌트 인스턴스를 가리키는 함수 내부의 this에 노출됩니다. [특징]구조화 방식: 컴포넌트는 data, methods, computed, watch, props, lifecycle hooks 등의 옵션으로 나누어 관리됩니다. 각 로직이 어디에 위치하는지 명확하게 구분됩니다.코드 일관성: 상태와 메서드, 계산된 속성 등이 명확한 섹션으로 나누어져 있어 코드를 한눈에 이해하기 쉽습니다.초심자 친화적: Vue.js 초보자나 작은 프로젝트에 적합하며, 구조가 직관적입니다. 각 기능이 정해진 곳에 위치하기 때문에 로직이 한눈에 파악..