자바스크립트: Debounce, Throttle 순수 자바스크립트 (Vanilla JS)로 구현

참고 글: 자바스크립트 lodash: debounce와 throttle을 이용하여 함수의 실행 횟수 제한   debounce: 동일 이벤트가 반복적으로 시행되는 경우 마지막 이벤트가 실행되고 나서 일정 시간(밀리세컨드)동안 해당 이벤트가 다시 실행되지 않으면 해당 이벤트의 콜백 함수를 실행합니다. throttle: 동일 이벤트가 반복적으로 시행되는 경우 이벤트의 실제 반복 주기와 상관없이 임의로 설정한 일정 시간 간격(밀리세컨드)으로 콜백 더보기…

React + Redux-saga + Typescript로 만든 이미지 판매 사이트 (ImageShop)

이미지 판매 사이트 (ImageShop) React + Redux-saga + Typescript 로 제작한 이미지 판매 사이트입니다. 저장소: https://github.com/ayaysir/React-ImageSell 참고서적 및 API 서버 출처: 실전 리액트 (온노트) 영상으로 보기 특징 외부 API 서버를 이용한 SPA 형태의 홈페이지 React-router를 이용한 URL 라우팅 구현 Functional Hooks 사용, MVVM 패턴에 맞춰 페이지, 컨테이너, 컴포넌트 역할 구분 관리자 더보기…

JWT(JSON Web Token) 란?

JWT 란? JWT(JSON Web Token)는 공개 표준인 RFC7519로, JSON 객체 형태로 당사자 간 정보를 안전하게 전송하기 위한 소혀의 자체 포함 형식으로 정의됩니다. JWT는 두 당사자간에 전송할 클레임을 나타내는 URL에 안전(url-safe)한 압축 수단입니다. JWT의 클레임(claim; 페이로드의 한 조각)은 JWS(JSON Web Signature) 구조의 페이로드(payload; 정보) 또는 JWE(JSON Web Encryption) 구조의 JSON 개체로 더보기…

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 를 추가합니다. 경우에 따라 원하는 모양으로 커스터마이징 더보기…