1. Our First React Element 더보기좋아, 여러분. 이번 강의에서는 React JS element를 어떻게 생성하는지 설명해줄거야 기억해, 우리의 목표는 여기 있는 코드를 React JS로 다시 구현하는거야 자, React JS의 규칙 중 하나는 HTML을 이 페이지에 직접 작성하지 않는다는 거야 그렇게 안할거야 그 대신에, 우리는 Javascript 코드를 사용할 거야 span이든 버튼이든 무엇이든 만들기 위해서 말이지 HTML 코드를 직접 작성하지 않을거야 그 대신, Javascript와 React JS를 이용하여 element를 생성할거야 이건 정말 정말 유용한데 나중에 왜 그런지 알게 될거야 자 이번 비디오에서는, React JS로 element를 생성하는 어려운 방법을 먼저 보..
1. Realtime Comment - fetch는 백엔드로 가고 백엔드는 db랑 뭔가를 하고 나서 상태코드를 리턴하고 이후 우리에게 돌아오는데 이때 시간이 소요됨 - 그렇기에 fetch에 await을 사용 - 이게 없어도 작동은 하지만 페이지가 새로고침 됐는데 fetch가 끝나지 않으면 시간이 그만큼 충분하지 않았다는 거임 - 조회수는 간단하기에 필요없지만 지금은 필요함 - fetch는 Promise를 리턴하는데 이게 시간이 좀 걸림 - 그래서 fetch 이후의 코드는 fetch 동작이 끝났을 때만 실행되도록 함 - 끝났다라는 표현은 동작이 성공했다는 것과는 다른 개념임 - 우리가 만든 videoController를 보면 때로는 404 상태코드를 리턴하기도 했음 - 404 상태코드를 받아도 ..
1. Error solution - 이전 상황에서 req.body를 했는데 아무것도 나오지 않았음 - 우리는 서버가 이해할만한 것들을 보내고 있지 않기 때문 - upload에서 form안의 input에 req.body를 사용해서 접근했음 - server.js의 express.urlencoded({extended:true}) 미들웨어를 사용했기에 서버가 form으로부터 오는 데이터를 이해할 수 있었음 - 이것과 비슷하게 서버가 fetch로부터 오는 데이터를 이해할수 있도록 가르쳐줘야 함 - 우리가 fetch를 통해 보내는 데이터는 json 타입임 - 그래서 우리는 fetch의 body를 받아서 stringify 해줘야 함 - 알아둬야 할 것은 js는 객체를 보낼 수 없음 - 브라우저나..
1. Stop Button - 기다리지 않고 버튼 누르면 녹화가 중단되게 살짝 변경 - 정지버튼을 누르고 콘솔을 보면 영상을 얻게 됨 - createObjectURL은 브라우저 메모리에서만 가능한 url을 만들고 앞에 있는 URL은 파일을 가리킴 - 해당 url로 가보면 우리 서버상에 없는데, 이 url은 브라우저에 의해 만들어졌고 접근할 수 있는 파일을 가리킴 - 즉 파일은 메모리에 있음 - 파일을 가지고 뭔가를 하고 싶다면 파일을 url에 집어넣어서 접근할 수 있도록 해야함 - 테스트 해보기 위해 미리보기 부분을 제거하고 녹화한 영상으로 대체 해보겠음 - 그러기 위해선 기존에 만들었떤 srcObject 제거 - 지금은 윈도우를 사용하는 피시로 하다보니 영상을 확인할 순 없지만 해당 url로..
1. Video Recorder - 버튼을 누르면 영상촬영이 되는 기능 구현 - recorder.js파일 만들고 웹팩 entry에 알아서 만들고 업로드에 버튼 만들거임 - 버튼을 누르면 유저의 카메라에 접근 권한이 생기고 유저에게 녹화된 영상을 미리보기 해주고 그걸 저장까지 되게 해야 함 - https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia MediaDevices: getUserMedia() method - Web APIs | MDNThe getUserMedia() method of the MediaDevices interface prompts the user for permission to use a media inpu..
1. Views - 이번에 해볼건 조회수 관리임 - 이번에는 랜더링하지 않는 views를 만들어 볼건데 이런걸 api views라고 함 - 대부분 브라우저에서 이렇게 작동하고 있는데, 요즘 시대에는 백엔드에서 템플릿을 랜더링하지 않음 - 대부분의 웹 앱은 프론트와 백을 정확히 나누고 있기 때문 - 백엔드에서 db와 인증을 처리하고 프론트에서는 리액트 같은 걸로 만듦 - 우리가 사용하고 있는 방식은 SSR(Server Side Rendering) - 즉 서버가 템플릿을 랜더링 하는 것까지 처리 - 요즘은 리액트로 프론트를 만들고 nodejs로 백엔드를 처리 - 사실 nodejs로 템플릿을 랜더링하지 않음 - 지금 하게 될 새로운 방식의 views를 만들고 나면 차이를 알 수 있게 됨 - ..
1. Mouseover - 우선 마우스가 언제 비디오에 들어가고 나오는지를 탐색 - 하지만 유튜브는 영상에 들어가면 컨트롤바가 바로 나타나지만 나갈때는 약간 딜레이가 있음 - showing이 잘 지워지는데 시간내에 다시 들어와도 지워버림 - 우리는 timeout의 return type을 이해해야 함 - 우리가 setTimeout 함수를 부르면 return으로 timeout의 id를 받음 - 여기서 우리는 clearTimeout 함수에 timeout id를 건내주면 됨 - 문제는 영상 안에서 움직이다가 나갔다 다시 들어오면 timeout을 취소하고 싶음 - handleMouseMove와 이 timeout을 공유해야 함let controlsTimeout = null;const handleMouse..
1. Timeline - 영상의 시간을 업데이트하는 기능을 만들거임 - range input의 step에는 어느 크기정도로 넘길지 쓰면 됨 - 현재 재생시간에는 0.1초로 되어있고 timeline의 경우에는 1초씩 넘기게 할 거임 - timeline의 value는 0으로 하고 max는 정의안함 - 그 이유는 min은 0이지만 max의 경우 영상의 길이이기 때문 - 비디오가 열려야 영상의 길이를 알 수 있으므로 우리는 timeline에 영상의 길이를 알려줘야 함 - handleLoadedMetaData가 영상의 길이를 알고 있으므로 이걸 이용해 max값을 찾아냄 - 이제 영상의 시간이 변할때 마다 timeline을 움직이게 만들어야함 - handleTimeUpdate는 영상의 시간이 변경될때마다 감..
1. Loaded meta data event - 메타데이터는 비디오를 제외한 모든것을 말함 - 비디오의 시간이나 비디오의 크기 같은 것들 - handleLoadedMetaData 함수에서는 event로 아무것도 하지 않고 있음 - 하지만 총시간에 video.duration을 넣는 이유는 이 함수가 호출해서 비디오의 길이를 알 수 있기 때문 - 즉 함수가 실행되기 전에는 우린 비디오의 총 시간을 알 수가 없음 - 이제 재생되고 있는 시간은 1초마다 계속 새로고침 되어야함 - 기존 비디오 플레이어의 재생 바를 클릭해도 새로고침이 되어야함 - 영상이 얼마나 진행되었냐에 따라 시간도 따라가야함 - 우린 timeupdate 이벤트를 사용함 2. Time Formatting - data cons..
1. 우선 설정 - 브라우저에서 제공받은 플레이어를 가지고 있지만 너무 기본적임 - 하지만 어떤 스타일도 적용할 수 없고 바꾸려면 우리가 직접 만들어야 함 - HTML CSS 자바스크립트까지 전부 만들어야 함 - 먼저 작동은 되지만 못생긴 자바스크립트를 만들거임 - 그다음 CSS를 사용하여 예쁘게 바꿀거임 - 그전에 webpack이 어떻게 설정됐는지 봐야함 - client의 main.js는 base.pug에 의해 모든 페이지에 포함되어있음 - 여기서 문제는 비디오 플레이어를 만들어 보는건데, 비디오 플레이어 코드를 검색화면에 로드하는게 말이 되는지가 중요함 - 별로 좋지 않음 - 다른 자바스크립트 파일을 만들어서 그 놈을 다른 페이지에 포함시킬거임 - 홈페이지에서는 어떤 자바스크립트도 로드하지 않..