Outsider's Dev Story

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

기술 뉴스 #107 : 18-08-01

웹개발 관련

  • I created the exact same app in React and Vue. Here are the differences. : ToDo 앱을 React와 Vue로 똑같이 만들면서 폴더구조, 상태 관리, ToDo 아이템 관리 등에서 React와 Vue가 어떻게 다르게 접근하고 어떤 부분이 유사한지를 비교한 글이다. 비교적 간단한 앱이지만 똑같은 기능을 구현하면서 비교해 주어서 각 프레임워크의 차이점을 이해하기에 좋은 글이다.(영어)
  • 트리 쉐이킹으로 자바스크립트 페이로드 줄이기 : Reduce JavaScript Payloads with Tree Shaking의 번역 문서로 Webpack으로 빌드하는 간단한 웹사이트에서 트리 쉐이킹으로 어떻게 용량을 줄일 수 있는지를 잘 설명하고 있다. 트리 쉐이킹이 동작하는 방식부터 babel을 사용할 때나 의존하는 모듈이 트리 쉐이킹을 잘 지원하지 않을 때의 주의점까지 나와 있다.(한국어)
  • Introduction to Feature Policy : HTTP 응답에 Feature-Policy 헤더를 지정해서 웹사이트에서 사용할 수 있는 기능을 제한하는 방법을 소개한 글이다. 보안에 사용하는 CSP(Content Security Policy)와 비슷하지만, 기능을 담당하고 있다.(영어)
  • 크롬에서 보안이 향상된 웹을 만나보세요 : 7월 25일 출시된 크롬 68부터 모든 HTTP 사이트를 "주의 요함"으로 표시된다. 이후 9월에 출시될 크롬 69에서는 HTTPS 사이트를 녹색의 "보안 연결"로 표시하는 대신 아무것도 표시하지 않고 크롬 70부터는 HTTP 사이트에서 입력값에 값을 입력하면 붉은색의 "주의 요함"으로 표시된다.(한국어)

그 밖의 프로그래밍 관련

  • Mocking은 코드 냄새(Code Smell)입니다 : 6월에 소개했던 Mocking is a Code Smell의 번역 글이다. 테스트 코드를 사용할 때 Mocking이 필요하다면 코드에 개선할 부분이 있다는 신호로 봐야 한다는 논조의 글인데 원문 읽느라고 고생했는데 번역 글이 있어서 다시 소개한다.(한국어)
  • Serverless와 기술도입, Backend Application의 미래 : AWS Lambda로 대부분의 백엔드를 구성한 빙글에서 Severless의 가치와 미래에 관한 생각을 정리한 글이다. 나도 예전에 Serverless에 빠져있었는데(생각이 바뀌었다기보다는 그쪽으로 할 일이 줄어든...) Serverless를 도입함으로써 로직 개발 외에 운영 업무가 줄어들어 "쉽지만 귀찮다"로 생각되는 많은 부분을 구현할 수 있게 되었고 이런 부분에서 Severless의 장래는 밝다고 이야기하고 이야기하고 있다. 이야기를 풀어가는 방식에서 많은 고민이 담겨있는 것 같아서 재미있었다.(한국어)
  • "TDD 실천법과 도구" 책 전체를 PDF 공개합니다. : 2010년에 출간된 "테스트 주도 개발 (고품질 쾌속개발을 위한 TDD 실천법과 도구)"의 전체 내용을 약간의 보충 설명과 함께 온라인에 공개한다고 합니다.(한국어)
  • The Site Reliability Workbook : Google에서 새로운 SRE 책을 공개했다. 이 책은 무료로 8월 23일까지 무료로 다운로드 받을 수 있다.(영어)
  • 아마존 웹 서비스 계정 생성 후 해야 하는 IAM 보안 조치 : AWS를 처음 시작할 때 root 계정 사용에서 조심해야 할 부분과 IAM으로 계정을 다루는 법에 관해서 설명하는 글이다.(한국어)
  • AWS VPC 피어링 : 기본적으로 VPC는 내부에서만 통신할 수 있는데 2개 이상의 VPC가 서로 통신하기 위해서 피어링을 설정하는 방법을 설명하고 있다. VPC를 만들어서 내부에서 서로 접속하는 방법을 설명한 뒤 2개의 VPC를 만들고 피어링을 연결하는 과정을 보여준다.(한국어)

볼만한 링크

  • Good to great UI animation tips : 좋은 UI 애니메이션을 훌륭한 UI 애니메이션으로 팁을 정리한 글이다. 탭의 전환 애니메이션이나 버튼 전환, 콘텐츠 등장 효과에서 미세한 변화이지만 더 훌륭하게 만드는 방법을 비교해주면서 보여주고 있어서 이해하기 좋다. 번역글도 있다.(영어)
  • 우아한형제들 개발자 채용을 위한 페이스북 한 달 운영기 : 최근에 많이 보던 우아한형제들의 개발자 채용 관련 카드 뉴스를 한 달 운영한 경험을 정리한 글이다. 개발자는 타부서에서 마케팅하기 어려운 직종이라고 생각하는 편이라서(선입견일지라도...) 마케팅 쪽에서 개발자 채용 카드뉴스가 나온 과정과 그 결과에 관한 내용이 재미있었다.(한국어)
  • 비트코인 논문 한국어 번역판 (ver0.94) : 2018년 초에 발행된 번역본에서 거래, 타임스탬프 서버, 작업증명 부분이 개선된 버전이다.(한국어)

IT 업계 뉴스

프로젝트

  • ndb : Node.js 디버깅 도구.
  • Evergreen : Segment에서 만든 React UI 프레임워크
  • Data Transfer Project : 온라인 서비스 간에 데이터를 이동시킬 수 있게 하려는 프로젝트로 현재 Google, Facebook, Microsoft, Twitter
  • Hasura GraphQL Engine : Postgres에 바로 연결할 수 있는 GraphQL 서버.
  • terminalizer : 터미널을 gif 이미지로 녹화할 수 있는 도구.

버전 업데이트

2018/08/01 23:31 2018/08/01 23:31

Probot에서 YAML 설정파일 사용하기

최근에 Probot으로 이것저것 해본 관계로 Probot 관련 글을 연달아 쓰고 있다.

context.config

App을 만들고 혼자서만 사용한다면 코드에 설정이 하드코딩 되어도 크게 문제가 되진 않지만 다른 사람도 사용하게 배포하거나 서버 배포 없이 쉽게 설정을 변경하려면 설정 파일로 관리하는 게 좋다. 예를 들어 Stale같은 경우는 며칠 동안 활동이 없으면 어떤 라벨을 붙이고 며칠 뒤에 이슈를 닫을지 지정해야 하는데 해당 저장소에 .github/stale.yml 파일을 커밋하면 이 파일을 가져다가 Stale 앱이 사용한다. mocha.js에서 사용하는 stale.yml에서 그 내용을 확인할 수 있다.

저장소에 올려놓은 YAML 파일은 context.config로 읽어올 수 있다.

다음 index.js를 보자.

module.exports = async app => {
  app.log('Yay, the app was loaded!')

  app.on('issues.opened', async context => {
    const config = await context.config('ping.yml')

    // use config
  })
}

config()함수는 context 객체가 있어야 하므로 이슈 생성 등 이벤트 리스너 안에서 사용해야 한다. context.config('ping.yml') 처럼 사용하면 해당 저장소의 .github/ping.yml을 찾아서 읽어온다. 이 함수는 Promise를 반환하므로 Promise로 사용하거나 위 예제처럼 async/await를 이용해야 한다.

name: example
label: test

YAML 파일을 자동으로 파싱해 주므로 위의 YAML은 아래처럼 Object literal로 변환된다.

{
  name: 'example'
  label: 'test'
}

context.config('ping.yml')에서 기본값을 사용할 수도 있는데 context.config('ping.yml', { days: 10 })처럼 두 번째 인자에 객체를 넘기면 읽어온 값과 머지되어 기본값으로 사용할 수 있다.

GitHub App의 사용자가 설정해야 하는 값은 이렇게 context.config()를 통해 지정하게 할 수 있다. 추가로 한 org 밑에서 여러 저장소에서 설정값을 공통으로 사용하려면 probot-config를 사용해야 한다.

2018/07/31 03:16 2018/07/31 03:16