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

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"&…

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

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

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

클라이언트나 서버의 IP 주소를 검색하는 것은 웹 개발에서 일반적인 요구 사항으로, 분석, 보안 및 사용자 경험 맞춤화에 유용합니다. 여기에서는 JavaScript에서 IP 주소를 가져오는 다양한 기술을 살펴보고, 정확하고 효율적인 IP 주소 검색을 위한 방법을 살펴 봅니다. IP 주소 검색 이해 IP 주소는 클라이언트 측이나 서버 측에서 검색할 수 있습니다. 브라우저의 클라이언트 측 JavaScript는 보안상의 이유로 클라이언트의 IP 주소에 직접 액세스할 수 없지만 외부 …