Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.

기술 뉴스 #84 : 17-08-15

웹개발 관련

  • Top Resources to Explore React Fiber : React v16부터 도입되는 Fiber를 설명한 자료를 정리한 글이다. 처음 Fiber를 소개한 자료부터 Fiber가 어떤 의미가 있고 Fiber의 구조와 동작을 잘 설명한 자료를 링크 걸고 각 글이 어떤 설명을 하고 있는지 잘 정리되어 있다.(영어)
  • Learning React.js is easier than you think — Interactive Examples : React 엘리먼트를 만드는 과정을 기본적인 부분부터 props와 state의 사용 및 생명주기까지 설명한 글이다. 각 과정에서 글 중간에 직접 실행해 볼 수 있도록 코드 스니팻과 결과가 나와 있어서 직접 사용해보면서 설명을 이해하기에 좋다.(영어)
  • All About React Router 4 : 버전 3에서 완전히 새로 작성된 React Route 4를 설명한 글이다. 사용하는 방법부터 완전히 달라졌기 때문에 3에 익숙했던 글쓴이가 4를 어떤 관점으로 접근해야 하는지 기본적인 라우팅과 레이아웃을 섞는 예제부터 중첩된 레이아웃, URL을 매칭시키는 방법까지 4에 대해서 자세히 설명한 글이다.(영어)
  • React Animations in Depth : React에서 애니메이션을 사용할 수 있는 방법을 비교 정리한 글이다. CSS, JS로 구현하는 방법부터 React Motion, Animated, Velocity-React 라이브러리의 장단점 및 사용 예제까지 제공해서 참고하기 좋다. 이 글은 React Native까지 고려하고 있어서 해당 방법이 React Native에서 사용할 수 있는지도 정리되어 있으므로 해당 부분까지 고려한다면 더욱 유용하다.(영어)
  • Bootstrap 4 Beta : 2년 만에 CSS 프레임워크의 대표 격인 Bootstrap 4의 베타버전이 나왔다.(영어)

그 밖의 프로그래밍 관련

  • AWS 비용 얼마까지 줄여봤니? : AWS 비용을 줄이려고 개발 서버로 쓰는 EC2 같은 경우는 업무시간에만 사용하면 되므로 DynamoDB, Lambda로 스케쥴러를 구현해서 의존관계에 따라 정해진 시간에만 EC2 인스턴스를 키도록 설정한 내용이다.(한국어)
  • AWS Auto Scalinging Group 을 이용한 배포: 레진에서 AWS의 오토 스케일링 그룹을 2개 만들어서 블루/그린 배포 전략을 이용하는 방법을 소개한 글이다. 오토 스케일링 그룹을 2개 만든 이유와 어떻게 처리해서 배포하고 롤백하는지까지 나와 있다.(한국어)
  • Up — Deploy serverless apps in seconds : 전에 gh-polls을 공개해서 Up이라는 프로젝트의 존재에 관해서 얘기했던 TJ Holowaychuk가 Up을 공개하고 그 사용방법을 공개했다. Apex보다 간단하게 AWS Lambda와 API Gateway를 이용해서 웹 애플리케이션을 올릴 수 있게 하는 간단한 도구로 AWS 인프라를 추상화해서 아주 간단하게 사용할 수 있다.(영어)
  • ES Modules in Node Today! : 현재 Node.js는 CommonJS의 모듈을 사용하고 있는데 이제는 ECMAScript Modules가 생겼으므로 이 둘을 모두 지원하는 데 어려움을 가지고 있다. .mjs 방식으로 가고 있는 것 같지만 정식 도입되려면 시간이 더 필요한데 @std/esm는 현재 Node 프로젝트에서 바로 설치해서 CommonJS와 ES Modules를 같이 사용할 수 있게 하는 방식이다. ES Modules는 import방식을 사용하고 간단한 변환을 통해서 사용할 수 있게 하는데 이 방식이 현재 왜 좋은 방법인지까지 설명되어 있다.(영어)
  • Node.js Errors — Changes you need to know about : Node.js 8.x.x 부터 오류를 비교하기 쉽도록 오류 code가 들어가게 된 배경과 이를 어떻게 사용할지를 설명한 글이다.(영어)
  • Elixir School 한국어판 : Elixir 프로그래밍 언어를 배울 수 있는 Elixir School의 한국아 버전이다.(한국어)

볼만한 링크

  • 리디에서 CTO가 하는 일 : Ridi의 CTO가 자기 일에 대해서 사내 발표한 발표자료다. 리디북스의 서비스를 좋아하는 편인데 사내에서 개발자 조직을 어떻게 7년 동안 키워왔는지를 볼 수 있는 재미난 자료다.(한국어)
  • 우리은행 + Eversafe == NULL : 우리 은행에 적용된 Eversafe라는 보안 앱이 절대 뚫리지 않는다는 기사를 보고 글쓴이가 Eversafe를 리버스 엔지니어링 해서 내부 구조를 분석한 글이다. 회사가 언급되어 논란에 관한 얘기가 뒷부분에 나오지만 보안 쪽은 자세히 알지 못해서 해당 앱을 분석해서 구조를 찾아가는 과정만으로도 아주 재미있었다.(한국어)

IT 업계 뉴스

프로젝트

  • share-this : Medium처럼 텍스트를 선택하면 툴팁으로 선택한 텍스트를 공유할 수 있게 하는 JavaScript 라이브러리.
  • send : Mozilla에서 만든 실험적 프로젝트 일정 시간 동안만 유효한 링크로 파일을 공유할 수 있게 하는 서비스다.
  • Ring UI : JetBrains에서 웹 프로젝트에 사용하는 React UI 컴포넌트를 오픈소스로 공개했다.
  • Hazel : Electron 앱의 업데이트 서버.
  • s2client-api : Blizzard에서 공개한 스타크래프트 2 API 클라이언트.
  • Kompose : Kubernetes에서 공개한 프로젝트로 Docker Compose파일을 Kubernetes에서 띄울 수 있는 도구.
  • TimescaleDB : PostgreSQL에서 타임시리즈 데이터를 사용할 수 있게 하는 확장.

버전 업데이트

2017/08/15 19:59 2017/08/15 19:59

Node.js의 v8-inpector 디버깅

Node.js를 디버깅하는 방법에 대해서 몇 번 글을 썼다.

Node.js도 계속 발전하면서 디버깅도 점점 좋아지고 있다. 나는 console.log로 로그를 남기면서 디버깅하는 걸 훨씬 좋아하는 편이지만 때로는 디버거를 통해서 문제를 찾아야 하는 경우도 있다. 위에서 쓴 대로 Node.js v6부터 V8의 네이티브 인스펙터가 들어오기 시작했고 이제 이 방식이 표준으로 자리 잡아서 다른 도구들도 대체되거나 인스펙터 방식으로 통일되었다.

Node.js 8.0.0부터는 v8-inspector를 완전히 지원하기 시작해서 기존에 사용하던 --debug가 폐기되고 --inspect로 통일되었고 node-inspect가 Node.js에 통합되었다. 이 글은 예제는 Node.js 8.0.0 이상에서 동작하고 지금은 8.3.0을 사용하고 있다. 자세한 내용은 Debugging Node.js Apps에 잘 나와 있다.

--inspect--inspect-brk

bin/www가 구동 파일인 간단한 Express 웹 애플리케이션이 있다고 하면 이를 시작할 때 --inspect 옵션을 주면 된다. --inspect-brk를 사용하면 코드 첫 줄에서 멈추므로 처음부터 디버깅해야 할 때 유용하다.

$ node --inspect bin/www
Debugger listening on ws://127.0.0.1:9229/8e704347-66ea-428a-9502-4d23ba374f9f
For help see https://nodejs.org/en/docs/inspector

위 메시지를 보면 디버거가 열려있는 것을 볼 수 있다. 이는 V8의 인터페이스이므로 이를 지원하는 다른 도구는 어떤 것이라도 사용할 수 있지만 여기서는 크롬 개발자도구를 사용해 보자.

크롬 브라우저에서 <chrome://inspect/>에 접속하면 Remote Target에서 방금 실행한 Express 애플리케이션을 볼 수 있다.

크롬의 chrome://inspect

디버깅할 타겟의 "inspect" 버튼을 클릭하면 크롬 개발자도구가 열리고 웹페이지에서 JavaScript를 디버깅하듯이 개발자 도구로 디버깅을 할 수 있다.

크롬 개발자도구에서 express 앱을 디버깅하는 화면

$ node --inspect bin/www
Debugger listening on ws://127.0.0.1:9229/8e704347-66ea-428a-9502-4d23ba374f9f
For help see https://nodejs.org/en/docs/inspector
Debugger attached.

개발자 도구를 연결하면 터미널에서 Debugger attached.라고 나온 것을 볼 수 있다.

기본 포트는 9229인데 다른 포트를 사용하고 싶다면 --inspect=port--inspect-brk=port를 사용하면 된다.

node-inspect

node-inspect는 Node.js에 내장된 디버거로 --inpect로 연 디버깅 포트에 접속해서 디버깅할 수 있는 디버거이다. 디버거는 node inspect [js 파일]로 시작한다.(--inpect 대신 inspect이다.)

$ node inspect bin/www
< Debugger listening on ws://127.0.0.1:9229/a95f8658-9536-40ee-8a09-57c9313f4947
< For help see https://nodejs.org/en/docs/inspector
< Debugger attached.
Break on start in bin/www:1
> 1 (function (exports, require, module, __filename, __dirname) {
  2
  3 /**
debug>

커맨드 라인에서 디버깅을 할 수 있는데 다음과 같은 명령어를 사용할 수 있다.

  • cont, c - 계속 실행한다.
  • next, n - 다음 단계로 이동
  • step, s - 단계 안으로 이동
  • out, o - 단계 밖으로 이동
Break on start in bin/www:1
> 1 (function (exports, require, module, __filename, __dirname) {
  2
  3 /**
debug> next
break in bin/www:7
  5  */
  6
> 7 var app = require('../app');
  8 var debug = require('debug')('express-test:server');
  9 var http = require('http');
debug> step
break in internal/module.js:10
  8   function require(path) {
  9     try {
>10       exports.requireDepth += 1;
 11       return mod.require(path);
 12     } finally {
debug> out
break in app.js:28
 26 app.use('/users', users);
 27
>28 debugger;
 29
 30 // catch 404 and forward to error handler
debug>

위처럼 next를 입력하면 다음 단계로 넘어가고 step, out으로 함수 안에 들어가거나 나올 수 있다. debugger;를 코드에 넣어두면 브레이크 포인트로 쓸 수 있으므로 cont를 입력하면 debugger;를 만날 때까지 실행하고 멈춘다.

run이나 restart를 입력하면 처음부터 다시 실행할 수 있고 repl을 입력하면 현 위치에서 코드를 실행해 보거나 원하는 변수를 출력해 볼 수 있다.

debug> cont
break in app.js:28
 26 app.use('/users', users);
 27
>28 debugger;
 29
 30 // catch 404 and forward to error handler
debug> repl
Press Ctrl + C to leave debug repl
> console.log(app.settings)
< { 'x-powered-by': true,
<   etag: 'weak',
<   'etag fn': [Function: wetag],
<   env: 'development',
<   'query parser': 'extended',
<   'query parser fn': [Function: parseExtendedQueryString],
<   'subdomain offset': 2,
<   'trust proxy': false,
<   'trust proxy fn': [Function: trustNone],
<   view: [Function: View],
<   views: '/Users/outsider/Dropbox/projects/temp/express-test/views',
<   'jsonp callback name': 'callback',
<   'view engine': 'jade' }
> undefined
>

좀 더 자세한 내용은 Debugger 문서를 참고하면 된다.

2017/08/14 23:57 2017/08/14 23:57