언어/JavaScript 5

async / await

async 키워드는 함수를 비동기 함수로 선언하는 데 사용된다. 비동기 함수 : 내부에 await 키워드를 사용할 수 있는 함수 async 함수 내에서 await 키워드를 만나면, JavaScript 엔진은 해당 표현식의 평가가 끝날 때까지 함수의 실행을 일시 중지한다. 그런 다음, 표현식의 평가가 끝나면 함수의 실행을 재개하고 표현식의 결과를 반환한다. await 키워드는 async 함수 내에서 사용되며, Promise 객체를 기다리는 역할을 수행한다. await 키워드 오른쪽에 있는 표현식은 Promise를 반환하는 함수 호출, 다른 비동기 함수 호출 또는 직접 Promise 객체일 수 있다. await를 사용하면 JS 엔진은 해당 Promise의 결과를 기다린 후, 결과를 반환하거나 변수에 할당한다..

언어/JavaScript 2023.06.03

setAttribute

setAttribute() 메서드는 JavaScript에서 요소의 속성을 설정하거나 변경하는 데 사용된다. 이 메서드를 사용하여 HTML 요소의 속성 값을 동적으로 설정하거나 변경할 수 있다. element.setAttribute(attributeName, attributeValue); # element: 속성을 설정하려는 HTML 요소를 나타내는 변수. # 이 변수는 getElementById(), getElementsByClassName(), querySelector() 등의 메서드를 사용하여 요소를 선택할 수 있다. # attributeName: 설정하려는 속성의 이름을 나타내는 문자열. 예를 들어, "src", "href", "class" 등이 될 수 있다. # attributeValue: 속성에..

언어/JavaScript 2023.06.03

onclick this

JavaScript에서 onclick은 HTML 요소를 클릭할 때 실행되는 이벤트 핸들러를 정의하는 속성이다. onclick 속성에 할당된 값은 클릭 이벤트가 발생했을 때 호출되는 JavaScript 함수이다. 이벤트 핸들러 함수 내부에서 this 키워드는 현재 이벤트가 발생한 HTML 요소를 가리킨다. 이렇게 this를 사용하면 클릭된 요소에 접근하고 해당 요소에 대한 작업을 수행할 수 있다. 예를 들어, 아래의 HTML 코드는 버튼을 클릭했을 때 changeColor 함수를 호출하는 버튼 요소를 가지고 있다. 클릭 JavaScript 함수 changeColor를 다음과 같이 정의하고, this를 사용하여 버튼의 스타일을 변경하는 예제를 살펴보았다. function changeColor() { this..

언어/JavaScript 2023.06.03

toggleClass()

JavaScript의 toggleClass 메서드는 HTML 요소의 클래스를 토글(전환)하는 데 사용된다. 클래스를 토글한다는 것은 요소의 클래스가 이미 존재하는 경우 해당 클래스를 제거하고, 존재하지 않는 경우 클래스를 추가하는 것을 의미한다. 이렇게 클래스를 토글하면 요소의 스타일이나 동작을 변경할 수 있다. Hello, World! 위 블럭을 아래처럼 바꾸면 var myDiv = document.getElementById('myDiv'); myDiv.classList.toggle('highlighted'); myDiv 요소의 클래스 중에 'highlighted' 클래스가 있는지 확인한다. 클래스가 있으면 제거하고, 없으면 추가한다. 따라서 위의 코드를 실행하면 'highlighted' 클래스가 토글..

언어/JavaScript 2023.06.03

JS CRD 연습

슬프게도 프론트에서 너무 많이 막혀서.. 적어도 같은 곳에서는 다시금 시간 지연을 반복하지 않게끔 공부해보았다. // POST 요청 보내기 // 1. 요청할 데이터 생성(정의) // 2. POST 요청 설정(headers = 인증방식, body 양식 등 / body = 내용) // 3. fetch 사용하여 요청, 응답 받기(서버 urls.py에 보냄, 서버의 응답 상태를 사용자에 보고) async function reviewupload() { // 1. 요청할 데이터 생성 const review = document.getElementById('review').value var data = { "content": review }; // 2. POST 요청 설정 var requestOptions = { me..

언어/JavaScript 2023.05.30