우당탕탕 개발일지

fetch 함수에는 HTTP 요청을 전송할 URL과 HTTP 요청 메서드, HTTP 요청 헤더, 페이로드 등을 설정한 객체를 전달한다. const promise = fetch(url [, options]) fetch 함수는 HTTP 응답을 나타내는 Response 객체를 래핑한 Promise 객체를 반환한다. 후속 처리 메서드 then을 통해 Promise가 resolve한 Response 객체를 전달받을 수 있다. fetch('https://api.example.com/data') .then(response => { console.log(response) }); .catch(error => { console.log(error); }); - HTTP 응답 처리 Response 객체는 HTTP 응답을 나타..

Ajax - Asynchronous JavaScript and Xml JavaScript를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 - XMLHttpRequest AJAX는 서버와 비동기적으로 데이터를 교환하기 위해 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 사용한다. 이 객체는 요청을 처리하고 응답 데이터를 받아오는 데 사용이 된다. 현재 대부분의 주요 웹 브라우저는 서버에 데이터를 요청하기 위한 XMLHttpRequest 객체를 내장하고 있다. - HTTP 요청 전송 // XMLHttpRequest 객체 생성 const xhr = new XMLHttpRequest(); //..

DOM - Document Object Model Document 객체는 HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공한다. document를 HTML 구성요소로 본다면 크게 head와 body로 구성할 수 있다. document.documentelement는 이러한 head, body를 둘러싼 최상위 HTML element를 반환한다. Document 메소드 HTML 요소 선택 HTML 요소 생성 HTML 이벤트 핸들러 추가 HTML 객체 선택 //해당 아이디의 요소 선택 const el = document.getElementById('first'); //해당 태그 이름의 요소 모두 선택 const pList ..

4. Delete() 함수 만들기 할 일을 삭제하는 'x' 버튼을 눌렀을 때 동작하는 함수이다. 4-1. index 가져오기 버튼을 클릭하였을 경우, 해당하는 todo의 number을 매개변수 index로 받는다. 4-2. ToDo 삭제하기 : filter 활용 filter 함수는 배열을 순회하며 조건에 맞는 원소들로 구성된 새로운 배열을 반환한다. 기존 ToDos의 배열을 모두 순회하며 index와 다른 number로 구성된 todo들을 배열에 저장한 뒤 ToDos에 저장한다. 4-3. View 재설정 ToDos가 재구성 되었으므로 Loading 함수를 호출한다. function Delete (index) { //1. index 가져오기 //2. ToDo 삭제하기 ToDos = ToDos.filter(..

3. Loading() 함수 만들기 3-3. innerHTML활용해서 html 삽입하기 ( 앞서 To-Do List 만들기 1차에서는 제이쿼리를 사용해서 html 코드를 삽입하였다. ) 1차 시도 getElementById() 메서드를 사용하여 id가 "htmlList"인 HTML 요소에 접근한다. 반환 값을 element 변수에 넣어준 뒤, innerHTML을 호출하여 element 뒤에 프로퍼티의 값을 넣어주려 했지만 오류가 발생했다. element에 값을 추가해주는 것이 아닌 값을 대입해서 발생한 문제였다. 즉, ToDos의 배열을 순회하면서 element의 값을 4번씩 초기화 해 준 것이었다. const element = document.getElementById('#htmlList'); ToDo..

[개념 참고 https://uj0791.tistory.com/5 ] To-Do List - JS 문법 ● 배열 : 데이터를 쉼표로 구분해서 대괄호로 묶어 나열해놓은 것 var seasons = ["봄", "여름", "가을", "겨울"]; ● 객체 : 값들을 그룹으로 묶은 데이터 모음 키(Key)와 값(Value) 을 한 쌍으로 정의하며 uj0791.tistory.com 1. to-do list 객체 배열 만들기 할 일 목록(ToDos) 을 배열로 구현하되, 체크 버튼이나 삭제 버튼을 눌렀을 때 키를 통해 처리하고자 할 일(newToDo) 자체는 객체로 구현하였다. 객체는 키(Key)와 값(Value)으로 값들을 묶는다. 할 일 객체는 number, content, check 키들로 구성되어 있다. num..

배열 : 데이터를 쉼표로 구분해서 대괄호로 묶어 나열해놓은 것 var seasons = ["봄", "여름", "가을", "겨울"]; 객체 : 값들을 그룹으로 묶은 데이터 모음 키(Key)와 값(Value) 을 한 쌍으로 정의하며 이를 속성(Proeprties) 라 부른다. 객체의 속성 값을 가져올 때는 객체 이름 뒤에 마침표(.)를 찍고 그 뒤에 속성 이름을 적는다. var kim = { firstName: "John", lastName: "Kim", age : 35, address: "Seoul" } 웹 문서에 있는 요소를 프로그램에서 사용하려면 객체 형태여야 한다. 예를 들어, 웹 문서에 3개의 이미지를 포함시켜야 한다면 Image 객체를 사용해서 똑같은 틀의 객체 3개를 찍어낸 다음 객체마다 원하는..