IT
-
Webstorm 다운로드 및 설치IT 2024. 7. 2. 20:18
Node.js 설치https://yoolabong.tistory.com/entry/Nodejs-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C-%EB%B0%8F-%EC%84%A4%EC%B9%98 Nodejs 다운로드 및 설치1. Nodejs 사이트 접속https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 2. Installer 설치아래 좀 더 최신 버전을 다운로드할 수 있는 링크yoolabong.tistory.com사이트 접근https://www.jetbrains.com/webstorm/ We..
-
Nodejs 다운로드 및 설치IT 2024. 7. 2. 20:09
1. Nodejs 사이트 접속https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 2. Installer 설치아래 좀 더 최신 버전을 다운로드할 수 있는 링크가 있지만 안정성을 위해 v20을 설치하겠다. PowerShell이 자동으로 설치되며 tool 설치됨. 시간이 좀 걸릴 수 있음. 2. 설치 확인명령 프롬프트를 열고 다음 명령어 입력# node 버전 확인node -v# npm 버전 확인npm -v
-
yarn 4.0.2 error: no candidates found 해결IT 2024. 1. 22. 16:23
https://stackoverflow.com/questions/77593499/why-does-yarn-fail-with-no-candidates-found-errors Why does Yarn fail with "no candidates found" errors? For example, I'm trying to upgrade netlify-cli from 17.7.0 to 17.8.1 using yarn upgrade-interactive and the following error happens: ➤ YN0000: · Yarn 4.0.2 ➤ YN0000: ┌ Resolution step ➤ YN0082: │ @ stackoverflow.com .\AppData\Local\Yarn\Berry\metad..
-
DevtoolsIT/Tanstack Query V5 2023. 12. 24. 01:41
설치 및 가져오기 npm i @tanstack/react-query-devtools import { ReactQueryDevtools } from '@tanstack/react-query-devtools' 기본적으로 개발환경의 번들에만 포함되기 때문에 production 빌드 중에 제외하는 것에 대한 걱정할 필요 X Floating Mode 앱에 고정된 플로팅 요소로 마운트하고 화면 모서리에 개발자 도구 표시하고 제거할 수 있는 토글 제공 토글 상태는 다시 로드할 때마다 localStorage에 저장됨 import { ReactQueryDevtools } from '@tanstack/react-query-devtools' function App() { return ( {/* The rest of your..
-
시작하기IT/Tanstack Query V5 2023. 12. 24. 00:57
Tanstack Query란? 웹 응용 프로그램의 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 할 수 있도록 도와주는 라이브러리 대부분의 기존 상태 관리 라이브러리는 클라이언트 상태를 사용하는 데 유용하지만 서버 상태가 완전히 다르기 때문에 비동기 또는 서버 상태를 사용하는 데는 그다지 적합하지 않음 기능 캐싱 동일한 데이터에 대한 여러 요청을 단일 요청으로 중복 제거 백그라운드에서 "오래된" 데이터 업데이트 데이터가 "오래된" 경우 파악 데이터 업데이트를 최대한 신속하게 반영 페이징 및 레이지 로드 데이터와 같은 성능 최적화 서버 상태의 메모리 및 가비지 수집 관리 구조 공유를 사용하여 쿼리 결과 메모 장점 응용프로그램에서 복잡하고 잘못 이해된 코드의 많은 줄을 제거, React Query ..
-
리덕스 용어와 개념IT/리액트 2022. 8. 16. 17:32
상태 관리 아래는 간단한 카운터 컴포넌트이다. function Counter() { // State: a counter value const [counter, setCounter] = useState(0) // Action: code that causes an update to the state when something happens const increment = () => { setCounter(prevCounter => prevCounter + 1) } // View: the UI definition return ( Value: {counter} Increment ) } - State: 앱을 구동하는 근원 - View: 현재 상태를 기반으로 하는 UI의 선언적 설명 - Actions: 사용자의 입..
-
리덕스 시작하기IT/리액트 2022. 8. 16. 00:50
앱 자동생성 npm install @reduxjs/toolkit npx create-react-app my-app --template redux npm install redux 리액트 앱 생성 후 리덕스 적용 npm install @reduxjs/toolkit react-redux Redux Store 생성 리덕스 툴킷에서 configureStore API를 import 빈 리덕스 스토어를 생성하고 export 리덕스 스토어가 생성되고 개발하는 동안 스토어를 검사할 수 있도록 리덕스 devtools 확장도 자동으로 구성됨 import { configureStore } from '@reduxjs/toolkit'; export const store = configureStore({ reducer: { }, ..
-
리덕스란?IT/리액트 2022. 8. 16. 00:42
리덕스의 역할 리덕스는 상태를 관리, 갱신 하고 액션이라 불리는 이벤트를 사용하기 위한 패턴이자 라이브러리이다. 리덕스를 써야하는 이유 - 리덕스는 전역 상태를 관리할 수 있게 도와줌 - 리덕스에서 제공하는 패턴과 도구를 이용해 상태가 언제, 어디서, 왜, 어떻게 변하됐는지 쉽게 이해할 수 있음 - 예측 가능하고 테스트 가능한 코드를 작성할 수 있도록 안내하고, 예상대로 작동할 것이라는 확신을 줌 언제 써야하는가? - 장점: 공유 상태 관리를 처리하는데 도움이 됨 - 단점: 배워야할 개념과 작성해야할 코드가 더 많음. 코드에 간접 참조를 추가하고 특정 제한 사항을 따르도록 요청함. - 그럼 언제 사용해야함? 많은 곳에서 많은 양의 상태가 필요할 때 상태가 자주 갱신될 때 상태를 업데이트하는 로직이 복잡할..