IT_susu

GET : 읽기URL을 적고, params를 추가할 수도 있다.params는 ?key:value형태로 추가된다.인증이 필요한 것은 headers에 해당 key와 value를 추가해주면 된다.요청을 보내면 body탭에 응답결과가 보여진다. 형식을 선택해서 확인해본다. POST : 생성URL을 적고 body탭에 row데이터 json형식으로 작성후 sendheaders : Content-Type : application/json PUT : 수정URL을 적고, 해당 URL의 데이터를 body의 row데이터 json형식으로 변경 후 sendheaders : Content-Type : application/json DELETE : 삭제headers 필요없구, body값 필요없음

REST API) 애플리케이션 통신 오늘날 PC, 모바일기기 등등 다양한 기기간의 상호 운용성이 기본 기능으로 제공되어야 합니다. 따라서 각기 다른 애플리케이션 간에 통신이 필요합니다.즉, 모든 애플리케이션이 기본 운영체제 및 프로그래밍 언어에 의존하지 않고 다른 애플리케이션과 통신할 수 있어야 합니다. 웹서비스웹서비스는 애플리케이션과 시스템이 인터넷을 통해 데이터를 교환하는 데 사용하는 표준 및 프로토콜 모음입니다. 웹서비스는 모든 프로그래밍 언어로 작성될 수 있으며 운영체제에 독립적입니다. REST란?REpresentational State Transfer의 약자.2000년도 로이필딩이 박사학위 논문에서 최초 소개클라이언트와 서버의 동작을 제어하는 기본 특성 및 프로토콜을 제공하는 상태 비저장 소프트..

동일 출처 정책(SOP)한 출처(Origin)에서 로드 된 문서나 스크립트가 다른 출처의 자원과 상호작용하지 못하도록 제한하는 정책입니다.동일 출처를 판단하는 기준은 프로토콜(protocol), 호스트(host), 포트(port) 가 같으냐 입니다.이는 쉽게 말해 웹페이지 스크립트는 해당 페이지와 동일한 서버에 있는 데이터만 Ajax 비동기 요청하여 처리할 수 있습니다. 이 정책은 초기에는 크로스 사이트 스크립팅이 해킹 이슈가 있기 때문에 보안을 위해 좋은 방법으로 생각되었으나, 최근에는 여러 도메인에 걸쳐 구성되는 대규모 웹 프로젝트가 늘어나고 REST API 등을 이용한 외부 호출이 많아지는 상황이라 서비스 개발에 걸림돌이 되었습니다. 해결책1) CORS. 서버 개발단 해결책이에 추가로 만들어진 정책..

비동기는 언제 서버에서 요청이 올 지 알 수 없기 때문에 이벤트가 필요합니다.xhr.onreadystatechangexhr.readyStatus : 0(uninitialized) / 1(loading) / 2(loaded) / 3(interactive) / 4(complete)

Asynchronous Javascript And Xml Ajax란?javascript와 JSON을 사용해 비동기 통신 방법으로 웹 애플리케이션을 제작하는 것을 말합니다. 간단히, 서버측 Scripts와 통신하기 위한 XMLHttpRequest객체를 사용하는 것을 말합니다. Ajax가 기존 기술과 다른 점은 요청/응답 과정을 통해 불필요한 부분까지 처리하지 않는다는 점입니다.쉽게 말해 필요한 부분만 별도로 요청하고, 응답받아 처리할 수 있는 거죠.모든 데이터를 업데이트 할 필요가 없으니 불필요한 대역폭 감소가 가능하고, 이는 비용 절감을 가져옵니다. ajax의 또다른 장점은 사용자가 대기하는 시간을 줄일 수 있다는 점이죠.페이지를 새로고침하지 않고도 필요한 데이터만 받아와서 내용을 업데이트 시킬 수 있으..

node.js 환경에서 로컬 서버 만들때 사용하는 라이브러리입니다.자동 리로드 기능이 되어 사용하기 편하고, ajax 연습을 해볼 수 있습니다. npm 사이트에서 live-server를 검색합니다.터미널에서 npm install -g live-server 를 칩니다. live-server -v라이브 서버의 설치 버전을 알 수 있으며 설치 여부를 확인하는 용으로도 쓰입니다. live-server --port=8080 --browser=chromeport값, browser을 지정해서 서버를 구동

CSSOM이란?CSS Object Model의 약자로, 자바스크립트에서 CSS를 조작할 수 있게 해주는 API 세트입니다. 요소의 크기(Dimensions) width, height clientWidth, clientHeight ⇲ 너비/높이(width/height) + 패딩(padding) offsetWidth, offsetHeight ⇲ 너비/높이(width/height) + 패딩(padding) + 보더(border) + 스크롤바 scrollWidth, scrollHeight ⇲ 스크롤 가능한 너비/높이 영역

css에서 style 속성은 -으로 연결되지만, javascript에서는 camelCase를 사용합니다. element.styleelement.style 명령을 사용하게 되면 html 요소에 inline 속성으로 style을 적용한다. element.style.cssText = '';복수의 style 속성을 정의할 경우 element.style.cssText = '';로 작성한다. 개행을 하고 싶다면 줄 끝에 \를 넣자. 이 외에 style값을 조작하고 싶다면getAttribute('style'), setAttribute(), removeAttribute() 등이 있다.단, float는 이미 javaScript에 있으므로 cssFloat를 사용하면 된다. 근데 이렇게 가져온 style값은 inline 속..

HTML Element 속성parentNode.children (IE9+) - 자식 '요소'만 가져옴. 읽기 전용 속성. 라이브로 업데이트 됨.firstElementChild - 첫번째 자식 '요소'만 가져옴lastElementChild - 마지막 자식 '요소'만 가져옴nextElementSibling - 다음 형제 '요소'만 가져옴previousElementSibling - 이전 형제 '요소'만 가져옴attributes(이 속성을 통해 반환되는 유사 배열 집합은 라이브 상태, 즉 실시간으로 변경된다) - 해당 요소가 갖고 있는 속성을 알려줌innerHTML - 해당요소 내부 html 코드를 가져옴. HTML 텍스트 코드를 실제 DOM 노드로 변환. 해당 속성은 무겁고 비싼 대가를 치루는 HTML 해석기..

NODEELEMENT의 상위 개념. NODE 속성자식, 형제, 부모, 노드유형, 이름, 값을 알 수 있습니다.childNodes : 직계 자식 노드들을 가져온다.firstChild : 첫번째 자식lastChild : 마지막 자식nextSibling : 다음 형제previousSibling : 이전 형제parentNode : 부모 요소nodeType : 노드의 유형nodeName : 노드의 이름nodeValue : text node의 값. string type으로 반환. NODE 메서드hasChildNodes() - 자식 노드를 포함하고 있는지 여부를 boolean값으로 반환. appendChild() - 마지막 자식으로 추가insertBefore(추가할 노드, 기준노드) - 기준노드 앞에 노드 추가rem..