초보 개발자

무료 클라우드 컴퓨팅 서비스 - AWS 프리 티어 (amazon.com) 무료 클라우드 컴퓨팅 서비스 - AWS 프리 티어 Q: AWS 프리 티어란 무엇입니까? AWS 프리 티어는 고객에게 서비스별로 지정된 한도 내에서 무료로 AWS 서비스를 살펴보고 사용해 볼 수 있는 기능을 제공합니다. 프리 티어는 12개월 프리 티어, 상 aws.amazon.com S3를 사용하기 위해서는 먼저 여기에서 AWS계정을 만들어야 한다. 이걸 찾아 누르고 버킷을 만들어 준다. 그다음 API KEY를 만들어야하는데 그래야 nodejs코드가 AWS와 소통할 수 있기 때문이다. 그래서 IAM이라는 서비스를 이용해보자 사용자 추가를 눌러 만들어주자 초록박스를 꼭 체크해주어야 한다 하지않으면 웹사이트에 로그인 할 때 비밀번호를 적..

MongoDB Atlas: Cloud Document Database | MongoDB MongoDB Atlas: Cloud Document Database Cloud-hosted MongoDB service on AWS, Azure, and GCP www.mongodb.com mongoDB Atlas에 회원가입을 하고 새 프로젝트를 만든 후 클러스터(database group과 같은것)를 만들자 FREE로 !!! 만들고 나면 Connect버튼을 눌러주고 Username과 Password를 입력해주자 우리의 데이터가 있는 DB의 계정과 비밀번호인 만큼 안전하게 관리해야 한다. 비밀번호는 자동으로 생성해주자 랜덤으로 생긴 비밀번호를 일단 복사하여 어딘가에 적어주자. Create Database User를 ..

이제 서버를 배포해보자. 먼저 해야할 것이 있다. 그 동안 우리는 babel-node를 nodemon으로 실행해왔다. babel이 알아서 node를 실행시켜온건데 이제 babel-node가 아닌 그냥 node를 사용해야한다. 따라서 우리가 ES6로 만들어온 코드를 Babel을 사용하여 바꿔주어야한다. package.json의 script에 "build:server" : "babel src/init -d build" 를 해주어보자 -d옵션을 주면 그 위에 오는 dir의 이름속에 babel되어진 파일이 들어가게된다. 이렇게만 해주면 init.js만 babel처리가 되고 나머지는 그대로다. 우리가 전에 babel-node src/init.js를 하였는데 이건 node라서 가능했던 것이다. 따라서 "build:..

addComment의 함수를 살펴보자. 이건 댓글창에 실시간으로 댓글이 작성되어 보이도록 해주는 기능이다. 이걸 굳이 만들지 않고 window.location.reload()를해주면 새로고침이 되는데 새로고침이 되면 mixin이 video.comments에서 값을 받아와 자동으로 댓글을 만들어 주지만 새로고침이 되는 창이 거슬리기 때문에 바로바로 realtime으로 만들어주는 기능을 구현한 것이다. watch.pug ❌표시는 현재 로그인 되어있는 유저와 댓글 작성자가 일치할 경우에만 보이도록 해주었다. 위의 watch.pug에 있는 li를 만들어주는 함수이다. 받아온 text값과 commentId의 값을 각 각 정해진 자리에 입력을 해준뒤 만들어주면된다. 여기서 특별한 부분은 span2에 handelDe..

댓글쓰는 칸을 만들어보겠다. 먼저 Video와 User처럼 Comment Model을 만들어주어야한다. Comment.js text와 createAt, owner, video를 만들어 주었다. 그리고 Video와 User도 comment와 연관이 되어있기에 수정해주어야 한다. User.js comments를 만들고 배열로 여러개의 Comment의 Id가 들어올 수 있도록 설정해주자 여기서 ref는 아래의 Comment의 값과 같은 값이 들어와야한다. ( 오타 Commnet 정정 Comment ) Video.js Video Model도 많은 댓글이 달릴 수 있으므로 배열로 추가해준다. watch.pug watch.pug에서 댓글 form을 만들어주었다. 로그인 되어 있지 않으면 댓글 창이 보이지 않게 해주..

우리는 protectMiddleware를 만들어서 예를들어 로그인 하지 않은 사용자가 upload하려하거나 하면 막아주는 기능을 만든 적이 있었다. 하지만 그 때 redirect를 해버리거나 if문을 사용하여 render할 때 errMessage를 보내고 pug에서 if errMessage 분기문을 만들어 표현하곤 했다. 이렇게 번거롭게 하기보다는 이제 express-flash 미들웨어를 사용하면 정말 간단하게 처리할 수 있다. npm i express-flash 를 통해 설치해주고 server.js import해주고 flash() 미들웨어를 설치한 순간부터 req.flash라는 함수를 사용할 수 있게된다. 그리고 req.flash('error', 'Not authorized') 처럼 사용하면 local..

콘솔에서 ffmpeg를 사용하여 thumbnail추출할 때의 명령어는 아래와 같다. 웹 어셈블리에서 실행시켜 주려면 await ffmpeg.run("-i","my.mp4", "-ss", "00:00:01", "-vframes", "1" "myThumb.jpg") 여기서 my.mp4대신에 my.webm을 적어줘도 상관은 없다. 이렇게 해주고 콘솔창을 확인해보면 myThumb파일을 잘 만들어 낸 것을 알 수 있다. 그럼 저번 영상 변환한 것과 마찬가지로 blob으로 만들고 blob을 URL에 담아서 a에 넣고 클릭시키는 기능을 만들어보자. 우리가 파일을 다 사용하고 나면 unlink를 해줌으로써 빨라지게 할 수 있다. 굳이 다 사용하고 난 후의 파일들을 계속 들고 있을 필요는 없다. ( 브라우저가 느려지기 ..

우리는 webm확장자에서 mp4확장자로 바꿔주려고한다. 이 때 사용할 소프트웨어는 ffmpeg이다. 또 이걸 활용하여 썸네일도 추출해보려고 한다. 원래 ffmpeg는 콘솔에서 실행해야하여 백엔드에서 해줘야한다. 근데 백엔드에서 처리하려면 좋은서버가 필요하다. 메모리..그래픽장치등 여러가지가 필요하기 때문이다. 이 문제를 해결하기위해서 webassembly를 사용해보자 webassembly는 기본적으로 웹사이트가 매우 빠른 코드를 실행할 수 있게 해준다. 원래 front상에서는 html css js밖에 못쓴다 예를들어 go , c등은 쓸 수 가없고 back에서만 쓸 수 있다. 근데 webassembly를 사용하면 프론트엔드에서 매우 빠른 코드를 실행할 수 있다. 즉 webassembly를 통해서 웹에서 f..