본문 바로가기

📺 Front End/-- JS & ES6+13

[Javascript] Fetch API로 구현하는 Ajax 비동기 통신 ajax XMLHttpRequest 객체를 이용해서 웹 서버와 비동기로 통신하고, DOM 을 이용해서 웹 페이지를 동적으로 바꿔주는 프로그래밍 기법 Asynchronouse JavaScript XML 현재 XML을 사용하는건 드물고 JSON을 사용 페이지 새로고침 없이 특정 데이터만 리로드 서버로부터 데이터를 받고 작업을 수행 ajax 구현하기 ajax를 구현하는 기술에는 여러 기술이 존재한다. 그 중에 대표적인 3가지에서 Fetch API에 대해서 알아보자. XMLHttpRequest Fetch API JQuery Fetch API Fetch API는 기본적으로 XMLHttpRequest 보다 더 강력하고 유연하다. 이벤트 기반인 XMLHttpRequest과는 달리 Fetch API는 Promise 기.. 2021. 2. 26.

[Javascript] 자바스크립트에서 HTML Element의 이벤트를 다루는 방법 이번 시간은 자바스크립트에서 HTML 요소의 이벤트를 다루는 방법과 Todolist를 만들어보며 학습하는 시간을 갖도록 하겠다. 학습 순서 이벤트 객체란? 이벤트 등록, 삭제하기 addEventListener() removeEventListner() 지금까지 배운 내용으로 Todo 리스트 만들어보기 이벤트 등록, 삭제하기 우리는 지난 시간 까지 HTML Element를 등록, 수정, 삭제하는 방법에 대해 학습하였다. 이번 시간에는 우리가 지난번에 만든 Element에 이벤트들 등록시켜보는 일을 할 것이다. 이벤트 등록하기 이벤트를 등록하기 위해서는 addEventListener() 메서드를 사용한다. target.addEventListener(type, listener, useCapture); targe.. 2021. 2. 20.

[Javascript] 자바스크립트에서 HTML DOM을 다루는 방법 오늘은 JS 에서 HTML DOM 객체를 가져와 조작하는 방법에 대해서 알아볼 것이다. 오늘 배울 내용들이 모든 상황에서 사용되는 것은 아니고 대충 JS 에서도 이렇게 할 수 있구나 하는 생각이 목적이다. 더 자세한 내용은 많이 있으니 이번 글을 보고 방향을 잡아가길 바란다. 학습 순서 엘리먼트 가져오기 getElementById() getElementByName() getElementByClassName() getElementByTagName() 엘리먼트에 원하는 텍스트 추가하기 innerHTML innerText 엘리먼트 생성, 삭제, 수정하기 createElement() appendChild() removeChild() 엘리먼트 가져오기 HTML 요소 (Elements)를 제어하려면 우선 HTML .. 2021. 2. 20.

[Javascript] 자바스크립트에서 JSON 을 다루는 방법 JSON Json 은 JavaScript Object Notation 이라는 의미의 축약어로 데이터를 전송하거나 저장할 때 사용되는 경량 데이터 형식이다. 보통 JSON을 REST API 통신할 때 주고받는 Request, Response Body 에 사용한다. 즉 서버와 클라이언트간의 교류에서 많이 사용된다. 클라이언트는 서버에게 처리해야할 내용을 JSON 데이터로 변환하고 전송한다. 그럼 서버는 클라이언트로부터 온 JSON 데이터를 서버의 스펙에 맞게 재변환한다. 여기서 말 하는 서버의 서펙이란 Java로 구성된 서버인지, Python으로 구성된 서버인지를 뜻한다. 원래 JSON이라는 것은 JavaScript에서 탄생한 형식이라 Js의 객체와 매우 비슷하다. Javascript Object VS JS.. 2021. 2. 20.

이전 1 2 3 4 다음

티스토리툴바