Code Habit

스트림에서 트랙이란 스트림을 구성하는 미디어 요소 하나하나를 구분하는 단위이다. 비디오나 오디오, 자막 같은 요소가 하나의 트랙이고, 코드를 통해 각각의 트랙에 접근하여 제어할 수 있다. - Track 접근 예제 const video = document.getElementById("myVideo"); async function getMedia() { try { const myStream = await navigator.mediaDevices.getUserMedia({ audio:true, video:true }); console.log(myStream.getTracks()); console.log(myStream.getVideoTracks()); console.log(myStream.getAudioTra..

MediaDevices 인터페이스는 카메라, 마이크, 공유 화면 등 현재 연결된 미디어 입력 장치로의 접근 방법을 제공하는 인터페이스이다. 다르게 말하자면, 미디어 데이터를 제공하는 모든 하드웨어로 접근할 수 있는 방법이다. MediaDevices 인터페이스를 구현하는 navigator.mediaDevices 객체를 통해 자바스크립트로 액세스할 수 있다. - navigator.mediaDevices 예제 const video = document.getElementById("myVideo"); async function getMedia() { try { const myStream = await navigator.mediaDevices.getUserMedia({ audio:true, video:true })..

MVP를 사용하면 쉽고 빠르게 웹사이트를 심플한 디자인으로 만들 수 있다. MVP는 태그에 class나 id같은 특성을 추가하지 않아도 자동으로 스타일을 적용해 주어 테스트 페이지 제작 등 빠르게 디자인을 입히고 싶을 때 유용하게 사용할 수 있다. MVP는 따로 프레임워크등을 추가할 필요도 없고 따로 공부할 필요도 없다. 단지 MVP.css를 우리 페이지에 연결만 해주면 모든 스타일이 자동으로 완성된다. MVP는 무료 라이센스이며 CDN을 제공한다. ( "https://unpkg.com/mvp.css" ) - mvp.css 사용 link(rel="stylesheet", href="https://unpkg.com/mvp.css") 우리가 만든 페이지에 위 사용 예처럼 mvp.css파일만 링크 걸면 페이지 ..

express란 NodeJS를 사용하여 서버를 쉽게 구성할 수 있게 만든 프레임워크다. - express 설치 npm i express - express 사용 const express = require('express') const app = express() app.get('/', (req, res)=>{ res.send("Welcome !"); }) app.listen(3000, ()=>{ console.log("server is listening 3000"); }) app.get()으로 GET 요청을 정의한다. req는 요청을, res는 응답을 의미한다. 위 코드에서는 res를 통해 "Welcome !"이라는 문자를 전송한다. app.listen()에서 서버를 여는 포트를 지정하고 열렸을 때 콜백함..

babel은 작성 완료된 JavaScript 코드를 다른 버전의 JavaScript 코드로 번역할 수 있는 JavaScript 컴파일러이다. 최신버전의 JavaScript 코드는 브라우저가 이해하지 못하기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해 준다. babel을 사용하면 최신 문법을 사용할 수 있는 장점이 있다. - babel 설치 npm i @babel/core @babel/cli @babel/node @babel/preset-env -D @babel/core : babel 코어 패키지로 babel을 사용하는데 필수로 필요하다. @babel/cli : babel을 터미널에서 커맨드로 사용하는데 필요한 패키지이다. @babel/node : Node.js 커맨드 라인에서 사용하는 ..

nodemon은 소스 코드를 수정할 때마다 코드의 변화를 감지해서 자동으로 서버 프로그램을 재시작해 주는 도구다. 이를 사용하면 소스 코드를 수정할 때마다 서버를 재실행 해야 하는 수고로움을 덜 수 있다. - nodemon 설치 npm i nodemon -g -g옵션을 주어 글로벌 설치한다. 다음 명령어를 통해 실행한다. nodemon --watch src/server.js 터미널에서 실행하면 아래와 같은 메시지가 나온다. 소스 코드 수정 후 ctrl+s 로 저장하면 아래와 같은 메시지가 나오며 서버가 자동으로 재시작 된다.

Promise는 자바스크립트 비동기 처리에 사용되는 객체이다. 대부분의 작업이 비동기로 이루어지는 자바스크립트에서 콜백함수로 인한 복잡도가 높아지는 문제를 해결하기 위해 Promise 패턴이 고안되었다. Promise는 콜백 중첩으로 인한 문제점들을 해소하면서 비동기 작업들의 컨트롤이 수월해지고 코드의 가독성을 높이는데 기여하였다. 다음은 Promise를 사용하는 기본 예제이다. // Promise 생성 const promise = (param)=> { return new Promise((resolve, reject)=> { if(param) { resolve("true"); } else { reject("false"); } }); }; // Promise 실행 promise(true) .then((me..

일정 시간이 지난 뒤 함수를 실행 시키고 싶을 때, 혹은 일정시간마다 함수를 실행하고 싶을 때 setTimeout, setInterval 함수를 사용할 수 있다. - setTimeout(func, milliseconds, arg1, arg2...) : milliseconds 후 func 함수를 실행. (arg1, arg2... 매개변수 전달) - setInterval(func, milliseconds, arg1, arg2...) : milliseconds 마다 func 함수를 실행 (arg1, arg2... 매개변수 전달) clearTimeout, clearInterval함수로 위에 등록된 함수 호출을 취소할 수 있다. 예시 ) // setTimeout function OnTimeoutFunc(msg) ..