전체 글 28

http, form(post / get)예제

post HTTP POST 요청은 클라이언트에서 서버로 전송할 때 추가적인 데이터를 body에 포함할 수 있다. get GET 요청은 모든 필요한 데이터를 URL에 포함하여 요청한다. HTML의 태그에 method="POST" 또는 method="GET"(기본값)을 모두 사용할 수 있다. 만약에 GET 메소드를 사용하면 모든 form data는 URL로 인코딩되어 action URL에 query string parameters로 전달된다. POST 메소드를 사용하면 form data는 HTTP request의 message body에 나타날 것이다. https://im-developer.tistory.com/166 [HTTP] HTTP Method 정리 / GET vs POST 차이점 GET이나 POST..

api 요청 (rest api)

https://shinsunyoung.tistory.com/36 공공데이터 API 사용하는 방법 공공데이터 API 오픈 API의 천국이다. 공공 데이터를 API로 사용할 수 있는 곳이다. 이번에 처음 사용해보았는데 정말 좋은 것 같다. 공공 데이터 API 신청하는 방법 여기서 사용할 API는 요즘 핫한 shinsunyoung.tistory.com https://brunch.co.kr/@choikyunghe/64 [MD역량강화 6] 비개발자들을 위한 API활용 문송들도 개발차처럼 API써보자~ | 마켓디자이너스 크루들의 역량 강화를 위한 여섯 번째 시간! 비개발자들을 위한 API 활용 교육이 지난 4월 30일 위워크 삼성역 2호점에서 열렸습니다. 이번 강 brunch.co.kr

API란 ?

API (애플리케이션 프로그래밍 인터페이스) / REST API API는 정의 및 프로토콜 집합을 사용하여 두 소프트웨어 구성 요소가 서로 통신할 수 있게 하는 메커니즘이다. 예를 들어, 기상청의 소프트웨어 시스템에는 일일 기상 데이터가 들어 있다. 휴 대폰의 날씨 앱은 API를 통해 이 시스템과 "대화"하고 휴대폰에 매일 최신 날씨 정보를 표시합니다. API는 서버와 데이터베이스에 대한 출입구 역할을 한다.(허용된 사람들한테만 접근성 부여하기) API는 애플리케이션과 기기가 데이터를 원활히 주고받을 수 있도록 도와준다 API는 모든 접속을 표준화 한다(기계/운영체제 상관없이 누구나 동일한 액세스를 얻을 수 있다) API를 사용하면 구현 방식을 알지 못하는 제품 또는 서비스와도 통신 할 수 있다 퍼블릭 ..

자바스크립트 이벤트 - click / change / keyboard

click - 자바스크립트의 click 함수는 사용자가 클릭을 하지 않아도 강제적으로 이벤트를 발생시키는 함수입니다. 예시로 input창에 키보드로 입력을 할때에 버튼을 클릭을 하지 않고 강제로 이벤트를 발생시킬때 사용하기도 합니다. *input창에 키보드로 값을 입력했을 때 강제로 확인 버튼의 이벤트를 발생시키는 것이다 배너메이커 할 때 값만 입력하고 확인 안눌러도 이미지 사이즈가 바뀌는건 click 이벤트로 하면 된다 input 창에 onkeyup 이벤트가 발생하면 'handleInputOnkeyup()' 함수를 호출하고, 이 함수는 'document.getElementById('my_btn')' '확인' 버튼 element를 선택하고, 'document.getElementById('my_btn')...

unShift랑 비슷한 개념의 메소드 찾아오기 - prepend / append

📌append ( 요소를 내부의 끝부분에서 삽입 ) appendChild와 다른점은 자바스크립트 함수이다. 그래서 노드를 추가하는게 아니라 문자열도 추가가 가능하고 여러개 문자나 요소를 추가할 수 있다. 하지만 appendChild와 다르게 값을 리턴하지 않고 추가만 한다. 그래서 console.log로 찍어도 undefined가 출력된다. const div = document.createElement('div'); const span = document.createElement('span'); document.body.append(div,span,'hello'); appendChild처럼 요소를 만들지 않아도 바로 원하는 문자열을 삽입할 수 있다. 여러개의 요소나 문자를 한번에 추가 가능 📌prepen..

Element.classList ★★★

🔍Element.classLis classList 속성은 DOMTokenList 개체로, 요소의 클래스 이름을 반환합니다. 이 속성은 추가, 제거 및 CSS 클래스를 전환 할 요소에 사용됩니다. classList의 메소드 📌add(String) 지정한 클래스 값을 추가한다 만약 추가하려는 클래스가 이미 존재한다면 무시된다 📌renove(String) 지정된 클래스 값을 제거한다 존재하지 않는 클래스라면 에러발생 📌contains(String) 지정한 클래스 값이 존재하는지 확인한다 true, false 값을 반환한다 📌item(Number) 인덱스 값을 활용하여 클래스값을 반환한다 classList - toggle 클래스의 유무를 체크해서 없으면 add, 있으면 remove를 자동으로 시켜준다. 클래스 ..

★★★ Document.createElement() / createTextNode() / appendChild() - 요소를 추가하기

🔍Document.createElement() - ⭐⭐⭐ 괄호 안에 있는 요소를 생성한다 append로 자식요소에 추가 mdn설명 : HTML 문서에서, Document.createElement() 메서드는 지정한 tagName의 HTML 요소를 만들어 반환합니다. tagName을 인식할 수 없으면 HTMLUnknownElement (en-US)를 대신 반환합니다. .createElement() 요소를 생성 .createTextNode() 텍스트 노드를 만들고 문서에 추가한다 .appendChild() 🔍createTextNode() 텍스트 노드를 만들고 문서에 추가한다 예제) let textNode = document.createTextNode("Hello World"); Hello world라는 텍스..

getElementById / getElementByClassName

getElementById = HTML 요소를 id 속성을 이용해 찾는 것 : Document.getElementById() 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환합니다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용합니다. getElementById는 HTML 요소를 id 속성을 이용해 찾을 때 사용합니다. 🎈id가 없는 요소에 접근하려면 querySelector 사용 🔍동일한 속성의 ID가 여러개라면? 이럴 경우 getElementById 는 맨 처음 발견된 요소만 리턴한다 (문서의 상단에서부터 검색했을 경우 처음 발견된 것) 그렇기 때문에 getElementById를 사용해 요소를 제어하려 한다면 반드시..