This Month I Learned - 2019년 4월

  • 한동안 열심히 벼르다가 못하고 있던 블로그 개편을 주말동안 도전해봤습니다. 한재엽님의 템플릿을 활용하여 개인적으로 아쉬웠던 몇몇 부분의 스타일을 보강하고, 태그 기반의 정렬을 적용했습니다.
  • 또한 Netlify로 배포 플랫폼을 옮겼는데, 기존 Github pages에 있던 페이지는 자연스럽게 마이그레이션하기 힘들 것 같아서 어떻게 처리해야할지 조금 고민됩니다.
  • 기존 블로그의 형태는 템플릿으로 저장소를 남겨두었으니 참고하실 분은 참고하시기 바랍니다.
  • 개발중인 프로젝트에 Hook API를 적용하면서 React Hook 관련 문서를 많이 읽다 보니 이번에는 프론트엔드 섹션도 따로 분리해봤습니다.

읽을거리 - 일반

  • 제품을 의도대로 사용하지 않는 고객 | The Strategist - 우리는 다양한 사용자 스토리를 생각해보고, 제품의 사용자를 특정지으면서 개발자가 제품을 만든 의도대로 사용을 할 것이라는 착각에 사로잡히곤 한다. 하지만 얼마나 그럴싸한 UI나 기능을 만든다 하더라도 그걸 활용하는 것은 전적으로 고객의 몫이다. 그리고 그런 고객들을 보고 우리가 어떤 제품을 만드는지, 앞으로 어떤 방향으로 나아갈 가능성이 있는지 고민해볼 필요도 있다.
  • 습관은 자신의 참 모습을 보여주는 창이다 - “오늘날 우리는 습관을 그저 평범한 일상의 규칙적 행동이나 성향 정도로만 생각합니다. 하지만 습관은 우리 자신이 누구인지를 정의하고, 우리의 도덕성을 결정합니다. 만약 흄의 의견을 따른다면, 습관은 세상을 움직이는 힘입니다. 습관에 대한 이런 과거의 관점은 흔한 자기계발 서적보다 우리에게 습관에 대한 더 많은 것을 가르쳐 줍니다. 이들은 우리가 매일 습관적으로 하는 행동이 그저 더 나은 삶을 위해 완전히 바꾸어야 할 진부한 일상이 아니라, 우리 자신의 진정한 모습을 보여주는 기회임을 말해주는 것입니다.”

읽을거리 - 개발자

프론트엔드 - 일반

프론트엔드 - 리액트

  • GitHub - ghengeveld/react-async: 🍾 Flexible promise-based React data loader - 리액트로 비동기 데이터 호출을 하기 편리하도록 만들어진 라이브러리. useAsync 같은 Hook도 추가되었다. useAsync 코드만 잠깐 살펴보았는데 내부 코드가 깔끔하게 되어있는데다가 몇가지 내가 익숙하지 않은 부분만 제외하면 최대한 명료하게 되어있는 것으로 보인다. 또한 다른 사용자들이 라이브러리를 쓸 때 어떤 방식으로 unsupported 처리를 하는지 힌트를 얻기도 했다. 하지만 컴포넌트에 패칭 로직이 직접 들어가게 되면 분리하기 어렵지 않을까?
  • React Portals with Hooks | Jay Freestone - ReactDOM.createPortal 을 사용할 때 Hook을 사용해서 더 간결하고 선언적인 코드를 만드는 과정을 보여주는 글. 덕분에 기존 컴포넌트 및 portal 관련 HOC를 훨씬 가독성있게 고칠 수 있었다.
  • Debouncing with React Hooks - DEV Community 👩‍💻👨‍💻 - useDebounce Hook을 만드는 예제
  • The Future of Meta Tag Management for Modern React Development - react-helmet 패키지가 관리되지 않고 오동작하길래 대안을 살펴보다보니 react-helmet-async 라는게 있어서 도입해보니 잘 되었다. 패키지 제작자가 이전의 상태와 현재의 대안을 제시하는 글을 정리해서 올려주었다.
  • React Hooks: Compound Components - Compound Components를 Hook 과 함께 어떻게 구현할 수 있나 했더니 Context API를 활용하는 거였다. 이 글을 본 김에 ts-react-parcel 보일러플레이트도 적절히 수정해주었다. 타입스크립트로 타입을 매기는게 좀 빡빡하긴 했는데 조금씩 작업하다보니 요령도 생겼다.
  • A Complete Guide to useEffect — Overreacted - 이번에 typescript-eslint 로 린트를 변경하면서 Hook 관련 린트도 추가했는데 예상하지 못했던 경고가 많이 나왔다. 그래서 그 문제를 해결해보고자 useEffect 에 대해 더 자세히 살펴보기로 했는데 그 중에 리액트의 공식 FAQ 문서와 저 링크의 글이 가장 자세히 설명되어있었다. 한번 번역하면서 제대로 파악할 기회가 있었으면 좋겠다.

오픈 소스 프로젝트

도구


Dohyung Ahn (rinae)
Dohyung Ahn (rinae)
삽질을 하고, 글을 남기면서 다른 사람들과 함께 자라고 싶어하는 프론트엔드 개발자입니다. 더 좋은 코드와 설계를 항상 고민하며 지식을 어떻게 효율적으로 습득하고, 어떻게 잘 나눌 수 있을지도 고민합니다.

GitHubTwitterFacebook