나만의 깍두기판

Redux - 상태 관리 라이브러리이며, 리액트 뿐만 아니라 모든 JS코드에서 동작한다. - Flux 패턴을 기반으로 생성되었기 때문에 단방향으로 동작하여 흐름을 파악하기 쉽고 예측 가능하다. Redux 패턴 - Flux와는 다르게 하나의 App에 하나의 Store가 존재하고, Flux 패턴을 좀 더 쉽게 사용할 수 있는 라이브러리이다. - Component -> Action -> Reducer -> Store -> State -> Component 1) 컴포넌트(Component) - Action이 발생한다. - 나중에 변경된 State를 반영하기 위하여 Store가 Subscribe(구독)을 해 놓는다. 2) 액션(Action) - 변화가 필요할 때 발생하는 신호이다. - Dispatch()로 감싸서..

Flux 패턴View -> Action -> Dispatcher -> Store -> View Action : 클릭을 하거나, 이벤트가 발생했을 때 타입을 전송한다.Dispatcher : action에서 발생한 타입을 분류하여 알맞는 로직이 실행되도록 한다.Store : 이전 값과 상태 변화 값을 확인한 후 state의 변화를 저장하는 곳View : 상태 변화가 된 것을 리랜더링 시킨다.

Context API란?- 리액트의 내장 API(16버전 이상)중 하나로 Props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있도록 도와주는 API Props의 드릴링이란?- A.jsx ~ Z.jsx까지 있다고 가정할 때 부모(A 컴포넌트)부터 최하위 자식(Z 컴포넌트)까지 Props를 보내는 과정을 드릴링이라고 한다. Context API는 언제 사용할까?- 변화가 없는 것, 즉 다크모드/화이트 모드 등 값이 선언되어 있는 상태로 변화가 없는 상태의 변수를 지정한다.- context는 상태를 변화시켜주는 기능이 아니다. Context의 단점- Provide 컴포넌트는 Value를 Props로 받아서 하위 컴포넌트에게 전달한다.- 이 과정에서 Value가 업데이트 되었을 때 리랜더링이 ..

https://npmtrends.com/ npm trends: Compare NPM package downloadsWhich NPM package should you use? Compare packages download stats, bundle sizes, github stars and more. Spot trends, pick the winner.npmtrends.com우리가 react를 배워야 하는 이유... react가 많은 비율을 차지하고 있음.이미 만들어져 있는 프로젝트들이 대부분 react기 때문에 react를 배워야 함.그렇다고 vue와 angular가 react보다 극도로 좋냐? 그건 아니다. 이미 많은 것들이 react고, vue와 큰 차이가 없기 떄문에 굳이 비용을 넣으며 바꿀 필요성..

패키지 관리툴- 라이브러리들을 관리하고 설치할 수 있는 도구npx, npm, yarn, yarn2, 3(yarn berry) npm- node에서 기본적으로 내장되어 있는 패키지 관리 툴 라이브러리 설치npm install 라이브러리명npm i 라이브러리명 라이브러리 삭제npm remove 라이브러리명npm rm 라이브러리명 yarn- 과거에는 npm보다 속도, 안정성, 보안이 모두 뛰어나서 이목을 끌었지만, 현재는 크게 차이가 없다.  yarn을 설치하기 위해서는 실행규칙을 바꿔주어야 한다.Windows PowerShell을 우클릭해서 관리자 권한으로 실행한다. 명령어1) get-ExecutionPolicy2) set-ExecutionPolicy RemoteSigned3) 권한 변경, y입력 후 엔터 ..