As I've always been

우분투 18.04 버전에서는 apt가 node.js version 10에 대해서 기본적으로 지원을 하지 않아서 sudo apt install nodejs로 node.js를 설치하면 8버전이 설치가 된다. 그런데, pm2의 설치를 위해서는 node.js가 version 10 이상이어야만 한다. 우분투 18에서 20으로 업그레이드 없이 이를 해결하는 가장 빠른 방법은 curl을 사용해서 Node 10 installer를 다운 받고 실행시키는 것이다. # curl 설치 sudo apt install curl # Node 10 installer 다운 및 설치 curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - # installer를 설치하게 되면 해..

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

리액트 네이티브에서 웹 서버로부터 데이터를 가져오는 가장 보편적인 방법 중 하나가 바로 fetch() 메소드의 사용이다. 그런데, 안드로이드 9 (Oreo) 버전부터 이 fetch() 메소드와 같이 데이터를 가져오기 위한 통신을 할 때에 HTTP 프로토콜을 사용할 수 없게 된다. 별다른 설정을 하지 않을 경우, HTTP 프로토콜을 사용해서 데이터를 가져오려고 하면 에러가 나게 되는 것이다. 이에 대한 해결 방법으로는 크게 2가지가 있다 - 1) HTTP 대신 HTTPS 사용 2) AndroidMenifest.xml 파일 수정하기 1) HTTP 대신 HTTPS 사용 당연히 가장 기본적인 방법은 HTTP 대신 HTTPS 프로토콜을 사용하는 것이다. HTTPS를 사용하는 것이 보안 상으로도 더욱 안전하니 별다..

bind()와 화살표 함수 (arrow function) 리액트에서도 마찬가지겠지만, 리엑트 네이티브에서 컴포넌트에 이벤트 리스너를 추가할 때 (예를 들면 TouchableOpacity의 onPress에 이벤트 리스너를 추가할 때) 흔히 bind()와 화살표 함수를 사용한다. 예를 들어, 버튼을 누르면 "generateList('product')"가 실행되도록 만들고 싶다면 다음과 같은 2 가지 방법으로 구현할 수 있다. 1) bind() Product 2) 화살표 함수 (arrow function) this.generateList('product')}> Product 두 방법 모두 렌더링 시에 함수를 실행시키지 않고, 함수 자체를 리턴시켜서 이벤트 리스너로서 장착시키지만, 한 가지 차이점이 있다. 화살..

Error: ER_CON_COUNT_ERROR: Too many connections 노드에서 mysql 모듈을 사용하는 많은 사람들이 다음과 같은 에러 메세지와 마주치게 된다. "Error: ER_CON_COUNT_ERROR: Too many connections" 라는 에러 메세지가 알려주듯이, node.js 서버와 mysql 데이터베이스 사이의 열려 있는 커넥션 개수가 너무 많아서(제한된 범위 이상) 이러한 에러가 발생한 것이다. 이 문제의 해결법은 매우 간단하다. connection이 열린 상태에서 닫히지 않고, 그러한 connection들이 쌓이면서 생긴 문제이기 때문에, 그저 커넥션을 닫아주는 "conn.release()" 메소드를 사용하면 된다. let pool = mysql.createPo..

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"`; 위의 예시를 통해서 알 수 있듯이, 백틱을 사용한 템플릿 문자열은 기존 문자열과는 다르게 ${}를 사용해서 변수의 값에 접근할 수가 있다. 또한, 문자열 내에서 큰따옴표나 작음따옴표를 '\'문자 없이 사용해도 된다. 이 템플릿 문자열 방..