최근에 면접 대비 사이트를 만들면서 TTS 기능이 필요해졌습니다. 그래서 TTS 기능을 제공하는 자바스크립트 내장 객체인 SpeechSynthesisVoice를 이용하여 구현을 했습니다. 이후에 동료 개발자 분과 얘기를 나누면서 해당 함수를 npm 라이브러리로 배포해보면 좋을 것 같다 라는 말을 듣고 해당 함수를 npm에 라이브러리로 배포하였습니다. 이 포스트에서는 라이브러리의 코드 설명부터 npm에 배포하는 전체 과정을 단계별로 안내해드리겠습니다. *면접 대비 사이트 주소: https://dmmhn-next-js.vercel.app/ 1. getSpeech 함수 설명getSpeech 함수는 주어진 텍스트를 한국어로 음성 출력하는 기능을 제공합니다. 주요 기능은 다음과 같습니다:사용 가능한 음성 목록을 ..

이벤트 버블링, 캡쳐링 이벤트 버블링, 캡쳐링은 웹 개발에서 중요한 개념으로, 이벤트 처리 방식을 이해하고 코드를 효율적으로 작성하는 데 필수적인 요소입니다. 이 블로그 게시글에서는 이 세 가지 개념을 자세히 살펴보고, 실제 코드 예시를 통해 이해를 돕겠습니다. 1. 이벤트 버블링 정의: 이벤트 버블링은 자식 요소에서 발생한 이벤트가 부모 요소로 순차적으로 전파되는 방식입니다. 이벤트가 발생하면 먼저 이벤트 발생 지점에서 핸들러 함수가 실행되고, 이벤트가 부모 요소로 전달되어 부모 요소의 핸들러 함수가 실행됩니다. 이 과정은 최상위 요소(document)까지 계속됩니다. 예시: Click me! const parent = document.getElementById("parent"); const child..

HTTP Method 목차 HTTP Method란? HTTP Method의 종류 HTTP Method를 사용하는 이유 GET POST PUT PATCH DELETE HTTP Method란? 웹 개발에서 HTTP 메서드는 클라이언트가 서버에 요청하는 동작을 나타냅니다. 이 메서드는 리소스에 대한 작업을 명확하게 정의하여 서버가 요청을 처리하는 데 도움을 줍니다. 이 블로그 게시글에서는 널리 사용되는 HTTP 메서드 5가지, GET, POST, PATCH, PUT, DELETE에 대해 자세히 알아봅니다. HTTP Method의 종류 GET 리소스의 조회를 요청하는 메서드 POST 리소스의 생성을 요청하는 메서드 PUT 리소스의 수정을 요청하는 메서드 PATCH 리소스의 수정을 요청하는 메서드 DELETE 리..

콜백함수 목차 무엇을 콜백함수라고 부르는가? 중요한 포인트 함수의 제어권을 넘겨주는 방법 비동기로 데이터를 가져오는 콜백함수 콜백 지옥 정리 무엇을 콜백함수라고 부르는가? 자, 여기 main이라는 함수가 있습니다. 다들 알고 있다시피 함수는 특정한 일을 하는 코드의 묶음입니다. 함수는 다양한 일들을 하기 위해서 매개변수라는 값을 받아서 동작을 시킬 수가 있는데요. 여기에서는 param이라는 값이 매개변수가 될겁니다. 이 함수는 param이라는 매개변수를 받아서 콘솔에 표시하는 아주 간단한 동작을 하는 함수인데요. 이 param이라는 자리에는 숫자 100이 들어갈수도 글자 hello world가 들어갈수도 아니면 name은 kim age는 29라는 객체가 들어갈수도 있을겁니다. 그런데 자바스크립트에서는 함..

this란? this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. 자바스크립트의 this는 함수를 호출할 때, 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. 함수 호출 방식에 따른 this에 바인딩되는 객체 기본 전역객체는 모든 객체의 유일한 최상위 객체를 의미한다. 일반적으로 브라우저에서의 전역객체는 window 이며, 서버(node.js)에서의 전역객체는 global 이다. // 브라우저 console.log(this); // window // node.js console.log(this); // global 전역객체는 전역 스코프를 가지는 전역변수를 프로퍼티로 소유한다. const globalFn = () => { console...

자바스크립트 - var, let, const의 차이점과 호이스팅 목차 Prologue var 변수 선언자 재선언과 재할당 호이스팅에서의 관점 let 변수 선언자 재선언과 재할당 호이스팅에서의 관점 const 변수 선언자 재선언과 재할당 호이스팅에서의 관점 정리 Prologue 프로그래밍에서의 변수란 데이터들을 저장하는 공간을 뜻합니다. 변수는 값 자체를 뜻하는 것이 아니라 물건들을 저장할 수 있는 작은 상자와 같이, 변경될 수 있는 값을 위한 컨테이너라고 할 수 있습니다. 자바스크립트에서도 데이터를 담기 위해서 변수를 선언해야 하고, 또한 변수를 선언하기 위해서는 변수 선언자의 사용이 필요합니다. 이번 글에서는 javascript에서 사용되는 변수 선언 var, let, const에 대해 알아보고, 각자..