자바스크립트(JavaScript): 비트 연산자 (Bit Operator)

자바스크립트(JavaScript): 비트 연산자 (Bit Operator) 비트 연산자란 2진수(binary)를 연산할 때 사용하는 연산자입니다. 예를 들어 십진법으로 표기한 정수 70을 이진법 표기로 변환하면 1000110B 가 되는데, 이 이진법으로 변환된 값을 기준으로 연산을 수행하는 연산자가 비트 연산자입니다. 이하 별도의 표기법이 없는 경우는 전부 십진법 숫자이며, 이진법은 (이진법: 숫자) 또는 숫자 뒤에 B가 붙어 더보기…

자바스크립트 + abcjs: 노트 프로그래밍 방식으로 하이라이트, 노트 선택(클릭) 방지하기

노트 프로그래밍 방식으로 선택 먼저 ABCJS.renderAbc의 옵션 파라미터에서 add_classes가 true여야 합니다. (아래 노트 클릭(선택) 방지하기 단락의 코드 참조) add_classes: true,   추가하였다면 아래 클래스 목록을 참고하여 abcjs-[클래스이름] 의 HTML DOM에 abcjs-highlight 클래스를 추가하면 됩니다. (태그 이름은 <g>)   예를 들어 악보에서 네 번째 노트의 클래스 이름은 abcjs-n3 입니다. 0부터 시작(zero-based)이므로 더보기…

리액트 + 타입스크립트 (React + TypeScript): HTML 요소, 폼의 이벤트 처리

리액트가 아닌 일반 타입스크립트에 대한 이벤트 처리는 아래를 참고하세요, 타입스크립트(TypeScript): HTML 요소에 이벤트 추가   리액트 + 타입스크립트 (React + TypeScript): HTML 요소, 폼의 이벤트 처리 아래와 같이 폼에 대한 이벤트 처리를 하는 JSX를 사용한 리액트 Hook이 있다고 가정합니다. import { useState } from ‘react’ function App() { const [text, 더보기…

CSS + 자바스크립트 예제: 스켈레톤 로딩(Skeleton Loading)

스켈레톤 로딩(Skeleton Loading), 스켈레톤 스크린 최근 여러 웹 사이트나 앱 등에서 유행하는 로딩 화면(프로그레시브 인디케이터)으로 스켈레톤 스크린이라는 것이 있습니다. 단순히 로딩 스피너나 막대기를 보여주는 대신, 화면의 레이아웃을 유지하면서 진행 상황을 표시하기 때문에 사용자의 입장에서 체감 로딩시간이 줄어든다는 장점이 있습니다.   구현 단계 실제 서비스에서는 훨씬 더 복잡하겠지만, 대략적인 구현 단계는 더보기…

타입스크립트(TypeScript): HTML 요소에 이벤트 추가

타입스크립트(TypeScript): HTML 요소에 이벤트 추가 이벤트 할당 방법은 자바스크립트와 본질적으로는 동일하지만, 일반 자바스크립트와 다른 점이라면 타입스크립트 코드에서는 변수가 어떤 타입인지를 명시해야 한다는 점입니다. 타입을 제대로 지정하지 않을 경우 코드상에서 빨간 밑줄로 표시되는 에러가 발생합니다.   1: Typescript 프로젝트를 생성합니다. npm과 vite를 이용하면 타입스크립트 프로젝트를 만들 수 있습니다. 첫 vite 프로젝트 더보기…

CSS 이미지에 마스킹 하기 (mask image) + 앱스토어 아이콘처럼 보이게 곡률 조정 (코너 깎기)

CSS MASK-IMAGE 아래와 같은 이미지를 마스킹(마스크 적용)하는 방법입니다. 참고: 이미지 마스킹(마스크)이란?   마스킹으로 덧씌울 PNG 이미지 파일을 준비합니다. 이 마스킹 이미지를 씌우면 투명한 부분은 표시되지 않고, 검은색 부분은 표시가 됩니다.     HTML 파일에서 적용하고자 하는 요소에 다음 CSS를 삽입합니다. img { -webkit-mask-image: url(“ddmask.png”); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-image: 더보기…

자바스크립트: 콘솔 로그(console.log)의 내용을 브라우저 HTML 내에 표시하기

자바스크립트는 아무 곳에서나 시스템의 변수, 함수, 객체들을 맘대로 덮어쓸 수 있다는 문제점이 있지만, 그 문제점을 역으로 이용하여 콘솔 로그를 브라우저 내에 표시하는 것이 가능합니다. 먼저 body 태그 내에 콘솔 로그를 표시할 영역을 생성합니다. <pre id=”console”></pre>   다음 자바스크립트에서 위의 pre 태그를 불러옵니다. const consoleDiv = document.getElementById(“console”) 아래의 consoleToHtml 함수를 작성합니다. const 더보기…

자바스크립트 예제: 텍스트에서 유튜브(YouTube) URL을 감지하고 해당 URL을 자동으로 플레이어로 전환

이 예제는 아래와 같이 게시판 등에서 글을 작성할 때 유튜브 주소를 추가하면, 해당 주소에서 유튜브 동영상 ID를 추출한 후 iframe 플레이어 형태로 변환합니다.   1. 텍스트에서 유튜브 URL을 가져오는 정규표현식을 작성합니다. // 유튜브 URL 찾는 패턴 const youtubeUrl = /(http:|https:)?(\/\/)?(www\.)?(youtube.com|youtu.be)\/(watch|embed)?(\?v=|\/)?(\S+)?/g 이렇게 하면 아래와 같이 유튜브 주소를 찾을 수 있습니다.   더보기…

리액트(React): 모달 팝업시 뒷배경(오버레이) 스크롤 되지 않게 하기

body 태그의 css를 변경합니다. position을 fixed로 하고, top의 위치를 현재 스크롤 위치로 설정한 뒤 overflow-y: scroll; width: 100%; 을 추가 지정하면 스크롤바로 인해 배경의 위치가 움직이지 않고도 스크롤 방지를 할 수 있습니다. useEffect를 사용해 css를 변경하며, 모달이 사라질 때에는 useEffect의 return을 사용해 body의 cssText를 리셋시킨 다음 window,scroll을 이용해 현재 스크롤 위치로 더보기…

리액트(React): Redux-saga 기초 사용법 요약 (상태 관리시 부수효과 관리하는 미들웨어)

리액트(React): React Redux 요약 정리 redux-saga 깃허브 역할 redux-saga는 애플리케이션에서 일어나는 사이드 이펙트(side effects) (데이터를 불러오는 비동기 처리나 브라우저 캐쉬에 접근하는 행위들)을 쉽게 관리하며 효과적인 실행, 손쉬운 테스트 그리고 에러 핸들링을 쉽게 해준다.   특징 saga 패턴을 차용 (참고 블로그) 미들웨어로서 역할을 수행 (React는 Redux 액션을 수행하면 Redux-Saga에서 디스패치하여 Redux의 더보기…