This Month I Learned - 2019년 1월

한동안 바쁜 나날을 보내고 있기에 2월까지는 뭔가 제대로된 정보 수집이나 공부를 못하고 있습니다. 하지만 지금 진행하는 프로젝트 자체가 공부라는 생각도 들어서 크게 아쉽진 않습니다.

지난번에 올렸던 글 처럼 나름의 태그를 매기던 방식으로 정리를 하려 하는데, 이번엔 글의 양이 훨씬 적으니 카테고리를 먼저 나누어서 보기 편하게 정리해보려 합니다. 본문은 개인 노트를 옮겨서 정리하다보니 평어체로 되어있습니다.

읽을거리 - 일반

• 부러움의 시대를 이기는 방법 - 이전에 한번 공유된 글을 탭만 열어 두었다가 드디어 읽었다. 처음에는 소셜 미디어 사용의 부정적인 영향 위주로만 이야기 하는 것으로 보였으나, 뒷부분에 핵심 내용이 서술되어 있었다. 근본적으로 소셜미디어를 활용하는 것은 정보 공유 이외엔 그닥 좋은 효과가 없다는데 공감한다. 그리고 부러움이라는 감정을 단순히 부정적으로 생각하지 말고 내 다음 목표를 설정하기 위한 이정표로 삼아야 한다는 말도 공감한다. 나는 많은 사람들을 보며 부러움을 느낀다. 조금이라도 그 사람들과 가까운 모습이 되고 싶다는 생각을 한다. 하루아침에 이루어지지 않을 일이라는 것을 인지해야 한다.
  • ”그렇다고 나는 우리가 항상 자신의 삶을 더 솔직하게 밝혀야 한다고 생각하지는 않습니다. 어쩌면 그저 입을 닫는 것이 답일 수도 있습니다. 물론 사회적으로 부당한 일을 널리 알리는 것은 사회를 변화시키는 데 일조할 수도 있습니다. 하지만 대부분의 자아 성찰이나 자신의 슬픔을 알리는 글, 무보정 셀카는 결국 자신을 포장하기 위한 것입니다."
  • "당신이 부러움을 느끼는 대상이 성취가능한 것이라면, 적절한 단계를 밟아 이를 이루면 됩니다. 하지만 동시에 스스로에게, 내가 어느 선에서 만족할 것인지를 물어야겠지요.”
• 우아한 가난의 시대 | Harper’s BAZAAR Korea - 위의 글과 직접적인 관련은 없다 하더라도 약간 연관은 있다. 이것저것 지른게 있어서 그런 것도 있지만, 고정 지출 때문에 답이 없는 통장을 보며 괜시레 마음이 답답해지던 와중에 발견한 글이다. 이 시대에 살아가는 놀라울 정도로 가난하면서 놀라울 정도로 소비하는 사람 중 하나로서, 이 가난을 어떻게 받아들이고 풀어나갈지 조금 더 고민해볼 필요가 있겠다. 적어도 본문에서 자동차에 대한 부정적인 이야기는 공감한다.

읽을거리 - 개발자

• 하노이의 탑 (개념 이해하기) | 알고리즘 |칸아카데미 - 어쩌다 술자리에서 하노이의 탑 알고리즘을 풀어보라는 이야기를 듣고 도전해 보았는데 머리에 확 와닿는데 까지 시간이 걸리고 최적화를 시도해보는데도 또 시간이 걸리는 등 쉽게 접근한 것 치곤 꽤 어려웠다. 그 와중에 칸아카데미의 강좌가 맥은 잘 짚어주었다.
• 2018년, 내가 모르는 기술들 - Overreacted - Dan의 Overreacted 블로그가 오픈되어 번역 기여를 받고 있다. 그래서 번역된 글 중 하나인데, 잘 번역된데다 내용도 명료하다. 실제로 이 글의 의도는 마지막에 이렇게 정리되어 있다.
  • 당신이 좋아하는 개발자조차도 당신이 아는 많은 것을 알지 못할 수 있습니다.
  • 당신의 지식 수준에 관계없이, 당신의 자신감은 크게 다를 수 있습니다.
  • 훌륭하고 경험있는 개발자는 지식격차에도 불구하고 가치있는 전문지식을 보유하고 있습니다.
• UI 엔지니어링의 요소들 - Overreacted - 윗 글의 링크에 이런 것도 있길래 줍줍. 유행 그 자체보다는 UI 문제를 해결하기 위해 고민하다보니 자연스레 무언가 나왔다는 이야기가 인상깊게 들린다. 또한 글 전반적으로 강조하는 ‘이와 같은 UI 고민을 라이브러리나 프레임워크 없이 작게라도 직접 만들어보는 노력을 해 보라’ 는 말이 굉장히 중요하게 느껴진다.
• 안정적인 서비스 운영 - Slideshare - 야금야금 읽고 있던 책의 이번 챕터는 ‘확장성있는 웹 아키텍처와 분산 시스템’ 이었다. 그러다가 이 슬라이드를 참고하라는 조언을 들었는데 슬라이드가 책의 내용을 많이 보완해주었다. 내용은 조금 길지만 정말 웹 개발을 한다면 두고두고 곱씹어야 할 내용이다.

프론트엔드(주로 리액트)

• GitHub - pfgray/chainable-components: A composable API for reusable React code. - 리액트 컴포넌트에 함수헝 체인 개념이 들어간 라이브러리. 살짝 보아하니 API가 꽤 잘 되어있고, 조합의 방법이 다양해서 여러모로 쓸만해보인다. 다만 기존에 컴포넌트를 작성해서 랜더링 할때랑 개념이 살짝 다르기 때문에 사람에 따라서 거부감이 일어날 수도 있겠다.
• GitHub - frontarm/create-react-blog: Start and deploy your own statically rendered blog with create-react-app - create-react-app + MDX 기반의 블로그 생성기. 모듈 사용, 타입스크립트 지원, 기본 테마(Dan Abramov의 overracted.io 테마 기반) 등 깔끔하게 잘 되어있어서 JS 생태계를 조금만 알면 이거로 금새 블로그 만드는것도 그리 어렵지 않아보인다.
• Dan Abramov의 CSS-in-JS에 대한 의견 트윗 - 전반적으로 DX(Developer eXperience 라고 추측)에는 도움이 될지 모르나 실제 사용자에게 이득되는 측면이 없고, 개발자마자 CSS-in-JS의 정의가 다른 것을 문제라고 제기하고 있다. 의미있는 의견이라고 생각한다.
• GitHub - callstack/linaria: Zero-runtime CSS in JS library - 위의 트윗에 이어, 이전에 별을 찍어놨는데 이런 라이브러리가 있는지 잊고 있었다. Zero Runtime CSS-in-JS 를 표방하고 있다는게 상당히 흥미롭다. 바벨 플러그인으로 CSS 정적 파일을 생성하는 것으로 보이고 props 로 인한 동적인 스타일링은 CSS Variable 로 자동 대체하는 것 같다. 그렇다면 CSS Variable이 지원되지 않는 환경에서는 못쓰는건가?
• GitHub - piotrwitek/typesafe-actions: Typesafe Action Creators for Redux / Flux Architectures (in TypeScript) - 깔끔한 코드에 설명도 정말 잘 되어있는 타입스크립트 기반의 리덕스 액션과 관련된 라이브러리. 예제 코드를 보아하니 TS+Redux는 정말 힘든 길이라는 생각이 든다. 타이핑하는데 시간 다 보낼 기세.
• Understanding why Semantic HTML is important, as told by TypeScript. - 타입스크립트의 인터페이스에 비유하여 시맨틱 마크업이 왜 중요한지 보여주는 글. 정말 간단한 두 개의 스니펫만으로도 전달하고자 하는 정보가 아주 명확하게 들어왔다. div 등으로 퉁치는 것은 마크업에 any 타입을 지정하는 것이나 마찬가지라는 거다.
• react-testing-library — React Testing Examples - react-testing-library 를 활용한 컴포넌트의 통합 테스트를 다시 시도해보려던 차에 생각보다 많은 어려움에 부딪혔다. 그럴 때 일반적으로 쓰이는 테스팅 기법과 예제가 이 사이트에 많이 수록되어있어서 많은 참고가 되었다. 물론 이것만으로 커버하기엔 지금 프로젝트의 설계 상 아쉬위움이나 엣지 케이스가 많긴 하다.

도커

• Dockerfile 작성부터 이미지 배포까지 간단 요약 - 도커를 간단히 손댈 일이 있어서 직접 도전해보고 필요한 내용을 요약해보았다.
• 왜 굳이 도커(컨테이너)를 써야 하나요? - 컨테이너를 사용해야 하는 이유 | 44bits.io - 도커를 써야 하는 이유를 잘 정리해주셨다. 나도 도커 기반의 배포 방식이 너무 마음에 들어서 더 잘 알아보고 싶다.

도구 및 활용

• Minimo - An elegant, simplified new tab page | Product Hunt - 크롬용 새 탭 화면 테마인데 심플하고 시커먼게 너무 마음에 든다.
• How to Set Up Apple Mail Rules - 생각보다 맥 기본 메일 클라이언트가 나쁘지 않은 것 같은데 알림 설정이 제한적인 것 같아 조금 검색을 해보니 이런게 나왔다. 설정의 Rules 를 활용하여 다양한 조건을 만족하면 알림을 울리거나 메일 클라이언트가 독에서 방방 뛰도록 만들 수 있다. Gmail의 필터와 결합해서 쓰니 어느 정도 중요한 메일은 잘 확인하게 되었다.
• Figma를 사용하면서 불편했던 점이 확대 축소와 가로 스크롤이었다. 이 모든 것들은 트랙패드를 사용하면 제스처로 아주 간단히 사용할 수 있지만 작업실에서 M570 트랙볼을 쓸 때는 일반 스크롤밖에 안달려있기 때문에 꽤나 고통스럽다. 하지만 모르고 있던 기본 단축키 조합을 슬랙 채널에서 공유받으면서 눈이 뜨였다.
  • Cmd(Ctrl)+스크롤 - Zoom In/Out
  • Space+Drag - Panning
  • 위의 패닝이 굉장히 중요한데 대부분의 툴에서는 아이콘이 손 모양으로 바뀌면서 화면을 잡아 끄는 기능이다. 사진 편집이나 디자인 툴에 익숙한 사람들은 대부분 알고 있다고 한다. 패닝 덕에 앞으로는 Figma를 편하게 이용할 수 있겠다.
• Rename a local and remote branch in git – Multiple States Knowledge Base - 브랜치 전략 중 하나로 wip 브랜치를 이용하기로 했는데, 작업이 다 끝난 브랜치를 feature 로 바꾸어 올리는게 귀찮기도 하고, 신경 안쓰면 계속 origin 에 남는 문제가 있었다. 하지만 검색해보니 이렇게 쉽게 푸시하면서 원격 브랜치도 정리할 수 있었다.

오픈 소스 프로젝트

• GitHub - streamich/modern-pick: Template string accessors to the selector rescue - 템플릿 리터럴 문법을 활용한 JS Object picker. styled-components 의 문법을 보고 실제로 이런게 적용될 수도 있겠다고 생각했는데 가능하다는데서 놀랐다.
• GitHub - cats-oss/scaffdog: scaffdog is Markdown driven scaffolding tool. - Hygen 은 자체 포맷으로 파일을 생성해주는 템플릿 엔진이었는데, 이 녀석은 마크다운 기반으로 파일을 생성해주는 템플릿 엔진이라서 훨씬 쉽게 접근할 수 있어보인다. CLI 도 더 친절하게 보인다.