Youtube Clone

ES6를 사용하고 싶은데 브라우저는 이를 인식하지 못한다. 따라서 ES6를 옛날 자바스크립트로 바꿔줄 수 있는 도구가 필요하다. Babel intro 왼쪽이 ES6로 작성한 코드이고 오른쪽이 babel이 변환한 코드이다. 사용방법 @babel/core : loca

수정된 내용을 적용하기 위해서는 서버를 껐다가 켜야한다. 귀찮다. 저장하면 자동으로 서버를 재시작해주는 툴이 필요하다.npm i nodemon"scripts": { "start": "nodemon --exec babel-node src/init.js --delay 2

morgan은 요청에 대한 응답 정보를 알려주는 미들웨어다.morgan("dev")를 기준으로 하면, GET /v 404 9.319 ms - 140이라는 결과가 콘솔에 나온다.HTTP method : GET주소 : /vstatus : 404(error)응답 속도 : 9

파일을 업로드할 때 사용한다.

로그인을 구현하려면 어떻게 해야 할까?session은 프런트엔드(웹 브라우저)와 백엔드(웹 서버) 간의 활동을 기록한다. Velog에 로그인하는 과정을 보자.사용자가 브라우저에서 정보를 입력하면 서버에서 그 정보가 맞는지 확인하고 맞으면 로그인된다. 브라우저를 잠시 껐

connect-mongo? cookie와 session을 통해 로그인을 구현할 수 있게 됐다. 그러나 문제가 있다. session이 서버에 저장된다는 것이다. 더 정확히 말하면 session ID는 cookie에 저장되고, session data는 서버에 저장된다.

유저의 비밀번호를 그대로 DB에 저장하는 것은 위험하다. 따라서 암호화해서 저장할 필요가 있다. Hash Function 유저의 비밀번호가 123이라 가정하자. 해쉬함수는 "123"을 "8QuI2rgKIm0cAuH0uTLkKKASkR2X51su"와 같이 바꿔주는 함수

지난 시간에는 local에서 로그인을 구현했다. 이번에는 github로 구현해보자. Authorizing OAuth Apps 흐름 Users are redirected to request their GitHub identity Users are redirecte

github 말고 kakao로도 로그인 해보자. github와 용어만 다를 뿐 흐름은 똑같다.requestget codeaccess_token✅ kakao도 이와 동일한 흐름을 가진다.

webpack에 대해 알아보자. Webpack?

이번 시간에는 날짜와 시간을 출력해보자.이 함수를 사용하면 아래의 결과값이 나온다.Tue Jul 27 2021 06:49:53 GMT+0900 (한국 표준시)인자로 어떤 값을 넣느냐에 따라 결과값이 다르다.milliseconds를 넣으면 '1970년 1월 1일 00:0

display와 visibility의 차이를 알아보자.

이미지를 바꿨을 때 저장하지 않고도 바로 볼 수 있는 방법은 뭘까?getAvatar.value에 이상한 경로값이 나왔다.value: "C:\\\\fakepath\\\\My Thumbnail (4).jpg"왜 정상적인 url이 아니라 fakepath라고 나오는 것일까?

이번 시간에는 우리 만의 video player를 만들어보자.loadedmetadata

이번 시간에는 video recorder를 만들어보자.1\. stream을 만든다.2\. record한다.

동영상을 끝까지 시청했으면 조회수가 증가하는 api를 구현하고 싶었다. 그러기 위해서는 videoPlayer.js에 동영상의 id를 전달해야 했다.data 속성은 HTML 요소에 추가적으로 데이터를 저장할 수 있게 해준다. 위와 같이 'data-' 뒤에 변수명을 넣어주