dada's

fetch() 함수가 지원이 되면서 대부분의 경우 사용 할 수 있기 때문에 굳이 라이브러리(axios, jquery)를 사용하지 않아도 원격 api를 호출 할 수 있다. 📌 fetch() 사용법 : 첫번째 인자로 url, 두번째 인자로 옵션 객체를 받고 promise타입의 객체를 반환한다. 반환된 객체는 api호출이 성공했을 경우에는 응답(respones) 객체를 resolve(해결)하고 실패의 경우 예외(error)객체를 reject(거부)한다. fetch(url, options) .then((response) => console.log("response:", response)) .catch((error) => console.log("error:", error)); 옵션객체에는 HTTP방식(method..

📍동기(Synchronous) : 동기란 요청을 보낸 후 응답을 받아야지만 다음 동작이 이루어지는 방식이다. 모든 일이 순차적으로 실행됨. 📍 비동기(Asynchronous) : 요청을 즉시 처리하지 않아도 대기 시간 동안 또 다른 동작이 이루어지는 방식이다. 모든 일이 병렬적으로 실행됨. [ 비동기 처리를 사용하는 경우 💡 ] 1. 사용자 이벤트 처리 브라우저 화면에서 발생하는 사용자의 이벤트는 예측이 불가능하여 특정 이벤트가 발생할 때 호출을 원하는 내용을 callback함수에 전달하게 된다. (클릭이나 마우스오버 등등..) 2.네트워크 응답 처리 화면단에서 서버에게 요청을 보냈을 때, 그 응답이 언제 올 지 알 수 없기 때문에 이런 서버에 대한 응답처리도 비동기 적으로 처리해야된다. 3. 파일을 읽..

순수 자바스크립트로 tab기능을 만들어 보았다 1. ui 만들기 [HTML] Products Information Shipping Shipping 상품설명입니다. Product 상품정보입니다. Info 배송정보입니다. Shipping 배송정보입니다. Shipping [CSS] ul.list { list-style-type: none; margin: 0; padding: 0; border-bottom: 1px solid #ccc; } ul.list::after { content: ''; display: block; clear: both; } .tab-button { display: block; padding: 10px 20px 10px 20px; float: left; margin-right: -1px; ..

javascript 안에서 this는 4가지 정도의 의미를 가지고 있다. 1. window object 💡window : javascript의 기본 함수들이 들어있는 object이다 console.log(this); //window object 출력 function 함수(){ console.log(this); } 함수(); //window object 출력 이렇게 아무것도 없이 this를 출력하면 window object를 뜻한다. 그런데 'use strict' 모드에서 출력을 하면 undefined가 나온다. 2. object안의 함수(메소드)에서의 this = 해당 메소드를 가지고 있는 object var object = { data : 'kim', 함수 : function(){ console.log..

alert, prompt, confirm = 브라우저 환경에서 사용되는 최소한의 사용자 인터페이스 기능 alert : 사용자가 확인 버튼을 누를때까지 메세지를 보여주는 창이다 메세지가 있는 작은 창은 모달 창(modal window)라고 부른다 prompt : 텍스트 메세지와 입력 필드(input field), 확인 및 취소 버튼이 있는 모달 창을 띄워준다 prompt함수는 두개의 인수를 받는다 사용자가 prompt의 입력 상자에 원하는 값을 입력하고 확인을 누르면 사용자가 입력한 값이 출력된다 값을 입력하길 원하지 않는 경우는 취소버튼을 누르거나 ESC을 눌러 대화상자를 빠져나갈 수 있다 사용자가 입력을 취소한 경우는 null이 반환된다 // 문법 result = prompt(title, [defaul..

DOM(Document Object Model)에 대한 개념에 대해 알아보자 자바스크립트는 HTML조작에 특화된 언어이다 그런데 어떻게 자바스크립트가 HTML을 조작할까? HTML을 조작하기 위해선 HTML을 자바스크립트가 해석할 수 있도록 정리가 필요하다 그래서 자바스크립트는 HTML을 쉽게 해석하기 위해 오브젝트(Object)와 비슷한 자료형에 담아서 사용한다 이렇게 HTML자료를 정리한 것을 DOM이라고 한다 브라우저는 HTML을 읽을때 DOM을 생성한다 HTML을 위에서부터 한줄씩 해석을 하는데 HTML보다 위에 HTML을 조작하는 자바스크립트를 작성하면 DOM이 생성되기 전이기 때문에 해석을 못한다. jQuery에서는 HTML파일을 다 읽었는지 알려주는 이벤트 리스너가 있다 => $(docume..