react

디자인 시스템이란?애플리케이션을 구성하는 UI 요소와 규칙들을 재사용 가능한 형태로 컴포넌트화 하거나 패턴화 한 표준의 모음.디자이너와 개발자 모두 UI 컴포넌트를 다루기 때문에, 디자인 시스템은 두 분야를 연결하는 다리이기도 합니다. 또한 조직의 공용 컴포넌트에 대한 "단일한 진실의 원천(source of truth)"이다.예시 Accessibility at GitHub | PrimerGet started with accessibility at GitHub.primer.style  디자인 시스템이 없을 때 "이 페이지는 레이아웃 디자인이 조금 달라요""파란색 텍스트들을 조금 덜 파란색으로 모두 바꿔주세요""이 버튼에 마우스를 올리면 색이 진해지나요?"디자인 시스템이 있을 때"이 페이지도 표준에 맞추어 ..

소개 FaceBook이 만든 쿼리 언어 https://graphql.org/ GraphQL | A query language for your API Evolve your APIwithout versions Add new fields and types to your GraphQL API without impacting existing queries. Aging fields can be deprecated and hidden from tools. By using a single evolving version, GraphQL APIs give apps continuous access to new featu graphql.org Graphql 란? vs SQL → Server 와 Web Client 간의 질의어..

Redux 를 쓰는 이유 앱 상태가 React 만으로 관리하기 힘들 정도로 많아짐. → 상태를 외부로 빼내고, 변경점만 전파받고 싶음. → 외부 상태도 바인딩하고 싶은데… 어떻게?? 상태 관리 패턴의 분류 상태 변경을 감지하는 방식에 따른 분류 Flux-based 전역, 단일 저장소 사용 ex) react-redux의 최상위 Provider 컴포넌트 Action 실행을 제외한 상태 변경 제한. 단일 store 를 감시하므로 디버깅 기준이 action의 실행 ⇒ 전역 state 변경으로 유일해짐. Redux(Flux + Reducer) / Zustand (Flux + Context) Vuex (Flux for Vue) NgRx (Flux + Rx for Angular) Proxy-based State 재할..

컴포넌트 상태 다루기 컴포넌트 -> 앨리먼트의 집합 ( ) useState -> 상태값을 다루는 훅 const [count, setCount] = useState(0); [!help] Hook 이란? Hook은 함수형 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수라고 합니다. Hook은 class 안에서는 동작하지 않으며, 대신 class 없이 React를 사용할 수 있게 해주는 것이라고 합니다. 컴포넌트 사이드 이펙트 다루기 사이드 이펙트 -> 부수 효과를 의도적으로 발생시킬 때 사용 useState -> lazy initialize 비용이 많이 드는 localStorage 에 접근하거나 배열을 조작 할 때 사..