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
프론트엔드 - 일반
- 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 로 때울 수 있는 것은 아니다. 프론트엔드 개발자라면 시맨틱한 웹을 만들기 위해 노력하고 잘 모른다 할지라도 최소한의 신경을 써서 마크업을 해야 할 의무가 있으며, 그게 실제로 엄청나게 어려운 것이 아니다는 이야기이다.
리액트
- 컴포넌트 제대로 만들기 | DailyEngineering - 멋쟁이 개발자 이현섭 님이 지난번 “React 사용자를 위한 React 부트캠프”에서 강의하셨던 내용. 원래는 Atomic Design이나 디자인 시스템에 대한 강의를 기대하고 있었는데, 이 강의 내용도 ‘컴포넌트를 어떻게 구성해야 하는가?’ 라는 리액트 초심자부터 중급 사용자까지 잘 감을 잡지 못하는 부분을 명쾌하게 예제와 함께 설명하셨다. “특히 Hook 그놈 어떻게 써야할지 모르겠다. 공식 문서는 영어라 어렵고” 라는 분에게는 이 글의 Hook 부분을 참고하는 것도 큰 도움이 되리라 생각한다.
- 벨로퍼트와 함께하는 리액트 테스팅 - 김민준님의 리액트 테스팅 강좌 시리즈이다. 초반에는 우리가 테스트를 왜 하는지, 어떤 종류가 있는지부터 시작하여 간단한 자바스크립트 코드로 TDD까지 하는 과정을 알려준 뒤 리액트 애플리케이션 개발에 테스트를 어떤 식으로 하는지 안내한다. 특히 TodoList를 TDD하며 만드는 포스팅이 좋았다. 하지만 여기서 조금만 실무 단위로 들어가면 복잡한 API 모킹과 상태 관리 컨테이너와의 조합 때문에 테스트 하는게 많이 까다로워져서 저 내용을 다 알고 있다고 해도 기존에 이미 만들어진 애플리케이션에 테스트를 적용해나가는 일은 생각보다 험난하다.
- GitHub - oliverox/React-TypeMe: A tiny typewriter animation simulator React component, simple and powerful. - 텍스트가 한 글자 단위로 타이핑되듯이 보여지는 애니메이션을 구현해준 리액트 컴포넌트 라이브러리. 보는 재미가 은근 쏠쏠하다.
- React State with Hooks: useReducer, useState, useContext - RWieruch - 리액트 Hook API 중 상태 관리를 위한 핵심 훅 3개를 소개하고 어떻게 활용하는지 설명되어있는 글이다. 원시 타입에 갯수가 적다면
useState 를 활용하는게 좋으나, 한 컴포넌트(혹은 커스텀 훅)에서 서로 연계되지 않은 상태를 여럿 활용해야 할 때는 useReducer 가 더 좋은 선택이다. 또한 useContext 를 사용하여 전역으로 dispatch 를 전달하는 방법도 소개한다.
- When to useMemo and useCallback - 지금도 실무에서 Hook을 쓰면서
useMemo 는 적당히 잘 쓰고 있다고 생각하지만 useCallback 은 좀 아무 생각없이 쓰고 있다는 생각을 하고 있었다. ‘어차피 나중에 최적화 한다면 그냥 지금 써놓으면 되는거 아냐?’ 하고 말이다. 이 글을 읽고 그 원리를 파악하는데 도움이 되기도 했지만, “제품의 최적화를 할 시간에 핵심 가치에 집중하라” 는 내용에 깨달음을 얻었다. 또한 최적화를 시도하고자 한다면 제대로 측정을 한 다음에 시도할 것을 강조하기도 한다. 이 글을 읽고 나름 정리를 해 보기도 했다.
- React: “I really wish this is how I could write components.” - DEV Community 👩💻👨💻 -
fetch 후 가져온 데이터 기반으로 컴포넌트 랜더링을 할 때 loading, success, failed 상태에 따라 패턴 매칭 처럼 랜더링 하는 전략 구현체
- The State of React - Jared Palmer (@jaredpalmer) at @ReactEurope 2019 - YouTube - formik 등의 라이브러리를 만든 유명 개발자 Jared Palmer의 발표. 재밌게 보면서 가볍게 내용을 요약해보았다.
- GitHub - spearmintjs/spearmint: A simpler way to test your React application - Zero Coding Required! - 리액트 애플리케이션을 위한 GUI 테스트 코드 생성기
- GitHub - CSFrequency/react-firebase-hooks: React Hooks for Firebase. - Firebase와 효율적인 연동을 돕는 Hook. 내부 코드도 Hook 쓰는 사람들에게 좋은 참고가 될 수 있도록 잘 짜여져 있고, 타입스크립트 타이핑도 적극적으로 하여 괜찮은 참고 소스가 되었다.
- 리액트 꽃길만 걷기 발표자료 - 벨로퍼트(김민준)님이 6월 22일 GDG FRONT-END GAME에서 발표하셨던 내용 슬라이드. 리액트로 개발하면서 최소 한번은 겪어볼 법 했던 삽질 요소들을 자신의 경험과 함께 잘 설명해 주시면서, 보기 쉬운 예제 코드와 나름의 해결 방안도 제시하여 슬라이드만 보는데도 내용이 쏙쏙 들어왔다. 이런 좋은 내용의 발표를 하실 수 있다는게 부럽고, 내가 발표를 하게 된다면 어떤 형태로 할 수 있을지 스스로 되묻게 되는 계기가 되기도 하였다.
- React, TS, Electron Application 개발하면서 내가 실수한 것들 - 장기영님 발표 - 같은 날 체커(CHEQUER)의 장기영님이 발표하셨던 내용. 마찬가지로 많은 고민이 담겼던 개발기이며, 여기에 Electron 관련 내용도 살짝 얹어져 있다.
오픈 소스 프로젝트
도구 소개