인터페이스 개발/DOM, OpenApi, Ajax7 REST 서비스 REST 서비스 다른 머신의 데이터를 조작 REST 서비스 REST(Representational State Transfer) 자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미 즉, 자원(resource)의 표현(representation)에 의한 상태 젂달 자원(resource)의 표현(representation) 자원: 해당 소프트웨어가 관리하는 모든 것 Ex) 문서, 그림, 데이터, 해당 소프트웨어 자체 등 자원의 표현: 그 자원을 표현하기 위한 이름 Ex) DB의 학생 정보가 자원일 때, ‘students’를 자원의 표현으로 정한다. 상태(정보) 전달데이터가 요청되어지는 시점에서 자원의 상태(정보)를 전달 JSON 혹은 XML를 통해 데이터를 주고 받는 .. 2020. 10. 8. Ajax Ajax 동기함수 : 호출했다가 리턴되면 이어서 실행 ex) input() 비동기함수 : 바로 리턴 ex> request GET Ajax(Asyncronous javascript and xml) 현재 페이지 유지, 일부만 내용 변경 지원 ex) 지도, 댓글 XMLHttpRequest Ajax를 지원하는 브라우저의 객체 /static/ajax_info.txt Ajax 테스트 입니다. /static/ajax_ex01.html The XMLHttpRequest Object Let AJAX change this text. Change Content xhttp.open("GET", "/static/ajax_info.txt", true); : 비동기(False 동기) 오버해드가 커서 라이브러리 쓰는게 좋다. 아래는.. 2020. 10. 8. 이미지 검색 API 이미지 검색 API get_context_data(): 안에 넣어주면 된다. 함수/객체 https://developers.naver.com/main/ 개발자 가입 Documents > 서비스 API > 검색 Application > 애플리케이션 등록 Application > 애플리케이션 등록 Client ID, Client Secret 확인 애플리케이션 > 내 애플리케이션에서 확인 가능 준비사항 애플리케이션 등록 클라이언트 ID와 secret 확인 API 권한 설정 '내 애플리케이션'의 'API 권한관리' 탭 --> 해당 API 체크 여부 확인 체크되어 있지 않을 경우 403 에러(API 권한 없음)가 발생 API 기본 정보 GET https://openapi.naver.com/v1/search/imag.. 2020. 10. 8. Requests Requests 모듈 설치 pip install requests Javascript의 axios와 같은 역할 튜토리얼 http://docs.python-requests.org/en/master/user/quickstart/ 주요 메서드 .get() .post() .put() .delete() 등 기본 요청 방법 import requests URL = 'http://www.tistory.com' res = requests.get(URL) print(res.status_code) print(res.text) GET 요청할 때 parameter 전달법 import requests URL = '...' params = { 'param1': 'value1', 'param2': 'value' } res = requ.. 2020. 10. 8. JSON JSON JSON(JavaScript Object Notation) Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷 데이터 전송 및 수신할 때 메시지 포맷으로 주로 사용 Javascript JSON 객체가 지원 : 브라우저 Python json 모듈에서 지원 : dJango JSON 문자열 JSON을 문자열로 표현 키는 만드시 "" 문자열로 표현 값 파트는 데이터 타입에 맞춰 표현 json_str = """ { list : [ {"name" : "kyeongrok", "age" : 32}, {"name" : "bomi", "age" : 25}, {"name" : "cl", "age" : 27} ] } """ Javascript의 JSON 처리 직렬화(Seriali.. 2020. 10. 8. DOM 이벤트 DOM 이벤트 이벤트 핸들러 추가하기 전체 이벤트 보기 https://www.w3schools.com/jsref/dom_obj_event.asp 이벤트 사용하기 My Heading 1 Click Me! DOM 이벤트 Click on this text! JS code : 비권장 (html 문 안에 JS code) 목록 보기 item - 1 item - 2 item - 3 item - 4 목록 보기 item - 1 item - 2 item - 3 item - 4 목록 보기 ... onmouseover , onmouseout 이벤트 Mouse Over Me onmousedown, onmouseup , onclick 이벤트 Click Me HTML DOM EventListener el.addEventListen.. 2020. 10. 8. DOM DOM (Document Object Model) HTML DOM (Document Object Model) My link My header 엘리먼트 검색 HTML 엘리먼트 찾기 id로 찾기 var myElement = document.getElementById("intro"); 태그명으로 찾기 var x = document.getElementsByTagName("p"); var x = document.getElementById("main"); var y = x.getElementsByTagName("p"); 클래스명으로 찾기 var x = document.getElementsByClassName("intro"); CSS 셀렉터로 찾기 var x = document.querySelectorAll("p.i.. 2020. 10. 8. 이전 1 다음