지난시간 까지는 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..

안녕하세요, 이번 시간에는 fetch API 사용법에 대해 알아보겠습니다. 지난시간에 Ajax가 무엇인지에 대해 개념적으로 알아보는 시간을 가졌는데요. Ajax를 구현한 여러가지 방법 중 최신 방법이 fetch API 입니다. ↑ fetch.html 이런 파일을 작성해보았습니다. fetch라고 써있는 버튼이 있고 클릭하면 hi라는 경고창이 뜨게 하는 코드입니다. 일단은 우리가 Ajax를 사용하기 위해서 필요한 코드를 하나하나 이해하기 전에 기계적으로 타이핑해보겠습니다. ↑ fetch.html 그리고 css.txt 파일에 ' CSS CSS is .... ' 라고 적었습니다. fetch.html을 실행하고, 개발자도구-network에서 확인해보면, 버튼을 누르기 전에는 fetch.html만 존재하고 있습니다..

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

9.2 Recording Video part.2 지난시간에 데이터를 어떤 이유인지 얻어올 수 없었다. 그런데 알고보니 데이터는 레코딩이 다 끝나야 얻을 수 있다고 한다. 현재 start recording을 누르면 데이터는 recording 되는데, 아직 접근할 수 없다. 왜냐하면 디폴트로 MediaRecorder는 한번에 모든걸 저장하게 되어있기 때문이다. 그래서 dataavailable는 레코딩이 멈췄을 때 호출이 일어난다. 레코딩이 끝났을 때 전체 파일을 얻을 수 있다는 말이다. 🎁stopRecording 함수 만들기 const recordContainer = document.getElementById("jsRecordContainer"); const recordBtn = document.getEle..