Front-End

JS Fetch API를 이용한 Ajax 통신

Fetch API 방식 이용한 Ajax Ajax는 정통적으로 XMLHttpRequest() 객체를 사용하여 서버와 데이터를 교환합니다. 하지만 이 방식은 코드가 복잡하고 가독성이 좋지 않아 최신 기술인 fetch() 메서드를 통해 Ajax 통신하는 법에 대해 포스팅하겠습니다. Fetch API 사용 장점 Fetch API는 Promise 기반으로 구성되어 있어 비동기 처리 방식에 적합한 형태입니다. 체이닝 방식으로 작성 가능하기 때문에 가독성이 좋습니다. Fetch API는 JavaScript 기본 기능이기 때문에 JQuery 같은 라이브러리를 가져다 쓰지 않기 때문에 가볍습니다. Fetch 문법 사용법 fetch("URL", option) .then((response) => response.text()..

JS AJAX ( Asynchronous JavaScript And XML )

AJAX: Asynchronous JavaScript And XML AJAX는 Javascript와 XML을 이용한 비동기적 정보 교환 기법입니다. AJAX를 이용함으로 사용자가 서버에 자료를 요청할 때 화면 전환 없이 요청한 자료를 받을 수 있습니다. 또한 사용자가 기다릴 필요 없이 다른 작업을 바로 수행할 수 있습니다. Ajax 기초 메서드 종류 설명 load() (데이터를 전송하여) 외부 콘텐츠를 가져올 때 사용 $.ajax() 데이터를 서버에 HTTP POST, GET방식으로 전송할 수 있음. HTML, XML, JSON, 텍스트 유형에 데이터를 요청할 수 있음. $.post(), $.get(), $.getJSON() 메소드의 기능을 하나로 합쳐 놓은 통합적인 메서드. $.post() 데이터를 서..

JS JSON: JavaScript Object Notion

JSON: JavaScript Object Notion JavaScript 객체 표기법으로 작성된 텍스트 기반의 방식입니다. JSON은 쉽게 읽고 작성할 수 있고, 소프트웨어에서 파싱 및 생성하기도 쉽습니다. 때문에 주로 컴퓨터간 데이터 교환 형식으로 쓰입니다. JSON 표기법 {}로 데이터를 묶고 key: value로 구성 데이터는 ,로 구분합니다. {중괄호}는 객체를 구성 [대괄호]는 배열을 구성 // 예제 1 '{"name":"kim", "age":25, "address":null}' // 예제 2 { "students":[ {"name":"kim", "age":25}, {"name":"lee", "age":30}, {"name":"choo", "age":18} ] } JSON ↔ JS 객체 파싱 ..

JS JQuery ( + JQuery 사용 방법 )

사실 JQuery가 무거워서 일를 사용하기 보다는 기존 JS를 이용하여 개발을 하는 것이 더욱 좋은 퍼포먼스를 낼 수 있다는 말도 있습니다. 실제로 프로트엔트 커리큘럼 한 자료에서는 JQuery가 빠졌을 정도로 대체가 가능하지만 그래도 아직은 사용하는 곳이 많은거 같기 때문에 간단하게라도 봐보도록 하겠습니다. JQuery JQuery란 화면의 동적 기능을 JS(자바스크립트)보다 쉽게 개발할 수 있게 해주는 JS 기반 라이브러리입니다. DOM과 이벤트 객체는 브라우저 종류가 다를 경우 다른 결과 값을 나타낼 수 있다는 단점이 있습니다. 이런 호환성 문제는 JQuery를 이용함으로 해결되었습니다. 호환성 문제만이 아니라 JQuery는 다양한 애니메이션과 효과를 지원하는 메서드를 지원하기 때문에 개발 시간을 ..

JS Web API ( storage, fetch, geolocation )

Storage API Web Storage API는 브라우저에서 Key-Value 구조 데이터로 저장하고 검색하기 위한 방법을 제공합니다. window.localStorage 특정 웹사이트의 로컬 저장소에 대한 접근을 제공 해당 도메인에 대한 데이터를 저장, 읽기, 수정, 삭제 할 수 있습니다. 데이터는 만료일이 없이 저장되어 브라우저를 닫아도 삭제되지 않습니다. localStorage.setItem("name", "Kim"); // 저장소에 데이터 저장 localStorage.getItem("name"); // 저장소에서 데이터 항목 검색 window.sessionStorage localStorage 객체와 세션에 저장한다는 차이점만 빼면 똑같습니다. 세션에 저장하기 때문에 브라우저를 닫으면 데이터가 ..

JS BOM( Browser Object Model ): 브라우저 객체 모델

BOM: 브라우저 객체 모델 브라우저에 내장된 객체를 브라우저 객체라고 합니다. window는 브라우저 객체의 최상위 객체이고, window 객체에는 하위 객체가 포함되어 있습니다. window window 객체는 브라우저의 창을 나타냅니다. 모든 전역 변수, 객체, 함수들은 window 객체의 멤버가 됩니다. 심지어 DOM의 document도 window 객체에 포함되기 때문에 아래 두 코드는 같은 결과를 나타냅니다. window.document.getElementById("header"); document.getElementById("header"); window 객체 window.open("URL", "새 창 이름", "새 창 옵션") - 새 창 열기 window.close() - 현재 창 닫기 w..

JS DOM( Document Object Model ): 문서 객체 모델

DOM: 문서 객체 모델 문서 객체 모델(DOM)은 HTML 문서 구조를 말합니다. HTML 문서의 구조에서 최상위 객체로는 이 있으며, 그 하위 객체로는 와 가 있습니다. 모든 HTML 태그는 객체 또는 노드라 합니다. Document는 document 노드라 하고 태그들도 모두 노드입니다. HTML 태그 내의 텍스트 역시 텍스트 노드라 하고 주석도 주석 노드라 합니다. 위 그림 처럼 노드들은 트리 구조를 구성기 때문에 태그를 루트 노드가 되고, 태그와 태그는 루트 노드의 자식 노드가 됩니다. 이 같은 노드들은 모두 JS를 통해 접근할 수 있고 조작할 수 있습니다. 예를 들어 태그는 document.body로 접근할 수 있고 텍스트 노드는 innerHTML속성으로 접근할 수 있습니다. DOM 노드 탐색..

JS async & await

async & await async와 await은 JS의 비동기 처리 방식인 Promise를 더 쉽게 작성하고, 가독성이 좋게 만들어주는 문법입니다. async function 함수명() { await 비동기_처리_메서드명(); } async는 함수가 Promise를 반환하도록 하는 키워드입니다. await은 async 함수 내에서 사용할 수 있는 키워드로 함수 실행을 일시 중지하고 Promise가 처리되면 결과와 함께 함수가 다시 실행됩니다. async async는 function 앞에 붙이는 키워드로 함수가 Promise를 반환하도록 하는 키워드입니다. 만약 Promise가 아닌 값을 반환하더라도 Promise.resolve("반환값") 형식인 이행된 Promise가 반환됩니다. 아래 예시를 보면 "..