전체 글
-
[핀더펜] 최적화 진행 - lighthouse란?개발 프로젝트: 핀더펜 2024. 4. 26. 17:11
이제는 미룰 수 없다..!! 대부분의 컴포넌트 제작을 완료했고 남은 부분은 아직 erd가 다 나오지 않았기 때문에 최적화를 진행해보겠습니다. 라이트하우스(lighthouse)웹페이지 품질 개선을 위해 오픈소스로 제공되는 자동 감사 도구 검사 항목 Performance (성능)First Containful Paint첫 DOM 렌더링까지 걸리는 시간iframe 내부 콘텐츠, 흰식의 외에는 모두 DOM 콘텐츠로 간주0 ~1.8초(빠름), 1.8 ~ 3초(보통), 3초 초과(느림)Speed Index페이지 로드 중 콘텐츠가 시각적으로 표시되는 속도0 ~13.4초(빠름), 13.4 ~ 5.8초(보통), 5.8초 초과(느림)Total Blocking Time사용자 입력에 응답하지 못하도록 차단된 총 시간 측정FPC..
-
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
리덕스의 역할 리덕스는 상태를 관리, 갱신 하고 액션이라 불리는 이벤트를 사용하기 위한 패턴이자 라이브러리이다. 리덕스를 써야하는 이유 - 리덕스는 전역 상태를 관리할 수 있게 도와줌 - 리덕스에서 제공하는 패턴과 도구를 이용해 상태가 언제, 어디서, 왜, 어떻게 변하됐는지 쉽게 이해할 수 있음 - 예측 가능하고 테스트 가능한 코드를 작성할 수 있도록 안내하고, 예상대로 작동할 것이라는 확신을 줌 언제 써야하는가? - 장점: 공유 상태 관리를 처리하는데 도움이 됨 - 단점: 배워야할 개념과 작성해야할 코드가 더 많음. 코드에 간접 참조를 추가하고 특정 제한 사항을 따르도록 요청함. - 그럼 언제 사용해야함? 많은 곳에서 많은 양의 상태가 필요할 때 상태가 자주 갱신될 때 상태를 업데이트하는 로직이 복잡할..
-
[VSCODE] react native, node.js 실행 / 실행 오류 해결개발 프로젝트: 핀더펜 2022. 2. 10. 01:30
지난 포스팅에서 clone한 프로젝트를 실행해보겠습니다. react native 실행 터미널 창을 열고 client 폴더에 접근해서 npm start로 react native를 실행합니다. 그런데.... 위와 같은 오류가 생겼습니다...ㅜ 그래서 구글에 찾아보니 npm 폴더의 위치를 찾아서 환경변수에 등록하라고 해서 그대로 해봤습니다. cmd에서 npm -g root 로 npm 폴더의 위치를 찾습니다. 그리고 환경변수 설정에서 path에 C:\Users\[사용자명]\AppData\npm을 추가해줍니다. 그런데도 동일한 오류가 발생했습니다.... 그래서 프로젝트 폴더를 확인해봤더니 expo-shared는 있는데 expo는 없더라구요... 그래서 expo를 추가해줬습니다. 그런데도 다음과 같은 오류 발생....