As I've always been

프론트엔드 코딩 중 audio 태그를 사용해서 알림음 혹은 BGM을 구현하고자 할 때, "DOMException: play() failed because the user didn't interact with the document first" 라는 에러 메세지를 마주하게 될 수 있다. 이는 바뀐 브라우저 정책에 의해서 브라우저들이 오디오나 비디오의 자동 재생 등을 막기 위해 사용자에게 오디오나 비디오의 기능을 허용할 것인지를 먼저 묻도록 바뀌었기 때문이다. 실제로 설문조사 결과 대다수의 웹 사용자들이 자동 재생되는 음악이 user experience에 안 좋은 영향을 끼친다고 답했다고 한다. 바뀐 정책에 대한 자세한 설명은 https://developer.chrome.com/blog/autoplay/#w..

URL 관련 기능들 자바스크립트로 프론트 엔드 부분을 구현하다보면 URL과 관련된 기능들을 사용해야 하는 순간들이 오기 마련이다. 이 글에서는 매우 기초적이면서 중요한 자바스크립트 기능들에 대해서 언급할 것이다. 1. 현재 URL 주소 값 가져오기 현재 페이지의 URL 주소를 알아야 할 필요가 있을 때에는 다음 코드를 사용하면 된다. window.location.href 위의 코드는 현재 페이지의 주소를 반환한다. 이 값을 변수에 저장한 후에 원하는 기능을 구현하면 될 것이다. 2. 다른 웹 페이지로 이동 1) 다른 페이지로 넘어가기 위에서 언급하였던 "window.location.href"를 이용하면 다른 페이지로 넘어가도록 만들 수 있다. window.location.href = "www.someth..

프로미스 자바스크립트와 node.js에서는 주로 비동기 프로그래밍을 한다. 특히 이벤트 구조 방식 때문에 콜백 함수를 자주 사용한다. ES2015부터는 자바스크립트와 node.js의 API들이 콜백 대신 프로미스(promise) 기반으로 재구성된다. 그래서 악명 높은 콜백 지옥(callback hell)을 극복했다는 평가를 받고 있다. 프로미스를 사용하려면 먼저 프로미스 객체를 생성해야 한다. i.e.const promise = new Promise( (resolve, reject) => {if(조건문) {resolve('success');} else {reject('failed');}}); promise.then((message) => {console.log(message);}).catch((error..

비구조화 할당 비구조화 할당은 이름은 어색하지만 매우 유용한 기능이다. 이 기능을 사용하면, 객체와 배열로부터 속성이나 요소를 쉽게 꺼낼 수 있다. i.e.var candyMachine = {status: {name: 'node',count: 5},getCandy: function() {this.status.count--;return this.status.count;}}; var getCandy = candyMachine.getCandy;var count = candyMachine.status.count; 위의 예제는 객체의 속성을 같은 이름의 변수에 대입하는 코드이다. 비구조화 할당 기능을 통해서 이를 다음과 같이 바꿀 수 있다. i.e.const candyMachine = {status: {name:..

화살표 함수 (arrow function) ES2015 이전에는 함수를 선언하기 위해서는 function 키워드를 통해서만 함수를 선언하고 정의할 수가 있었다. 하지만, ES2015 문법에서의 화살표 함수라는 방식을 사용하면 function 키워드를 '=>'로 대체할 수 있게 된다. 단순히 키워드 대체만 있었다면 익숙한 기존의 방식을 대체할 필요가 없었을 것이다. function 키워드 대신 화살표 함수를 사용할 경우, 기존과는 다른 방식의 this 바인딩이 가능해진다. i.e.var relationship1 = {name: 'zero',friends: ['nero', 'hero', 'xero'],logFriends: function() {var that = this; //relationship1에 해당..

템플릿 문자열 2015년에 출시 되었던 ES2015 문법에 새로운 문자열이 추가되었다. 큰따옴표나 작은따옴표로 감싸는 기존 문자열과는 다르게 백틱(`)으로 감싸는 방식이다. 이 백틱을 사용한 문자열 방식에서 가장 특이한 점은 문자열 안에 변수를 넣을 수 있다는 것이다. i.e.var string1 = num1 + ' 더하기 ' + num2 + "는 \"" + result + "\"";const string2 = `${num1} 더하기 ${num2} 는 "result"`; 위의 예시를 통해서 알 수 있듯이, 백틱을 사용한 템플릿 문자열은 기존 문자열과는 다르게 ${}를 사용해서 변수의 값에 접근할 수가 있다. 또한, 문자열 내에서 큰따옴표나 작음따옴표를 '\'문자 없이 사용해도 된다. 이 템플릿 문자열 방..