10.1 API Registering a View part.2 😎이번 시간에 할 것 지난 시간에 백엔드에서 작성한 URL에 접근하기 위해 프론트엔드를 작성할 것이다. assets > js > videoPlayer.js로 가서 코드 작성하기 우리가 비동기 통신으로 처리해줘야 할 기능이 조회수 기능과 덧글 기능이 있는데, 일단 지금 하는 조회수 기능은 fetch로 할 것이고 덧글기능을 위해서는 axios를 사용할 것이다. 동영상이 있는 페이지에서 console로 fetch("http://localhost:4000/api/60531411f3ca0d4f485c23ea/view")라고 치면 pending 상태의 promise가 뜬다. 이처럼 fetch는 promise를 반환한다. const registerView..

10.0 API Registering a View part.1 💩이번 시간에는 조회수 기능을 구현할 것이다. 조회수 기능을 위해서 Ajax라는 것을 사용할 것이다. Ajax란? Asynchronouse Javascript and XML , 비동기 JS, XML 통신이다. 예를 들면 이 video가 끝나면 JavaScript에 전달해서 서버 URL로 가도록 하고 그 URL은 이 비디오가 시청됐다고 등록하는 것이다. 이 기능은 그 URL에 어떤 템플릿이 필요한 것이 아니다. 즉, 화면을 렌더링하지 않고 서버와 통신하는 것이다. 이런 것이 흔히 말하는 Single Page Application의 기본이 된다. 우리가 잘 아는 넷플릭스와 유튜브도 이러한 방식으로 동작한다. 예를 들어, 유튜브를 보면 내가 홈에서..

안녕하세요, 이번 시간에는 여태 작성했던 코드를 함수화 해보겠습니다. WEB HTML CSS JavaScript 지난시간 까지 작성했던 코드를 보면 중복이 발생하고 있습니다. 소프트웨어를 만드는 과정에서 언제나 고심해야할 부분은 '어떻게 하면 중복을 제거할 수 있을까?' 입니다. 여기 있는 이 코드 중에서 중복인 부분이 있고 중복이 아닌 부분이 있습니다. fetch('html').then(function(response){ response.text().then(function(text){ document.querySelector('article').innerHTML = text; }) }) 저 'html' 이부분은 중복이 아닌 부분이고, 나머지는 중복인 부분 입니다. 그러면 어떻게 하면 중복을 제거할 수..

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