Javascript6 Fetch API Fetch API란?Fetch API는 비동기 HTTP 요청을 수행하기 위한 최신 웹 표준 JavaScript API입니다. 서버와 통신하여 데이터를 가져오거나 전송하는 작업을 간단하게 처리할 수 있으며, 기존의 XMLHttpRequest를 대체하는 기능을 제공합니다.Fetch API의 주요 특징Promise 기반:Fetch는 Promise를 사용하므로, 비동기 작업을 처리하는 코드가 더 간결하고 읽기 쉬워졌습니다.then()과 catch()를 사용하거나 async/await으로 코드를 작성할 수 있습니다.표준화된 API:Fetch API는 최신 브라우저 환경에서 표준화된 방법으로 HTTP 요청을 처리합니다.응답 및 요청 스트림 처리:Fetch는 응답 데이터를 스트림 방식으로 처리하여 대규모 데이터도 효.. 2024. 11. 11. 백틱(Backtick, ```) 백틱(Backtick, ```)은 자바스크립트에서 템플릿 리터럴(Template Literals)을 작성할 때 사용하는 기호입니다. 백틱은 기존의 문자열 작성 방식(', ")보다 다양한 기능을 제공하여 문자열을 다루는 데 매우 유용합니다.1. 기본 사용법백틱을 사용하면 문자열을 작성할 때 여러 줄에 걸친 문자열을 쉽게 만들 수 있으며, 표현식을 삽입할 수 있는 기능도 제공합니다.const message = `This is a string using backticks!`;console.log(message); // 출력: This is a string using backticks!2. 여러 줄 문자열백틱을 사용하면 여러 줄에 걸친 문자열을 쉽게 작성할 수 있습니다. 기존 방식에서는 줄바꿈 문자(\n)를 .. 2024. 10. 14. 문서 객체 모델 (DOM) 문서 객체 모델 (DOM)문서 객체 모델(DOM)은 자바스크립트를 이용해 HTML 문서에 접근하고 제어할 수 있도록 하는 객체 기반의 구조입니다. DOM을 사용하면 웹 페이지의 구조를 자바스크립트로 동적으로 변경할 수 있습니다. DOM은 트리 구조로 되어 있으며, HTML의 각 요소는 노드(Node)라는 객체로 표현됩니다. DOM 쓰는 이유 : 페이지를 처음 로드한 이후에도 자바스크립트를 통해 새로운 요소를 추가하거나, 스타일을 변경하거나, 이벤트를 처리하는 등 동적인 조작이 가능 !!!DOM의 기본 구성요소 노드 (Element Node): 모든 HTML 태그는 요소 노드로 간주됩니다. 각 HTML 태그가 트리 구조에서 하나의 노드로 존재합니다. Hello, World! 텍스트 노드 (Te.. 2024. 10. 4. 프로퍼티(Property)와 메서드(Method) 그리고 배열(Arrays) 프로퍼티(Property)와 메서드(Method)자바스크립트에서 프로퍼티와 메서드는 객체(Object)의 중요한 구성 요소입니다.1. 프로퍼티(Property)프로퍼티는 객체의 속성을 나타내며, 키-값 쌍으로 저장됩니다.키(Key)는 문자열 또는 심볼(Symbol)이어야 하며, 값(Value)은 원시 값(숫자, 문자열, 불리언 등) 또는 다른 객체, 함수 등이 될 수 있습니다.// 객체의 프로퍼티 정의const person = { name: "John", // name이 프로퍼티 (키) age: 30 // age가 프로퍼티 (키)};// 프로퍼티 접근 방법console.log(person.name); // Johnconsole.log(person.age); // 30프로퍼티에 접근하는.. 2024. 10. 4. 이벤트(Event)와 이벤트 처리기(Event Handler) 이벤트(Event)와 이벤트 처리기(Event Handler) 개념 정리1. 이벤트(Event)이벤트는 브라우저나 사용자가 수행하는 행동을 말합니다. 예를 들어, 마우스 클릭, 키보드 입력, 페이지가 로드되는 것 등이 모두 이벤트에 해당합니다. 웹 페이지에서 특정 동작이 발생할 때 이벤트를 발생시키고, 그 이벤트에 반응하여 특정 작업을 실행하게 할 수 있습니다.대표적인 이벤트:click: 사용자가 요소를 클릭했을 때 발생mouseover: 마우스를 요소 위에 올렸을 때 발생keydown: 키보드를 눌렀을 때 발생load: 페이지나 리소스가 모두 로드되었을 때 발생2. 이벤트 처리기(Event Handler)이벤트 처리기는 이벤트가 발생할 때 실행되는 함수입니다. 이벤트가 발생하면 해당 이벤트 처리기가 호.. 2024. 10. 4. 자바스크립트 기초 정리 자바스크립트 기초 정리1. 기본 함수alert(): 사용자에게 경고창을 띄웁니다.alert("Hello, World!");confirm(): 확인/취소 버튼이 있는 대화 상자를 띄웁니다. 사용자의 선택에 따라 true 또는 false 값을 반환합니다.const result = confirm("Are you sure?");prompt(): 사용자에게 입력창을 띄워 값을 입력받습니다. 반환값은 문자열입니다.const name = prompt("What is your name?");2. 출력하기document.write(): HTML 문서에 직접 쓰기 (웹 페이지에 출력)document.write("Hello, World!");console.log(): 콘솔에 출력 (개발자가 디버깅할 때 주로 사용)conso.. 2024. 10. 4. 이전 1 다음