TIL-220512

Creat React App에서 환경변수 관리

• dotenv 기반으로 환경변수 사용 (dotenv는 CRA에 기본적으로 포함)
• .env에서 REACT_APP_prefix 붙인 변수를 읽을 수 있음
• js에서는 process.env.NAME 형식으로, html에서는 %NAME% 사용 가능
• 환경변수 재설정시 서버 재시작 필요
• References
  • CRA 공식문서
  • .env 관련 읽기 자료

Intersection Observer API

• A way of to asynchronously observe changes in the intersection of target elment with an ancestor element or with a top-level document’s viewport.
• IntersectionObserver interface
  • constructor(callback[, options])
    • callback: (entreis: [IntersectionObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry), observer: IntersectionObserver) ⇒ void
    • options
      • root: ancestor element or document 지정
      • rootMargin: CSS margin property와 유사하게 지정
      • trheshold: number | number[]
• References
  • Intersection Observer API
  • IntersectionObserver()

Flux 아키텍처

• Overview

Concurrent React

• React v18.0
• What is React Concurrent Mode?

Recoil

• **Recoil 200% 활용하기**
• **Recoil Project Structure Best Practices**
• https://ui.toast.com/weekly-pick/ko_20200616

React Folder Structures

• https://www.robinwieruch.de/react-folder-structure/

**프론트엔드 개발자라면 반드시 알아두어야 할 32가지의 UI 요소 (번역)**

Code Splitting | Create React App

Cross Browsing(크로스 브라우징)

Accessibility

• https://developer.mozilla.org/ko/docs/Learn/Accessibility/What_is_accessibility
• Introduction to Web Accessibility | Web Accessibility Initiative (WAI) | W3C

Axios / SWR

• https://swr.vercel.app/ko
• https://github.com/vercel/swr/tree/main/examples
• Axios를 활용하여 API 캐시 적용하기
• Data Fetching with Axios & SWR

  const fetcher = url => axios.get(url).then(res => res.data)

  function App () {
    const { data, error } = useSWR('/api/data', fetcher)
    // ...
  }

Design patterns

• https://technostacks.com/blog/react-best-practices/
• React | Design Patterns. Design patterns are the templates which… | by Shrihari Murali | May, 2022 | Medium
• React Atomic Design Pattern에 대한 고찰
• Atomic Design Pattern: How to structure your React application | by Janelle Wong | Medium
• 2022년 4월 4일 - 5 React Design Patterns
• 23 React Best Practices For 2022 - Technostacks
• https://blog.logrocket.com/react-component-design-patterns-2022/
• How to use the module pattern in your SCSS/SASS stylesheets | by Marc Mintel | Medium

Javascript

• ReplaceAll
  • 첫 번째 인자로 정규표현식이 올 때는 반드시 global regex여야 한다. (아닐 경우 TypeError)

syncyarnlock

• yarn upgrade를 하면 yarn.lock만 변경되고 package.json에 반영되지 않음
• syncyarnlock 라이브러리로 sync
  • sudo yarn global add syncyarnlock
  • syncyarnlock -s -k

Misc

• SSR
• 프론트엔드 개발자로서 이해하면 좋은 데이터 베이스 지식
• https://dev.to/srmagura/bad-habits-of-mid-level-react-developers-b41