gwanduke/try-and-learn

<🌱> Where I organize my thoughts and knowledge. </🌳>

Try and Learn

공부한 것들을 정리하는 곳. 큰 프로젝트 구현은 여기서 하지 않고, 간단한 예제 구현이나 POC 정도를 진행하고 간단하게 정리해본다.

📖 목차

• Try and Learn
  • 📖 목차
  • Try - 기록, 코드, 개념 정리
    • 상태관리 라이브러리
    • Form 라이브러리
    • Test & Mock
    • CSS
    • 기타
  • 책/강의/튜토리얼 학습 로그
    • 📕 종이책
    • 🌏 공개된 자료
    • 튜토리얼 (유료)

Try - 기록, 코드, 개념 정리

📝 블로그에 포스팅된 글 / 직접 작성한 글

상태관리 라이브러리

• Recoil
• Jotai
• Zustand
• Redux
  • redux-toolkit
• MobX
  • MobX.js.org
  • Reinventing MobX (MobX 만들기)
  • Mobx State Tree (MST)
• react-query
• 궁금해서 정리!
  • 📝 Jotai vs Recoil

Form 라이브러리

• react-hook-form
• yup
• POC
  • react-hook-form-v6: 훌륭하지만 double nested 필드를 처리하는데 특정 케이스 문제가 있다. 예를 들어 setValue를 하면 값이 사라지거나 반영되지 않는 현상이 있다. defaultValues를 잘 관리해야만한다. 하지만 다소 Flat한 폼을 구현한다면 가볍고 심플한 react-hook-form을 추천하는 바이다. => v7 이후 부터는 발견했던 대부분의 문제가 해결되었다. 강력 추천!
  • formik-v2

Test & Mock

• Miragejs
• 📝 고찰 - 어떻게 테스트를 작성해야할까?

CSS

• z-index
• dark-mode
• 애니메이션
  • animation 라이브러리

기타

• Basics
• Chrome Extension
• JavaScript Core
  • Generator
  • Iterator
  • File
• JavaScript Pattern
  • Data Binding
• Nest.js
• ReactJS
  • Build your own React (React 만들기)
  • 📝 React V-DOM에 대한 고찰
  • 📝 리액트 이벤트 시스템 - Synthetic Event
  • react-spring
• Web
  • 📝 브라우저는 어떻게 렌더링 되는가?
• WebRTC
  • data-channel
  • taking-still-photos
• Webpack HMR
• Git
  • 브랜치 전략

책/강의/튜토리얼 학습 로그

✅ 후기 작성 or 복습 완료, 📝 거의 완료, 🔥 진행중, ✋ 중단

(순서는 중요하지 않다.)

📕 종이책

• ✋ 자바스크립트 패턴과 테스트
• 📝 JavaScript Patterns
• ✋ Node.js 디자인 패턴
• ✋ 리팩토링 자바스크립트
• 📝 Node.js 교과서
• 📝 리액트를 다루는 기술 (개정판)

🌏 공개된 자료

• ✋ 모던 자바스크립트 튜토리얼
• ✋ Notes on TypeScript

튜토리얼 (유료)

• egghead.io
  • 📝 Epic React
  • 📝 Testing JavaScript
• Fast Campus
  • 📝 The RED: React와 Redux로 구현하는 아키텍처와 리스크관리
• Udemy
  • HTML/CSS, Animation
    • ✅ Build Responsive Real World Websites with HTML5 and CSS3
    • 📝 Creative CSS Animations Transitions And Transforms Course
    • 📝 Interactive Web Animation 2020 [JavaScript, SVG, CSS & HTML]
    • 📝 Learn SVG Animation - With HTML, CSS & Javascript
  • JavaScript, ReactJS
    • 📝 Microfrontends with React: A Complete Developer's Guide
    • 📝 React - The Complete Guide (incl Hooks, React Router, Redux)
    • 📝 The Complete JavaScript Course 2020
    • ✋ Microservices with Node JS and React
    • 📝 Modern React with Redux [2020 Update]
  • Tools
    • ✋ Docker Mastery: with Kubernetes +Swarm
    • ✅ Webpack 5: The Complete Guide For Beginners