개발새발로그

javascript Array의 특정 원소를 지우는 법을 정리한다. python에서는 다음과 같은 코드로 같은 작업을 할 것이다. a = [1, 2, 3, 4] a.remove(3) 다음은 javascript 코드이다. 지우고 싶은 원소의 인덱스를 찾아서 splice 함수를 통해서 지운다. let a = [1, 2, 3, 4] const idx = a.indexOf(3) if (idx > -1) a.splice(idx, 1) 단순 array가 아닌 object를 담는 array에서 특정 field 값을 가지는 object를 지우고 싶다면 다음과 같은 방식으로 할 수 있다. functional programming style의 find 함수를 이용해서 원하는 object를 찾고, 그 이후는 같은 논리로 코..

ubuntu에는 기본적으로 JDK, Python, Node.js 등의 프로그래밍 언어 및 도구들이 함께 설치되어 있다. Node.js가 설치되어있는 것을 확인해보려면 바로 쉘에서 아래와 같이 버전을 체크해보면 된다. ~$ node --version v4.8.3 ~$ npm --version 2.15.11 시스템에 기본으로 v4.8.3 버전의 Node.js가 설치되어있는 것을 확인할 수 있다. 하지만 Node.js 공식 사이트가 알려주는 최신 버전은 아래 스크린샷을 통해서 보듯이 v7.10.0, v6.10.3(LTS)이다. 최신 버전과 시스템 버전은 큰 괴리가 있음을 깨닫는다. 그럼 여기서 고민이 생긴다. 그냥 시스템에 깔려있는 Node.js를 쓸 것인가,아니면 최신 LTS 버전 (혹은 원하는 버전)을 설..

jQuery UI의 자동 완성 (autocomplete) jQuery UI 자동 완성 기능은 이렇게 쓴다. $("#inputAutocomplete").autocomplete({ source: "/YOUR/SEARCH/URL", minLength: 2, }); 구체적인 사용법은 공식 문서를 참조하자. source에는 직접 배열 자료를 넣어줄 수도 있고, 위 예제처럼 input 값을 받는 요청(request) 주소를 줄 수도 있다. source가 주소일 경우, jQuery UI는 자동으로 GET 요청을 term 매개변수로 값을 실어 보낸다. DB에서 직접 찾거나, Elasticsearch 같은 검색 엔진을 사용해서 서버에서 처리해서 보내주게 하겠지? 그리고 minLength가 2이므로 최소 2 글자를 입력해..

웹에서 코드를 예쁘게 보여주는 javascript 라이브러리 highlight.js를 소개한다. 사용법은 어렵지 않아 짧은 글이 될 것이다.티스토리 블로그를 쓰면서 조금 불편했던 부분이 WYSIWYG (What You See Is What You Get) 에디터였다. 특히 코드를 입력하고자 할 때가 문제이다. 티스토리에서 제공하는 에디터는 정석적인 코드 포맷팅을 제공하지 않아서 그동안 나는 글상자를 만들고 거기에 Courier New 글씨체를 일일이 적용해서 썼었다.# 그동안 써왔던 코드 박스$ source .venv/bin/activate (.venv) $ pip install ipython# IPYTHON > print('GOOD NIGHT') 코더들은 항상 정석적인 것을 좋아하지 않는가? 위의 코드..

웹화면에서 수식을 Latex 코드로 입력할 수 있는 javascript 패키지, MathJax를 간단하게 소개한다. MathJax는 자체 CDN을 제공하므로 이를 이용하는 것이 편리할 것이다. 가장 기본적인 세팅으로 다음과 같이 javascript 코드를 추가한다. 위 비동기 javascript 코드는 어느 위치에나 넣어도 잘 작동하는 것으로 예상된다. 부분에 넣으면 당연히 잘 될 것이고, 내가 가장 끝 부분에 넣어서 사용하고 있는데 잘 작동하기 때문이다. 그러고 나서는 본분에 MathJax가 알려주는 식별자를 통해 수식을 넣을 수 있다. 이미 Latex를 통해 수식을 많이 써왔다면 MathJax 사용에 큰 어려움은 없을 것이다. 기본 세팅에서 식별자는 두 가지가 있다. (실제로 식별자를 넣어버리면 안보..

c3.js의 사용법을 정리하려 한다. c3라는 이름에서 유추할 수 있듯이, d3.js의 복잡한 데이터 시각화를 조금 더 쉽게 사용할 수 있도록 어느 정도 모듈을 감싸 놓은 d3 기반의 라이브러리이다. d3.js에서는 레이아웃, 즉 그래프의 종류에 따라 코드가 많이 달라져야 하기 때문에 그 때마다 어느 정도의 학습이 필요하다. 하지만 c3.js가 그런 그래프 종류들을 편하게 사용할 수 있게 해서, 우리는 c3에 데이터만 던져주고 어떤 종류의 그래프를 그릴 것인지 알려주면 된다. c3js.org 공식 사이트에서 다양한 예제를 볼 수 있지만, 그 예제가 너무 단순해서 내가 원하는 그래프를 만들 수 있도록 도와주지는 못했다. 여기서는 c3.js의 기본적인 예제를 살펴보고, 약간의 팁도 같이 정리하려 한다. 0...