본문 바로가기
728x90
반응형
SMALL

분류 전체보기155

fetch https://velog.io/@ldaehi0205/ajax-fetch-xhr-비동기통신-이해하기#fetch ajax, fetch, xhr 비동기통신 이해하기 기존의 웹 애플리케이션은 브라우저에서 폼을 채우고 이를 웹 서버로 제출(submit)을 하면 하나의 요청으로 웹 서버는 요청된 내용에 따라서 데이터를 가공하여 새로운 웹 페이지 를 작성하고 응 velog.io 참고 출처 (1)fetch 원격 api를 간편하게 호출할 수 있도록 브라우저에서 제공하는 함수 비동기 통신 가능 프로미스를 반환함 fetch ( url, options) (위치,옵션 ) 첫번쨰 인자 : url 두번째 인자 : 옵션 객체 : → http 방식(method ) , http 요청 헤더(headers), http 요청 전문(body).. 2023. 8. 3.
서버에서 자료 가져오기 다운로드하여 웹 브라우저에 보여줌 (2) XMLHttpRequest (XHR) : 비동기 통신을 위해 서버와 클라이언트 사이에 주고받은 통신 기법 : XMLHttpRequest 객체를 이용하여 사용 2-1) 서버로 자료 요청하기 (1) 객체 생성 new XMLHttpRequest() let xhr = new XMLHttpRequest() (2) 요청 초기화 open() 사용 방식 : GET,POST,PUT 자료위치 : 요청할 서버의 url 지정 비동기 여부 : true ) 비동기 false ) 동기 open(방식,자료위치,비동기 여부) (3) 요청 전송 send() 사용 open()에서 POST로 지정 - 매개변수 ) 서버로 넘길 내용 open()에서 GET로 지정 - null,혹은 빈상태 xhr.ope.. 2023. 8. 3.
json이란 (1) JSON이란 : 자바스크립트 객체 표기법을 사용하는 텍스트 형식의 자료 1-1) JSON 형식 수, 문자열,논리값,NULL,배열,객체 { "이름" : 값, "NAME":"ME", "FULL_NAME" : "IT'S ME", //문자열 "GRADE":2 // 숫자 "등급":{ "1":"1등급", "2" : "2등급" } //배열 } 비교 { NAME : "도레미" } 1-2) 객체를 JSON 자료로 변환하기 - JSON.stringify() 함수 자바스크립트의 객체 → json 형식으로 저장 json 형식을 요구하는 서버로 자료 전송 JSON.stringify(객체) let student = {name: "도레미",major:"computing"} //객체 생성 let json = JSON.stri.. 2023. 8. 3.
http 통신 1-1) http 란 프로토콜 : 클라이언트와 서버 간에 자료를 주고받을 때 필요한 규칙 → http : 웹에서 사용하는 프로토콜 http 요청 : 클라이언트에서 서버로 자료 요청 http 응답 : 서버에서 응답해서 클라이언트로 자료 보냄 1-2) 요청 헤더와 응답 헤더 헤더 : 클라이언트에서 서버로 전송되는 형태 요청헤더 : 클라이언트 → 서버 (요청할 때 보내는 헤더) 응답 헤더 : 서버 → 클라이언트 (메시지를 보내는 시간, 어떻게 표시할지) 응답 본문 : 서버→ 클라이언트 ( 실제 이미지, 텍스트 등 실제 사이트 내용) 1-3) 요청방식, GET, POST : 요청 헤더의 방식(method) 클라이언트 → 서버 : 요청 헤더 + 요청 본문 함께 전송 서버로 자료를 무언가를 요청할 때 주소의 뒤에 .. 2023. 8. 3.
고급 선택자(연결선택자, 속성선택자,가상선택자 ) id 선택html에서 ..id는 html에서 유일해야됨class 선택html에서...class를 html내에서 다른 요소에 적용 해도 됨(1)연결 선택자1-1) 하위 요소에 스타일 적용하위요소 : 특정 요소 기준 그 안에 포함된 요소  자식요소 : 현재 요소 기준 바로 한 단계 아래 요소손자요소 : 자식 요소의 한단계 아래 아래 료소하위 선택자 (자손 선택자 ) : 부모 요소에 포함된 하위 요소를 모두 선택상위 요소 하위요소section p { } //section 요소의 모든 하위 p에 적용 할 스타일자식 선택자 : 하위 선택자와 다르게 자식 요소에만 스타일 적용부모요소 > 자식 요소 section> p { } //html text //자식요소 text11 //하위 요소1-2) 형제 요소에 스타.. 2023. 8. 2.
배경 (1) 배경색과 배경 범위 지정 1-1) background-color background-color: #00000; background-color : rgb(0,0,0); background-color:green; background-color:inherit; //전역값 background-color : currentcolor; // 특정 키워드 값 지정 1-2) background-clip : 배경색의 적용 범위 조절 border-box : 박스 모델의 가장 외곽(테두리) 까지 (기본값) (테두리 영역과 그 안쪽 영역을 채움 ) padding -box : 박스 모델에서 테두리를 뺀 패딩 범위 까지 적용 content-box: 내용(콘텐츠) 부분에만 적용 (2) 배경 이미지 지정 2-1) backgro.. 2023. 8. 2.
728x90
반응형
LIST