출처 : 코딩애플 https://www.youtube.com/watch?v=v67LloZ1ieI 웹브라우저 동작원리 웹브라우저동작원리를 알아야하는 이유 : 자바스크립트를 해석하고 실행해주는 것이 브라우저 console.log(1+1) setTimeout(function(){ console.log(2+2) }, 1000) console.log(3+3) 보통 다른 언어에서는 1+1 , 1초쉬고 2+2 , 3+3 을하여 2,4,6 으로 실행되었을 것이다. 하지만 자바스크립트의 경우 위 출력 이미지와 같이 2,6,4로 출력되어 빠른거부터 실행해준다는 것을 눈치챌 수 있을것이다. 이것이 왜 그런지 아려면 브라우저 동작원리를 알면된다. 웹브라우저가 자바스크립트를 해석하는 원리가 있다. 이것을 그림으로 표현하자면 아..
Template literals 자바스크립트 Template literals는 ES6에서 도입된 새로운 문자열 표기법입니다. Template literals는 백틱(``)으로 시작하고 끝나는 문자열 리터럴입니다. 큰따옴표("")나 작은따옴표('')로 감싸는 기존 문자열 표기법과는 달리, 백틱으로 감싸면 문자열 내에서 줄바꿈(줄바꿈을 위해 \n을 사용할 필요가 없음)이나 특수문자를 그대로 표현할 수 있습니다. 백틱 내에서 변수나 표현식을 삽입할 수 있습니다. 문자열삽입 ES6 이전: const name = "John Doe"; const age = 30; console.log("Hello, " + name + "I am " + age + " years old."); 템플릿 리터럴을 사용하면 아래와 같이 더..
npm 정의 Node Package Manager의 약자로 Node.js로 만든 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램입니다. 개발자는 단 몇 줄의 명령어로 기존에 공개된 모듈들을 설치하고 활용할 수 있습니다. 즉 npm 은 'node.js 로 만들어진 프로그램을 쉽게 설치 등을 주는 것 ' 이라고 생각하시면 되겠습니다. npm 설치방법 (Node.js 설치) npm 은 node.js 의 패키지 관리자 이므로 npm 을 사용하기 위해서는 Node.js 를 설치해야 합니다. 1. Node.js 다운로드 Node.js 다운로드 링크 : https://nodejs.org/ko/download Node.js Node.js® is a JavaScript runtime built on Chrome's V..
SpeechSynesisUtterance Web Speech API의 SpeechSynesisUtterance 인터페이스는 음성 요청을 나타냅니다. 말할 텍스트, 언어, 음성 및 기타 음성 속성을 지정하는 데 사용됩니다. SpeechSynesisUtterance 개체에는 다음과 같은 속성이 있습니다. SpeechSynesisUtterance 속성 text: 말할 텍스트입니다. lang: 텍스트의 언어입니다. voice: 사용할 음성입니다. rate: 텍스트를 읽어야 하는 속도입니다. pitch: 음성의 높낮이를 나타내는 특성입니다. volume: 음성의 볼륨입니다. paused: 말하기가 일시 중지되었는지 여부입니다. onend: 말하기가 끝나면 시작되는 이벤트입니다. onerror: 음성 합성 중 오류..
마이크로 입력 받는 오디오를 녹음하는 방법 펌글 출처 : https://curryyou.tistory.com/446 [자바스크립트] 마이크 음성 소리 녹음 방법 : MediaRecorder 별도 라이브러리 없이, 자바스크립트만으로 마이크로 입력 받는 오디오를 녹음하는 방법을 정리한다. 대략 아래와 같은 순서로 진행하면 된다. 1. 마이크 소리 입력: MediaStream 2. 입력된 소리 녹 curryyou.tistory.com 시작/종료 녹음된 소리를 재생할 audio 엘리먼트 아래 코드는 jquery로 변경 + 시작버튼, 종료버튼 나눔 녹음시작 녹음종료 녹음된것확인하기 //화면이 모두 로딩된 다음 실행된다. $(document).ready(function () { const $audioEl = $("..
보고 와야 할 이전글: promise 정리 [JS] Promise에 대해 알아보자 Promise 개념 Promise란? 자바스크립트에서 제공하는 비동기를 간편하게 표현할수있는 object 비동기적인것을 수행할 때 콜백함수 대신에 유용하게 쓸 수 있는 object입니다. Promise는 정해진 장시간의 rebornbb.tistory.com async와 await async와 await라는 특별한 문법을 사용하면 promise를 좀 더 편하게 사용할 수 있습니다. async 함수 async function f() { return 1; } function 앞에 async를 붙이면 해당 함수는 항상 promise를 반환합니다. async function f() { return 1; } f().then(alert..
콜백함수란? 정의 : 함수에 파라미터로 들어가는 함수 용도 : 순차적으로 실행하고 싶을때 쓴다. 참고 1. 다른 곳에서 만든 함수도 콜백함수로 넣을 수 있다. 참고 2. 콜백함수에 함수명 작성할 수 있다. 참고 3. 콜백함수가 필요한 함수들에만 콜백함수 사용가능 콜백함수 사용 이유 이렇게 콜백함수를 사용하면, 순차적으로 흘러갈수있다. first함수를 실행하면 1 다음에 2 가 콘솔창에 출력된다. 근데 굳이 콜백함수를 사용해야 할까? 의문이 들 것이다.. fist(); second(); 이런식으로 사용하면 되지 않을까 생각 할 수 있는데, 팀워크를 할때, 예를 들어 한명이 first() 라는 함수를 만들었다고 치면, 팀원1 : fist() 후에 console.log(2)를 바로 하고 싶어 팀원2 : fis..
라이브러리를 이용한 방사형 차트를 만들기 전, 육각형과 오각형을 그려보는 연습을 했다. 자바스크립트 코드로 육각형과 오각형을 그리려면 canvas api에 대해 알아야하고, 라디안과 삼각함수에 대한 개념이 필요하다. 해당 포스팅은 canvas api에 대한 기초설명, 라디안과 삼각함수 개념, 육각형과 오각형을 그리는 코드 전부를 정리하였다. 라디안 일반적으로 익숙하게 사용하는 각도법 ( =한 바퀴를 360도로 나누어 표현하는 것) 이 아니라 삼각함수는 항상 이 '라디안' (=호도법) 이라는 것을 이용해 계산을 합니다. 각도법 - 원의 중심에서 원이 작도되는 과정을 보면서 내 고개가 얼마나 올라갔나를 수치화 시킨 것 호도법 - 원을 작도하는 연필의 입장에서 (반지름 대비) 연필이 긁고간 길이가 얼마인가 를..
웹소켓 HTTP 통신을 이용하면 클라이언트에서 서버에 요청을 보내야만 서버에서 응답을 할 수 있습니다. 즉, 서버에서는 요청을 받지 않으면 클라이언트에 통신할 수 없는 것입니다. 이러한 문제점을 해결하기 위해서는 양방향으로 통신할 수 있는 웹 소켓 통신을 이용해야합니다. 웹 소켓 통신 연결은 아래 코드와 같은 방법으로 시작합니다. let socket = new WebSocket("ws://chanstory.dev"); 'http', 'https' 프로토콜과 다르게 'ws', 'wss' 프로토콜을 사용합니다. 'ws', 'wss'의 차이는 'http', 'https'와 같은 관계로 보안과 신뢰성에서 차이가 있습니다. wss와 ws 차이점 "wss"와 "ws"는 모두 WebSocket 프로토콜을 사용하는 네..
scrollTop 글의 맨 처음 부터 얼마나 내려왔는지 현재 스크롤 위치 scrollHeight 화면 바깥으로 삐져나간 부분까지 포함해서 전체 글의 길이 자바스크립트를 사용한 스크롤 바 맨 아래로 내리는 코드: document.documentElement.scrollTop = document.documentElement.scrollHeight; jQuery를 사용한 스크롤 바 맨 아래로 내리는 코드: $(document).ready(function() { $('html, body').scrollTop($(document).height()); });
펌글 - 출처: https://ko.javascript.info/xmlhttprequest#ref-570 XMLHttpRequest ko.javascript.info XMLHttpRequest란? XMLHttpRequestJavaScript에서 HTTP 요청을 만들 수 있는 내장 브라우저 개체입니다. 현재 대부분의 주요 웹 브라우저는 서버에 데이터를 요청하기 위한 XMLHttpRequest 객체를 내장하고 있습니다. XMLHttpRequest 객체는 서버로부터 XML 데이터를 전송받아 처리하는 데 사용됩니다. 이 객체를 사용하면 웹 페이지가 전부 로딩된 후에도 서버에 데이터를 요청하거나 서버로부터 데이터를 전송받을 수 있습니다. 즉, 웹 페이지 전체를 다시 로딩하지 않고 일부분만을 갱신할 수 있게 됩니다..
