프로토타입 자바스크립트는 멀티 패러다임 프로그래밍 언어 - 자바스크립트는 명령형, 함수형, 프로토타입 기반, 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다. - C++나 Java 같은 클래스 기반 객체지향 프로그래밍 언어의 특징인 클래스,상속,캡슐화를 위한 키워드인 public, private, protected등이 없어서 자바스크립트는 객체지향 언어가 아니라고 오해하는 경우도 있으나 클래스 기반의 객체지향 프로그래밍 언어보다 효율적이며 더 강력한 객체지향 프로그래밍 능력을 지니고 있는 프로토타입 기반의 객체지향 프로그래밍 언어임 - ES6에서 클래스가 도입되었으나 ES6의 클래스가 기존의 프로토타입 기반 객체지향 모델을 폐지하고 새로운 객체지향 모델을 제공하는 것은 아님 클래스는 생성..

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

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

9.1 Recording Video part.1 우선 start recording을 눌렀으면 버튼의 innerHTML이 "Stop recording"으로 바뀌게 코드를 넣는다. 그리고 finally부분을 추가하여 removeEventListener 구문을 이곳으로 옮긴다 try나 catch 부분 둘 중 하나가 실행된 후 finally구문이 실행된다. 아직 여기까지 한 것은 진짜 녹화를 한 것이 아니라 그냥 프리뷰만 보이게 한 것이니까 함수 이름을 바꾼다. (startRecording => getVideo) const recordContainer = document.getElementById("jsRecordContainer"); const recordBtn = document.getElementById(..