본문 바로가기

JavaScript224

[Javascript] BroadcastChannel 를 사용해서 탭 간 메세지 주고받기 BroadcastChannel 란? 같은 브라우저의 다른 windows, tabs, frames or iframes(in different windows, tabs, frames or iframes) 간의 통신을 할 때 사용하는 클래스입니다. BroadcastChannel를 사용해서 탭 간 메세지를 주고받는 예제입니다! postMessage() 를 사용해서 다른 탭의 BroadcastChannel 에 메세지를 전송하고, onmessage event를 통해 다른 탭이 전송한 메세지를 받을 수 있습니다. 실행결과입니다. 전체 코드입니다. Message Send 아래의 페이지를 참고해보시면 좋을 것 같습니다. https://developer.mozilla.org/en-US/docs/Web/API/Broadca.. 2023. 6. 7.
[Javascript] 내 음성을 raw pcm data format 음원에 저장하기. raw pcm data format 음원이란? header가 없이 raw data만 저장한 파일입니다. 따라서 pcm 포맷으로 저장된 오디오는 별도로 오디오에 대한 정보( sampling rate, bit size, endian, channels )를 가지고 있지 않으면 제대로 play할 수 없습니다. 저는 sampling rate, bit size, endian, channels 을 16kHz Sampling rate, 16 bit short-int, little-endian, mono 로 설정했지만 변수값을 바꾸면 다른 값으로도 변경 가능합니다! 실행결과입니다. 음원을 생성한 뒤 ETRI 서버에게 STT를 요청해서, 생성한 음원을 텍스트로 출력해봤습니다. 위의 영상에서 만든 음원입니다! STT 예제는.. 2023. 5. 26.
[Javascript] 자바스크립트를 활용해서 get/post로 데이터 전달하기 안녕하세요 이번 시간에는 자바스크립트 코드를 활용해서 get/post 방식으로 데이터를 보내는 방법을 알아보려 합니다. 보통은 아래와 같이 html 안에서 form 태그 안에 input 태그를 넣어서 전송하는 방법이 주로 쓰이는데요. 회원가입 아이디: 비밀번호: 같은 방식을 자바스크립트 코드를 통해서도 전송할 수 있습니다. 이렇게 구현할 경우 데이터를 보내는 기능을 함수화하여 재사용성을 높일 수도 있고, 클릭한 ui에 따라 데이터를 다르게 전송할 수도 있습니다. 특히 서버에서 받아온 데이터를 활용하여 자바스크립트로 동적인 ui를 표시하고, 이 각각의 ui를 클릭하거나 할 때 별개의 get/post 이벤트를 넣고 싶은 경우 유용하게 활용될 수 있습니다. 예를 들어 서버에서 아래와 같은 데이터를 받아서 자바.. 2023. 5. 25.
[JavaScript] 정규식을 활용하여 이메일 로그인 시 예외처리하기 안녕하세요. 웹페이지에서 로그인/회원가입 시 대부분의 서비스들은 글자의 종류와 길이에 대한 제한을 두고 유저가 입력을 할 때마다 실시간으로 입력 조건을 만족시켰는지 표시해주는데요. 이번 시간에는 정규식을 활용한 예외 처리를 통해 이메일과 비밀번호로 로그인을 할 때 응용 할 수 있는 기능을 구현하려 합니다. 우선 다음과 같이 html 태그들을 먼저 작성하였습니다. 이메일 유효한 이메일 주소를 입력하세요. 비밀번호 8~15자 이내로 입력하세요. 로그인 이메일과 비밀번호 입력창에는 키보드를 눌렀다가 뗐을 때 발생하는 이벤트인 onkeyup시에 각각 printEmail, printPw라는 자바스크립트 함수가 작동하도록 처리함으로써 유저가 입력을 감지하고, 이에 따라 로직이 작동하도록 처리하였습니다. 두 함수에 .. 2023. 5. 8.
[JavaScript] 내 화면 녹화 및 다운로드하기 오늘은 내 화면을 녹화하고 다운로드 하는 예제를 가져왔습니다! navigator.mediaDevices.getDisplayMedia()로 내 화면과 연결된 MediaStream을 가져오고, MediaRecorder의 start(), stop(), ondataavailable event, stop event 를 사용해서 내 화면을 녹화하고 window.URL.createObjectURL() 로 녹화 데이터를 나타내는 url 생성한 뒤 a element 로 해당 url 이 나타내는 데이터를 다운로드 합니다. 먼저 실행 결과입니다. 전체 코드입니다. record.html Start Sharing Start 기록 Stop Recording and Download record.js 'use strict'; /* .. 2023. 5. 4.
[javascript] Table의 Row요소 drag&drop 안녕하세요. 이전에 자바스크립트로 drag&drop을 구현해본 적 있는데요, 오늘은 테이블의 row를 drag&drop으로 옮기는 것을 구현해보려고 합니다. dragableTable.html 이름 나이 성별 홍길동 20 남 이순신 35 남 유관순 17 여 강감찬 45 남 dragableTable.css table { padding:10px; border-collapse: collapse; width: 50%; margin:auto; } th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; } /*옮길때 불투명으로 보이는 부분*/ tr.dragging { opacity: 0.5; } dragableTable.js // 드래그 앤 .. 2023. 4. 25.
[JavaScript] 두 개의 range slider로 최소/최대 지정하기 안녕하세요. 이번 시간에는 두 개의 range slider로 최소/최대 값을 지정하는 방법을 구현하려 합니다. 쇼핑몰과 같은 사이트에서는 상품들을 조회할 때 최소/최대 가격을 slide bar를 활용해서 범위를 지정하는 경우가 많은데요. 태그와 약간의 자바스크립트 코드를 통해 간단하게 구현이 가능합니다. index.php 최소 최대 0 50 index.js const sliderOne = document.getElementById("slider-1"); // 최솟값 range slider const sliderTwo = document.getElementById("slider-2"); // 최댓값 range slider const displayValOne = document.getElementById(".. 2023. 4. 21.
[ javascript ] EJS 사용해서 서버가 보낸 값 출력하기 php에서는 과 같은 형식으로 서버에서 보낸 값을 클라이언트의 화면에 출력할 수 있습니다. Node.js에서는 이를 지원하는 여러 방법이 있는데요. 오늘은 EJS (Embedded JavaScript templating)라는 단순한 템플릿 언어를 사용해보겠습니다. express, router pattern 등을 미리 알고 있다는 전제 하에 시작하겠습니다. 우선 디렉토리 구조를 다음과 같이 만듭니다. 디렉토리로는 public, routes, view가 꼭 필요하고, 파일으로는 package.json, server.js가 꼭 필요합니다. package.json { "name": "230303-stickode-upload", "version": "0.0.0", "private": true, "scripts":.. 2023. 4. 14.
[JavaScript]i18next을 활용한 언어 변환 처리 안녕하세요. 이번 시간에는 자바스크립트에서 간단하게 언어를 변환 처리 할 수 있는 방법을 알아보려 합니다. i18next는 자바스크립트에서 언어 변환등의 국제화(i18n)처리를 가능하게 해주는 라이브러리입니다. i18n이란 국제화 (internationalization)의 약자로 첫 글자 i와 마지막 글자 n 사이에 18글자가 들어가 있다는 의미입니다. 이번 포스팅에서는 국제화 라이브러리인 i18next을 활용하여 웹페이지의 한/영 변환을 할 수 있는 예제를 만들어보겠습니다. i18next 활용 예시 English Korean 결과 영상 구현한 페이지는 한국어/영어에 대한 선택이 가능하게 되어 있고, 다른 언어를 추가하고 싶을 경우 다른 나라의 언어 코드를 추가한 뒤 분기처리 할 수 있습니다. i18ne.. 2023. 4. 8.

티스토리툴바