2022-04-01 금

Making Sense of React Hooks

• Why Hooks? 등장배경?
  • 복잡한 컴포넌트를 작게 쪼갤수 없다.
    • 상태 때문. 함수나 다른 컴포넌트로 분리 불가
  • 그래서 이런걸 만든다.
    • 거대한 컴포넌트: 리팩토링, 테스트 어려워
    • 중복로직: 다른 컴포넌트와 라이프사이클
    • 복잡한 패턴: 렌터 프롬, hoc
  • 그래서 훅이 나왔다. 재사용할수 있는 격리된 유닛
• Do Hooks Make React Bloasted?
  • 용량 매우 작어. 훅을 써서 코딩하면 더 작아질거야
• What Are Hooks, Exactly?
  • 코드 재사용에 대해 생각해보자
  • 콤포넌트는 강력하지만 ui렌더 때문에 non-visual 로직을 공유할때 불편
• Show me some code
  • useWindowWidth
  • Hooks are fully encapsulate - each time you call a Hook, it gets isolated local state within the currently executing component
• So what about classes
  • no deprecated
• But aren't hooks magic?
  • 컴포넌트별로 훅 리스트를 관리

2022-04-03 일

React hooks: not magic, just arrays

• 훅 규칙: 1) 반복/조건/중첩 함수에서 호출 금지 2) 반드시 리액트 함수에서 호출
• State management in hooks is all about arrays
• 그림으로 설명
• 순서를 바꾸면 커서에 문제 생겨

From React.Component to hooks

• 라이프 사이클 메소드를 훅으로 대체하는 과정
• useMount, useUnMount, useUpdate
• react-pirate: useTimeout, useToggle, 뭐 이런것도 있다

2022-04-06 수

State Management with React Hooks — No Redux or Context API

• 클래스 컴포넌트가 사이드 이펙드를 관리하는 방법은 라이프사이클 메소드. 훅은 useEffect()로 관리
• use-global-hook
• 라이브러리 만드는 과정 소개
• 전역 상태를 useState, useEffect 만으로 구현
• 카운터 여러개가 하나의 상태를 구독하는 예제

2022-04-09 토

How to fetch data w/ React Hooks

• data, query, search, url, loading, error
• useHackerNewsApi (custom hook)
• useReducer. 상태를 하나로 관리. 장점 무엇?
• about. data fetch!

Primer on React Hooks

• 훅을 만든 이슈
  • 1. 재사용 (상태)
  • 컴포넌트 단순
  • 클래스 안써. 러닝커브 때문
• useState. useEffect
• Rules. 1) 같은 순서, 탑레밸 2) 조건/반복만 안 X 3) 클래스 컴포넌트 X 4) use로 시작
• Custom hook. 복잡성 제어할 수. 접근 쉬운 코드 만들 수

2022-04-11 월

React Hooks - A deeper dive featuring useContext and useReducer

• useContext. 컨택스트 사용 단순. 훅스의 효과
• useReducer. 이것도?

Testing of a custom react hook for fetching data w/ axios

• @testing-library/react-hooks. react-test-renderer

2022-04-12 화

useEffect 완벽 가이드

• 클로져에 대한 내용이 잘 담겨있다.
• 모든 렌더링은 고유의 프롭, 상태, 이벤트 핸들러, 이펙트
• 고유의 모든 것을 가진다. 클로져 덕분
• 멘탈모델 변경. 라이프 사이클 → 동기화

2022-04-17 일

UI 런타임으로서의 리액트

• 번역은 부족. 새로운 내용.
• 호스트 트리. 호스트 객체
• 리액트 앨리먼트
• 진입접. jsx를 안쓰니 달리 보인다
• 재조정. 조건. 리스트
• 컴포넌트
• 순수성
• 재귀
• 제의 역전
• 지연평가
• 일괄 작업

2022-04-18 월

함수형 컴포넌트와 클래스, 어떤 차이가 존재할까?

• FC는 렌더링 값을 고정
  • 클래스 컴포넌트의 버그부터 시작
  • this를 변경할수 있어. → 클로져로 해결
  • FC는 렌더시 값을 유지
• 클래스처럼 하려면 ref 사용
  • interval, subscription 같은 명령형 API 다룰 때
  • 최적화 적합 (useCallback 자주 바뀔 때)
    • → reducer 추천

2022-04-19 화

The Guide to Learning React Hooks(Examples & Tutorials)

• 1장. 훅 규칙
• 2장. state, effect. localStorage 저장 예제. 사이드 이펙트
• 3장. 컨택스트를 위한 훅
• 4장. 리듀서. Array.prototype.reducer 와 비교. 리듀서 패턴. 강의 참고용으로 좋다

2022-04-26 화

자바스크립트에서 객체지향을 하는게 맞나요?

• 프로그래밍 패러다임을 설명

React Hooks: What's going to happen to react context?(2018-12)

• 렌더 프롭 api를 써야 컨슈머
• 클래스 컴포넌트는 contextType으로 해결. 하지만 하나의 컨슈머만 써야하는 한계
• useContext 훅. 읽기 쉽고, 이해 쉽고, 리팩토링 쉽고, 유지 쉬어!

React's new Context API(2018)

• 쓰지마라. 실험 적이다. → 예전 이야기
• react-redux, mobx-react, react-router 에서 씀
• RFCs repository
• 예제

2022-04-28 목

재택근무 보편론

• 텍스트, 비동기 커뮤니케이션 익숙해야
• 화상회의 피로도가 대면 회의 배비 2-3배 피로 → 카메라 끔

How Feature Flags Helper w/ TBD

• TDB. Trunk Based Development
• 매일 main 브렌치(이게 트렁크?)에 합쳐
  • 배포를 어떻게 하지?

당신에게 트렁크 기반 개발 추천

• 다크 런칭
• Feature branch: 큰 머지, 충돌 높아
• Trunk branch: 적은 머지, 충돌 낮아. 리뷰 수월

트렁크 기반 개발(Trunk-Based development) - Jocob's blog

• 몇 가지 규칙
• Pair / Mob 프로그래밍
• 신뢰할 수 있는 빌드
• Branch by Arstraction. Feature Flags
• 쇼규모 배치로 개발
• 빠른 빌드