1. awaitawait은 Promise를 반환하는 함수가 일을 모두 끝마치고 그 결과값을 반환할 때까지 대기하는 구문입니다.// fetch는 promise를 반환합니다.const response = await fetch('https://...')// response.json도 promise를 반환합니다.const data = await response.json()비동기 함수가 작동하는 동안, Promise는 세 가지 상태를 가집니다. Pending은 함수의 일이 마칠 때 까지 대기하고 있는 상태입니다.Fulfilled는 함수의 일이 모두 끝마치고 결과를 반환한 상태입니다.Rejected는 함수가 오류로 인해 일을 끝마치지 못한 상태에서 종료된 상태입니다. 여기서 await 구문은 pending 상태의 ..

콜백(Callback)은 함수의 매개변수로 또 다른 함수로 전달하는 것입니다.콜백은 비동기 처리가 가능하다는 장점이 있지만, 콜백 헬 현상이 나타날 수도 있다는 단점 또한 존재합니다.이 문제를 해결하기 위해 사용하는 문법이 Promise입니다.Promise()Promise는 비동기 작업이 완료되면 값을 알려주는 객체입니다. 작업이 완료되면 값을 알려줄 것을 '약속'하기 때문에 promise라고 부릅니다. Promise는 비동기 함수를 감싸며, 해당 비동기 함수는 resolve와 reject 함수들을 인자로 가집니다.resolve는 함수 작업이 완료했을 때 실행할 callback을, reject는 에러가 발생했을 때 실행할 callback을 받습니다.const p = new Promise((resolve,..

콜백(Callback)은 함수의 매개변수로 또 다른 함수로 전달하는 것입니다.이렇게 전달되는 매개변수 함술를 콜백함수(callback function)라고 합니다. 콜백 함수를 매개변수로 전달할 때는 괄호() 없이 이름만 입력하며,함수내에서는 일반 함수를 사용할 때와 동일하게 사용할 수 있습니다.function a(){ console.log('this is function a');}function b(){ console.log('this is function b');}function printFunc(func){ func(); // 일반 함수처럼 호출합니다.}// 인자로 함수 a, b를 넘겨줍니다.printFunc(a);printFunc(b);새로 선언할 필요 없는 간단한 함수의 경우, arrow fun..

속성은 요소들이 가지는 특징입니다.때문에 어떠 속성은 모든 종류의 태그에서 사용할 수 있는 반면, 어떤 속성은 정해진 종류의 태그에서만 사용할 수 있습니다.1. Display요소를 어떤 영역 범위로 하여 보여줄 것인지 결정합니다.blockblock 요소. 한줄을 전부 차지하는 사각형 영역none객체 없음inline내용의 길이에 따라 크기가 달라지는 사각형 영역inline-block표현은 inline이나, 내용은 block 요소. 인접한 inline과는 같은 줄에 표시됨list-item글머리가 추가된 block 요소2. Border영역 범위를 시각화합니다.none선 없음dotted짧은 점선dashed긴 점선solid실선double이중 실선 (borderWidth > 3px)groove3dridge테두리가 ..

Element는 getElement 또는 querySelector 종류의 함수로 얻어지는 요소로, 문서의 각 구성요소에 해당하는 객체입니다. 속성 반환값 attributes 속성들 childNodes 하위 객체들 innerHTML 하위 HTML parentNode 상위 객체 메소드 매개변수 기능 반환값 appendChild(obj) element obj :삽입할 요소 obj를 마지막 자식 요소로 이동 getAttribute(attr) str attr : 속성 요소의 특정 속성값 가져오기 속성값 getAttributeNode(attr) str attr : 속성 요소의 특정 속성 객체 가져오기 속성 객체 insertBefore(obj, child) element obj : 삽입할 요소 element chil..

Document는 대표적인 DOM 객체 중 하나로, window 객체 바로 밑에 종속되는 최상위 객체입니다. HTML 문서 자체를 document 객체 하나로 볼 수 있습니다. Document에는 사용할 수 있는 수많은 속성과 메소드가 있으며, 그 중 대표적인 것을 좀 더 자세하게 소개합니다. 메소드 매개변수 기능 반환값 open() 팝업창 열기 close() 팝업창 닫기 execCommand() 문서에서 사용 가능한 명령 실행 1. open & close 팝업창을 열고 닫습니다. 두 함수 사이에 작성되는 코드는 모두 팝업창에 표시됩니다. 때문에 open()을 호출한 후에는 반드시 close()도 함께 호출해야 합니다. 2. exeCommand 문서에서 사용 가능한 명령(복사, 붙여넣기 등)을 실행합니다..

Cookie는 사용자가 브라우저를 닫아도 브라우저가 사용자의 정보를 저장할 수 있도록 합니다. 쿠키는 PC의 특정 위치에 텍스트 파일로 저장되며, 저장 전에 얼마 동안 저장할 것인지를 지정합니다. 쿠키는 보안에 취약하기에 중요한 정보는 쿠키로 저장하지 않는 것이 좋습니다. ※ 쿠키는 window가 아닌 document에 속해 있는 객체입니다. 쿠키는 문자열로만 저장할 수 있습니다. 따라서 쿠키를 저장할 때는 다음과 같은 형식의 문자열로 정리하여 document.cookie로 넘겨줘야 합니다. document.cookie = "=; expires=; path=; domain=; secure" - expires | date.toGMTString()으로 받아와 저장합니다. 지정하지 않으면 브라우저를 닫는 즉시..

1. LocationLocation은 현재 URL에 대한 정보를 제공합니다.속성반환값hash 또는 href 값의 # 다음 부분host호스트 이름과 포트 번호hostname호스트 이름hrefURL 전체pathnameURL 중 특정 리소스에 접근하는 경로 부분port포트번호protocol통신방식searchhref 값의 ? 다음 부분target타깃 프레임의 이름 메소드매개변수기능반환값assign(url)str url : URL 주소URL의 HTML 문서 읽기HTML 문서reload() 현재 문서 다시 읽기HTML 문서replace(url)str url : URL 주소history 객체의 URL을 현재 주소로 대체※ 이전의 주소는 history에 남지 않음HTML 문서 var count = 10;function..