지식의 가난에는 이자가 붙는다 - 글쓴이는 영어공부를 위한 사례를 들긴 했지만 개발자로서 어지간한 경우에 경험+지식이 자신의 가치를 결정한다고 생각하기 때문에 크게 공감하는 글이었다. 특히 현대 사회에서 지식이란게 아예 필요 없는 분야라면 모를까, 끊임없는 지식 쌓기를 안할 이유가 있는지 잘 모르겠다.
🎹초견 연습은 이렇게! - 플라워댄스(Flower dance) 피아노로 쳐보기 - YouTube - 3월즈음부터 10년만에 피아노를 다시 치고 있다. 1주일에 한번 개인 레슨을 받고 집에서 틈틈이 연습을 하는데, 페이스북에서 공유된 영상을 보다가 이 영상이 굉장히 좋은 정보를 많이 가지고 있어서 유용하다 생각한다. 나처럼 취미로 피아노 연주하는 사람들은 여기서 제시해주는 기본적인 연습 방법을 베이스로 꾸준히 연습하면 평소에 쳐보고 싶었던 곡이 많이 어렵지만 않다면 시간 들이는대로 정복 가능하리라 본다. 그리고 나도 저 곡을 너무 좋아하니까 언젠가 연습하려고 생각하고 있다만 지금은 손이 안따라줘서.. 😔
‘악명’도 돈이 되는 세상 - 경향신문 - SNS, 비디오 스트리밍 플랫폼(Youtube, Twitch 등)으로 자신의 영향력을 펼치는 사람들이 점점 늘어나고 있다. 듣다 보면 도움 되는 이야기, 좋은 정보를 공유해주는 사람도 있지만 이상한 행동이나 혐오스러운 말로 유명세를 얻는 사람들도 있다. 굳이 기사에서 꼬집지 않아도 이미 댓글 문화가 활성화되던 시절부터 각 커뮤니티에는 악플로 생명력을 확보하는게 아닐까 싶은 관심종자들이 있었다. 그런데 이제 어떻게든 뜨기만 하면 돈이 되는 세상이 되었다. 유튜브 구독자 수, 영상 조회 수, 그리고 이를 활용한 광고 노출 수 등 그리 달갑게 느껴지지 않는다.
비전공 학원 출신 게임 개발자, 독일 게임 기업 들어간 이야기 - 나도 비전공자였지만 개발자로서 일 하게 된 사람이라 비슷한 주제로 할 이야기가 있긴 하지만, 이 분은 특히나 외국 취업 사례에 대해 이야기 해 주시기 때문에 해외 취업에 관심이 있다면 더 자세히 슬라이드를 살펴보고 경험을 살펴보시는 것도 도움이 될 듯.
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년 기사에도 저 소리가 나왔다.)가 최근 몇년 사이 뚜렷이 드러나고 있기도 하다. 이런 상황에서 어떻게 오픈 소스 생태계와 함께하고 같이 성장해나갈 수 있을 지 고민하는 것도 앞으로 중요한 일이라고 생각한다.
0.7KB로 Vue와 같은 반응형 시스템 만들기 : TOAST Meetup - 0.7KB 크기의 반응형 상태 라이브러리를 구현한 사례. 이미 존재하는 라이브러리들은 어땠고, 왜 새로 만들 필요가 있었으며, 어떤 원리에 따라 구현했는지 잘 설명되어 있다. 예제 코드를 Proxy로 다시 구현해보는 것도 좋은 연습이 되겠다.
실용적인 프론트엔드 테스트 전략 (3) : TOAST Meetup - 내가 생각하는 프론트엔드 테스트 전략과 완전히 똑같은 생각을 하고 계셔서 조금 안도가 되었던 글이다. 머릿속에 약간 먹구름 끼듯 들어있던 개념이 이 글을 통해 명쾌하게 설명되는 기분을 느꼈다. 특히 정리 단락에서 일반적인 애플리케이션 테스트 전략과 달리 프론트엔드는 오히려 E2E에 가까운 테스트를 작성할 수록 더 효율적인 테스팅이 가능하다는 이야기가 중요하다고 생각한다. 하지만 나는 아직 실무에 Cypress 테스팅까지 도입하지 못하고 있어서 아쉽다.
Remain Style Guide - 디자인 에이전시/교육 회사 리메인에서 웹 스타일 가이드를 만들어 공유했다. 디자이너를 대상으로 한 컨텐츠긴 하지만 웹 프론트엔드 개발을 한다면 한 번은 정독하고 가능하다면 최대한 많은 부분을 익혀두는 것이 큰 도움이 되리라고 생각한다. ‘내가 UI를 만드는데 작성하고 있는 코드가 화면에 어떻게 표현되고 있는가?’, ‘각 요소가 조화를 이루는데 어떤 부분을 신경써야 하는가?’ 같은 의문을 가져봤다면(만약 프론트엔드 개발을 하면서 그런 생각을 한적 없다면 지금이라도 생각해봤으면 좋겠다) 아주 좋은 가이드가 될 것이다.
Flexbox는 아는 사람과 사용하는 사람의 비율이 거의 일치한다. 오랫동안 사용되어와서 그렇고, 이제 Float을 활용한 레이아웃이 우선적으로 채택되는 비율은 많이 적은 것 같다. Grid는 아직 아는 사람대비 사용하는 사람의 비율이 55%정도밖에 되지 않는다. 조금 더 어렵다는 생각때문에 그럴 수 있다. 하지만 더 강력하고, Flexbox를 대체하는 것이 아니라 상호보완적이기 때문에 필요에 따라 배워서 사용하면 될 것이다.
Bootstrap, Foundation 통 패키지 같은 CSS 프레임워크는 저물고, Tailwind, Bulma같은 기능성 CSS 프레임워크의 사용율과 만족도가 가파르게 상승했다. Bootstrap은 아는 사람은 99%나 되지만 만족도는 17%정도밖에 되지 않는다. 앞으로도 더 비율이 줄어드리라 생각한다.
사용율이나 만족도 면에서 견고한 비율을 유지하는 기술은 BEM, Sass였다. 요즘 힙한 다른 기술들(CSS-in-JS, PostCSS)은 만족도는 높을 수 있으나 인지도나 사용 비율이 조금 낮은 편이다.
HTML is the Web ~ Pete Lambert - 이전에도 비슷한 글을 공유한 적 있겠지만, ‘프론트엔드 개발자’ 라고 해서 혹은 우리가 JSX같은걸 쓰고 있다고 해서 모든 마크업을 div 로 때울 수 있는 것은 아니다. 프론트엔드 개발자라면 시맨틱한 웹을 만들기 위해 노력하고 잘 모른다 할지라도 최소한의 신경을 써서 마크업을 해야 할 의무가 있으며, 그게 실제로 엄청나게 어려운 것이 아니다는 이야기이다.
리액트
컴포넌트 제대로 만들기 | DailyEngineering - 멋쟁이 개발자 이현섭 님이 지난번 “React 사용자를 위한 React 부트캠프”에서 강의하셨던 내용. 원래는 Atomic Design이나 디자인 시스템에 대한 강의를 기대하고 있었는데, 이 강의 내용도 ‘컴포넌트를 어떻게 구성해야 하는가?’ 라는 리액트 초심자부터 중급 사용자까지 잘 감을 잡지 못하는 부분을 명쾌하게 예제와 함께 설명하셨다. “특히 Hook 그놈 어떻게 써야할지 모르겠다. 공식 문서는 영어라 어렵고” 라는 분에게는 이 글의 Hook 부분을 참고하는 것도 큰 도움이 되리라 생각한다.
벨로퍼트와 함께하는 리액트 테스팅 - 김민준님의 리액트 테스팅 강좌 시리즈이다. 초반에는 우리가 테스트를 왜 하는지, 어떤 종류가 있는지부터 시작하여 간단한 자바스크립트 코드로 TDD까지 하는 과정을 알려준 뒤 리액트 애플리케이션 개발에 테스트를 어떤 식으로 하는지 안내한다. 특히 TodoList를 TDD하며 만드는 포스팅이 좋았다. 하지만 여기서 조금만 실무 단위로 들어가면 복잡한 API 모킹과 상태 관리 컨테이너와의 조합 때문에 테스트 하는게 많이 까다로워져서 저 내용을 다 알고 있다고 해도 기존에 이미 만들어진 애플리케이션에 테스트를 적용해나가는 일은 생각보다 험난하다.
React State with Hooks: useReducer, useState, useContext - RWieruch - 리액트 Hook API 중 상태 관리를 위한 핵심 훅 3개를 소개하고 어떻게 활용하는지 설명되어있는 글이다. 원시 타입에 갯수가 적다면 useState 를 활용하는게 좋으나, 한 컴포넌트(혹은 커스텀 훅)에서 서로 연계되지 않은 상태를 여럿 활용해야 할 때는 useReducer 가 더 좋은 선택이다. 또한 useContext 를 사용하여 전역으로 dispatch 를 전달하는 방법도 소개한다.
When to useMemo and useCallback - 지금도 실무에서 Hook을 쓰면서 useMemo 는 적당히 잘 쓰고 있다고 생각하지만 useCallback 은 좀 아무 생각없이 쓰고 있다는 생각을 하고 있었다. ‘어차피 나중에 최적화 한다면 그냥 지금 써놓으면 되는거 아냐?’ 하고 말이다. 이 글을 읽고 그 원리를 파악하는데 도움이 되기도 했지만, “제품의 최적화를 할 시간에 핵심 가치에 집중하라” 는 내용에 깨달음을 얻었다. 또한 최적화를 시도하고자 한다면 제대로 측정을 한 다음에 시도할 것을 강조하기도 한다. 이 글을 읽고 나름 정리를 해 보기도 했다.
리액트 꽃길만 걷기 발표자료 - 벨로퍼트(김민준)님이 6월 22일 GDG FRONT-END GAME에서 발표하셨던 내용 슬라이드. 리액트로 개발하면서 최소 한번은 겪어볼 법 했던 삽질 요소들을 자신의 경험과 함께 잘 설명해 주시면서, 보기 쉬운 예제 코드와 나름의 해결 방안도 제시하여 슬라이드만 보는데도 내용이 쏙쏙 들어왔다. 이런 좋은 내용의 발표를 하실 수 있다는게 부럽고, 내가 발표를 하게 된다면 어떤 형태로 할 수 있을지 스스로 되묻게 되는 계기가 되기도 하였다.
Flotato - Break free from the browser - 이전에 fluidapp이라는게 있었는데, 웹 페이지를 사파리 웹킷으로 감싸서 맥 애플리케이션처럼 만들어주는 도구였다. 약간 그 애플리케이션의 후계자 같은 느낌으로 나온 것 같은데, 요즘 시대에 맞는 깔끔한 디자인으로 나오고, 많이 사용하는 웹앱의 경우 미리 버튼만 누르면 앱으로 등록할 수 있도록 되어있다. 일렉트론 앱을 쓰는게 싫어서 브라우저 창이나 탭을 띄우지만 앱 형태로 되어있으면 좋겠다고 생각하는 사람들에게 안성맞춤. 다만 넷플릭스는 480p까지밖에 안되는 것 같아서 그냥 브라우저로 봐야겠다.
Jetbrains IDE에 IdeaVim 사용 시 설정 공유 트윗 - 웹스톰을 오래 사용해오신 분이 요즘 Vim 키 바인딩에 익숙해지면서 본인의 설정을 공유해주셨다. 나는 어지간하면 에디터의 기본 단축키는 안건드리면서 Vim의 기능을 활용하는지라 단축키를 많이 바꾸진 않았는데, 탭 이동 관련 설정은 참고해서 적용해보니 좋았다.
Release Mojave 업데이트 · gureum/gureum · GitHub - macOS용 한글 입력기로 유명한 구름 입력기가 몇 년의 공백을 깨고 모하비용으로 업데이트 되었다. 갑작스러운 업데이트는 아니었고, 많은 분들의 기여로 스위프트 기반으로 코드 베이스를 옮기고 다양한 기능 추가와 안정성 향상이 있었다. 하이 시에라부터 포기하고 기본 입력기를 쓰고 있었는데, 업데이트 기념으로 다시 써보니 꽤나 만족스럽다. 제작/기여해주신 모든 분들께 감사드리며 앞으로도 더 발전할 수 있었으면 좋겠다.