📄 Javascript
ECMA6 문법, 함수 호환성 테이블
└ 📝
컴파일러, 폴리필, 데탑브라우저, 모바일, 서버, 런타임
매끄러운 경험을 위한 JavaScript 비동기 처리
자주 사용하는 정규식 패턴
티스토리 블로그에 눈⛄내리게 하기! 간단한 Javascript, html 편집
Higher-Order Function 이란 무엇인가
11 Javascript Machine Learning Libraries for 2019
자바스크립트의 이터레이터와 제네레이터 사용법
TensorFlow.js: 웹 프론트엔드에서 머신러닝 활용하기
왜 JSON.parse로 객체를 선언하는 방법이 더 빠를까?
You can create these elements without JavaScript
두개의 테트리스(Tetris)
금액-한글 변환 프로젝트 npm 배포하기
Html DOM 네이티브 API로 관리하기
how to manage HTML DOM with vanilla JavaScript only? (for modern browsers and IE 11+)
모던 자바스크립트
How Are Function Components Different from Classes?
2019년 한해 동안의 자바스크립트 인기 프로젝트
자주 사용하는 정규식 패턴
The 10 best javascript libraries for SVG animation
single-page-app-vanilla-js
실수 방지 ESLint Rules
우아한JS
자바스크립트 체크박스 라이브러리
Webpack의 혼란스런 사항들
Webpack Module Federation에 대해 알아보자
웹개발시작하기,JS기초
함수형 프로그래밍(functional programming)이란?
Vue와 Chart.js, Annotation 플러그인을 활용해 데이터 시각화 컴포넌트를 제작
The Cost Of JavaScript In 2018
Vanilla Javascript로 가상돔(VirtualDOM) 만들기
Node.js에서 ORM 사용하기
Django vs Laravel vs Node.js
📄 ReactJS
React로 만드는 크롬 익스텐션 (2020)
An Introduction to Hooks in React
30 Days of Framer X
framer ex
How to Handle Async Actions for Global State With React Hooks and Context
React use gesture
The 2020 React.js Developer RoadMap - The Complete Guide to become a React Expert in 2020
React Hooks EX
React Hooks API가 도입된 이유
why React hooks
Introduction to React hooks
[번역] 심층 분석: React Hook은 실제로 어떻게 동작할까?
React redux hooks graphql contextAPI
└ 🔗
헌집줄게, 새집다오 - 리액트 프로젝트 구조조정
[REACT와 ELECTRONJS로 데스크톱 앱 만들어보기] [#1] 프로젝트 세팅하기
#1 React + Storybook + Puppeteer + Jest 개발환경 구축하기
Airframe – Free Open Source High Quality Dashboard
ReactJS 스터디를 위한 github모음 (한글)
└ 🔗 프로젝트
└ 🔗 API
└ 🔗 초기화, 스타터
└ 🔗 기초
더 로드 투 런 리액트 [Book]
Recoil
└ 🔗
에러 처리를 어떻게 하면 좋을까
└ 📝
- React + Hooks + MST(mobx-state-tree) 사용 시 데이터와 UI 결합 에 대한 고민 및 아이디어
- 최근 개발을 해 오면서 어려움을 느끼고 있는 것 중에 하나가 “데이터와 UI 의 결합을 어찌 매끄럽게 코드로 표현하는가” 입니다.
- 커스텀 훅을 만들고 그 상태를 사용하고자 하는 컴포넌트에서 호출했을 경우, props 로 내려받아야 할 값들이 컴포넌트 내부에 useSomething 같이 훅으로 선언되도록 컴포넌트의 구조가 변경되면서 훅과 컴포넌트의 결합이 생겨 이로 인해 느꼈던 문제들은 아래와 같습니다.
- 비지니스 로직(혹은 UI 상태)과 UI 자체를 분리하여 테스트하기 어렵다.
- 스토리북으로 만들기 어렵다.
- 계층과 역할을 효율적으로 분리하는 것이 테스트하기 쉽고, 지속 기능한 개발을 할 수 있는 애플리케이션을 만드는 방법이라는 멘탈 모델이 형성되었는데, 컴포넌트를 만들면서 훅을 호출하고, 그 훅을 여러개 호출하면서 믹스인하는 것이 제가 생각하는 “계층과 역할이 잘 분리된 설계” 에서 벗어나고 있다는 느낌이 들어서 가능하면 통합 테스트를 많이 작성
- 안 쓴지 오래되었지만, 만약에 redux(리덕스) + redux-saga(리덕스 사가) 를 사용하고 있다면 사가 쪽에서 에러 상태애 대한 사이드 이펙트를 실행
- 결국 애플리케이션 내부에서 “‘에러가 났다’ 라는 것을 누가 알리고, 상황을 컨트롤할 것이냐” 의 문제로 귀결됩니다. 상황을 종합해 보았을 때 상태 컨테이너에서 에러가 발생했을 때 두 가지 중 하나의 방식을 선택해야했습니다.
- 에러를 던지고, UI 에서 이를 받아 적절히 처리한다 : 지금 설계에서 일관된 처리 방식을 제공해주기 어렵거나 복잡해보였습니다. 각각의 비동기 요청마다 비슷한 코드가 작성되어야 하는 문제가 발생할 수 있죠.
- 상태 컨테이너가 에러 상태를 드러내기만 한다 : 이럴 경우 일일이 에러를 리턴받을 수 있는 함수에서 바로바로 에러를 처리하는 것이 아니라, 컴포넌트가 에러 상태를 관찰하고 그에 맞게 반응하도록만 구성하면 됩니다.
Components Should Be Focused, Independent, Reusable, Small & Testable (FIRST)
└ 📝
- 컴포넌트 단위 개발
- 독립적, 재사용 가능, 소규모의 테스트 가능