Outsider's Dev Story

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

기술 뉴스 #118 : 19-01-15

웹개발 관련

  • React Performance Fixes on Airbnb Listing Pages : React로 만든 Airbnb의 리스트 페이지의 성능을 개선한 과정을 설명하고 있다. 서버사이드 렌더링에서 브라우저의 피처 디텍팅이 되지 않아서 성능이 저하된 부분 등 크롬 개발자 도구의 프로파일링 기능과 프레임 그래프를 이용해서 성능이 저하되는 부분을 찾아내고 고치는 과정을 설명하고 있다.(영어)
  • React와 Apollo, Parcel 기반 서비스 개발 : 네이버에서 신규 서비스의 스택을 React, Redux, webpack 대신 React, Apollo, Parcel로 가져간 과정을 설명한 글이다. 실제 서비스를 만드는 세부 내용까지는 안 나와 있고 각 기술을 선택한 이유와 어떤 장단점을 제공하는지 소개하고 있다.(한국어)
  • Front-End Performance Checklist 2019 [PDF, Apple Pages, MS Word] : 작년에 이어 Smashing Magazine에서 웹사이트의 성능을 높이기 위해 점검해 봐야 할 내용을 체크리스트로 만들어서 PDF와 Apple Pages 포맷으로 배포했다. 이 체크리스트에는 개발 전에 준비해야 할 부분, 성능 목표, 환경 구성, 빌드 최적화, 에셋 최적화, 전송 최적화, HTTP/2, 테스트와 모니터링 등으로 나누어서 좋은 성능을 위해 필요한 부분이 잘 정리되어 있다.(영어)
  • The React Handbook : React를 공부할 수 있는 220페이지 분량의 핸드북을 공개했다. 웹에서 볼 수도 있고 뉴스레터에 가입하면 PDF나 ePub 등의 포맷으로 다운로드 받을 수 있다.(영어)
  • 2018 JavaScript Rising Stars : JavaScript 관련 프로젝트들을 프레임워크, 빌드 도구, 생태계 등으로 분류해서 2018년에 GitHub 스타를 많이 받은 순서대로 보여주는 페이지이다. 누적 스타 수는 오래된 프로젝트가 많게 마련인데 이 페이지는 2018년에 증가한 스타 수만 집계하고 있어서 2018년에 주목받은 프로젝트를 살펴볼 수 있다.(영어)

그 밖의 프로그래밍 관련

  • 주니어 개발자가 처음 풀 리퀘스트 보내본 썰.txt : 업무에서 사용하던 라이브러리에서 버그를 발견해서 수정하고 풀 리퀘시트를 보낸 과정을 설명한 글이다. 처음이라고 하시는 데 풀 리퀘스트을 보내는 과정이 깔끔하게 정리되어 있어서 아직 안 보내본 사람이 참고하기 좋은 글이다.(한국어)
  • 천만 명의 사용자에게 1분 내로 알림 보내기 (병렬프로세스의 최적화) : 방송이 시작하면 구독하는 사용자에게 푸쉬 알림을 보내는데 천만 명의 사용자에게 보내는데 최대 11분이 걸리던 상황을 1분 이내로 최적화한 과정을 설명한 글이다. 3단계로 진행하면서 병렬처리 및 Redis 파티셔닝 등 어떤 부분을 개선했는지 설명하면서 단계별로 얼마나 개선되었는지까지 보여주고 있는데 세세한 개선 과정이 나와 있어서 아주 유용하고 비슷한 환경에서 참고하기 좋은 글이다.(한국어)
  • Github Organization as a Code : GitHub 조직의 저장소와 권한 관리를 Terraform으로 하는 방법을 설명하는 글이다. 조직의 성격이나 규모에 따라 다르고 저장소까지 관리하면 새로운 저장소를 만들 때 약간의 불편함이 될 수도 있지만 멤버 혹은 권한 관리나 히스토리를 제대로 알기 어려운 문제 때문에 개인적으로 좋아하는 방식이다.(영어)
  • AWS 람다 커스텀 런타임 만들기(feat. 루비 2.6.0) : 기본에는 AWS Lambda에서 지원하는 런타임만 사용할 수 있었는데 지난 re:invent에서 커스텀 런타임 지원을 발표했다. 이미 Ruby를 지원하고 있지만, 최신 버전인 Ruby 2.6.0을 커스텀 런타임으로 만들고 이를 Lambda 레이어로 올려서 사용하는 방법을 설명하고 있다. Lambda에서 지원하지 않는 언어나 최신 버전이 필요하다면 이 방법을 이용해야 한다.(한국어)
  • 왜 굳이 도커(컨테이너)를 써야 하나요? : 도커가 인기를 얻은 지 오래되었지만 도커 컨테이너를 사용했을 때 서버의 환경을 통일할 수 있고 미리 빌드 실패를 경험해 볼 수 있으면서 격리된 부분은 변경할 수 없게 되어 있는 등의 장점을 설명하고 있다.(한국어)
  • Github Actions 맛보기 : 아직 클로즈 베타로 일부 사용자에게 조금씩 열리고 있는 GitHub Actions로 개인 프로젝트의 빌드, 테스트, Lint 등의 CI 작업을 작성한 경험을 공유한 글이다.(한국어)
  • 이미지만으로 내 중고물품의 카테고리를 자동으로 분류해준다면? (feat. Keras) : 당근마켓에서 사용자가 올린 이미지를 Keras로 학습시켜서 카테고리를 자동으로 분리할 수 있도록 시도한 과정을 설명하고 있다. 사용했던 코드와 학습 결과 및 잘못 분류된 사진들의 예시 등이 잘 나와 있는데 딥러닝은 잘 모르지만 얼마 전 당근마켓에 놀러 가서 내부에서 딥러닝을 사용하는 예시를 보기도 해서 더 재미있게 읽었다.(한국어)
  • Understanding npm-link : npm에서 개발 중이거나 디버깅 목적으로 로컬에 있는 다른 모듈을 설치해서 개발하는 npm-link를 어떻게 사용하는지 설명하는 글이다. npm-link를 사용하면 패키지를 배포하거나 Git 저장소에 올리지 않고도 개발할 수 있다.(영어)
  • Using worker_threads in Node.js : Node.js 10.5.0에 실험 기능으로 추가된 worker_threads로 CPU 인텐시브한 작업을 병렬로 실행하는 방법을 소개하고 있다.(영어)

블록체인 관련

볼만한 링크

  • 구글 면접 후기 : 최근 구글 코리아에 면접을 본 경험을 바탕으로 면접을 위해서 알고리즘 공부를 어떻게 했는지 정리한 글이다. 여러 달 동안 다양한 사이트와 책을 통해서 알고리즘 문제를 풀어보면서 연습을 하고 면접 후에 준비가 아쉬웠던 부분과 좋았던 부분이 나와 있어서 외국계 회사에 면접을 준비한다면 읽어보면 좋다.(한국어)
  • 블로그 글 1편을 쓰기까지의 과정 : 매주 최소 한편씩 블로그에 글을 쓰면서 그 과정을 정리한 글이다. 소재를 선택하고 개요를 적은 후 1차, 2차에 나누어서 초안을 작성한 뒤 발행하는데 체계적으로 잘 정리되어 있다. 나는 이렇게 체계적인 단계를 글을 쓰는 편은 아닌데 다른 분이 글을 쓰는 방식을 보고 배울 수 있는 부분도 많아서 유용한 글이었다.(한국어)

IT 업계 뉴스

프로젝트

  • unified : 문서를 문법 트리(syntax tree)로 만들어서 변환해주는 인터페이스.
  • 한글 에디터 산 1.x : 1993년 고등학생 때 만든 DOS 용 한글 에디터 산의 소스를 공개한 저장소.
  • rrweb : 웹사이트에서 사용자가 동작을 녹화한 뒤 재생할 수 있게 하는 JavaScript 라이브러리.
  • FBT : Facebook에서 만든 JavaScript 국제화 라이브러리.
  • hexyl : 터미널용 hex 뷰어.

버전 업데이트

2019/01/15 23:35 2019/01/15 23:35

기술 뉴스 #117 : 19-01-01

웹개발 관련

  • Next.js (SSR) vs. Create React App (CSR) : 서버 측 렌더링과 클라이언트 측 렌더링을 비교하려고 Create React App(CRA)와 Next.js를 실행해 보고 크롬 개발자 도구로 렌더링 속도의 차이가 어느 정도 나오는지 비교한 글이다. 예상 가능한 범위이기는 하지만 직접 테스트 하려면 시간이 많이 드는데 이 글을 통해서 각 렌더링 방식에 따라 렌더링의 어떤 차이가 나오는지 알 수 있고 결론적으로 고민해야 할 부분과 CRA, Next.js의 차이점도 잘 설명해 주고 있다.(영어)
  • Beyond console.log() : 디버깅 목적으로 console.log()를 사용할 때 더 편하게 이용할 수 있는 console.dir, console.table, console.assert 등을 설명하는 글이다. 종종 이런 글이 올라오긴 하는데 사용방법을 이해하기 쉽게 설명하고 있고 손에 익기 전에는 또 금방 잊어버리게 되어서 기억해 두었다가 필요할 때 적용해보기 좋다.(영어)
  • 프론트엔드 기술 조감도 : Babel : Babel 사용법 자체보다는 Babel이 어떤 개념과 구조를 가지고 동작하는지를 설명하는 글이다. 구문 분석 -> 변환 -> 출력의 단계에서 각 플러그인이 역할을 하고 이를 쉽게 사용하기 위해서 프리셋이라는 개념으로 플러그인을 모아놓은 구조를 설명하고 있어서 Babel을 잘 모를 때 전체 구조를 이해하기 좋다.(한국어)
  • 크롬 개발자 도구 101 : 크롬 개발자 도구의 탭별 기능과 주요 사용방법을 설명한 글로 크롬 개발자의 많은 기능을 사용해보지 않았다면 전체적으로 각 기능을 이해하기 좋다.(한국어)
  • Easier GraphQL wrappers for your REST API’s : apollo-datasource-rest로 기존 REST API를 GraphQL로 감싸서 제공하는 방법을 설명하는 글이다.(영어)
  • Why I no longer use D3.js : D3.js가 2011년에 나왔을 때는 좋았지만, React 등 VirtualDOM과 컴포넌트가 주류가 된 지금은 새로운 개념을 배워야 하고 관리하기도 쉽지 않을뿐더러 SVG가 Canvas나 HTML보다 안 좋을 때도 많아서 굳이 쓰지 않아도 된다고 설명하는 글이다.(영어)
  • FramerX 스터디 연재 : FramerX 스터디를 하면서 TypeScript와 React로 인한 진입장벽을 느껴서 FramerX의 사용법을 설명하는 연재글 이다.(한국어)

그 밖의 프로그래밍 관련

  • Netflix OSS and Spring Boot — Coming Full Circle : Netflix는 수년간 내부 솔루션을 직접 개발해서 운영하고 있었지만 이번에 Spring Boot에 기반을 둔 Spring 제품군으로 갈아탄다고 한다. 그동안 내부 솔루션을 만들고 갈아탄 이유는 당시에는 요구사항에 맞는 솔루션이 없었지만, 지금의 Spring 제품군은 Netflix 내부의 솔루션보다 더 발전했고 Pivotal과 협업한 결과 충분히 도입해서 개선할 수 있다고 판단했기 때문이라고 한다.(영어)
  • Siri를 통해 AWS 이번달 청구금액 알아보기 튜토리얼 : iOS에 새로 추가된 단축어 앱을 통해서 AWS 금액을 조회하는 Lambda를 만들고 시리를 통해서 현재 요금을 조회해 보도록 설정하는 글이다.(한국어)
  • kubernetes를 이용한 서비스 무중단 배포 : Kubernets로 서비스를 운영할 때 Kakao 사내에서 무중단 배포에 대해 질문을 많이 받은 것을 바탕으로 무중단 배포 시 서비스 유실이 없도록 SIGTERM를 애플리케이션이 처리했을 때의 차이를 보여주고 무중단 배포를 위한 k8s 설정을 설명하고 있다.(한국어)
  • AWS NAT Gateway에서 NAT instance로 전환하기 : VPC에서 서브넷을 프라이빗과 퍼블릭으로 분리해서 사용하는 경우 프라이빗에서 외부 인터넷을 사용할 때 NAT Gateway를 이용하게 되는데 개인 목적으로 사용할 때 이 가격은 부담되는 가격이다. NAT Gateway가 있기 전에 EC2 인스턴스를 NAT으로 사용하던 방식대로 Bastion 서버를 NAT 인스턴스로 사용하도록 Terraform으로 구성하는 방법을 설명하고 있다.(한국어)
  • 프레임워크 공부를 멈춰라 : 유행을 타는 프레임워크를 익히기보다는 유행을 타지 않는 디자인 패턴 등의 지식을 익히는데 시간을 투자하라는 내용의 글이다. 물론 나는 이런 공부가 기반부터 공부하고 프레임워크를 사용하는 bottom-up 방식이나 프레임워크를 공부하고 사용하면서 기반을 공부하는 top-down 방식 둘 다 가능하다고 생각하지만, 기반 지식을 익혀야 한다는 데는 동의한다.(한국어)
  • Slack 프락시 서버 – slackboard 소개 : Slack에서 Hook으로 알림 등을 받을 때 프락시 서버로 이용할 수 있는 slackboard를 소개하는 글이다. slackboard를 사용하면 API 리밋에 맞게 QPS도 해주고 TOML 설정으로 태그에 따라 원하는 채널로 메시지가 가도록 설정할 수도 있다.(한국어)
  • 효과적인 코드 리뷰를 위해서 : LINE 대만에서 코드 리뷰 프로세스를 개선했던 경험을 정리한 글이다. 효과적인 코드 리뷰를 위해서 "변화를 작게 유지"하고 "리뷰는 자주 짧은 세션으로 진행"하고 "최대한 빨리 PR을 보내고" "충분한 정보를 제공"하고 "코드 분석 툴을 활용"하라고 하고 있다. 이렇게 했을 때의 효과와 LINE에서 진행했던 부분을 같이 설명해 주고 있어서 이해하기 좋다.(한국어)
  • 루비 2.6 릴리즈 및 주요 문법 변경 사항 소개 : 매년 크리스마스에 릴리스하는 Ruby 2.6에서 추가된 기능을 정리한 글이다.(한국어)
  • re:Invent 2018 - AWS 람다, 함수 간 공유 가능한 레이어 기능 지원 : Lambda에서 함수 간 파일을 공유할 수 있는 레이어 기능을 설명하는 글이다. Lambda 패키지를 압축해서 50MB까지 올릴 수 있으므로 Headless Chrome 등 용량이 크고 압축이 많이 안 되는 파일을 사용하기 어려웠는데 레이어 기능을 사용하면 이 부분을 쉽게 해결할 수 있다.(한국어)
  • Better NPM'ing, Tips and Tricks using NPM : NPM을 사용할 때 의존성 범위가 깨지지 않게 --save-exact 옵션을 사용하거나 npm ci를 사용하는 등 도움이 될 만한 팁이 정리되어 있어서 npm을 자주 사용하면 한번 읽어보면 좋다.(영어)

블록체인 관련

  • Crypto 101 : 암호화에 관해 배울 수 있는 무료 ebooK을 배포하고 있다.(영어)

볼만한 링크

  • 체대 출신 개발자의 2018년 회고 : 체육전공을 하고 다른 일을 하다가 올해부터 개발자로 일하기 시작했다는 분의 2018년 회고 글인데 개발자가 되려고 어떤 노력을 했고 어떤 과정을 거쳐왔는지가 잘 나와 있다. 글도 잘 쓰시고 올해 하신 일들도 대단하지만 매 순간 고민하신 내용을 보면 금세 실력이 느실 것 같아서 자극되는 글이다.(한국어)
  • 기술 업계의 독성 말투 문제, 고칩시다! : 개발자가 흔히 겪는 커뮤니케이션 문제를 지적한 글로 Tech has a Toxic Tone Problem — Let’s Fix It!의 번역 글이다. "거들먹거리는 말투", "기계적 말투", "비관적 말투"로 정리해서 문제점을 지적하고 "평화적인 대안"까지 얘기하고 있다. 나쁜 의도가 아니더라도 개발자가 많이 가진 속마음이나 의도를 잘 정리한 것 같아서 전부 다 동의하진 않지만, 꽤 날카롭게 속마음을 들킨 느낌이라서 재미있게 읽었다. 말투 등에 조심할 필요가 있을 듯하다.(한국어)
  • 파워 유저 커브(스마일 커브) : Andreessen Horowitz가 소개한 파워 유저 커브 즉, 한 달에 일자별로 방문한 사람들을 그래프로 그리면 양쪽 끝이 올라가는 스마일 모양이 나오는 커브를 설명하면서 당근마켓의 지역별 데이터로 파워 유저 커브가 어떻게 나오는지 보여주고 있다. 충성 유저를 측정하는 파워 유저 커브는 처음 들어봐서 이런 그래프가 나온다는 게 흥미롭다.(한국어)
  • [번역] UI 디자인에서 컬러를 사용하는 방법 : How to use colors in UI Design의 번역 글로 디자인을 할 때 컬러 어떻게 선택해야 하는지를 설명하고 있다. 대표 색상이 지역별로 주는 느낌과 순수한 회색을 사용하지 않는 등 몇 가지 팁을 알려주면서 색상 선택이 도움이 되는 도구를 추천해 주는데 색상 선택을 가장 어려워하는 개발자라 혹시 도움이 될까 봐 찬찬히 읽어보았다.(한국어)
  • 프리랜서 가이드라인 : OKKY에서 회원들이 연재했던 프리랜서에게 필요한 정보에 대한 칼럼을 모아서 이북으로 출간했다.(한국어)
  • 스프링러너(SpringRunner)를 소개합니다. : 박용권 님과 김지헌 님이 스프링을 배울 수 있는 트레이닝 팀을 만들었다.(한국어)

IT 업계 뉴스

프로젝트

  • Dark Patterns : 사용자가 원치 않는 구매, 가입 버튼 등을 누르게 하거나 탈퇴를 숨기거나 하는 등 좋지 않은 패턴을 모아놓은 사이트.
  • JSON Generator : 몇 가지 편의 문법을 사용해서 복잡한 랜덤 JSON 데이터를 만들 수 있는 도구.
  • AssemblyScript : TypeScript를 WebAssembly로 컴파일해주는 도구.
  • DevHub : TweetDeck처럼 칼럼 방식 UI로 GitHub의 알림과 액티비티를 볼 수 있는 웹/iOS 애플리케이션.
  • Geek's Diary : TIL(Today I Learned) 문서를 Markdown으로 적을 수 있는 Electron 앱.
  • Notable : Electron으로 만든 Markdown 기반 노트 앱.

버전 업데이트

2019/01/01 22:11 2019/01/01 22:11