목록All (86)
에르노트
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/3EKhD/btqKgYjwhfh/9wKGKX3NmWKPPkSj2lhwc0/img.jpg)
간단한 설문조사만으로 수익을 낼 수 있는 앱이 있다. 바로 스트리트 비즈이다. 앱으로 구성되어 있어 접근성이 매우 좋고 간편히 진행할 수 있다는 점이 매력적이다. 지금 시국이 시국인지라(..) 코로나 관련 설문조사가 거의 대부분이다. 실제로 필자는 코로나 관련 설문 2개를 진행하고 2달러 남짓한 수익을 올린 상태이다. 설문마다 단가가 조금씩 다르지만 평균 1달러 정도라고 생각하면 된다. 설문 조사에 드는 시간은 8분 이내이므로 계산해보면 최저 시급 정도는 될 것이다. 특히 이 스트리트 비즈의 장점은 앱을 이용한 대화식 진행에 있다고 생각한다. 지하철이나 버스 등에서 이동 간에, 혹은 약속 장소에서 누군가를 기다리는 자투리 시간 등을 이용하여 수행할 수도 있기에 따로 시간을 낼 필요가 없다는 점이 가장 좋..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/ntzt1/btqJ8eNlx3T/nYTrxQ9WxYh4juFctKFsGk/img.png)
자바스크립트는 기본적으로 집합(Set) 클래스를 지원한다. Set The Set object lets you store unique values of any type, whether primitive values or object references. developer.mozilla.org 자바스크립트에서 집합(Set)이란 중학교 때 처음 배우는 바로 그 집합 개념이다. 이를 일반화해서 얘기하면 유한하고 구분되는 항목들의 그룹이라고 표현할 수 있다. 좀 더 엄밀히 얘기하자면 중복을 허용하지 않고 정렬되지 않은 항목들을 그룹이다. 따라서 정의에 맞게 그 용도 역시 항목의 유일성을 확인하는 것이다. 생성 let set1 = new Set([1,2,3]) let set2 = new Set('123') cons..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/19yTx/btqJ0pCizYF/oNZgMQCGyFTfxs5toEHmyk/img.png)
각종 포털사이트에서 게시글을 작성하거나 메일을 보낼 때 우리는 흔히 용량 제한을 마주할 수 있다. 이때 첨부하는 이미지 용량이 문제가 될 때가 빈번하다. 또한 앱이나 웹서비스를 개발하다보면 앱 용량 및 서버 트래픽의 문제로 리소스 이미지 크기에 민감해질 수 밖에 없다. 물론 이미지 크기(해상도)를 줄이면 용량도 따라서 줄어들겠지만 해상도를 포기하고 싶지 않은 때도 있는 법이다. 이럴 때 정말 유용한 사이트가 바로 TinyPNG이다. TinyPNG는 자체 기술을 사용하여 이미지를 무손실 압축시켜준다. 해상도는 그대로 유지하면서도 용량은 확실하게 줄여준다는 것이다! 정말 마법같은 일이다. TinyPNG에서는 픽셀에 표시되는 색상 수를 선택적으로(육안으로는 구분되지 않을 정도로) 줄임으로써 이러한 무손실 압축..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bfIRHa/btqJVO3KNNu/JYa8HmRxBHbqWykNcikSL0/img.png)
자바스크립트 배열에는 sort() 함수가 내장되어 있다. 따라서 우리는 별도로 정렬 메소드를 작성하지 않고도 손쉽게 배열의 원소들을 정렬할 수 있다. 이때 정렬 기준을 지정하기 위해 비교 함수(compare function)을 인자로 받는다. 다음은 ECMAScript의 Array.prototype.sort(comparefn) 에 대한 최신 명세이다. The elements of this array are sorted. The sort must be stable (that is, elements that compare equal must remain in their original order). If comparefn is not undefined, it should be a function that a..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/BT2Ed/btqJIMQ7spJ/ZCcKvoBzVs2VxiYvCKsll0/img.jpg)
연결 리스트(Linkd List)를 확장하여 양방향으로 링크가 구성되는 이중 연결 리스트를 만들 수 있다. 단일 연결 리스트의 노드가 next 포인터만을 가졌다면 이중 연결 리스트의 노드는 prev와 next 두 개의 포인터를 갖는다. class LinkedListNode{ constructor(data){ this.data = data this.prev = null this.next = null } }그리고 DoublyLinkedList 클래스 자체도 head와 더불어 tail을 추가 멤버로 가진다.class DoublyLinkedList{ constructor(){ this.head = null this.tail = null this.size = 0 } isEmpty(){ return this.siz..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/XMlbO/btqJzsAlMmR/wcm3nKOeCYwkBZt3CLnxRk/img.png)
같이 보면 좋은 글: FTP 클라이언트 파일질라 [파일질라] FTP 접속 프로그램 FileZilla 앞서 포스팅했던 마인크래프트BE 서버를 여는 과정에서 FTP 클라이언트가 자주 쓰이게 됩니다. 뿐만 아니라 웹호스팅을 통해 일반적인 웹사이트를 운영할 때도 FTP클라이언트를 사용하면 편리할 makasti.tistory.com 일반적으로 FTP서버에 접속할 일이 있다면 FIleZilla 혹은 알드라이브 등의 클라이언트 프로그램을 사용할 것이다. 그러나 보안상의 이유로 프로그램 설치나 특정 포트들을 사용할 수 없는 환경(사지방 혹은 도서관의 공용PC 등)이라면 파일질라와 같은 툴들은 무용지물이 된다. 이때 빛을 발할 수 있는 웹사이트가 바로 DreamHost File Manager이다. 드림호스트 파일매니저는..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/6rINe/btqJDjPrYaV/yvvnygcDeFrK4epountZlk/img.png)
브라우저 환경에서는 쓸만한 최소한의 인터페이스로 경고창, 입력창, 확인창이 기본 제공된다. 각각의 대화 상자는 상응하는 자바스크립트 내장 함수를 호출함으로써 만들어낼 수 있다. 경고창(alert) alert("경고!") alert() 함수를 이용하면 모달창을 띄울 수 있다. 여기서 모달창(modal window)란 사용자 입력을 독점하는 창을 의미한다. 즉 경고창이 띄워지면 경고창이 없어질 때까지 주변의 다른 버튼들은 비활성화 된다는 것이다. 입력창과 확인창도 마찬가지로 모달창이다. 입력창(prompt) let age = prompt("나이를 입력하세요", 22) alert(`당신의 나이는 ${age}입니다.`) prompt(메세지, 기본값) 형태로 사용할 수 있다. prompt() 함수는 사용자가 입력..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bywcd8/btqJs5q51OX/043jK03HlDyjWNwyt6ylu1/img.jpg)
연결 리스트 연결리스트(Linked List)는 각 노드의 연결을 통해 리스트를 구현한 것이다. 자바스크립트 배열은 가변적이지만 C나 C++ 등의 전통적 언어에서 배열은 고정된 크기를 갖는 것이 일반적이다. 따라서 배열 대신 연결 리스트를 이용하면 실행 시간에 동적으로 메모리를 할당하고 해제할 수 있다는 장점이 있다. 생성 class LinkedListNode{ constructor(value){ this.data = value this.next = null } } class LinkedList{ constructor(){ this.head = null this.size = 0 } isEmpty(){ return this.size == 0 } } 리스트와 리스트에 담길 노드에 해당하는 클래스를 하나씩 만..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dAQT77/btqIvW296I0/iAI5e0ZcBgV6c6cGlyLDwK/img.png)
스택(Stack) 스택은 마지막에 삽입된 항목만 제거할 수 있는 자료구조이다. 그래서 후입선출, Last In First Out(LIFO) 방식의 자료구조라고 일컬어진다. 그리고 자바스크립트 배열은 이러한 스택의 특성을 그대로 살린 push()와 pop() 메소드를 제공한다. 따라서 자바스크립트 배열을 이용하면 손쉽게 스택을 구현할 수 있다. 생성 class Stack{ constructor(arr){ this.arr = [] if(arr) this.arr = arr } } 우선 Stack 클래스 내부에 멤버 변수로 배열을 하나 넣어준다. 삽입 push(val){ this.arr.push(val) } 그리고 배열의 push() 메소드를 이용하여 스택의 push()를 구현한다. 삭제 pop(){ retur..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/FyLx2/btqIl8nOsdg/G3ABriUUVm8Jmay1hjyeRk/img.png)
vue cli에서 yarn serve로 프로젝트를 실행했을 때 위와 같은 에러를 겪었다. 일단 컴파일은 되서 결과 화면은 보이지만 핫 리로딩이 동작하지 않았으며 아예 새로고침으로도 수정 사항을 즉각적으로 반영할 수 없었다. 이는 미세한 부분 하나하나를 수정할 때마다 매번 새롭게 컴파일해야만 결과를 볼 수 있는 치명적인 문제를 야기한다. 그런데 해결법은 매우 매우 간단하다. 프로젝트의 package.json 파일에서 serve 명령에 대해 명시적으로 host 플래그를 붙여주면 된다. 그런고로 로컬 환경에서 빌드한다면 간단히 --host localhost 를 붙여주면 끝이다! 클라우드 환경에서 개발한다면 localhost 자리에 적절한 호스트 ip를 넣어주면 될 것이다.