지난시간 까지는 fetch API를 사용하는 방법에 대해서 살펴보았습니다. 이번 시간에는 배운 것을 적용해보겠습니다. 우리가 써먹고 싶은 index.html로 와서 보겠습니다. WEB HTML CSS JavaScript 저 부분을 클릭했을 때 아래 부분이 나오는건 onclick이라고 하는 자바스크립트 이벤트 덕분입니다. 그러면 onclick의 그 부분에 fetch.html에서 작성했던 부분을 가져오면 됩니다. WEB HTML CSS JavaScript 여기있는 코드의 원리를 모른다고 해도 '아 이 fetch api에서 여기에 있는 'html' 이 부분을 수정하면 서버에 접속해서 html 파일을 요청하는구나' 라는 것만 알면 됩니다. 다음 시간에는 Ajax의 리팩토링 함수화에 대해서 알아보겠습니다.

안녕하세요, 이번 시간에는 fetch API에서 response 객체에 대하여 알아보겠습니다. 익명함수 저 주석 처리된 fetch api 부분을 보면, then 안에 function이 들어가 있는 괴상한 모양을 하고 있는 것을 볼 수가 있는데요. 이런 것을 익명함수라고 합니다. 함수가 여기저기서 여러번 사용될 거면 이름있는 함수를 작성하면 되고, 한번만 사용할거면 익명함수를 사용하면 됩니다. 아무튼 여기도 익명함수로 바꿔보겠습니다. fetch api의 사용설명서를 보면, then에 콜백함수를 주게 되면, 콜백함수를 fetch api가 실행시킬 때 저 함수의 첫번째 인자의 값으로 response 객체를 주겠다고 적혀있습니다. (객체이름은 response로 적던 res로 적던 아무 것으로 적어도 상관 없습니..

안녕하세요, 이번 시간에는 fetch API의 원리와 문법적인 해석을 해보겠습니다. 클라이언트와 서버가 서로 통신을 하는 상황에서, 클라이언트가 우선 요청을 하는데 fetch('javascript')라는 것은 어떤 의미냐면 우리가 웹브라우저한테 웹브라우저야, "자바스크립트라는 파일을 서버에게 응답해줘" 라고 요청한 것입니다. 그러면 서버는 응답을 할 것입니다. fetch('html') 까지만 쳐보고 실행해보기 ↑ fetch.html 이렇게 치고 실행을 해보면 클릭 전 클릭 후 이처럼 클릭하면 html에 접속해서 데이터를 가져오고 있는 것을 볼 수가 있습니다. fetch라고 하는 함수는 첫번째 인자로 전달한 데이터를 서버에게 요청하는 함수입니다. .then()이라는 건 무엇일까 fetch('html').t..

안녕하세요, 이번 시간에는 Ajax가 무엇인지에 대해 알아보겠습니다 ༼ つ ◕_◕ ༽つ 🍭Ajax란? - JavaScript의 라이브러리중 하나, Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자 - 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 - JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다. - 즉, 쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다. 🍮비동기 방식이란? 비동기 방식은 웹페이지를 reload하지 않고 데이터를 불러오는 방식이며 Ajax를 통해서 서버에 요청을 한 후 멈추어..

프로미스(promise)란? - 프로미스는 자바스크립트 비동기 처리에 사용되는 객체(Object)이다. - 비동기 처리: ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미함 - 프로미스를 사용하면 콜백 함수를 계속해서 불러서 코드의 가독성이 떨어지는 일명 '콜백 지옥'을 없이 쉽게 비동기 처리 가능 - 프로미스는 정해진, 장시간의 기능을 수행하고 나서 정상적으로 기능이 수행이 되어졌다면 "성공의 메시지와 함께 결과 값을 전달" - 만약 기능을 수행하다가 예상치못한 문제가 발생했다면 "Error를 전달" 프로미스 학습에 중요한 포인트 2가지 1) State(상태) 2) Producer VS Consumer - Producer(제공자): 우리가 원하는 ..