https://programmingsummaries.tistory.com/ ko Sun, 12 Apr 2026 10:13:09 +0900 TISTORY 100 루ol보스 https://t1.daumcdn.net/cfile/tistory/256DA3475156F9EF01 https://programmingsummaries.tistory.com https://programmingsummaries.tistory.com/401 Babel Babel 은 ES2015+ 문법을 ES5 지원 브라우저에서 해석할 수 있도록 변환해주는 트랜스파일러이다. 하지만 새롭게 추가된 전역 객체들(Promise, Map, Set..)과 String.padStart 등 전역 객체에 추가된 메서드들은 트랜스파일링만으론 해결하기 어렵기 때문에 core-js 나 regenerator-runtime 와 같은 별도의 polyfill 이 필요하다. Babel 기반에서 폴리필을 추가하는 방법은 두 가지가 존재한.. JavaScript babel babel-plugin-transform-runtime babel-polyfill ES2015 webpack 루ol보스 https://programmingsummaries.tistory.com/401 https://programmingsummaries.tistory.com/401#entry401comment Sat, 5 Aug 2017 15:14:09 +0900 https://programmingsummaries.tistory.com/400 들어가며 node.js 프로젝트의 경우 package.json 파일의 scripts 항목에 프로젝트에서 필요한 주요 작업들을 스크립트로 만들어서 등록해 놓는 경우가 많다. 대부분의 경우엔 start 스크립트로 충분할 때가 많지만 그 외의 스크립트를 실행하고 싶을 때는 어떤 스크립트들이 있는지 확인하기 위해 package.json 파일을 열어봐야 하는 귀찮음이 있었다. 이런 귀찮음을 이겨내고자 점심 시간에 간단하게 아래와 같이 npm 스크립트를 쉽게 리스.. Node.js CLI node.js 루ol보스 https://programmingsummaries.tistory.com/400 https://programmingsummaries.tistory.com/400#entry400comment Tue, 13 Jun 2017 13:06:44 +0900 https://programmingsummaries.tistory.com/399 들어가며 지난 2017년 2월 22일, node.js 의 자바스크립트 엔진인 V8 이 5.5 버전으로 업그레이드되면서 특별한 옵션 없이도 바로 async/await 을 네이티브로 사용할 수 있게 되었다. 물론 이전 버전의 node.js 에서도 하모니 옵션을 활성화 시키면 async/await을 사용할 수 있었지만, 이제는 특별한 옵션 설정 없이도 곧바로 async/await 문법을 사용할 수 있게 된 것이다. 다만, 아직 Ignition 과 T.. Node.js 루ol보스 https://programmingsummaries.tistory.com/399 https://programmingsummaries.tistory.com/399#entry399comment Fri, 24 Feb 2017 10:03:29 +0900 https://programmingsummaries.tistory.com/398 넷플릭스 기술 블로그에 올라온 Crafting a high-performance TV user interface using React 라는 글의 번역입니다.글에서도 언급하고 있지만, 대상은 TV UI 지만 시도한 개선 방법은 범용적인 접근법이기 때문에 도움될만한 부분이 많은 것 같습니다. 번역이 잘못된 부분이 있다면 꼭 말씀해주세요.넷플릭스 TV 인터페이스는 회원들을 위한 최고의 경험을 알아내기 위한 우리의 노력을 통해 지속적으로 진화하고 있다. 예를들.. React.js 루ol보스 https://programmingsummaries.tistory.com/398 https://programmingsummaries.tistory.com/398#entry398comment Mon, 23 Jan 2017 12:33:00 +0900 https://programmingsummaries.tistory.com/396 로컬에서 프론트엔드 작업을 할 때 어떤 형태로든 웹서버를 띄워서 결과물을 확인하게 된다. 파일을 수정할 때마다 정적 리소스들을 빌드해준 뒤에 띄워놓은 웹서버에 접속해서 리프레시를 해서 결과물을 확인하는 것이 일반적인 작업 패턴인데, 앞서 하나씩 살펴본 Gulp 사용 예제들과 더불어 이번에 다루는 BrowserSync 를 사용하면 위의 과정까지 쉽게 자동화할 수 있다. BrowserSync는 Gulp 플러그인이 아닌 node.js 기반의 어플리케이션이지.. Gulp.js gulp gulp.js 루ol보스 https://programmingsummaries.tistory.com/396 https://programmingsummaries.tistory.com/396#entry396comment Sun, 31 Jul 2016 00:51:59 +0900 https://programmingsummaries.tistory.com/395 태그의 중요성에 대해서 알게 된 건 angular.panels 라는 오픈소스 라이브러리를 GitHub 에 공개했을 때였다.사실 누군가 관심을 가져줄거라고 생각조차 못했기 때문에 내 마음대로 버전을 올리면서 작업하고 있었는데, futhr 이라는 외국분으로부터 태그를 달아달라는 요청을 받게 되었다.GitHub 에서는 태그를 기준으로 릴리즈를 관리해주고 있기 때문에 오픈소스 활동을 하고 있다면 Git 에서 태그를 달고 제거하는 방법에 대해서 알아두면 유용하다.. Git 루ol보스 https://programmingsummaries.tistory.com/395 https://programmingsummaries.tistory.com/395#entry395comment Sat, 16 Jul 2016 21:22:14 +0900 https://programmingsummaries.tistory.com/394 로컬 브랜치를 리모트 마스터나 리모트의 다른 브랜치에 푸시할 일들이 종종 생긴다.자꾸 까먹는 것 같아서 블로그에 짧게 남겨둔다.(길게 포스팅을 하려다보니 알게된 내용들을 기록하려던 원래 블로그를 시작하게 된 목적을 잃어버리게 된 것 같다. 그래서 과감하게 짧은 포스팅을 써본다.) $ git push <remote> <local branch name>:<remote branch to push into> Git 루ol보스 https://programmingsummaries.tistory.com/394 https://programmingsummaries.tistory.com/394#entry394comment Sat, 16 Jul 2016 20:01:16 +0900 https://programmingsummaries.tistory.com/393 들어가며2015년 12월에 Gulp 4.0에서 추가되고 변경된 4개의 기능 정리 라는 제목으로 Gulp 4.0에서 추가된 주요 기능들에 대해 포스팅했었는데, 이번에 실무에 4.0을 적용해보며 3.x과 어떤 부분에서 체감적으로 차이가 있는지 또 어떻게 마이그레이션 할 수 있는지에 대해 정리해보려고 한다.Gulp 4.0은 무려 2014년 8월부터 릴리즈 이야기가 나왔고... 오랜 기간 Alpha 2 상태에서 크게 변화한 부분은 없었기 때문.. Gulp.js gulp gulp.js 루ol보스 https://programmingsummaries.tistory.com/393 https://programmingsummaries.tistory.com/393#entry393comment Tue, 12 Jul 2016 07:30:13 +0900 https://programmingsummaries.tistory.com/392 들어가며지난 포스팅 Docker 시작하기 에서 기본적인 Docker 개념과 사용 방법 전반에 대해 다루었다.이번에는 간단한 node.js application 을 위한 Dockerfile 을 직접 작성해서 Docker 기반으로 node.js application 실행 환경을 구성하기 위한 과정을 정리해보려고 한다.DockerfileDockerfile 은 Docker 이미지 생성을 위한 일종의 배치 파일이라고 볼 수 있다. 특정 이미지를 기준으로.. Docker docker node.js 루ol보스 https://programmingsummaries.tistory.com/392 https://programmingsummaries.tistory.com/392#entry392comment Mon, 4 Jul 2016 20:00:12 +0900 https://programmingsummaries.tistory.com/391 들어가며전부터 Docker 기반으로 개발/배포 환경을 꾸미고 싶었는데, 최근에서야 Docker 기반으로 몇개의 작은 프로젝트를 구성하고 배포해보고 있다. 사용해 본 시간이 길지는 않지만, 그간 손에 익힌 내용들을 정리해서 공유해보려고 한다.Docker는 오픈 소스 컨테이너 가상화 플랫폼.. 이라고 공식 문서에서 표현하고 있다. 리눅스 컨테이너 기반으로 OS 레벨은 공유하고 어플리케이션 레벨은 격리해서 실행할 수 있는 가상화 플랫폼으로 Host OS 위에.. Docker docker 루ol보스 https://programmingsummaries.tistory.com/391 https://programmingsummaries.tistory.com/391#entry391comment Sun, 3 Jul 2016 17:08:24 +0900 https://programmingsummaries.tistory.com/390 들어가며Tig 는 Jonas Fonseca 가 개발한 텍스트 기반 Git 유저 인터페이스(text-mode interface for git) 이다. 설명의 앞글자를 하나씩 따서 TIG 라는 이름을 지었을 수도 있지만, Git 을 반대로 읽었을때 Tig 이기도 해서 약간은 장난스러운 네이밍이 아니었을까 싶다.Git 클라이언트로 유명한 프로그램으로는 아틀라시안에서 만든 SourceTree 가 있는데, 이에 비해서 Tig .. Git GIT TIG 루ol보스 https://programmingsummaries.tistory.com/390 https://programmingsummaries.tistory.com/390#entry390comment Sun, 29 May 2016 18:23:37 +0900 https://programmingsummaries.tistory.com/302 우분투에서 안드로이드 스튜디오를 설치하기 위한 방법을 정리해둔다. 안드로이드 개발자 페이지에 잘 설명되어 있고, 설치 과정도 단순해서 특별한 내용은 없지만, 32Bit 관련 문제 등 몇 가지 예외 케이스가 있기 때문에 시간절약을 위해 정리해두기로 했다.Java 설치 OpenJDK 라는 오픈소스도 있으나 몇 가지 문제가 생기는 이유로 Oracle JDK를 설치하기를 선호하고 있다.먼저 기존에 설치된 OpenJDK가 있다면, 제거하기 위해 아래의 .. Android 루ol보스 https://programmingsummaries.tistory.com/302 https://programmingsummaries.tistory.com/302#entry302comment Sun, 8 May 2016 08:47:30 +0900 https://programmingsummaries.tistory.com/389 2년만의 LTS 14.04 LTS 이후로 2년만에 새로운 LTS 버전이 릴리즈 되었다. 설치해본 결과 약간의 문제점(WiFi가 죽는다던지..)이 있지만 대체적으로 개선된 부분이 많아 약간의 추가적인 설정만으로도 충분히 만족스러운 데스크탑 환경을 구성할 수 있었다. 각자 선호하는 데스크탑 설정이 모두 다르겠지만, 오랜만에 Ubuntu Gnome 에서 Unity 로 옮기면서 설정한 것들을 기록삼아 남겨놓으려고 한다. 우분투 설치 이번 버전.. Linux 루ol보스 https://programmingsummaries.tistory.com/389 https://programmingsummaries.tistory.com/389#entry389comment Sat, 30 Apr 2016 16:26:05 +0900 https://programmingsummaries.tistory.com/388 들어가며프로젝트를 진행하는 과정에서 PC 브라우저를 구분해줘야 할 필요가 생겼는데, Edge 브라우저까지 고려해서 정리해주면 좋겠다 싶어서 시간을 내서 각 브라우저별 UserAgent 를 리스팅하고 이를 바탕으로 브라우저 구별 스크립트를 짜봤다. 브라우저별 UserAgent주요 브라우저인 Edge, IE, Chrome, Safari, FireFox, Opera 의 UserAgent 패턴을 찾기위해 아래와 같이 한 두개.. JavaScript 루ol보스 https://programmingsummaries.tistory.com/388 https://programmingsummaries.tistory.com/388#entry388comment Tue, 16 Feb 2016 18:37:45 +0900 https://programmingsummaries.tistory.com/387 들어가며http://fettblog.eu/ 에서 Gulp 4에 추가되는 기능이 잘 설명되어 있어서 번역과 더불어 일부 내용을 추가해서 정리했다. Gulp 3.x 에서 명시적이지 않다고 느껴졌던 부분들이 개선되고 기존에 플러그인으로 처리되던 개선들이 Vinyl 패키지의 변경과 함께 내장되는 것으로 보인다. (2015년 12월 현재 4.0 은 아직 정식 오픈되지 않았으나 설치는 가능하다) Built-in Sourcemaps개선된 vinyl-fs를 통해.. Gulp.js gulp gulp.js node.js 루ol보스 https://programmingsummaries.tistory.com/387 https://programmingsummaries.tistory.com/387#entry387comment Fri, 11 Dec 2015 19:00:20 +0900 https://programmingsummaries.tistory.com/386 http://radek.io/ 의 How to use Github issues to attract new contributors 라는 글을 번역했습니다. 길지 않으니 오픈소스 하시는 분들이라면 한 번쯤 읽어보면 좋을 것 같습니다. 많은 오픈소스 프로젝트들은 새로운 컨트리뷰터들이 필요하지만 이들을 찾는데 애를 먹고 있다.반대로, 많은 컨트리뷰터가 되기를 희망하는 사람들은 어떻게 작업을 해야하는지를 찾는데 어려움을 겪는다.뭐가 문제일까? 개발자로서, 우리.. Git Github Issue Tracker 루ol보스 https://programmingsummaries.tistory.com/386 https://programmingsummaries.tistory.com/386#entry386comment Fri, 4 Dec 2015 13:33:48 +0900 https://programmingsummaries.tistory.com/385 이 글은 npm 의 https://docs.npmjs.com/files/package.json 을 번역한 글이며, 의역이 풍성하게 있습니다. 또 필요한 부분에는 이해를 돕기 위한 설명을 역자주 형태로 좀더 추가했습니다.node.js 컨퍼런스에서 peerDependency 에 대한 강연을 들었을 때 생각보다 모르는 부분이 많다고 느껴져서 공부할 겸 번역했습니다. 이 문서를 통해 당신은 package.json 을 작성할 때 필요한 모든 것을 배울 수 있다.. Node.js node.js package.json 루ol보스 https://programmingsummaries.tistory.com/385 https://programmingsummaries.tistory.com/385#entry385comment Sat, 28 Nov 2015 15:37:45 +0900 https://programmingsummaries.tistory.com/384 들어가며 node.js는 기본적으로 하나의 프로세스가 32bit에서는 512MB의 메모리, 64Bit에서는 1.5GB 메모리를 사용하도록 제한되어 있다. V8엔진의 제한을 그대로 반영한 것인데, 물론 설정으로 더 늘릴 수는 있지만 그렇게 하기 보다는 worker 를 늘리는 것을 권장하고 있다. 여러개의 워커들이 병렬로 동작하며 효율을 극대화하는 것을 바람직한 방향으로 권하고 있는 것이다. worker를 생성하는 두가지 방법 node.js 에서 .. Node.js cluster node.js 클러스터 루ol보스 https://programmingsummaries.tistory.com/384 https://programmingsummaries.tistory.com/384#entry384comment Tue, 17 Nov 2015 23:13:47 +0900 https://programmingsummaries.tistory.com/383 들어가며 2015년 Frontend Tooling Servey 에서 조사한 바에 따르면, JavaScript Testing Tool 항목 1위는 Jasmine 이었고 그 뒤로 Mocha 가 Jasmine 과 거의 동등한 비율을 차지하고 Qunit, Tape 등이 뒤를 이었다. (사실 사용하지 않는 비율이 압도적으로 많다..) mochajs.org 에서 Mocha 에 대해 아래와 같이 설명하고 있다. Mocha is a feature-rich Java.. JavaScript MOCHA testing 루ol보스 https://programmingsummaries.tistory.com/383 https://programmingsummaries.tistory.com/383#entry383comment Thu, 12 Nov 2015 12:30:08 +0900 https://programmingsummaries.tistory.com/381 들어가며 최근 서버 사이드 템플릿 엔진 변경에 대한 논의가 있어서 주요 템플릿 엔진에 대해서 살펴보고 정리할 기회가 생겼다. 그 중에서 handlebars.js(이하 핸들바)  사용법에 대해 정리한 내용을 공유한다. 가장 기본적인 바인딩 구조 새로운 것을 배울 때에는 항상 기초적인 형태를 보는 것이 가장 빠르게 이해하는 길이다.  <script id="entry-template" type="text/x-handlebar.. JavaScript Handlebars Mustache 템플릿엔진 루ol보스 https://programmingsummaries.tistory.com/381 https://programmingsummaries.tistory.com/381#entry381comment Wed, 11 Nov 2015 11:15:21 +0900 https://programmingsummaries.tistory.com/382 들어가며 Browserify 에서 bundle() 을 수행하면, Readable stream 이 생성된다. 단순하게 생각했을 때 Gulp 도 Stream 기반이니 아래와 같이 browserify 해주는 task를 작성할 수 있지 않을까 싶지만, 결론부터 말하자면 안된다. var gulp = require("gulp"); var browserify = require("browserify"); gulp.task("bundle-javascript", f.. Gulp.js browserify gulp vinyl 루ol보스 https://programmingsummaries.tistory.com/382 https://programmingsummaries.tistory.com/382#entry382comment Fri, 16 Oct 2015 18:53:16 +0900 https://programmingsummaries.tistory.com/380 들어가며 페이지에 진입할 때마다 특정 자바스크립트가 실행되어야 하는데, 처음 해당 페이지에 진입할 때는 정상적으로 자바스크립트가 실행되지만 뒤로가기를 통해 재진입했을 때에는 자바스크립트가 실행되지 않는 문제가 발견되었다. 뒤로가기에서는 자바스크립트가 항상 실행되지 않는걸까? 뒤로가기를 위한 캐시, BFCache 크롬에서는 뒤로가기로 재진입을 해도 정상적으로 자바스크립트 코드가 다시 실행되는 것을 확인할 수 있었다. 하지만 사파리나 파이어폭스에서.. JavaScript BFCache pageshow 루ol보스 https://programmingsummaries.tistory.com/380 https://programmingsummaries.tistory.com/380#entry380comment Mon, 21 Sep 2015 18:56:50 +0900 https://programmingsummaries.tistory.com/379 들어가며 최근 핫한 메신저 서비스 중 하나인 Slack 을 웹버전으로 사용하다보면, 브라우저가 아닌 바탕화면에 알림 메시지가 뜨는 것을 볼 수 있다. 프로그램을 설치한 것도 아닌데, 브라우저를 벗어나 바탕화면에 알림 메시지가 표시될 수 있는 이유는 HTML5의 기능 중 하나인 Desktop Notification 을 사용했기 때문이다. Desktop Notification 사용 방법 Desktop Notification 을 사용하는 방법은 매우.. HTML5 Desktop Notification html5 루ol보스 https://programmingsummaries.tistory.com/379 https://programmingsummaries.tistory.com/379#entry379comment Fri, 18 Sep 2015 16:51:35 +0900 https://programmingsummaries.tistory.com/377 사내에 gulp.js를 소개하는 강의를 준비하며 단계별로 gulp의 사용방법을 익힐 수 있도록 예제를 만들어 보았다. 아주 기초적인 부분만 짚고 있지만 처음 접하는 사람이 한단계씩 따라가다보면 기본적으로 많이 사용되는 수준까지는 어렵지 않게 도달할 수 있도록 준비했다. 들어가며 gulp 는 node.js 기반의 task runner 다. 반복적인 귀찮은 작업들이나 아래와 같이 프론트엔드 빌드에 필요한 작업들을 gulp 통해 쉽게 처리해줄 수 있다. .. Gulp.js gulp gulp.js node.js 루ol보스 https://programmingsummaries.tistory.com/377 https://programmingsummaries.tistory.com/377#entry377comment Tue, 8 Sep 2015 23:06:42 +0900 https://programmingsummaries.tistory.com/376 들어가며 우분투에 안드로이드 스튜디오를 설치했는데(사실 설치랄 것도 없이 압축만 풀었다..) 리눅스용은 실행 파일이 쉘 스크립트(Shell Script)로 되어 있었다. 안드로이드 스튜디오처럼 쉘 스크립트로 실행하는 어플리케이션을 Plank Dock에 추가하고 싶을 때는 어떻게 해야할까? Shortcut file 만들기 쉘 스크립트를 Plank Dock에 추가하기 위해서는 ~/.local/share/applications/ 에 Shortcut.. Linux 루ol보스 https://programmingsummaries.tistory.com/376 https://programmingsummaries.tistory.com/376#entry376comment Mon, 17 Aug 2015 19:45:50 +0900 https://programmingsummaries.tistory.com/375 들어가며 node.js에서의 오류 처리에 대한 글을 공유받아 읽으며 테스트해보고 알게 된 점들을 정리해서 포스팅한다. try/catch는 모든 에러를 잡을 수 있을까? 이제부터 하나하나 파헤쳐보자. 동기 코드(Synchronous code) 일반적으로 동기적인 코드의 경우, 발생한 에러는 아래와 같이 try/catch 로 핸들링 해줄 수 있다. try { throw new Error('오류 핸들링 테스트'); } catch (exceptio.. Node.js cluster domain Error Handling node.js uncaughtException 루ol보스 https://programmingsummaries.tistory.com/375 https://programmingsummaries.tistory.com/375#entry375comment Mon, 17 Aug 2015 11:30:08 +0900 https://programmingsummaries.tistory.com/374 들어가며 개발 환경 구성을 위해 ubuntu 에 node.js 를 설치할 때 apt 로 설치해줄 수도 있지만, 비교적 최신 버전이 느리게 올라오기 때문에 nodesource 를 통해서 설치하는 방법에 대해서 정리해둔다. 특히 npm 으로 global module을 설치할 때 나는 EACCES 오류에 대해서 정리해둔다. nodesource 를 통해 node.js와 npm 설치하기 nodesource 에 접속하면 친절하게 데비안 계열과 레드햇 계.. Node.js node.js NPM 루ol보스 https://programmingsummaries.tistory.com/374 https://programmingsummaries.tistory.com/374#entry374comment Thu, 6 Aug 2015 10:24:09 +0900 https://programmingsummaries.tistory.com/373 들어가며 우분투에서 Atom을 설치하고 설정하는 작업은 사실 특별하게 어려운 부분은 없다. https://atom.io/ 에서 Atom을 다운로드 받아서 설치하기만 하면 바로 Atom을 사용할 수 있다. 다만 파일 트리 뷰에서 한글이 깨져보이는 문제에 대한 해결 방법과 내가 즐겨쓰는 설정값을 남겨두고자 포스팅을 하기로 했다. 파일 트리 뷰에서 한글이 깨져보이는 문제 Edit 메뉴 > Open Your Stylesheet 를 선택하면, At.. Linux ATOM ubuntu 루ol보스 https://programmingsummaries.tistory.com/373 https://programmingsummaries.tistory.com/373#entry373comment Wed, 5 Aug 2015 13:25:55 +0900 https://programmingsummaries.tistory.com/372 설마 했는데 정말 JSCS팀이 ESLint로 합류했습니다. 아직은 JSCS처럼 지정된 스타일로 코드를 변경해주는 것까지 ESLint 에서 지원해주고 있지는 않지만, 실험적으로 한 Rule씩 추가되고 있는 것으로 보입니다. 이 소식을 참고해서 아래 포스팅을 읽어주세요.들어가며최근 개발 파트 내에서 컨벤션에 대한 논의가 이루어지고 있어서 나중에 봐야지하고 미뤄두었던 JSCS를 본격적으로 살펴보게 되었다. 오랫동안 뜯어본 건 아니지만, 잠깐 만져본 것 만으로.. JavaScript ESLint JSCS jshint JSLINT 루ol보스 https://programmingsummaries.tistory.com/372 https://programmingsummaries.tistory.com/372#entry372comment Wed, 5 Aug 2015 09:52:36 +0900 https://programmingsummaries.tistory.com/370 들어가며 PhantomJS를 사용할 때 PhantomJS만으로 프로젝트가 구성되는 경우는 많지 않다. 대부분은 NodeJS와 연동하게 되는데, 이번 프로젝트에서도 물론 NodeJS가 PhantomJS를 감싼 구조로 모듈을 개발했다. 프로젝트를 진행하며 만난 문제들 중 특히 골치를 아프게 했던 절대 경로 문제에 대해 다뤄보려고 한다. 상대 경로 문제 PhantomJS 로직들이 규모가 커지면서, 초반에는 예상하지 못한 경로 문제가 생겨났다. 처음 고.. Phantom.js phantomjs 루ol보스 https://programmingsummaries.tistory.com/370 https://programmingsummaries.tistory.com/370#entry370comment Sat, 25 Jul 2015 17:06:09 +0900