This Month I Learned - 2019년 10월

General

• 직원들에게 주인의식이 없는 진짜 이유 - 심플하다. 주인의식을 가지라는 말 자체가 언어도단이다. 이 글은 “직원에게 주인만큼의 권한을 주거나”, “주인의식을 가지고 하는 일에 책임을 묻지 않는 것” 이 주인의식을 고취시키는 방법이라고 이야기한다.
• 실리콘 밸리의 새로운 만트라: 수익을 좇으라 (번역) – 이바닥늬우스 - 아직까진 이런 세상 물정에 완전 밝진 못하지만, 많은 기업들이 엄청난 투자를 받아 몸집 불리기를 해왔다는 사실은 다양한 뉴스를 통해 접해왔다. 그런데 그 끝에 수익은 언제 나게 되는 것일까? 손해는 누가 보게 되는 것일까? 하면서 이 업계의 경제 생태에 대해 더 많은 관심을 가져다 준 글.
• ”직원의 성장이 최우선” 그런 회사는 성공할까 - 매경프리미엄 - 다른 직군은 몰라도 개발자 입장에서 생각해보면, 최고의 복지 중 하나는 함께 일할 때 많이 배우고, 같이 성장하며 훗날 이 사람 덕에 내가 더 높은 경지(연봉이든 실력이든)에 오를 수 있다는 확신을 줄 수 있는 동료가 아닐까. 그런 사람을 곁에 두고 싶고, 그런 사람이 되고 싶다. 그리고 그런 사람들이 성장해 나가면서 조직의 성과를 끌어올린다고 생각한다.

Developer

• また Slack で times を始めてしまった｜ばんくし｜ note - 본문은 일본어지만 대강 스샷만 봐도 감이 오는데, 회사 슬랙 같은 곳에서 자신만의 타임라인 채널을 구성하고, 개발자 트위터처럼 운영하던지 개인 노트를 적어 올리는 용도로 쓰는 것이다. 그러면서 다른 동료들과 교류의 장을 열 수도 있다. 오히려 이런 문화가 보편적인 것 처럼 보여서 아주 흥미로웠다.
• Chris Achard on Twitter: ”🔥 Intro to regex for web developers 👇” - 웹 개발자를 위한 정규표현식 입문. 핵심만 콕콕 찝어서 잘 설명해주고 있어서 한번 훑어보며 익히거나 복습하기 좋다.
• 민사고 간편 결제 제작기 - 민사고 축제에서 간편결제 시스템을 만들면서 구상했던 것, 겪었던 어려움, 느낀 점을 시작부터 끝까지 잘 풀어내는 훌륭한 제작기. 규모는 다른 서비스보다 작을 지 몰라도 결국 하나의 서비스를 설계, 구현, 운영까지 한거니까 대단하다.
• 문제를 해결할 때 사고가 중요한 이유 - LINE ENGINEERING - 트렌드에 민감하고, 주요 개념이나 API를 달달 외우고 있어도 그걸 적재적소에 써 먹기 위해서 최적의 문제 해결을 위한 사고방식이 필요하다. 좀 극단적으로 이야기하자면 ‘이 문제를 해결하는데 필요한 것은 무엇인가’ 를 제대로 파악하기만 해도 나머지는 필요한 내용을 조사하고 조합하여 구현하기만 하면 되지 않을까?
• 올바른 유저 스토리 작성을 위한 엔지니어링 가이드 - wholeman.dev - ‘어떠한 기능을 만들어야겠다’ 라고 생각하면서 스펙을 작성하면서도, 그 스펙 안에 정작 사용자에 대한 깊은 고려가 빠져있을 때가 있다. 유저 스토리를 면밀하게 작성하고, 검증해보면서 테스트까지 더하면 금상첨화가 되겠다. 이 글에서 흥미로운 것은 단순히 기획 측면에서 유저 스토리를 바라보고 있었는데 뒤는 코드로 끝난다는 것이다.
• 이력서 - 1분의 싸움 : 네이버 블로그 - 읽힐 만한 이력서가 되려면 어떻게 해야할까? 한정된 지면 안에 내 자신을 오롯이 자랑(?) 하려면 어떻게 해야할까? 이 글에서 제안하는 내용을 많이 적용하면서 간결한 이력서를 만든다면 괜찮은 개발자 이력서가 되겠다고 생각했다. 아래의 세 부분이 특히 인상적이었다.
  • 내 개발 역량은 어느 수준인가
  • 불평 대신 발견과 개선
  • 커뮤니케이션

JS / TS

• 비동기를 우아하게 처리하기 위한 Observable - 비바리퍼블리카(토스)의 프론트엔드 개발자 나석주님의 FEConf 발표. 한동안 개념만 조금 살펴보고 잊어버리고 있던 Observable 을 환기시켜주는 발표 슬라이드였다. 마냥 어려운 것 치고 당장 나한테 쓸 일이 없어보이는 Rx도 예제를 보면 즐겁게 써먹을 수 있어 보인다. 핵심은 복잡한 비동기 액션을 하나의 흐름으로 잡아 명료하게 표현할 수 있고 취소 기능 등 부가적으로 다양한 이득을 취할 수 있다는 것으로 보인다.

Frontend

• Does it work? Using the new CSS Layout - JS의 최신 스펙을 따라가는 것은 부담스러워하지 않으면서 CSS의 최신 스펙을 알아보는데는 부담을 느낄 때가 있다. 이번 슬라이드는 이미 Smashing Magazine에서 CSS 및 레이아웃에 관해 아주 유용한 글을 기고하고 있는 레이첼 앤드류의 발표 슬라이드이다. 찬찬히 시간을 들여 보면 아래의 사항을 알아볼 수 있다.
  • CSS 레이아웃의 변천사
  • 최신 브라우저에 구현된 일부 속성 입력 방법 등(예를 들어 display 에 연달아 속성 두개를 입력할 수 있다던가)
  • 물리적 속성 vs 논리적 속성
  • 그리드 사용 시 속성 이름을 입력하는 다양한 방법들
  • CSS에 새로 구현될 속성들 일부
  • Ask why things work
• Smoother & sharper shadows with layered box-shadows | Tobias Ahlin - 내용이 짧고 유용한데, 중심 내용 중에 하나로 충격 먹은 것이 box-shadow 속성을 여러개 입력해서 레이어 형태로 적용할 수 있다는 것이었다.
• 웹팩 핸드북 - 웹팩의 필요성, 기본 개념을 잡고자 할 때 큰 도움이 될 듯한 핸드북. 이런 핸드북이 한글로 작성되어 배포되었다는 것 만으로도 아주 좋다고 생각한다.
• (Other) Projects you can do to Become a Front-End Master in 2020 - DEV Community 👩‍💻👨‍💻 - 가끔 이런 글들이 올라온다. 사이드 프로젝트 혹은 연습 프로젝트로 어떤 주제를 골라서 해 보는게 좋을까 하는 것이다. 이 글은 단순히 To-do 앱을 무슨무슨 프레임워크로 같은걸 만들어보라는 수준을 넘어 접근성을 최대한 고려하고, HTML/CSS 의 깊은 이해를 할 수 있도록 JS를 최대한 배제해 보면서 작성해보라는 것을 권하기도 한다.
• A Modern CSS Reset - DEV Community 👩‍💻👨‍💻 - 모던 브라우저 시대로 오면서 normalize.css 의 필요성은 많이 떨어졌다고 생각한다. 그래도 어느정도 통일된 레이아웃 제공을 위해 Reset CSS 를 적용할 필요는 있는데, 이 글은 수십 줄 정도의 Reset CSS를 제안하면서 각각의 항목이 구성된 이유를 자세히 설명하고 있다. 댓글을 보면 다양한 의견들이 오가고 있지만, 항목에 대한 설명이 잘 되어있어서 한번 읽어보면서 자신의 생각과 비교해보는 것도 좋겠다.
• Investigate animation performance with DevTools - 애니메이션을 끊김없이 초당 60프레임으로 미려하게 보이게 만드는 것을 신경쓰고 싶다면 이 글에서 랜더링 과정을 복습하고, 크롬 개발자 도구를 활용하여 애니메이션 퍼포먼스를 확인하는 방법을 깊게 배워볼 수 있다. Performance 탭이 있는건 알고 있고, 가끔 쓰고 있었지만 레이어 탭이 있는 줄은 몰라서 깜짝 놀랐다.

React

• TypeScript 환경에서 Redux를 프로처럼 사용하기 - 지난 달 말에 Velopert님이 타입스크립트+리액트 튜토리얼 기본편을 올렸는데, 드디어 본격적으로 Redux와 함께 사용하는 방법이 올라왔다. 실무에서 사용하면서 고민해볼법한 문제에 대한 답도 제시하고 있고, 모듈을 어떤식으로 나누어야 할지, 타입스크립트+리액트+리덕스와 함께 사용하기 좋은 라이브러리는 어떤게 있는지 빠짐없이 다 소개하고 있다. 다음 편으로 나올 미들웨어 활용법까지 마스터하면 어지간한 개발 환경에서는 바로 실무에 적용할 수 있지 않을까 싶다.
• Thinking in React Hooks - Amelia Wattenberger - 클래스 컴포넌트와 함수 컴포넌트를 비교해나가면서 훅을 위한 멘탈 모델 형성에 도움을 주는 글. useEffect 완벽 가이드가 너무 길어서 읽기 힘들다면 먼저 이 글부터 접해도 충분히 괜찮을 것이다.
• GitHub - react-hook-form/react-hook-form: 📋 React hooks for form validation without the hassle. - Formik을 쓰고 있지만 Hook이 들어간 새 버전은 아직도 한창 개발중인 와중에, 이 훅은 API도 간결하고 문서화도 잘 되어있어서 많은 관심이 생겼다. 그래서 주말에 날 잡고 많은 양의 문서를 한글 번역으로 기여했다. 비제어 컴포넌트(Uncontrolled component)를 주로 사용한다는게 신기하게 느껴졌다. 하나의 문제를 해결하기 위한 전혀 새로운 방식이라고 해야하나.
• How to use webpack-bundle-analyzer with create-react-app | Front End Development, React, Redux and others - 서비스 런칭 전에 번들 사이즈 체크를 다시 해 보고 싶어졌는데, 좀 편하게 지금 프로젝트에 webpack-bundle-analyzer 를 적용할 방법이 없나 찾아보니까 이런게 있었다.
• Idiomatic Redux: Redux Starter Kit 1.0 · Mark’s Dev Blog - Redux의 잘 정돈된 사용법을 편리하게 패키지 형태로 만든 프로젝트가 드디어 정식 버전이 나왔다. Redux를 안쓴지 오래 되었지만 다시 쓸 일이 있다면 이거로 다시 시작해보고 싶다. 이미 Redux에 대해서는 많은 담론이 오갔지만 이 글을 통해 다시 한번 2019년에 Redux를 배울만한 가치를 확인할 수 있었다. 또한 이런 프로젝트처럼 개발자 경험을 향상시켜 툴링에 목메기 보다 핵심 비지니스 로직 개발에 집중할 수 있도록 만들어주는 발전은 언제나 환영이다. 좀 더 자세한 내용은 한재엽님이 글로 작성하셨다.
• Redux-Saga V.S. Redux-Observable - HackMD - 위의 글을 보고 ‘요즘 Redux의 비동기 액션 처리를 위한 라이브러리 중 대세는 뭘까?’ 하며 조금 더 조사를 해 보니 이런 글을 발견했다. 그런데 예상하는 배움의 난이도가 너무 낮게 설정되어 있는데…?
• GitHub - aholachek/mobile-first-animation: Performant gesture-driven animation on the mobile web - React Conf 2019 발표에서 나온 Alex Holachek님의 예제 코드 저장소. 모바일 퍼스트 디자인은 여러번 들어왔지만 모바일 퍼스트 애니메이션이라.. 아직은 애니메이션을 다루는 지식이 많이 부족하여 마냥 동경만 하게 된다.
• SWR: React Hooks for Remote Data Fetching - 데이터 페칭을 하는데 사용하는 훅이다. 짧게 설명하면 이렇지만, Suspense를 기본적으로 지원하고 캐시 우선 정책을 지원한다. SWR이 여기서 왔는데 stale-while-revalidate 라고 한다. 하지만 이미 원격 데이터 페칭은 다른 스토어에서 담당하고 있어서.. 훅으로 저렇게 데이터를 불러오는 루트가 다양하다면 어떻게 역할과 계층을 나눌 수 있을까 혼란스럽다.
  • 참고: Keeping things fresh with stale-while-revalidate
• 헌집줄게, 새집다오 - 리액트 프로젝트 구조조정 - Speaker Deck - 뱅크샐러드 이소영님의 FEConf 2019 발표 슬라이드. 예제용 코드까지 슬라이드에 꼼꼼하게 담아서 설계 변경 사례를 풀어낸다. 보는 내내 즐겁긴 했는데, 어떤 결정에 의해 Before 아키텍쳐가 나왔는지 잘 이해가 되지 않았다. 궁극적으로 이사하고 있는 새 아키텍쳐가 내가 일반적으로 생각하는 아키텍쳐에 가까웠기 때문이다. 아무리 그렇다 하더라도 프로젝트 상황이나 다양한 필요에 따라 구조는 얼마든지 달라질 수 있고, 달라져야 한다고 생각한다. 대신 얼마나 그 변화에 유연하게 대처할 수 있도록 만드느냐가 중요하겠지.