자바스크립트: Fetch (외부 라이브러리 없이 AJAX 사용)

만약 JQuery  등의 외부 라이브러리 없이 AJAX를 사용하려고 한다면 예전에는(혹은 지금도) XMLHttpRequest(MDN 링크)라는 것을 사용해야 했습니다. 이것은 약간 사용하기 복잡했었는데요, ES6(2015)부터 fetch(MDN 링크)라는 기능이 도입되어서 약간 편하게 사용할 수 있게 되었습니다. Promise를 기반으로 하기 때문에 지원하지 않는 웹 브라우저에서는 사용할 수 없습니다. 인터넷 익스플로러에서 사용 가능하게 하려면 Babel 등을 이용해서 변환해야 더보기…

트리 순회: 전위, 중위, 후위 (preorder, inorder, postorder)

트리 자료구조의 순회 방법으로 전위 순회(preorder), 중위 순회(inorder), 후위 순회(postorder)가 있습니다. 출처 링크 예를 들어 위와 같은 이진 트리가 입력되면, 전위 순회한 결과 : ABDCEFG // (루트) (왼쪽 자식) (오른쪽 자식) ☞ 전루왼오 (∠) 중위 순회한 결과 : DBAECFG // (왼쪽 자식) (루트) (오른쪽 자식) ☞ 중왼루오 (∧) 후위 순회한 더보기…

자바스크립트: 배열 자르기 및 합치기 (예제: 퀵 정렬, 병합 정렬)

배열 자르기 Array.slice(시작인덱스, 끝인덱스) 시작인덱스를 포함하여, 끝인덱스 바로 직전까지 요소를 배열로 반환합니다. var arr = [4, 1, 2, 11, 5, 7, 3] console.log(arr.slice(0, 4)) 결과는 [4, 1, 2, 11] 로 인덱스 0부터 4의 바로 직전까지인 3번까지를 배열로 반환합니다.   배열 합치기 Array.concat(배열1, 배열2, 배열3, …) 파라미터는 1개 또는 그 이상 더보기…

npm: Vue-cli 설치 및 프로젝트 생성 (관리자 권한 문제 있을 때)

맥 터미널 관리자 권한으로 실행 명령어 앞에 sudo 키워드   폴더에서 터미널 열기 https://elsainmac.tistory.com/519   npm 설치된 글로벌 요소 삭제 https://stackoverflow.com/questions/54268008/vue-command-not-found-on-mac sudo npm install -g npm@latest sudo npm install -g npx@latest   npm-cli 설치 npm install -g @vue/cli@latest npm install -g @vue/cli-init@latest   vue project 생성 vue init webpack-simple vue-todo 더보기…

자바스크립트 lodash: debounce와 throttle을 이용하여 함수의 실행 횟수 제한

lodash 홈페이지: https://lodash.com/ debounce, throttle은 생소한 기능인데요 간단히 요약하면 이벤트의 반복 실행시 콜백 함수의 불필요한 실행을 줄이는 역할을 합니다. 이로 인해 클라이언트가 혜택을 볼 수도 있거나 혹은 서버 측에 불필요한 리퀘스트를 줄일 수도 있습니다. debounce: 동일 이벤트가 반복적으로 시행되는 경우 마지막 이벤트가 실행되고 나서 일정 시간(밀리세컨드)동안 해당 이벤트가 다시 실행되지 않으면 더보기…

자바스크립트 예제: 루비 문자 변환기

루비 문자 변환기 바로가기 루비 문자는 글자 위에 첨자가 붙는 것으로서 아래와 같은 것들을 루비 문자라고 합니다. 모든 문자 및 언어에서 사용되는 것이지만 주로 일본어 등에서 볼 수 있습니다. (나무위키 루비 문자)  振ふり仮が名な HTML으로 이 루비 문자를 입력할 수 있는데, 매번 태그를 입력하는 것이 귀찮기 때문에 변환기를 만들었습니다. 사용법은 루비 더보기…

자바스크립트: 캔버스로 원 그리기 + 원을 n등분하기

캔버스에 대한 기초 사용법은 모질라 web docs에서 볼 수 있습니다.   원 그리기 호(arc) 명령을 이용해서 원을 그릴 수 있습니다. arc(x, y, radius, startAngle, endAngle, anticlockwise) (x, y) 위치에 원점을 두면서, 반지름 r을 가지고,  startAngle 에서 시작하여 endAngle 에서 끝나며 주어진 anticlockwise 방향으로 향하는 (기본값 false – 시계방향 회전) 호를 그리게 됩니다. 예제 코드를 살펴보겠습니다. HTML 기본 토대는 다음과 같습니다. <!DOCTYPE 더보기…

자바스크립트: 오디오(Audio) 요소 구간반복하기

자바스크립트와 HTML로 이루어진 페이지에서 audio태그를 사용하여 음원을 재생할 때 설정할 수 있는 구간 반복 기능을 구현한 예제입니다. 언어 학습 등에 사용하면 좋을 것 같습니다. 자바스크립트 오디오 객체에서 특정 이벤트를 실행하는 방법은 다음과 같습니다. audioElement.addEventListener(type, listener[, useCapture]); type: 이벤트 종류(timeupdate, play, loaddedmetadata 등) listener: 해당 이벤트 발생 시 실행할 함수 useCapture: 더보기…

자바스크립트: 정규표현식 (Regular Expression; 정규식) 정리

정규표현식(이하 정규식)에 대한 내용을 다뤄보겠습니다. 정규식은 자바스크립트에서만 사용되는 것은 아니지만 프로그래밍 언어마다 사용방법이나 문법 등이 미묘하게 다르기 때문에 여기서는 자바스크립트를 기준으로 설명하겠습니다.   정규식 선언 방법 var regex1 = /정규식/ var regex2 = new RegExp(“정규식”); 슬래시(/)로 감싸거나, RegExp("정규식")를 사용해서 선언합니다. 보통 전자의 방법이 선호되지만, 필요에 따라 다른 변수가 정규식에 포함되어야 더보기…