This month I Learned - 2020년 7월

2달만에 작성하면서 작은 변화를 주었는데, 배운 것 중에 특별히 좋다고 느낀 내용에는 별 모양 이모티콘을 달아보았다.

General

• (번역) 밀레니얼 세대는 어떻게 번아웃 세대가 되었는가 - 이여로
  • 이전 세대 사람들에 비해 요즘 세대 사람들은 그냥 열심히 산다고 해서는 평범하게 살 수 없는 수준이 되어버렸다.
  • 앞 세대가 성공할 수록 다음 세대는 더욱 경쟁해야 하는 사회이다.
  • 그리고 그렇게 경쟁해야 한다는 ‘사상의 최적화’ 는 아주 어린 시절부터 진행되게 되었다.
  • 자신이 ‘가치 있는 것’ 이라고 배운 것이 실제로 ‘그닥 가치 있는 것이 아닐 수도 있다’ 라는 데에서 오는 상실감
  • 그 와중에 겉보기엔 멋지고, 열정적이고, 가치 있는 일을 하는 사람들을 온라인에서 줄창 보게 된다.
  • 밀레니얼 세대에게 소셜 미디어의 존재는 직업을 구하고 유지하는 필수적인 부분 중 하나가 되었다. (링크드인이 좋은 예)
  • 자기 브랜딩을 발전시켜나가면서 일과 놀이(일 외적인 것?) 사이의 경계는 점차 희미해진다.
• ⭐ (요약) 할 일을 미루는 사람의 심리 - 기계인간 John Grib
  • 지금 이 글을 쓰는 시점에도 할일을 미루고 있었다.
  • 나 자신은 ‘합리적 의사 결정자’ 와 ‘순간적인 만족감을 찾는 원숭이’ 리는 두 내면의 결합체인데, 여기서 특히 조심해야 할 것은 ‘마감 기한이 없는 미루기’ 로 보인다. 특히 평생 성장을 추구해야하는 이 직종이 이런 함정에 빠지기 쉽겠다.
  • 기한 없는 미루기를 억제하기 위해 90년의 인생에 1주일을 네모 하나로 표현한 달력을 사용하는 것을 제안하는데, 실제로 사용해보면 그 칸수가 그렇게 많지 않다고 느끼게 되기 때문에 남은 인생을 더 강하게 느끼게 되고 ‘미룬다’ 에 대한 개념이 바뀌게 될 것이다.
  • 그래서 나도 1년 52주 달력을 실천해볼까 한다.
• Y-Combinator 샘 알트만이 말하는 성공 방정식. 성공하는 사람들이 갖는 조건은 무엇일까? | by Sonu Jung
  • 주로 창업가에 대한 이야기지만 요즘 사회에서 각각의 개인은 하나의 기업이나 마찬가지라고 보아도 될 것이다. 괜히 퍼스널 브랜딩같은 이야기가 있는게 아니고, 나도 의도치 않게 그 덕을 좀 보았다고 생각한다.
  • 무의식적으로 몇 가지 항목은 이미 실천하고 있던 것들이고, 어떤 것들은 거부감이 들긴 했지만 훌륭한 조언들이 많았다. 특히 자기 확신을 가져야 한다는 부분과 내적 동기에 집중하라는 부분이 인상깊었다.
  • 이전에 비해 제대로 못하고 있다고 느끼는 부분은 집중 / 버티기 / 네트워킹 / 위험 감수하기 등이라고 느낀다. 결국 대담해져야 이런 도전 과제들을 해치울 수 있지 않을까?

Developer

• 11년차 개발자의 새로운 조직 적응기
  • 새로운 팀으로 이직하시고 나서 새 팀과 함께 조화롭게 일하기 위해 유념해야 하는 점을 써 주셨다.
  • 핵심 키워드는 “신뢰”, 그리고 “회고” 이다.
  • 어디 다른 개발자분과 이야기하다 ‘좋은 개발자는 어떤 개발자같냐’ 라는 질문을 받을 때마다 앵무새같이 대답하는게 ‘실력은 둘째고, 말이 통하고 함께 일하기 즐거운 사람이 더 좋다’ 라고 대답하게 되는데 그 맥락과 약간 비슷하다고 느꼈다. 협업을 잘 하기 위해 필요한 능력은 여러가지가 있겠지만 나는 ‘신뢰할만한 사람인가’ 를 중요하게 여긴다.
  • 회고에 대해 이야기하자면 팀마다 다를 수 있지만, 업무에 방해가 되지 않는 수준에서 자주 할 수록 좋다고 생각한다. 관성에 의하여 그냥 돌아보는 회고 말고, 우리가 어디까지 했고 앞으로는 어떻게 더 나은 방식으로 일을 할 수 있는지 논의하는 회고 말이다.
• ⭐ 시니어 - 김우진님
  • 게임 개발계에 종사하는 분의 글이지만 어차피 같은 개발이니까. ‘시니어’ 의 역할이란 무엇인가? 라는 애매한 담론에 대해 꽤 공감가는 답을 내어주신 글이었다.
  • 시니어는 단순히 실력 높으면 되는것인가? 연차가 시니어로 만들어주나? 아마 이런 질문을 하면 아니라고 대답할 것이다. 하지만 ‘그럼 무엇이 그냥 개발자를 시니어 개발자로 만들어주는가?’ 라는 질문에는 모두가 대답하기 힘들다. 이 글에서는 “주니어가 게임 컨텐츠를 크게 확장하고 방대한 게임 구석구석의 완성도를 올릴 임무를 맡기고, 시니어는 그 확장과 완성도 업무를 지휘하고 각각의 수준을 끌어올리는 역할을 맡기게 된다” 라고 하였다.
  • 시니어의 이력서들을 받아보면 아쉬운 부분이 느껴진다고 하는데, 개인의 업무능력의 향상만으로는 프로젝트에 개인이 기여하는데 한계를 맞이하게 되어 결국 자신을 포함한 주변의 다른 개인들에게 영향을 끼쳐야 하기 때문이다. 개인 수준을 넘어 프로젝트에 기여하기 위해서는 업무능력 외에 업무 맥락을 파악하고 더 넓은 시야를 가져야 하는 것이다. 업무 맥락은 파악해서 어디에 쓰냐 하면 디테일을 바라보느라 맥락을 파악하기 어려운 개인 구성원들에게 잘 전달을 해 주기 위해 쓰인다.
  • 그런데 시니어의 이력서에서 이런 점이 드러나지 않는다면 채용하는 입장에서는 시니어로서의 매력이 무척 떨어지게 된다. 시니어 이상의 연차로서 자신을 시장에 선보인다면 업무 능력 뿐 아니라 업무의 맥락을 이해하고 업무 자체의 목표 뿐 아니라 충분히 드러나지 않은 목적을 달성하는데도 기여했다는 것을 증명할 수 있어야 한다. 또한 목표를 방해하는 이상한 업무에 의문을 가지고 바로잡을 수도 있어야 한다. 그렇지 않으면 시장에서 시니어로 인지되지 않을 것이다.
  • 이제 나 자신을 주니어라고 칭하기 애매해진 이 시점에서 ‘나는 시니어라는 직책에 어울리게 나아가고 있는가?’ 라고 의문을 던져봤을 때 미약하게나마 방향은 맞게 가고 있다고 느낀다. 저 위의 조건을 언제 완벽하게 만족할 수 있을까?
• 루비로 배우는 객체지향 디자인 일부 정리(1장~6장)
  • 5월 중순에 팀에 주니어 개발자분이 들어오셨는데 이런저런 이야기를 하다가 모델링 이야기까지 나왔고, ‘역할과 책임’ 이라는 키워드를 다시 한번 깊게 들여다볼 겸 기본적인 지식을 빠르게 훑어보는 시간이 있으면 좋겠다고 생각이 들어, 내가 완독한 몇 안되는 개발서적 중 가장 인상깊은 책인 이 책을 빠르게 다시 훑고 정리하여 전파하는 김에 외부에도 공개를 하기 시작했다.
  • 각 잡고 하면 1주일 안에 이 책을 끝낼 수 있으리라 생각했지만 결국 각을 잡지 못했고, 아직 몇 장을 남겨놓은 상태라 아쉽다. 얼른 8월 초 안에 끝내놓고 다른 것들 학습으로 넘어가야지.

JS / TS

• A Web Server From Scratch in TypeScript and Node | by Wim Jongeneel | ITNEXT
  • 웹 개발자인 이상 ‘HTTP는 어떻게 이루어져 있는가?’ 라는 질문에 적절히 대답할 필요는 있을 것이다. 조금이라도 네트워크 공부를 했다면 TCP 상위의 계층에 있다는 사실을 알 것이다. 이 글은 Node.js의 기본 소켓 API를 이용하여 TCP 통신과 HTTP까지 기본 개념을 설명하면서 따라가볼만한 예제를 제공한다.
  • 그런데 예제가 안맞는 느낌이 들어서 코드를 따라 쳐보다가 안되는 부분부터 훑어보고 내려두었다.
  • HTTP의 기본이 궁금하다면 MDN 문서에 개요 부분이 번역까지 잘 되어있는 것 같아, 이 글을 추천함과 동시에 나도 복습을 좀 해봐야겠다. (다른 부분은 아직 번역이 되어있지 않았다. 함께 기여합시다.)

Frontend

• Collapsible Dropdown Listbox Example | WAI-ARIA Authoring Practices 1.1
  • 모던 웹 애플리케이션에서 select 태그는 디자이너의 멋진 디자인을 쉽게 입히기 어렵다는 문제가 있다. 그래서 이래저래 별도의 DOM 구조에 자바스크립트를 가지고 제어하는 방식으로 구현을 하게 된다. 이런 류의 컴포넌트 이름이 Combobox, Listbox, Selectbox 등등이 있다.
  • 회사 프로젝트에 레거시 컴포넌트가 있는데, 겉모습은 select 태그처럼 생겼지만 키보드 네비게이션도 안되고 첫글자로 이동도 되지 않는 등 아쉬운 점이 많았다. 결국 위 링크의 Listbox와 같은 녀석이었다. 하지만 당장 크게 손을 대고 싶지 않아서 그대로 여기저기 사용하고 있었는데, 결국 다른 기능을 작성하다가 더 이상 이 컴포넌트로는 개발을 하지 않는게 좋겠다는 판단이 들어 대체할만한 컴포넌트를 새로 만들기 시작했다.
  • 막상 구현을 하면서 내가 모르는게 너무 많다는 것을 느꼈다. 결국 키보드로 네비게이션 하는것도 개발자가 구현해야 하는것이고, 접근성을 신경쓴다면 aria-* 속성도 잘 부여해주어야 한다. 글을 하나 쓸만한 정도이지만, 시간 관계상 참고했던 레퍼런스를 달아두었다.
  • 그냥 Downshift의 useSelect 훅을 가져다 써도 되는거였지만, Listbox 구현에 궁극적으로 무엇이 필요한지 알아보고 싶었고 좀 간단한 수준에서 구현을 마칠 수 있을 것 같아서 useSelect 의 소스코드와 레퍼런스를 참고하면서 어찌저찌 만들 수 있었다.
  • Keyboard-navigable JavaScript widgets - Accessibility | MDN
  • ⭐ KeyboardEvent.key - Web APIs | MDN
  • WebAIM: Keyboard Accessibility - Tabindex
  • ⭐️ useSelect | Downshift
• Introducing React Spectrum – React Spectrum Blog
  • 위의 삽질을 하고 났더니 얼마 되지 않아 Adobe에서 훨씬 더 고차원적으로 접근성까지 신경 쓴 툴셋을 내놓았다. 내 구현체가 한계에 부딪히면 이 패키지를 써도 되지 않을까?
• 10 modern layouts in 1 line of CSS - YouTube
  • CSS Grid 기반의 모던 레이아웃을 20분 가량의 동영상으로 쉽게 배울 수 있다.

React

• Learn Next.js – A free video course on React and Next.js.
  • 정적 사이트 생성 및 배포까지 Next.js 9.3 버전 기준으로 대체적인 기능을 잘 알아볼 수 있는 좋은 튜토리얼
• Use ternaries rather than && in JSX
  • 이전부터 삼항연산자로 조건부 랜더링을 하고 있었는데, 무슨 바람이 들어 && 를 활용한 조건부 랜더링으로 코드를 작성하기 시작한지 얼마 되지 않았을 때 뉴스레터로 이 글을 받아보았다.
  • 핵심은 && 로 조건부 랜더링을 하다보면 array.length 가 0 이 되었을 때 같은 의도치 않은 경우를 커버할 수 없으니까 더 안정적으로 삼항연산자를 쓰자는 이야기다. 물론 이런식으로 하기에 앞서 가능하면 조건부 랜더링에는 Boolean값만 사용하는게 좋겠다. 그래서 그런지 && 로 작성된 내 코드에는 이 글에 나온 문제가 없었으니까.