반응형 분류 전체보기56 자바스크립트 비동기 처리의 변화(callback, Promise, async/await) NodeJS로 백엔드 서버를 오랫동안 만들어 봤다면 자바스크립트의 비동기 처리때문에 코드가 지저분해지는 경험을 해봤을 것이다. 지금이야 aync/await 로 인해 수월해졌지만, 자바스크립트 콜백헬(Callback Hell) 시절에는 정말 NodeJS로 개발을 포기하고 싶은 생각이 들 정도였다. 프론트엔드는 그나마 백엔드보다 콜백헬로 떨어지는 수심이 깊지가 않아서 콜백헬의 구렁텅이에서 허우적거리는 상황이 많지가 않았는데, 백엔드는 그야말로 정말 콜백 지옥의 구렁텅이였다. 이것을 Javascript 표준을 제정하는 단체도 분명히 인지하고 있었을거라 생각한다. 그래서 비동기 처리를 개선할 수 있는 새로운 표준을 만들어왔고 지금의 async/await에 이르렀다. 비동기처리란? 일단 비동기 처리란 무엇인지를 .. 2023. 4. 9. 브라우저에서 마이크 입력 파형 보기 재미삼아 브라우저에서 마이크 입력을 받아서 파형을 그려주는 페이지를 만들어보았다. 마이크 접근을 허용하였다면 아래에 내 마이크 소리의 파형이 보인다. 코드 분석 1. 마이크 입력 스트림 획득 async function getMedia() { try { stream = await navigator.mediaDevices.getUserMedia({audio: true}) createAudio() draw() } catch (err) { alert('UserMedia 접근 실패') } } getUserMedia() 를 호출하여 마이크 접근 권한을 획득하고 마이크 입력 스트림을 가져온다. 2. AudioContext 및 AnalyzerNode 생성 function createAudio() { audioCtx =.. 2023. 4. 8. Web Worker - 브라우저에서도 백그라운드 작업이 가능 자바스크립트는 단일 쓰레드로 동작한다. 그래서 브라우저에서 자바스크립트로 시간이 오래걸리는 코드를 만나게 되면 UI는 멈추게 된다. 브라우저에서 자바스크립트로 시간이 오래 걸리는 작업을 하고 싶은 경우에 Web Worker를 사용하면 된다. Web Worker는 별도의 쓰레드에서 동작하여 메인쓰레드에 영향을 주지 않게 작업을 할 수 있다. 시간이 오래걸리는 작업 코드 예제 아래 코드에서 0부터 1000000000까지 더하는 코드가 시간을 많이 걸리는 코드이다. 브라우저에서 페이지를 열면 한동안 페이지가 로딩중으로 멈춰있다가 덧셈 연산이 모두 끝나면 결과가 출력되면서 페이지가 동작을 하게 된다. 0 자바스크립트는 단일쓰레드이므로 덧셈연산이 끝나기 전까지 쓰레드를 독점하고 있으므로 UI도 출력이 될수가 없게.. 2023. 4. 8. Phaser 로 자바스크립트 게임 만들기 (지속 업데이트) Phaser를 이용하여 자바스크립트로 간단한 게임을 만들고 블로그에서 플레이 가능하도록 하였다. Phaser를 이용하여 어떻게 게임을 개발하는지를 설명하고, 이 포스팅에 개발과정과 결과물을 지속적으로 업데이트 해나갈 예정이다. 개발중인 게임은 아래에서 동작한다. Zoombie Shooter 게임 HTML 삽입 미리보기할 수 없는 소스 Phaser Phaser는 HTML5 Game Framework이다. Javascript를 이용하여 웹에서 구동되는 게임을 만들 수 있다. Canvas와 WebGL 모두 지원한다. Phaser와 Pixi.js 중에 고민하다가 Phaser가 아무래도 Framework을 표방해서 그런건지 Scene Manager 기능이 포함되어 있어서 Phaser를 선택하였다. 프로젝트 생성 .. 2023. 4. 2. 이전 1 ··· 7 8 9 10 11 12 13 14 다음 반응형
