프론트엔드 개발자의 개발 놀이터

1. React-Query 란? 데이터 fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어주는 React 라이브러리. Server State를 관리하는 라이브러리로 React 프로젝트에서 Server와 Client 사이 비동기 로직들을 손쉽게 다루게 해주는 도구. npm i @tanstack/react-query # or yarn add @tanstack/react-query TanStack | High Quality Open-Source Software for Web Developers tanstack.com 2. Server State 란? Client에서 제어하거나 소유되지 않은 원격의 공간에서 관리되고 유지된다. Fetching이나 Updating에 비동기 API가 필요하..

redux redux/toolkit store 생성 createStore() configureStore() reducer 연결 combineReducers() - action 액션 타입, 액션 생성, 리듀서 생성 createSlice() 비동기 처리 redux-saga 또는 redux-thunk createAsyncThunk()

1. useState - 컴포넌트에서 바뀌는 값을 관리하며, 값이 바뀐 것을 감지 후 랜더링 해주는 Hook의 상태관리 함수. const [state, setState] = useState(0); // typescript const [state, setState] = useState(0); 2. useRef - javascript의 getElementById / querySelector 와 같이 DOM Selector 함수처럼 react 에서 DOM에 접근하게 되는 일이 생긴다면 접근하게 해주는 Hook 함수. const inputRef = useRef(); // typescript const inputRef = useRef(null); 3. useEffect - 마운트(화면이 처음 랜더링 될 때)와 언..

1. github 레파지토리 생성 github-pages로 만들 레파지토리를 생성해 줍니다. 2. 프로젝트 생성 및 git push # 설치 npx create-react-app [프로젝트 명] --template typescript # 이동 cd 프로젝트명 # git push git init # git 초기화 git status # 프로젝트 상태보기 git add . # 프로젝트 전체 추가하기 git commit -m "내용" # 프로젝트 "내용"으로 커밋하기 git remote add origin [github 레파지토리 주소] # 깃헙 저장소 등록하기 git push origin main # 깃헙에 푸쉬하기 3. gh-pages 설치 npm install gh-pages --save-dev 4. p..