HTML5, CSS3, 자바스크립트 Javascript 등
fetch를 이용하면 매우 간단하게 Blob 형태의 데이터를 받을 수 있습니다. await 키워드는 blob 변수를 최초 사용할 때까지만 사용하면 됩니다(await blob). 파일을 전송하는 백엔드 서버(자바 스프링) 만드는 방법은 아래 글을 참고하세요. 그리고 구버전 자바스크립트에서도 사용 가능한 XMLHttpRequest를 사용해 Blob 데이터를 받아오는 방법도 첨부합니다. JSP, Spring: URL을 입력하면 파일이 바로 다운로드되게 하기 자바스크립트: 더보기…
자바스크립트에서 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()을 사용합니다. 더보기…
MDN 문서 바로가기 자바스크립트에서 배열의 reduce 기능은 배열을 순회하면서 누산기(accumulator)에 값을 계속 쌓아놓고 최종적으로 누산기의 값을 반환하는 reducer의 기능을 수행합니다. reducer의 사전적 의미와 매칭이 잘 안되는데 어떤 물질에서 원액(누산기의 값)만 추출한다는 의미로 생각하면 될 것 같습니다. 누산기의 값은 줄어들지 않으며 리턴식은 누산기에 합산됩니다. 그리고 마지막까지 순회한 후 최종적으로 누산기의 값만을 더보기…
출처 바로가기 자바스크립트에서 마이크를 사용하려면 먼저 사용자로부터 마이크 사용 권한을 획득해야 합니다. 여기서 사용자가 허용 버튼을 눌러야 이후 녹음 작업이 진행이 됩니다. 이 부분은 navigator.mediaDevices.getUserMedia(constraints).then(…)을 사용합니다. if (navigator.mediaDevices) { const constraints = { audio: true } navigator.mediaDevices.getUserMedia(constraints) .then(stream => { …………….. }) .catch(err => { console.log(‘The following error occurred: ‘ 더보기…
국제화(Internationalization)는 홈페이지의 내용을 다국어로 지원하는 것을 뜻합니다. 백엔드 측에서 하는 방법이 있고 프론트엔드 측에서 하는 방법이 있는데 백엔드에 대한 국제화 작업은 스프링 부트, Thymeleaf 기준으로 한 다음 글을 참조해주세요. Spring Boot: 국제화(Internationalization) 제이쿼리에서도 국제화 지원을 위한 기능이 있고 이러한 라이브러리(i18n)도 있는데 처음에는 라이브러리 없이 진행해보도록 하겠습니다. 먼저 자바스크립트에서 브라우저의 언어를 알아내는 더보기…
JSONP(JavaScript Object Notation Padding)이란? 웹 브라우저에서 CORS 문제를 회피하기 위해 <script> 태그를 이용한 꼼수를 사용하여 JSON을 가져오기 위한 방법입니다. 참고: CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유) 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. CORS의 예시로 https://domain-a.com의 더보기…
IT 기술면접(일반) 예상문제: 웹개발 프론트엔드 개발 이론 요약 깃허브 프론트엔드 면접 문제은행 리스트 웹에서의 SPA (Single Page Application) 단일 페이지로 구성된 웹 어플리케이션을 뜻하는 단어입니다. 서버사이드 렌더링을 배제하고, 필요한 데이터만 JSON 등의 형태로 받아 동적으로 렌더링합니다. 기존 웹 환경에 비해 SPA가 부각되는 이유? 기존 어플리케이션은 화면이동 시에 화면 이동에 더보기…
출처 바로가기 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 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 = 더보기…