초보 개발자

전 시간까지 만들었던 것을 다 지우고 socketIO를 설치하여 다시 만들어 보려고한다. front-end와 back-end 둘다 socket IO를 설치해주어야한다. 먼저 backend에서는 npm i socket.io 이렇게 해주면 되고. 이렇게 서버를 똑같이 실행시키고 localhost:3000/socket.io/socket.io.js에 들어가면 이러한 것이 딸려나오는 것이 확인된다. home.pug에도 다음과같이 추가해주자 전에 webSocket API는 브라우저에 설치되어 있었지만 socketIO는 아니기때문이다. 저 순서도 중요하다. pug에 설치를 해주어야 아래 script에서 설치된 기능을 사용할 수 있다. 즉 순서가 바뀌어버리면 설치가 안된 상태이기 때문에 app.js는 socketio의..

먼저 home.pug에 채팅창 비슷하게 form을 만들어준다. app.js에서 폼에서 전송하면 서버에 메시지를 보내고 입력창을 비워주는 작업을 해주었다. 그리고 서버에서는 받은 메시지를 다시 브라우저에게 보내주었다. 브라우저에서 채팅을 입력하면 콘솔창에 바로 되돌아 온다. Chrome Edge둘다 된다. 여기서 중요한 점이 있다. Edge와 서버사이에 websocket이 있고, Chrome과 서버사이에 websocket이 있다. 이 두개는 아직 연결되어있지 않다. 우리가 각 브라우저에서 메시지를 보냈을 때 다른 브라우저로 넘어가는 것이 아니라 메아리 처럼 각 서버와 브라우저 둘이서만 주고 받고있다. 난 다른 사람과 이야기를 하고 싶다!! 그러므로 이 문제를 해결해야 한다. 서버에 fake database..

브라우저가 이미 webSocket 클라이언트에 대한 implemention을 가지고 있다. (심지어 IE조차!!) backend를 연결해주는 webSocket은 이미 저번시간에 준비해 두었다 btn.addEventListener('event',fn) wss.on('event',fn) wss에서도 event와 fn을 받을 수 있다. frontend의 click 하면 fn이 호출되는 것과 같다. callback으로 socket을 받는다. 이 socket은 연결된 어떤 사람이라고 생각하자. 연결된 브라우저와의 contact라인이다. socket을이용하면 메세지 주고 받기를 할 수 있다. 이 것을 어딘가에 저장해야한다. 먼저 console로 찍어보자. 연결이 되면 콘솔창에 socket이 나타날 것이다. app...

zoom 클론코딩을 시작하기전에 bable, express, nodemon, git 등을 설정해준다. 자세한 방법은 생략하겠다. recap - wetube에 상세히 설명 되어있기에... 더 추가가 되겠지만 기본적인 설정을 마쳐주고 server.js 서버를 만들어준다. __dirname은 저 server.js가 속해있는 폴더명이 나옴 /public에 접근했을 시 server.js가 속해있는 폴더의 public에 접근가능하도록 static설정을 해주었다. http는 유저가 request를 보내면 서버가 respond하는 방식이다. 이건 stateless이다 backend가 유저를 기억하지 못한다. 서버는 무조건 유저로부터 request가 있어야 responsd할 수 있다 먼저 말 걸 수는 없다. websoc..

우리는 몇개의 js를 만들어야 한다. ( video player, record ) 그러기 위해선 webpack을 조금 손봐줄 필요가 있다. webpack의 entry를 살짝바꿔준다. output은 main 하나라 이렇게 되면 2개의 파일이 main.js로 만들어지므로 오류가 발생하게 된다. 따라서 webpack이 제공해주는 기술을 통하여 이렇게 바꿔주게 되면 우리가 앞서 정해놓았던 이름으로 main, videoPlayer로 변환이 된다. 짜잔 ~ 그리고 이 videoPlayle.js를 작성하여 watch.pug에서 로드해주자. 이제 base.pug에 block scripts를 만들어 scripts전용 공간을 만들어주자. watch.pug 플레이어를 만들어주기 위해서 위와같이 설정을한다. 우리는 각 속성을..

니코쌤이 webpack의 기능들은 기본적으로 툴에 탑재 되어있기에 직접 쓸 일은 많이 없지만 꼭 알아두면 좋다고 했다. Webpack이란 뭐냐면 우리가 그동안 back end에서 babel-bode를 통하여 우리가 원하는 대로(최신 문법) 코들르 작성 해도 서버에서 node.js가 이해해주었다. 그럼 front end에서도 이런걸 해줘야 하는데 이게 webpack이다!! 예를들어 .scss파일은 브라우저에서 받아들여지지 않는다 이걸 브라우저가 이해할 수 있는 css로 바꿀필요가 있다. 또한 js가 크롬에선 잘 돌아가는데 파이어폭스나 사파리에선 이해를 못할 수도 있다. 지금 원하는건 프론트엔드에서 최신 js코드를 작성하면 모든 브라우저에서 인식 가능한 js로바꿔주는 무언가가 필요하다!! 그게 webpack..

이번에 해볼 것은 User의 model 속에 Video의 id들(여러개)을 집어넣어 자기가 올린 영상을 추적할 수 있도록 한다. 반대로 Video의 model 속에 User의 id를(한개) 집어넣어 이 영상을 올린 주인을 추적할 수 있도록 한다. mongoose는 정말 편리한 것 같다!!! 각 model들은 생성될 때 고유의 id를 하나씩 가지고 태어난다. 지금은 서로 User모델과 Video 모델이 연결되어있지 않지만 고유한 id값을 이용하면 된다. User.js type이 특이하다. id값을 이용하기 위하여 ObjectId로 설정해줘야 한다. ObjectId만 적어주면 안되고 꼭 저렇게 설정해야한다. 그리고 우리가 참조할 Model을 ref명령어를 통해서 적어주어야하는데 우리는 저 videos에 Vi..

처음 아이디를 생성 할 때 사진파일을 넣을 공간을 안주었다. 프로필을 Edit할 때 선택적으로 집어 넣을 수 있도록 말이다. Userschema에서 avataUrl을 추가하고 edit-profile.pug 우리가 파일을 업로드하기 위해서는 multer라는 미들웨어가 필요하다. 설치를 먼저 해주자 npm i multer multer를 쓰려면 form을 multipart/for-data으로 만들어주어야한다. enctype="multipart/form-data" 이게 파일을 업로드하기 위한 유일한 조건이다. middleware.js avatarUpload와 videoUpload를 만들어준다. dest를 설정하여 서버 어디에 저장할 지 지정해주고 limits를 활용하여 파일의 크기를 제한할 수 있다. mildd..