Outsider's Dev Story

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

기술 뉴스 #97 : 18-03-01

웹개발 관련

  • PWAs are coming to iOS 11.3: Cupertino, we have a problem : iOS 11.3과 macOS 10.13.4에서 Service Worker가 도입되어 이제 iOS에서도 PWA를 구현할 수 있게 되었다. 현 상태를 기준으로 Android와 동작이 다른 부분을 설명하고 현 구현상태에서의 버그나 차이점 및 PWA를 크로스 플랫폼으로 구현할 때 iOS에서 주의해야 할 문제점을 잘 정리해 놓은 글이다. PWA를 iOS에 적용하려고 기다리고 있다면 꼭 읽어봐야 할 글이다.(영어)
  • AMP: the missing controversy : 사람들이 AMP라는 새 형식이 웹페이지를 빠르게 제공할 수 있게 해주는 것처럼 생각하지만 실제로 AMP 페이지를 Google을 통하지 않고 접속해 보면 다른 웹페이지와 별반 차이가 나지 않는 것을 볼 수 있음을 보여주고 Google 검색에 들어갔을 때 미리 Google이 AMP 관련 파일들을 미리 다운로드 받게 하고 여기에 캐싱이 더해지면서 엄청 빠르게 느껴지게 만든다고 얘기하고 있다. 이는 실제로 AMP가 해주는 게 아니라 구글이 검색을 가지고 있기에 가능한 부분이다.(영어)
  • React’s new Context API : 존재 여부도 몰랐지만, React에 있는 Context API가 그동안은 사용하길 권하지 않았다고 한다. 이번 16.3에서 새롭게 바뀐 Context API가 도입되는데 이 API가 그동안 prop drilling이라고 부르던 문제를 쉽게 해결해 주며 그 사용방법을 설명한 글이다.(영어)
  • Elegant patterns in modern JavaScript: RORO : JavaScript에서 함수의 파라미터를 객체로 받고 객체로 리턴하는 방식(Receive an object, return an object)을 설명한 글이다. ES2015의 destructuring을 이용해서 파라미터를 객체로 받았을 때의 편리한 점과 기본값 등을 활용하는 방식, 그리고 리턴값을 객체로 했을 때 pipe로 연결하는 방법까지 설명하고 있다.(영어)
  • How to make responsiveness super simple with CSS Variables : 반응형 웹사이트를 만들 때 미디어쿼리를 복잡하게 쓰는 대신 새로 추가된 CSS 변수만 미디어쿼리로 변경해서 더 간단한 코드로 반응형 웹사이트를 만드는 방법을 설명하는 글이다. 아직 IE가 지원하지 않고 CSS 선언을 CSS 변수를 사용하도록 작성해야 하지만 이 접근을 이용하면 깔끔하게 반응형 웹사이트를 만들 수 있을 것으로 보인다.(영어)
  • Let’s make multi-colored icons with SVG symbols and CSS variables : 폰트 아이콘 대신 SVG로 아이콘을 사용하는 방법을 설명하는 글이다. 폰트 아이콘 대신 SVG로 하면 색상을 지정할 수 있는데 여러 색을 한꺼번에 사용하면서 사용하기 편하게 만들기 위해 CSS 변수 등을 어떻게 사용하는지 나와 있다. IE에서는 지원 안 하지만...(영어)
  • WebAssembly First Public Working Drafts : WebAssembly 관련해서 COre, JavaScript 인터페이스, Web API 3가지 명세의 첫 워킹 드래프트가 등록되었다.(영어)


그 밖의 프로그래밍 관련

  • Why you need Python environments and how to manage them with Conda : 왜 Python에서 환경관리가 필요한지를 설명하고 Conda(이글에서는 Miniconda)를 이용해서 Windows에서 Python 환경을 설정하고 관리하는 방법을 설명한다.(영어)
  • How To Speed Up Continuous Integration Build With New NPM CI And package-lock.json : npm 5.7.0에서 도입된 npm ci 명령어를 이용하면 package.json이 아닌 package-lock.json 만을 이용해서 패키지를 설치하고 CI에서 테스트할 때 3배 이상 빠르게 설치할 수 있게 되었다. 이를 설정해서 사용하는 방법을 설명한 글이다.(영어)
  • InSpec for provisioning testing: Verify Terraform setups with InSpec : InSpec 2.0에 관해서 설명하고 Terraform으로 AWS 인프라를 구성했을 때 인프라를 InSpec로 테스트하는 방법을 간단히 설명한다. 이 글에서 InSpec은 간단하게 설명하고 있지만 Terraform을 쓰는 처지에서 테스트를 할 수 있다니 관심을 두게 되었다.(영어)
  • 비트코인 백서 : Bitcoin 백서의 한글 번역본이다.(한국어)
  • Flutter — 5 reasons why you may love it : Google이 작년에 공개한 Flutter의 장점을 설명한 글이다. Flutter로 iOS, Android 앱을 만들 수 있으면 Dart를 언어로 사용하는데 핫 리로드, 위젯, 플랫폼별 대응 등 Flutter의 사용법을 간단히 보여주고 있다. 기술적으로 깊게 살펴보는 글은 아니지만, 아직 Alpah인 Flutter로 어떻게 앱을 만드는지 간단히 살펴볼 수 있는 글이다.(영어)

볼만한 링크

  • Working remotely, 4 years in : Stripe에서 일하는 개발자가 지난 4년 동안 원격으로 근무한 경험을 정리한 글이다. 원격으로 일할 때 좋은 점과 사람들이 많이 궁금해하는 커리어 개발이나 승진 기회에 문제는 없는지 사람들과 잡담을 못 하거나 의사소통이 어렵지는 않은지에 대해서 잘 정리되어 있다. 이 글을 보면 Stripe는 원격 근무에 대한 회사 지원이 잘 갖춰진 회사 같아서 일반화하긴 어렵겠지만 원격 근무에 대한 경험이 잘 녹아있다.(영어)
  • Why Decentralization Matters : 인터넷에서 현재는 중앙 집중형 서비스가 중심인데 다음 시대에서는 암호네트워크(Cryptonetwork)를 기반으로 한 분산 네트워크가 중심이 될 거라는 관점의 글이다. 코인보다는 분산에 더 가치를 두고 얘기하고 있는데 한마디로 요약하기는 어렵지만 읽어볼 가치가 있다. 나는 암호화폐는 아직 가치판단을 못 하고 있고 블록체인은 어딘가에 쓰이긴 할 텐데 정도의 관점인데 이 글을 통해 암호네트워크라는 다른 방향에서 생각해 보게 되었다.(영어)

IT 업계 뉴스

프로젝트

  • Jarvis : Webpack 빌드의 정보를 웹 기반 대시보드로 보여주는 프로젝트.
  • Onelang : 온라인 IDE로 한 언어로 코드를 작성하면 다른 10가지 언어로 트랜스파일 해서 보여준다.
  • cloudmapper : AWS 계정에서 정보를 가져와서 네트워크 다이어그램을 그려주는 도구.
  • FastPhotoStyle : NVIDIA에서 만든 오픈소스로 사진의 스타일을 다른 사진에 적용해주는 프로그램.
  • Kubeval : Kubernetes 설정 파일의 유효성을 검사해주는 도구.
  • Requests-HTML : HTML을 파싱하는 Python 라이브러리.
  • OpenJ9 : 빠른 구동 시간, 높을 쓰루풋 등을 최적화한 OpenJDK의 JVM.

버전 업데이트

2018/03/01 18:52 2018/03/01 18:52

페이스북 댓글을 utterances로 교체했습니다

제가 블로그 플랫폼으로 사용하고 있는 Textcube에도 댓글 기능이 있지만 2011년에 소셜 추천 버튼을 추가하면서 페이스북 댓글 플러그인을 블로그에 붙였다. 이 글을 쓰면서 깨달았지만, 페이스북 댓글을 단지 이렇게 오래된지 이제야 깨달았다.

사람들이 페이스북을 많이 쓰기 때문에 로그인이 별도로 필요 없는 페이스북 댓글이 주는 편리함이 있기는 하지만 관리하는 처지에서는 사실 별로 맘에 들지 않았다. 그동안 여러 번 제거하고 싶었지만, 기존에 댓글 달아주신 분들도 있고 해서 그대로 놔두고 있었다. 제일 불편한 것 중 하나는 댓글이 달려도 내가 알기 어렵다는 것이었다. 페이스북에서 댓글 관리 도구를 제공하기는 하는데 이 페이지를 매일 들어가 보기도 어려울뿐더러 느낌상 여기에 모든 댓글이 보이지 않는 느낌이었다. 그래서 몇 달 뒤에나 댓글이나 질문이 올라온 것을 알게 되는 경우도 많았다. 얼마 전 이런 부분을 불평했더니 알림에 연결하면 좀 낫다고 하는데 사실 어떻게 연결하는지도 잘 모르겠다.

페이스북 댓글 관리 도구

텍스트큐브에 올라오는 댓글은 의미 없는 댓글 아니면 거의 답변을 다는 편인데 페이스북 댓글은 블로그에 붙여놓고도 거의 대응을 못 하고 있다. 차라리 댓글이 엄청 달린다면 더 열심히 하겠지만 가끔 댓글이 달리니까 더 관리가 어려운 느낌이었다. 어쨌든 그렇게 내버려 둔 상태로 페이스북 댓글을 빼지도 못하고 그대로 놔두고 있었다. 한편으로는 수년이 지나도 전혀 개선을 안 하는 것 보면 페이스북도 댓글에는 더는 관심이 없는 것 같다.

utterances

얼마 전에 Babel 프로젝트를 이끄는 Henry Zhu의 블로그를 보다가 블로그 하단에 GitHub 이슈에서 사용하는 형태의 댓글이 달린 것을 발견했다.

Henry Zhu의 블로그의 댓글

이 댓글은 어떻게 사용하는 건지를 보다가 utterances(저장소)를 이용한 댓글이란 것을 알게 되었다.

utterances는 아주 재미있는 프로젝트인데 GitHub의 이슈 검색 API를 사용해서 해당 글과 연결된 이슈가 없으면 새로 만들고 이미 있으면 기존의 이슈를 사용한다. 그리고 해당 이슈에 달리는 댓글을 Primer를 이용해서 GitHub과 유사한 UI로 댓글을 보여준다. 내 블로그는 개발 얘기밖에 안하니까 GitHub과 연동하는 게 문제가 없어 보였고(방문자가 대부분 개발자라서) 너무 친숙한 GitHub UI라서 오히려 호감이 갔다.

실용성도 좋고 아이디어도 좋은 이 프로젝트는 설정도 간단한 편이다.

먼저 댓글을 관리하기 위한 GitHub 저장소를 Public으로 생성한다. 나는 blog-comments라고 만들었다.

utterances의 GitHub 저장소 설정

위에서 만든 저장소를 설정 정보에 입력한다. 꼭 utterances 사이트에 입력할 필요는 없지만, 여기에 입력하면 하단에 설정 파일과 스크립트를 자동으로 생성해서 보여주므로 복사해서 사용하면 된다.

utterances 이슈 매핑 설정

이제 블로그 글과 이슈를 매핑해야 한다. 이는 블로그는 항상 새로운 글을 쓰니까 댓글을 달게 되면 해당 글에 대한 이슈가 저장소에 있는지를 찾아서 새로 만들거나 이미 있는 이슈를 사용하거나 한다. 이때 이슈의 제목으로 찾게 되므로 이슈 제목을 유일한 값으로 만들어야 한다. 그래서 이 설정은 이슈의 제목을 블로그 경로로 할지 페이지 제목으로 할지 임의로 지정한 값으로 할지를 설정하는 것이다. 나 같은 경우는 한 페이지에 2개의 글을 보여주는 화면이 있으므로 URL이나 페이지 제목은 사용할 수가 없어서 임의의 값을 지정할 수 있는 "Issue title contains specific term"로 지정했다.

utterances의 블로그 연결 설정

블로그 주소를 입력하면 화면에 나온 내용으로 utterances.json을 만들어서 저장소에 올리라고 나온다. 그래서 똑같이 저장소에 업로드했다.

utterances 댓글 스크립트

이제 자신이 사용하는 블로그에서 댓글이 표시될 위치에 위의 스크립트를 붙여넣으면 된다. 나같은 경우는 더는 페이스북 댓글은 필요가 없어서 그동안 댓글 달아주신 분들한테는 죄송하지만(꾸벅) 페이스북 댓글을 제거하고 utterances의 스크립트를 똑같은 위치에 연결했다. 이슈 연결의 임의의 값으로 연결하도록 했으므로 Textcube가 주는 블로그 글의 ID를 지정하도록 했다. 나는 블로그 글에 숫자를 붙이는 방식으로 설정해서 쓰고 있으므로 [##_article_rep_link_##] 치환자는 해당 글의 ID가 들어가게 된다.

issue-term="[##_article_rep_link_##]"

내 블로그에 달린 utterances 댓글

설정을 끝내니 블로그 글 하단에 익숙한 GitHub 댓글이 이쁘게 붙었다.

GitHub 저장소 이슈에 등록된 댓글

GitHub 저장소에 가면 해당 글의 ID로 이슈가 생성되고 여기에 댓글이 달린 것을 볼 수 있다. 사실 이 이슈에 댓글을 달아도 블로그에 나타난다. 저 이슈의 제목이 블로그의 URL 경로이기도 하지만 이슈에 좀 더 명시적으로 글과 연결하고 싶은데 아직 그렇게 하는 방법은 찾지 못했다.

그래도 내가 좋아하는 GitHub으로 댓글은 연결하니까 훨씬 맘에 든다. 다시 한번 그동안 페이스북 댓글을 남겨주신 분들께 기록을 남기지 못해서 죄송하다는 말씀을 드립니다.

2018/03/01 04:15 2018/03/01 04:15