자바스크립트에서 TTS 기능을 사용하는 방법입니다. TTS(Text-to-Speech)는 텍스트를 음성 합성을 통해 컴퓨터가 읽어주는 것으로 트위치 영상등에 있는 음성 도네이션이 TTS 를 사용합니다. 음성합성으로 읽을 내용, 언어, 음성의 속도 높낮이 등을 <span class="pl-k">new</span><span> </span><span class="pl-v">SpeechSynthesisUtterance</span><span class="pl-kos">(</span>) 로 설정하고 재생은 speechSynthesis.speak()를 사용합니다. speechSynthesis는 window 객체 내에 있기 때문에 그냥 사용하면 됩니다. 재생중인 음성합성을 중지할때는 speechSynthesis.cancel()을 사용합니다. 더보기…
JSONP(JavaScript Object Notation Padding)이란? 웹 브라우저에서 CORS 문제를 회피하기 위해 <script> 태그를 이용한 꼼수를 사용하여 JSON을 가져오기 위한 방법입니다. 참고: CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유) 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. CORS의 예시로 https://domain-a.com의 더보기…
출처 바로가기 const prefersDark = window.matchMedia && window.matchMedia(‘(prefers-color-scheme: Dark)’).matches true 이면 다크모드이며, false 이면 라이트모드 혹은 “운영체제에서 명시된 정보가 없음” 입니다. (라이트모드 감지는 위의 코드에서'(prefers-color-scheme: Dark)'를'(prefers-color-scheme: Light)'로 치환) 참고로 CSS 미디어쿼리를 사용하면 다음과 같습니다. @media (prefers-color-scheme: dark) { /* 다크 모드에 사용 할 CSS를 입력하세요. */ } 예제: 더보기…
서로 다른 n개의 원소에서 r개를 중복없이 골라 순서에 상관있게 나열하는 것을 n개에서 r개를 택하는 순열이라고 하고, 여기서 중복을 허용하면 그것을 중복 수열이라고 합니다. 재귀함수를 이용해서 다음과 같이 나타낼 수 있습니다. 스택플로 출처 바로가기 중복 순열 (Permutation of Repetition) 중복순열의 구현이 약간 더 쉽습니다. const cases = [“A”, “B”, “C”] 더보기…
프로그래머스 사이트에서 문제 풀기 코드 function solution(msg) { var answer = []; // 사전 작성 const dict = {} for(let i = 1; i <= 26; i++) { dict[String.fromCharCode(i + 64)] = i } let maxIdx = 26 let idx = 0 let msgLen = msg.length while(idx < msgLen) { 더보기…
이름 궁합 찾기: 각 획수를 주고 획수를 짝수개씩 묶어 더해나가고 최종적으로 두 개의 수만 남을 때까지 계산하는 방법 문제 링크 코드 (자바스크립트) function matchName(name1, name2) { name1 = name1.split(”).map(c => c.toUpperCase()) name2 = name2.split(”).map(c => c.toUpperCase()) const nameLength = name1.length + name2.length const minLen = Math.min(name1.length, name2.length) const weight = 더보기…
만약 JQuery 등의 외부 라이브러리 없이 AJAX를 사용하려고 한다면 예전에는(혹은 지금도) XMLHttpRequest(MDN 링크)라는 것을 사용해야 했습니다. 이것은 약간 사용하기 복잡했었는데요, ES6(2015)부터 fetch(MDN 링크)라는 기능이 도입되어서 약간 편하게 사용할 수 있게 되었습니다. Promise를 기반으로 하기 때문에 지원하지 않는 웹 브라우저에서는 사용할 수 없습니다. 인터넷 익스플로러에서 사용 가능하게 하려면 Babel 등을 이용해서 변환해야 더보기…
트리 자료구조의 순회 방법으로 전위 순회(preorder), 중위 순회(inorder), 후위 순회(postorder)가 있습니다. 출처 링크 예를 들어 위와 같은 이진 트리가 입력되면, 전위 순회한 결과 : ABDCEFG // (루트) (왼쪽 자식) (오른쪽 자식) ☞ 전루왼오 (∠) 중위 순회한 결과 : DBAECFG // (왼쪽 자식) (루트) (오른쪽 자식) ☞ 중왼루오 (∧) 후위 순회한 더보기…
자바에서 주파수를 재생하는 글 자바 예제: 특정 주파수의 소리 재생 을 자바스크립트로 바꾼 예제입니다. 외부 온라인 소스나 라이브러리 필요 없이 자바스크립트 자체 엔진으로 소리를 재생합니다. 1) AudioContext 인스턴스 생성 var audioCtx = new(window.AudioContext || window.webkitAudioContext)(); var osc, gn; 사파리 등 모바일 브라우저에서는 웹킷 접두어가 붙은 webkitAudioContext만 인식하므로 이 부분도 추가합니다. 더보기…
자바스크립트: 객체지향 1 – new 키워드를 이용해 객체 생성 (ES5 이하) 자바스크립트: 객체지향 2 – 상속 구현 (ES5 이하) 자바스크립트: 객체지향 3 – class (ES6 이상) 기존 ES5 이하 환경의 자바스크립트에서 장황하고 불편했던 클래스 생성 등의 과정이 ES6 이후에 class 문법이 생겨서 한결 편하게 클래스를 만들고 관리할 수 있게 더보기…