[JS] JavaScript를 이용한 핀볼 게임

핀볼은 1930년대부터 전해 내려오는 고전 아케이드 게임입니다. 플레이어는 플리퍼를 사용하여 테이블 주위의 공을 치고, 다양한 표적과 장애물을 맞춰 점수를 획득해야 합니다. 핀볼 게임은 제한된 공간 내에서 공을 움직이는 방식으로 진행됩니다. 처음에는 공이 정해진 위치에서 시작하여 수평 및 수직 방향으로 일정한 속도로 움직입니다. 공의 위치는 지속적으로 업데이트되며, 벽에 부딪히면 이동 방향이 반전됩니다. 또한, 하단에는 화살표 키로 조작할 수 있는 패들이 있습니다. 공이 패들에…

Read more »
2025년 상업 번들: 50개의 무료 관리 및 전자상거래 템플릿

기본 정보 네이버 박스: 다운로드 (328MB) 2025 상업 번들은 엄선된 관리자 대시보드 및 전자상거래 템플릿 모음입니다. 이 번들의 모든 템플릿은 무료이며 Bootstrap, Material UI 등 인기 있는 CSS 프레임워크를 사용하여 제작되었습니다. 개발자 친화적인 이 템플릿은 깔끔한 코드베이스를 통해 손쉽게 사용자 정의가 가능하며, 화면 크기에 관계없이 완벽하게 반응합니다. 또한, 로딩 속도가 빨라 이탈률을 줄이고 검색 결과 순위를 향상시킵…

Read more »

Promise 기반으로 서버와 HTTP 통신을 할 수 있는 Fetch API에 대한 비동기 통신 예제입니다. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Fetch API </title> 6 </head> 7 <body> 8 <div id="user"&…

Read more »

async 함수는 함수 안의 await 구문과 함께 비동기 작업을 제어합니다. await 키워드는 반드시 async 함수 안에서만 유효합니다. async 함수의 동작 방식은 다음과 같습니다. 처음 async 함수가 호출되어 await 키워드가 있는 비동기 작업(promise 객체)이 실행되면, 해당 비동기 함수는 이벤트 루프를 통해 비동기로 작업을 처리합니다. 그동안 async 함수는 이러한 비동기 작업이 완료될 때까지 일시 중지 상태로 비동기 작업(promise 객체)의 해결…

Read more »

하나의 비동기 계산이 다른 비동기 계산의 결과에 의해 처리되어야 하는 경우가 많습니다. Promise가 나오기 이전에는 콜백 패턴을 통해 비동기 처리를 하였고, 중첩된 비동기 코드들을 처리하다 보면 콜백 피라미드 형태의 코드들이 쉽게 나왔었습니다. 이런 비동기 코드들의 조합을 Promise 기반으로 작성하면 명료한 코드를 작성할 수 있고 예외 처리를 손쉽게 할 수 있습니다. Promise의 then 메소드에서 새로운 비동기 코드를 실행하는 Promise를 반환할 수 있는데 다음…

Read more »

Promise는 객체로써 언젠가 완료될 일(계산)을 나타냅니다. 완료되면 하나의 값을 결과로 반환하는데 실패하여 정상적인 값 대신 실패의 이유를 반환할 수도 있습니다. Promise 객체는 다음과 같은 세 가지의 상태를 가집니다. 대기중(Pending): 아직 결과가 없는 상태입니다. 약속을 했지만 아직 약속에 대한 결과가 나오지 않은 상태를 말합니다. 이행됨(Fulfilled): 비동기 처리가 성공적으로 완료되어 약속을 이행한 상태입니다. 이때 결과로 하나의 값…

Read more »