front-end 6

자바스크립트 자료 구조 - 스택(Stack)

자바스크립트로 스택 구현하기 백준 10828번 스택 문제와도 같다. 본문은 서적 Data Structures and Algorithms with JavaScript(Michael McMillan)의Chapter 4. Stack을 정리한 내용이다. 1. 스택(Stack)이란? 스택은 요소들의 배열로, 스택의 'top'이라고 부르는 배열의 한쪽 끝에 있는 요소만 접근할 수 있다는 특징이 있다. 즉 가장 끝(top 쪽)에 있는 요소만 빼낼 수 있으며, 새로운 요소는 가장 끝(top 쪽)에 들어간다. 이를 두고 last-in, first-out(LIFO) 자료 구조라고 부른다. 이 특징으로 인해 스택은 실행하기 쉽고 속도가 매우 빠르다는 장점을 갖는다. 2. 스택 연산(Stack operations) 스택의 주..

집합(Set)과 맵(Map)

자바스크립트 - 집합(Set)과 맵(Map) 본 글은 아래 사이트에 있는 내용을 한글로 번역해서 정리한 것입니다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set Set - JavaScript | MDN The Set object lets you store unique values of any type, whether primitive values or object references. developer.mozilla.org https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map Map - JavaScrip..

스포티파이 API 사용하기

코드는 아래 주소에 나와 있는 코드를 참고하여 작성하였다. https://github.com/makeratplay/SpotifyWebAPI/ GitHub - makeratplay/SpotifyWebAPI: Simple JavaScript app to make API calls to Spotify Simple JavaScript app to make API calls to Spotify - GitHub - makeratplay/SpotifyWebAPI: Simple JavaScript app to make API calls to Spotify github.com https://github.com/spotify/web-api-auth-examples/blob/master/authorization_code/a..

자바스크립트 자료 구조 - Lists

Data Structures and Algorithms with Javascript (Michael McMillan) 책의 Chapter 3. Lists를 정리한 내용입니다. *코딩 독학 중인 개발자 꿈나무이기 때문에 글에 오류가 있을 수도 있습니다...! Lists의 ADT를 만들어보자! 그 전에 ADT란 무엇인가? ADT: Abstract data type Abstract Data type (ADT) is a type (or class) for objects whose behaviour is defined by a set of value and a set of operations. The definition of ADT only mentions what operations are to be perfo..

Audio reactive visuals using p5.js

p5.js로 음악에 반응하는 아트워크 만들기 Awwwards의 다음 강의를 수강한 후 정리한 내용입니다. https://www.awwwards.com/academy/course/audio-reactive-visuals-with-code Audio Reactive Visuals with Code Sound can dictate a new Visual Language. In this case the browser is the canvas and in this course you will learn how to use sound to draw onto that canvas, with... www.awwwards.com 1. p5.js 시작하기 1) p5.js 다운로드 우선 p5.js와 p5.sound를 다운로..

웹페이지 로딩 화면 만들기

Main question 웹페이지가 외부 리소스(이미지, 비디오 등)를 읽어들이기 전까지는 로딩 화면을, 모든 리소스를 읽어들인 후 준비가 되었을 때 페이지를 보이게 하려면? Question 1. 모든 리소스를 읽었는지 여부를 어떻게 알 수 있을까? 우선 웹 브라우저의 자바스크립트 실행 순서에 대해 알아보자. 웹 브라우저의 자바스크립트 실행 순서 렌더링 엔진은 다음의 순서로 HTML 코드를 실행한다 ✅ Window 객체 생성 (웹 페이지와 탭마다 생성) ✅ Window 객체의 프로퍼티로 Document 객체 생성, DOM 트리 구축 시작 - document.readyState = "loading" ✅ HTML 문서 순서에 따라 분석하여 DOM 트리 구축 - 중간에 script 요소가 있으면 HTML 문서..