복습 썸네일형 리스트형 비전공자의 공부일지 - Zustand 맛보기 Zustand란?? Zustand는 간단한 상태관리 솔루션이라고 한다. Zustand는 독일어로 State(상태)를 뜻하고 Jotai 및 React 스프링 개발자가 구축한 빠르고 확장 가능한 상태 관리 솔루션이다. 보일러 플레이트를 많이 최소화시켰다고 한다. 상용구 코드 감소 Zustand는 상태 값이 변경될 때만 구성 요소를 렌더링 하고 구성 요소를 다시 렌더링 하지 않고도 상태 변경을 처리할 수 있는 경우가 많다. 상태 관리는 중앙 집중식이며 단순하게 정의된 작업을 통해 업데이트된다. 이 부분에서 Redux와 유사하지만 개발자가 상태를 처리하기 위해 Reducer, Action 및 Dispatch를 만들어야 하는 Redux와 달리 Zustand는 훨씬 쉽다. Hooks를 상용하여 상태를 상용한다. 컨.. 더보기 비전공자의 공부일지 - Recoil 이란? Recoil이란??? Recoil 은 React 애플리케이션을 위한 상태관리 라이브러리입니다. Recoil은 Github에 14,000개 이상의 별이 있는 오픈 소스 상태관리 라이브러리이며 Facebook의 소프트웨어 엔지니어인 Dave McCabe가 발명했습니다. React 애플리케이션의 모든 구성 요소가 상태를 쉽게 공유할 수 있도록 전역 상태를 제공하며 Redux에 비해 최소화됩니다. React에 offical 라이브러리는 아니라고 한다. 하지만 Facebook에서 만든 거라 React와 호환이 잘된다고 한다. Recoil 공식사이트에 가면 간단한 사용 방법예제라고 있는데 이번엔 그걸 만들어 볼 생각이다. https://recoiljs.org/ko/docs/introduction/getting-st.. 더보기 비전공자의 공부일지 - Mobx todo앱 만들기 Mobx로 앱만들기 Mobx로 간단한 todo 앱을 만드는 프로젝트를 했다. 이번에는 TypeScript로 작업을 진행하였다. 아직 TypeScript에 대해 익숙하지 않아서 내용을 잘못 적을 때도 있다. CRA 할 때 --template typescript 해서 설치하였다. UI 세팅전에 todoStore을 만들었다. todoStore.tsx import { action, computed, makeObservable, observable } from "mobx"; interface TodoItem { id: number; title:string; completed:boolean } export default class TodoStore{ todos:TodoItem[] = [] constructor(){.. 더보기 비전공자의 공부일지 - Mobx Mobx란?? Mobx는 Redux이후 React 개발자들이 많이 사용하는 상태관리 라이브러리라고 한다. Mobx는 간단하고 확장 가능한 상태 관리, 쉽고 확장성 있게 만들어 주는 검증된 라이브러리라고 소개되어있다. https://ko.mobx.js.org/README.html MobX에 대하여 · MobX ko.mobx.js.org Mobx 5 버전에서는 데코레이터가 권장되었다고 한다. class TodoList{ @observable todos = [] @computed get unfinishedTodoCount () { return this.todos.filter((todo) => !todo.finished).length } } 나는 지금 6 버전으로 공부하고 있지만 5 버전도 한번 알아두면 좋을 .. 더보기 비전공자의 공부일지 - reactContext 1. reactContext 지금까지 데이터를 보관하거나 자식요소에게 보내는 방식으로 state, props를 사용했는데 이번에는 reactContext를 사용해서 해보려고 한다. reactContext는 props, state와 다르게 reactContext의 태그에 value값을 준 상태에서 자식요소들에서 따로 선언을 해주지 않아도 바로 사용할 수 있다. import { createContext, useContext } from 'react'; const ThemeContext = createContext(null); export default function MyApp() { return ( ) } const theme = useContext(ThemeContext); ThemeContext라는 이.. 더보기 비전공자의 공부일지 - React Router Dom, useDebounce 오늘은 어제 하던 디즈니플러스 앱을 마무리하려고 한다. 요즘 재밌게 보고 있는 유튜브가 있는데 asmr처럼 말없이 키보드 소리만 들리는 유튜브인데 꽤 재미있고 javascript에 대해 도움도 많이 되는 거 같다. 심심 할 때 한 번씩 보면 좋을 거 같아요. 나름 꽤 도움도 되고 재밌더라고요 1. React Router Dom Router란 네트워크가 서버에서 사용자에게 까지 전송되는 네트워크의 경로를 최적화해서 해당 경로를 선택해서 우리에게 알려줌 https://www.cloudflare.com/ko-kr/learning/network-layer/what-is-routing/ 위의 링크로 접속하시면 상세한 정보를 얻을 수 있음 하지만 간단하게 생각하면 우리가 url를 요청하면 해당 페이지를 보여 주는 .. 더보기 비전공자의 공부일지 - 리액트란 무엇인가, 리액트의 컴포넌트란?, 가상돔?? 오늘의 공부내용을 복습하자. 공부했던 내용을 기억이 나는데로 적고 있어서 잘못된 내용이 있을 수도 있습니다. 1. 리액트란 무엇인가 리액트는 페이스북 에서 사용자 인터페이스를 만들기 위한 JavaScript의 라이브러리이다. React는 Vue, Angualar와 많이 비교되는데 뷰와 앵귤러는 프레임 워크이고 리액트는 라이브러리 이다. 그럼 프레임 워크란 라이브러리들을 모아놓은것을 말합니다. 그렇기 때문에 개인적인 생각으로는 리액트는 뷰와 앵귤러와 다르게 다양한 라이브러리(리액트 훅, 리덕스)를 이용해서 작업이 가능할것 같습니다. 그리고 지금도 다양한 기업들에서 리액트를 사용해서 프로젝트를 만들고 있어 다양한 정보들이 많이 있습니다. 2. 리액트의 컴포넌트란? 리액트의 컴포넌트란 페이지를 구성하기 위한 .. 더보기 이전 1 다음
