Enjoy Programming

이전 포스팅의 문제를 해결해보자 현재 4000번의 포트로 연결하고 있는데 문제는 이포트는 Herokurk 열어준 포트가 아니다. heroku가 준 포트로 연결해야 한다. 에러 문구를 보면 heroku가 준 port 변수가 있다. 포트 변경을 해주자. 환경변수 접근을 통해~ 접근해주는데 env.PORT의 Port는 heroku 가 준 포트이다. 고로~ heroku로 접속하지 않으면 4000번으로 접속하도록 코드를 작성했다. 이게 궁금했는데~~ 왜냐 배포를 하고나면 개발은 무슨 포트로하지;;; 라는 생각에 ㅋ 좋다~ 코드 변경을 했으니 commit과 push를 하자. git commit -m "내용" git push origin master && git push heroku master 커밋 후 로그를 보면..

계정은 이미 있고 로그인하면 project를 만들 수 있다. 만들어 보자~ 프로젝트 명을 적어주고 cluster를 추가해준다. cluster는 database group같은 건데 지금은 하나다. 역시 무료다! 지역을 선택해주고~~ 미국 버지니아 좋다 이것도 무료~!~!~!~! 그리고 생성! 좀 기다려야 한다~~ 만들고 있다~~~ 오래걸린다.. 한 3분 지난거 같은데;.... 1~3분은 믿지말자... 완료!!! 이제 connect버튼을 클릭해주고~ 접속가능한 ip를 적어주는 란이 있는데 .. 음 여기저기 돌아다니면서 공부하기 때문에 필요없다... 그리고 username과 password를 생성해주자~ password는 매우 중요하니 잘 기억하자~! 아주 어렵게 만들고~ 난 따로 저장 해두었다. 그리고 이버..

이제 프론트엔드쪽을 빌드 할텐데. webpack에는 development, production, none모드등이 있다. 프론트엔드 클라이언트를 빌드할텐데 현재 webpack conifg은 mode가 development로 되어있다~ dev와 build 스크립트할때 두가지를 다르게 주고싶은데 webpack config의 mode를 지워주고 script에서 실행시 명령어로 전달해주도록 하자. 요롷게~~~ 명령어를 작성해 전달할 수 있다. 두가지다 실행시 매우 잘 실행된다~~` 차이점은 위는 dev모드 이고 이건 production모드 이다. 압축되어있다~~~ 한가지 수정해야하는데 현재 build에서도 watch가 실행되고 있다~ 역시 webpack config에서 watch:true를 삭제하고 command..

일단 유튜브 클론과정은 거의 끝났다 ~ 내가 직접 몇개의 라우터를 더 만들 예정이고~ 홈페이지 디자인도 손보고~ 몇가지 자바스크립트도 추가할예정이고~ 로직도 손보고 있다. 마지막 챌린지였던 댓글 삭제기능은 구현되었고~ 그런데 포스팅을 못했다.. 포스팅할게 너무 밀려있다.. ㅠㅠ 차분히 하자.. 현재는 개발자 모드로 개발을 하고 있었고 이제 실제 배포를 해볼차례이다. Heroku를 통해 배포를 한다. Heroku란 무엇인가~ Heroku는 java, node.js, python등 여러 언어를 지원하는 웹 어플리케이션 배치 모델로 사용되는 클라우드 paas이다. paas? Platform as a Service- 서비스형 플랫폼 : 클라우드 컴퓨팅 서비스 분류 중 하나. 일반적으로 앱을 개발하거나 구현할 때..

이번에는 썸네일을 만들어서 영상의 첫프레임이나 1초의 스크린샷을 찍어서 jpg파일로 저장해서 쓴다. 역시 인풋에 해당 파일을 넣어주고~ -ss는 영상의 특정시간대로 갈 수 있는 명렁어인데 1초로 지정한다. 그리고 -frames:v는 스크린샷을 찍을 수 있게 해주는데 1로 지정한것은 첫번째 프레임임을 지정한 것이다. 마지막으로 파일시스템의 메모리에서 만들어주는 썸네일.jpg를 생성해준다. 다시 녹화를 하고 진행하면~ 콘솔창에 mjpeg파일이 생성된 것을 확인할 수 있다. 이제 영상을 받을때와 똑같이 해주면 된다~!~! arraybuffer처리와 blob처리~ 그리고 url만들어주고 역시 fake link만들어서 다운로드 할 수 있도록~!~! 짜잔~~!~! 썸네일도 생성되어서 다운로드 된다~! 마지막으로 파..

앞서 녹화된 비디오를 다운로드 해보자. 비디오를 우클릭후 다운로드도 가능하지만 가짜 링크를 걸어 사용자가 클릭해서 다운로드 하도록 ~ 편의 기능 제공! ㅋㅋ 우선 앞서 만든 stop을 약간 수정했다 stop버튼을 클릭하면 down로드 문구로 바뀌고 download 이벤트 핸들러를 대기시킨다. 그리고 다운로드 이벤트 핸들러가 실행되면 fake 링크하나를 만들어주고 경로는 recordedVideo 브라우저 Url을 넣어주고 download attribute를 사용해준다. 이 속성을 사용하면 클릭시 이동이 아닌 download를 하게된다. body에 append시켜주고 click함수를 실행해주면 끝! 추가로 해줄건 미디어 리코더에서 mimeType을 써주면된다~ 그냥 확장자 정해주는거니까~~~~