rinae's devlog

This Month I Learned - 2019년 6월

읽을거리 / 볼 거리 - 일반

  • 지식의 가난에는 이자가 붙는다 - 글쓴이는 영어공부를 위한 사례를 들긴 했지만 개발자로서 어지간한 경우에 경험+지식이 자신의 가치를 결정한다고 생각하기 때문에 크게 공감하는 글이었다. 특히 현대 사회에서 지식이란게 아예 필요 없는 분야라면 모를까, 끊임없는 지식 쌓기를 안할 이유가 있는지 잘 모르겠다.
  • 🎹초견 연습은 이렇게! - 플라워댄스(Flower dance) 피아노로 쳐보기 - YouTube - 3월즈음부터 10년만에 피아노를 다시 치고 있다. 1주일에 한번 개인 레슨을 받고 집에서 틈틈이 연습을 하는데, 페이스북에서 공유된 영상을 보다가 이 영상이 굉장히 좋은 정보를 많이 가지고 있어서 유용하다 생각한다. 나처럼 취미로 피아노 연주하는 사람들은 여기서 제시해주는 기본적인 연습 방법을 베이스로 꾸준히 연습하면 평소에 쳐보고 싶었던 곡이 많이 어렵지만 않다면 시간 들이는대로 정복 가능하리라 본다. 그리고 나도 저 곡을 너무 좋아하니까 언젠가 연습하려고 생각하고 있다만 지금은 손이 안따라줘서.. 😔
  • ‘악명’도 돈이 되는 세상 - 경향신문 - SNS, 비디오 스트리밍 플랫폼(Youtube, Twitch 등)으로 자신의 영향력을 펼치는 사람들이 점점 늘어나고 있다. 듣다 보면 도움 되는 이야기, 좋은 정보를 공유해주는 사람도 있지만 이상한 행동이나 혐오스러운 말로 유명세를 얻는 사람들도 있다. 굳이 기사에서 꼬집지 않아도 이미 댓글 문화가 활성화되던 시절부터 각 커뮤니티에는 악플로 생명력을 확보하는게 아닐까 싶은 관심종자들이 있었다. 그런데 이제 어떻게든 뜨기만 하면 돈이 되는 세상이 되었다. 유튜브 구독자 수, 영상 조회 수, 그리고 이를 활용한 광고 노출 수 등 그리 달갑게 느껴지지 않는다.

읽을거리 / 볼 거리 - 개발자

  • 기계인간 on Twitter: “git은 무엇으로 해시값을 만드는지랑, 각 커밋들의 연결이 방향 비순환 그래프라는 것만 알면 덜 헷갈리고 금방 배운다고 생각한다. 회사에서 한 10 명에게 그런 방식으로 알려준 다음 커맨드를 알려드렸더니 굉장히 빨리 익숙해지던 기억. git 학습은 이론이 중요하다고 생각한다.” - 보통 Git을 쓴다고 하면 사용되는 몇 가지 커밋에 익숙해지는데 그치는 경우가 있다. 나도 그 중 한명이었다. 그런데 그 Git의 개념을 이해하는데 애먹다 보면, 대체 왜 이런식의 버전 관리 시스템이 나온걸까? 하고 이해를 하고싶어지는 순간이 있는데, 위의 트윗처럼 기본 개념을 익히고 나서 Git을 사용하면 잘못된 사용 때문에 고생할 일이 거의 없어지게 된다. 아래의 링크도 조금 길지만 Git의 기본 개념을 잘 설명하고 있다.

  • 비전공 학원 출신 게임 개발자, 독일 게임 기업 들어간 이야기 - 나도 비전공자였지만 개발자로서 일 하게 된 사람이라 비슷한 주제로 할 이야기가 있긴 하지만, 이 분은 특히나 외국 취업 사례에 대해 이야기 해 주시기 때문에 해외 취업에 관심이 있다면 더 자세히 슬라이드를 살펴보고 경험을 살펴보시는 것도 도움이 될 듯.
  • Chromium and the browser monoculture problem - DEV Community 👩‍💻👨‍💻 - 요즘 브라우저 생태계를 생각해보면, 다양한 브라우저에 이어 MS Edge까지 크로미움 기반으로 재구성한다고 발표를 하고 있는 상황까지 왔다. 그러면 자연스럽게 ‘제 2의 IE가 되는거 아닐까?’ 하는 걱정이 떠오르게 되는데, “그래서 구체적으로 IE처럼 된다는게 뭐가 안좋은거냐?” 라는 질문을 받을 때 이 글의 앞 절반 부분이 좋은 참고 자료가 될 것이다. 또한 글쓴이는 크로미움 천하로 이루어지고 있는 현재 상황에서 그냥 다른 브라우저 제공자들도 기여에 참여하는 하나로 통합된 형태의 오픈소스 브라우저 엔진을 만드는게 좋지 않을까 하는 제안을 하기도 한다.
  • 퀵소트(Quick Sort) 알고리즘의 안정성 - 위의 동향 분석글을 보다 보면 “Array.prototype.sort() 메서드는 10개 이상의 요소가 있는 배열을 정렬할 때 불안정한 알고리즘인 quicksort 알고리즘을 사용했다.” 라는 대목이 있다. 왜 불안정한 알고리즘인지 궁금해서 검색을 조금 해보니까 설명은 되어 있는데.. 퀵소트를 할 때 구분점이 되는 Pivot에 따라 결과가 가변적일 수 있다는 이야기인가? 바로 이해가 되지 않았다.
  • 쉽게 살 수 있을까 ? :: 소프트웨어 개발자 되기는 왜 어려운가? - 일반적으로 개발자들이 성장하면서 겪는 어려움을 5단계로 표현하고 있다. 컴퓨터처럼 논리적으로 생각을 풀어내는 단계 -> 컴퓨터가 이해할 수 있도록 데이터를 풀어내는 단계 -> 사용하는 프레임워크에 대한 이해 -> 고도화된 알고리즘 혹은 패턴의 이해 -> 더 고차원적인 데이터(우리가 해결하고자 하는 문제의 본질은 데이터에 있다)를 이해하는 단계 순으로 풀어서 설명하면서 각 단계가 어째서 어려운지 설명하고 있다. 이 글을 보며 지금의 자신이 어느 단계에서 어려움을 겪는지 생각해보고 더 슬기롭게 다음 단계로 올라서는 팁을 얻을 수도 있겠다.
  • Solving Problems the Clojure Way - Rafal Dittwald - YouTube - Clojure/North라는 캐나다의 클로저 컨퍼런스에서 있던 발표다. 클로저 초심자를 대상으로 한 발표라서 클로저 코드는 거의 없다시피 했는데, 그 덕분인지 ‘함수형 프로그래밍’ 을 가볍게 훑어보기 좋은 발표였다. 자바스크립트로 되어 있는 카드 게임을 리팩토링 하는 과정을 보여주며, 잠깐 리액트(그리고 reframe) 이야기를 하기도 하고, 어떻게 데이터를 흐르게 만들고, 함수를 적절한 단위로 나누어 조합할 수 있을지 선보인다. 그리고 마지막으로 클로저 이야기를 조금 하면서 ‘함수형’, ‘데이터 주도 개발’을 설명하며 마무리한다. 자바스크립트 지식이 조금 있으면서 함수형 프로그래밍이라는 것에 관심있는 사람들에게 반드시 권하고 싶은 발표였다.
  • 오픈소스의 승리 | Human-Computer Symbiosis - 2013년 글이지만 다른 사람에게 오픈소스가 뭐죠? 라는 질문을 받았을때 알아듣기 쉽게 설명하도록 돕는 좋은 참고자료라고 생각한다. 그리고 그 오픈 소스의 가치가 무엇인지도 글에서 잘 알려주고 있다. 오픈 소스 문화의 승리로 인해 마이크로소프트의 ‘We love open source’ 행보(물론 그 진실성에 대해 많은 의혹이 제기되긴 한다. 2010년 기사에도 저 소리가 나왔다.)가 최근 몇년 사이 뚜렷이 드러나고 있기도 하다. 이런 상황에서 어떻게 오픈 소스 생태계와 함께하고 같이 성장해나갈 수 있을 지 고민하는 것도 앞으로 중요한 일이라고 생각한다.

Javascript / Typescript

  • 2019년과 이후 JavaScript의 동향 - JavaScript(ECMAScript) - Naver D2 - 정기적으로 올라오는 네이버 D2의 자바스크립트 동향 분석 글이다. PureScript 의 사용율이 생각보다 된다는게 이례적으로 보인다. 그리고 ECMAScript 2018~2020까지의 주요 기능 및 제안을 분석하였다.
  • 0.7KB로 Vue와 같은 반응형 시스템 만들기 : TOAST Meetup - 0.7KB 크기의 반응형 상태 라이브러리를 구현한 사례. 이미 존재하는 라이브러리들은 어땠고, 왜 새로 만들 필요가 있었으며, 어떤 원리에 따라 구현했는지 잘 설명되어 있다. 예제 코드를 Proxy로 다시 구현해보는 것도 좋은 연습이 되겠다.
  • pirix-gh/ts-toolbelt: 👷 Higher type safety for TypeScript - 타입스크립트 고위 타입 라이브러리. 사용하는 타입을 더 정교하게 만들 수 있는 조합용 타입의 모음집이다. 구현체 그 자체보다 최근에 본 프로젝트 중 문서화가 가장 잘 되어있다고 느껴져서 아주 좋은 인상을 받았다.
  • GitHub - true-myth/true-myth: A library for safer and smarter error- and “nothing”-handling in TypeScript. - 이전에는 tsmonad 라는 라이브러리를 써서 개발한 적이 있는데, 기본적인 기능은 그럭저럭 동작하지만 이제는 관리가 안되는 상태이다. 그러다 발견한 패키지가 이건데, 딱 Either(Result), Maybe 모나드를 활용한 더 안정적인 데이터 처리를 하고자 할 때 활용하기 아주 좋다고 생각한다. 문서도 깔끔하게 잘 되어있고 방법도 대체적으로 원하는 방식으로 처리할 수 있도록 다양하게 제공하고.

프론트엔드 - 일반

  • Flexbox - mimicking space-evenly with space-between - Flexbox를 쓸 때 justify-content: space-evenly 라는 속성이 있다. 균등하게 간격을 넓혀주는 속성인데, Edge 브라우저에서는 구현이 되어있지 않아서 폴백 스타일을 만들어주어야 한다. 의사 엘리먼트를 사용하여 간단하게 처리할 수 있다.
  • 실용적인 프론트엔드 테스트 전략 (3) : TOAST Meetup - 내가 생각하는 프론트엔드 테스트 전략과 완전히 똑같은 생각을 하고 계셔서 조금 안도가 되었던 글이다. 머릿속에 약간 먹구름 끼듯 들어있던 개념이 이 글을 통해 명쾌하게 설명되는 기분을 느꼈다. 특히 정리 단락에서 일반적인 애플리케이션 테스트 전략과 달리 프론트엔드는 오히려 E2E에 가까운 테스트를 작성할 수록 더 효율적인 테스팅이 가능하다는 이야기가 중요하다고 생각한다. 하지만 나는 아직 실무에 Cypress 테스팅까지 도입하지 못하고 있어서 아쉽다.
  • Relearn CSS layout: Every Layout - CSS로 작성하는 온갖 레이아웃에 대한 간단명료한 설명. 아직 완전히 업데이트 된 상태는 아니지만 공개된 내용은 복습해 보기에 아주 좋은 것들이 많다.
  • Remain Style Guide - 디자인 에이전시/교육 회사 리메인에서 웹 스타일 가이드를 만들어 공유했다. 디자이너를 대상으로 한 컨텐츠긴 하지만 웹 프론트엔드 개발을 한다면 한 번은 정독하고 가능하다면 최대한 많은 부분을 익혀두는 것이 큰 도움이 되리라고 생각한다. ‘내가 UI를 만드는데 작성하고 있는 코드가 화면에 어떻게 표현되고 있는가?’, ‘각 요소가 조화를 이루는데 어떤 부분을 신경써야 하는가?’ 같은 의문을 가져봤다면(만약 프론트엔드 개발을 하면서 그런 생각을 한적 없다면 지금이라도 생각해봤으면 좋겠다) 아주 좋은 가이드가 될 것이다.

  • The State of CSS 2019

    • Flexbox는 아는 사람과 사용하는 사람의 비율이 거의 일치한다. 오랫동안 사용되어와서 그렇고, 이제 Float을 활용한 레이아웃이 우선적으로 채택되는 비율은 많이 적은 것 같다. Grid는 아직 아는 사람대비 사용하는 사람의 비율이 55%정도밖에 되지 않는다. 조금 더 어렵다는 생각때문에 그럴 수 있다. 하지만 더 강력하고, Flexbox를 대체하는 것이 아니라 상호보완적이기 때문에 필요에 따라 배워서 사용하면 될 것이다.
    • Bootstrap, Foundation 통 패키지 같은 CSS 프레임워크는 저물고, Tailwind, Bulma같은 기능성 CSS 프레임워크의 사용율과 만족도가 가파르게 상승했다. Bootstrap은 아는 사람은 99%나 되지만 만족도는 17%정도밖에 되지 않는다. 앞으로도 더 비율이 줄어드리라 생각한다.
    • 사용율이나 만족도 면에서 견고한 비율을 유지하는 기술은 BEM, Sass였다. 요즘 힙한 다른 기술들(CSS-in-JS, PostCSS)은 만족도는 높을 수 있으나 인지도나 사용 비율이 조금 낮은 편이다.
  • GitHub - jlongster/electron-with-server-example: An example Electron app with a backend server all wired up via IPC - 평소에 React Native, Electron 등은 별로 관심 없이 지내다가, 이번에 Javascript is Everywhere 컨퍼런스에 가서 회사 동료분의 일렉트론 발표도 듣고 하니 각자의 프로세스가 나뉘어지고 IPC로 통신한다는 컨셉에 흥미가 생겨 조금은 더 자세히 알아보고 싶다고 생각하던 와중에 Prettier의 제작자 James Long이 최근 2년 동안 자신이 서비스하려는 제품 Actual을 만들면서 경험했던 프로세스 사이의 IPC 통신 개념을 설명하는 글과 예제를 올려 두었다.
  • HTML is the Web ~ Pete Lambert - 이전에도 비슷한 글을 공유한 적 있겠지만, ‘프론트엔드 개발자’ 라고 해서 혹은 우리가 JSX같은걸 쓰고 있다고 해서 모든 마크업을 div 로 때울 수 있는 것은 아니다. 프론트엔드 개발자라면 시맨틱한 웹을 만들기 위해 노력하고 잘 모른다 할지라도 최소한의 신경을 써서 마크업을 해야 할 의무가 있으며, 그게 실제로 엄청나게 어려운 것이 아니다는 이야기이다.

리액트

오픈 소스 프로젝트

도구 소개

  • Remove Background from Image – remove.bg - 사진의 배경을 지워주는 웹 애플리케이션. 사진으로 된 슬랙 이모지 만들 때 유용하게 사용한다는 트윗을 보았다.
  • Flotato - Break free from the browser - 이전에 fluidapp이라는게 있었는데, 웹 페이지를 사파리 웹킷으로 감싸서 맥 애플리케이션처럼 만들어주는 도구였다. 약간 그 애플리케이션의 후계자 같은 느낌으로 나온 것 같은데, 요즘 시대에 맞는 깔끔한 디자인으로 나오고, 많이 사용하는 웹앱의 경우 미리 버튼만 누르면 앱으로 등록할 수 있도록 되어있다. 일렉트론 앱을 쓰는게 싫어서 브라우저 창이나 탭을 띄우지만 앱 형태로 되어있으면 좋겠다고 생각하는 사람들에게 안성맞춤. 다만 넷플릭스는 480p까지밖에 안되는 것 같아서 그냥 브라우저로 봐야겠다.
  • GitHub - tilmanginzel/alfred-bluetooth-workflow: Yet another Alfred workflow to connect / disconnect Bluetooth devices - 블루투스 설정 제어 및 기기 연결을 알프레드로 쉽게 조작할 수 있게 만들어주는 워크플로우. 현재 연결된 기기의 아이콘 색은 녹색으로 표시되며 배터리 표시를 지원하는 기기는 배터리 상태까지 표시된다. 이 워크플로우를 못 찾아서 다른 거 대충 쓰고 있었는데 지금이라도 발견해서 무척 기쁘다.
  • Jetbrains IDE에 IdeaVim 사용 시 설정 공유 트윗 - 웹스톰을 오래 사용해오신 분이 요즘 Vim 키 바인딩에 익숙해지면서 본인의 설정을 공유해주셨다. 나는 어지간하면 에디터의 기본 단축키는 안건드리면서 Vim의 기능을 활용하는지라 단축키를 많이 바꾸진 않았는데, 탭 이동 관련 설정은 참고해서 적용해보니 좋았다.
  • Release Mojave 업데이트 · gureum/gureum · GitHub - macOS용 한글 입력기로 유명한 구름 입력기가 몇 년의 공백을 깨고 모하비용으로 업데이트 되었다. 갑작스러운 업데이트는 아니었고, 많은 분들의 기여로 스위프트 기반으로 코드 베이스를 옮기고 다양한 기능 추가와 안정성 향상이 있었다. 하이 시에라부터 포기하고 기본 입력기를 쓰고 있었는데, 업데이트 기념으로 다시 써보니 꽤나 만족스럽다. 제작/기여해주신 모든 분들께 감사드리며 앞으로도 더 발전할 수 있었으면 좋겠다.
  • GitHub - sbusso/Bear-Power-Pack: A collection of workflows enhancing Bear writer app on iOS and Mac. - Notion이 좋긴 하지만 여전히 주력 노트 앱으로 Bear를 사용하고 있다. 대체적으로 기본적인 기능만 이용하고 있는데, 이 저장소에서 iOS Shortcuts(Workflow)나 맥에서는 Keyboard Maestro 앱과 연동하여 사용할 수 있는 편리한 워크플로우를 모아두었다.
안도형(Dohyung Ahn)
삽질을 하고, 글을 남기면서 다른 사람들과 함께 자라고 싶어하는 프론트엔드 개발자입니다. 더 좋은 코드와 설계를 항상 고민하며 지식을 어떻게 효율적으로 습득하고, 어떻게 잘 나눌 수 있을지도 고민합니다.

GitHubTwitterFacebook