TypeScript(JavaScript ES6+) + Webpack 으로 만든 리듬게임 (Clapping Music) – 제작중

현대음악가인 Steve Reich의 Clapping Music이라는 곡을 바탕으로 만들고 있는 리듬게임입니다. 원곡 동영상   데모 동영상 생각보다 배치가 어려워서 연습을 많이 해야할 것 같습니다.   데모 사이트 https://clapping-music.netlify.app/ 스페이스 바를 누르면 게임을 시작합니다. 왼쪽 키는 f, 오른쪽 키는 j를 눌러주세요. 크롬에서 실행하는 것을 권장합니다.   저장소 https://github.com/ayaysir/TypeScript-ClappingMusic/   사용 기술 TypeScript 더보기…

타입스크립트 + 웹팩 환경에서 mp3 파일 임포트(import) 하는 방법

웹팩(Webpack)으로 타입스크립트 – HTML Loader 환경 설정   타입스크립트에서 아무런 준비 없이 mp3 를 import문 또는 require()를 써서 불러오려고 하면 Cannot filnd module ~ or its corresponding type declarations. 에러가 발생합니다. 이 에러를 방지하여 mp3 파일을 임포트할 수 있는 방법입니다.   1. 먼저 npm 프로젝트에서 file-loader 또는 url-loader가 설치되어 있어야 더보기…

웹팩(Webpack)으로 타입스크립트 & HTML Loader 환경 설정

Webpack으로 타입스크립트를 이용한 HTML 개발환경을 구축하는 방법은 다음과 같습니다. 일반 자바스크립트는 아래 글들을 참고하세요. Node.js: Webpack 설치하기 (Webpack 4 버전 기준) Node.js: Webpack 4 추가 설정 (CSS, HTML, dev-server) 빌드 및 배포   0. npm 프로젝트 생성 생성하고자 하는 디렉토리에서 터미널을 연 뒤 아래 명령어를 입력합니다. npm init -y   더보기…

자바스크립트: 클립보드에 복사하기 기능 만들기

버튼을 누르면 <textarea> 등의 요소 내에 있는 텍스트를 시스템의 클립보드로 복사하는 기능입니다. 먼저 아래 함수를 추가합니다. function copyToClipboard(text) { var t = document.createElement(“textarea”); document.body.appendChild(t); t.value = text; t.select(); document.execCommand(‘copy’); document.body.removeChild(t); alert(“복사되었습니다.”) }   다음 버튼을 클릭했을 경우 <textarea>의 내용을 가져온 다음 copyToClipboard(text)를 통해 함수를 실행하면 내용이 복사가 됩니다. var btnCopy 더보기…

Glassmorphism CSS Generator로 글래스모피즘 스타일의 CSS 만들기

https://glassmorphism.com/ 요즘 새롭게 부상할 디자인 트렌드로 글래스모피즘이 부상할 것이라는 이야기가 나오고 있습니다. 글래스모피즘 디자인은 표면이 반투명 유리 재질의 표면을 통해 배경이 흐릿하게 나오는 디자인 철학을 뜻합니다. 이미 macOS의 빅 서 (Big Sur)에서 전반적으로 새롭게 글래스모피즘 디자인이 적용된 것을 볼 수 있습니다. 이러한 디자인의 CSS를 직접 만들 수 있지만, 이런 스타일을 더보기…

CSS: submit 버튼(button)처럼 보이도록 앵커 태그(a) 스타일 지정 – button 태그와 a 태그 스타일 통일

“제출(submit)” 버튼(button)과 “취소(cancel)” 앵커(a)가 있는 폼이 있습니다. HTML은 다음과 같습니다. <input type=”submit” value=”Submit” /> <a href=”some_url”>Cancel</a> 이 두 태그의 스타일이 똑같이 보이게 하려면 어떻게 해야 할까요?   간단하게 작성할 수 있는 최선의 방법은 다음과 같습니다. 위의 태그에 각각 클래스 likeabutton 을 추가한 뒤, 아래의 CSS 를 추가합니다. 경우에 따라 원하는 모양으로 커스터마이징 더보기…

자바스크립트 ES6+: 제너레이터 함수 (generator function)

제너레이터 함수 제너레이터 함수(generator function)는 여러 값을 시간차를 두고 반환할 수 있는 함수의 한 형태입니다. 일반 함수와 달리 function* 키워드를 사용하여 선언합니다. 예를 들어 1부터 3까지 시간차를 두고 반환하는 제너레이터 함수는 다음과 같습니다. function* generator1() { yield 1 yield 2 yield 3 } yield 키워드는 사용자가 명시적으로 다음 값을 호출할 때 더보기…

jQuery: 제이쿼리 이미지 지연 로딩(lazy loading) 플러그인 (jQuery Lazy)

jQuery Lazy 웹사이트 이미지의 레이지 로딩을 할 수 있도록 하는 제이쿼리 플러그인입니다. 레이지 로딩이란 인터넷이 느린 환경에서 브라우저가 HTML 컨텐츠를 로딩하는 과정에서 이미지를 같이 로딩에 포함시켜 먹통이 되는 것을 방지하기 위하여, 이미지 데이터를 제외한 HTML을 우선적으로 렌더링한 뒤 이미지는 HTML 로딩이 끝난 후 나중에 불러오는 것을 뜻합니다. 이 플러그인을 사용하면 더보기…

CSS로 말풍선 툴팁 만들기 (cssarrowplease.com 이용)

https://cssarrowplease.com/ 위 사이트에 접속하면 CSS 말풍선을 만들 수 있습니다. 옵션 사항을 설정한 뒤 CSS를 복사해서 사용하면 됩니다. 단, 위의 CSS 는 기본 틀만 제공하기 때문에 그대로 붙여넣은 경우 왼쪽의 예제 그림처럼은 나오지 않습니다. 일종의 표지사기와 같습니다. 따라서 원하는 모양을 위해서는 추가 CSS를 작성해야 합니다. (밑의 코드의 customize tooltip 부분 참고) 더보기…