개발노트

fetch fetch() 함수는 JavaScript에서 네트워크 요청을 보내고 응답을 받을 수 있는 기능을 제공하는 웹 API입니다. fetch() 함수를 사용하여 서버와 데이터를 주고받을 수 있습니다. fetch(url) .then(response => { // 응답을 처리하는 코드 }) .catch(error => { // 에러 처리 코드 }); fetch() 함수는 첫 번째 인수로 요청을 보낼 URL을 받습니다. 요청을 보내면 Promise 객체가 반환됩니다. 이후 then() 메서드를 사용하여 응답을 처리하거나 catch() 메서드를 사용하여 에러를 처리할 수 있습니다. Fetch()로 JSON 데이터 받기 fetch('https://api.example.com/data') .then(respon..

forEach는 배열의 각 요소에 대해 반복적으로 작업을 수행하기 위한 배열 메서드입니다. forEach 메서드는 콜백 함수를 사용하여 배열의 각 요소에 대해 작업을 수행합니다. 1. forEach 사용법 array.forEach(callback(currentValue, index, array), thisArg); array: 반복 작업을 수행할 배열입니다. callback: 각 요소에 대해 실행될 콜백 함수입니다. currentValue: 현재 처리 중인 요소의 값입니다. index (선택적): 현재 처리 중인 요소의 인덱스입니다. array (선택적): forEach 메서드를 호출한 배열입니다. thisArg (선택적): 콜백 함수 내에서 this로 사용할 객체입니다. 2. 다양한 forEach 작성..

preventDefault() preventDefault는 이벤트의 기본 동작을 취소하는 메서드입니다. 이벤트가 발생했을 때 기본 동작을 수행하지 않도록 막는 데 사용됩니다. 일반적으로, 웹 페이지에서 발생하는 이벤트(예: 링크 클릭, 폼 제출 등)는 기본 동작이 정의되어 있습니다. preventDefault 메서드는 이벤트 객체의 메서드로 호출됩니다. 일반적으로 이벤트 핸들러 함수 내에서 사용됩니다. 로그인 위의 예시에서 handleSubmit 함수는 submit 이벤트를 처리하는 핸들러입니다. event.preventDefault()를 호출하여 기본 동작인 폼 데이터의 서버 전송과 페이지 새로고침을 중지시킵니다. 그 후, 폼 데이터를 수집하고 처리하는 등의 추가 동작을 수행할 수 있습니다. 이를 위해..

요소의 클래스를 추가하거나 제거하기 위해 classList 속성을 사용할 수 있습니다. classList는 클래스를 조작하는 여러 메서드를 제공합니다. 1. 클래스 추가하기 classList.add() 메서드를 사용하여 요소에 클래스를 추가할 수 있습니다. // 요소 선택 var element = document.getElementById('myElement'); // 클래스 추가 element.classList.add('myClass'); 위의 코드에서 add() 메서드를 사용하여 myElement 요소에 myClass 클래스를 추가합니다. 2. 클래스 제거하기 classList.remove() 메서드를 사용하여 요소에서 클래스를 제거할 수 있습니다. // 요소 선택 var element = docum..

Javascript에서 createElement()와 appendChild() 를 사용한다면 HTML에 직접 태그를 작성하지 않고 요소를 생성하여 추가할 수 있습니다. 또한, remove() 로 요소를 삭제 할 수 있으며, setAttribute()로 속성 값을 수정할 수 있습니다. 1. 요소 추가하기(CreateElement, appendChild) // 부모 요소 선택 var parentElement = document.getElementById('parent'); // 새로운 요소 생성 var newElement = document.createElement('div'); newElement.textContent = '새로운 요소'; // 부모 요소에 새로운 요소 추가 parentElement.app..

로컬 스토리지(Local Storage)는 웹 브라우저에서 제공하는 클라이언트 측 웹 스토리지 기능으로, 작은 데이터를 사용자의 로컬 컴퓨터에 영구적으로 저장할 수 있습니다. 자바스크립트의 localStorage 객체를 사용하여 로컬 스토리지에 데이터를 저장하고 검색할 수 있습니다. 1. 값 저장 // 로컬 스토리지에 데이터 저장 localStorage.setItem('username', 'John'); // 객체 형태의 데이터 저장 var user = { name: 'Jane', age: 25, }; localStorage.setItem('user', JSON.stringify(user)); 위의 코드에서 setItem 메서드를 사용하여 'username' 키로 'John' 값을, 'user' 키로 u..

일정시간 간격을 두고 function을 호출해야할 때가 있습니다. 일정 시간에 주기적으로 호출하려고한다면 setInterval() 메서드를 사용하고, 일정시간 뒤에 한번만 호출하길 원한다면 setTimeout() 메서드를 사용하면 됩니다. 1. setInterval(function, delay); 일정시간 간격으로 호출하기 function sayHello() { console.log('안녕하세요!'); } setInterval(sayHello, 1000); // 1초마다 sayHello 함수 호출 위의 코드에서 sayHello 함수는 1초마다 한 번씩 호출됩니다. 웹 브라우저의 개발자 도구 콘솔에는 '안녕하세요!'가 매 초마다 출력될 것입니다. clearInterval() 메소드로 타이머 취소하기 var..

fuction을 호출하기 위해서는 직접 소스에 작성하는 방법도 있지만, Event와 함께 사용하는 것이 일반적일 것입니다. 특정 요소에서 마우스 클릭이나 윈도우창에서 스크롤, 창크기 조정, 복사등 Event가 발생되면 들어주는 Listener가 필요합니다. 이와 같은 Listener를 추가하는 방법으로 addEventListener() 라는 메소드를 사용할 수 있습니다. index.html Click Me! app.js const title = document.querySelector(".main__title h1"); console.dir(title); function handleTitle() { title.style.color = "blue"; title.innerText = "OK"; } funct..

document 객체. document는 웹 페이지를 구성하는 HTML 문서를 나타내는 객체입니다. 웹 브라우저에서 HTML 문서가 로드되면, 브라우저는 문서를 파싱하여 document 객체를 생성합니다. 이 객체는 웹 페이지에 존재하는 HTML 태그, CSS 스타일, JavaScript 코드 등 모든 정보에 접근하고 조작할 수 있도록 합니다. document 객체는 HTML 문서의 모든 요소를 참조할 수 있습니다. 예를 들어, document.getElementById() 메서드를 사용하여 문서 내에 특정 ID를 가진 요소에 접근할 수 있습니다. 또한, document.getElementsByTagName() 메서드를 사용하여 문서 내에 특정 태그 이름을 가진 요소에 대한 참조를 가져올 수도 있습니다...

자바스크립트에서 함수는 코드 블록으로서 재사용 가능한 작업 단위를 정의하는 데 사용됩니다. 함수를 사용하면 코드를 모듈화하여 관리하기 쉽게 만들고, 코드의 가독성을 높이고, 코드의 재사용성을 높일 수 있습니다. 함수는 특정한 작업을 수행하거나 값을 반환하는 데 사용될 수 있습니다. 기본적인 Function 작성법. function addNumbers(a, b) { var sum = a + b; return sum; } var result = addNumbers(3, 5); console.log(result); // 8 출력 위 예제는 addNumbers 함수는 a와 b라는 두 개의 Parameter(매개 변수) 를 받고, 이를 더한 값을 Return 합니다. (함수를 통해 값을 다른 변수에 저장하고 싶다..