본문 바로가기

react3

병렬 패칭 , Suspense 예를 들어 4초가 걸리는 비동기통신 자료가 있다고 하자.4초동안 걸리는 이유는 직렬로 비동기를 돌려서 그런거라고 하자.그냥 그렇다고 하자.이런 경우엔 시간 단축을 할 수 있다.병렬로 데이터를 받는 것이다. Promise.all을 사용하면 된다. Promise.all: 만약 하나라도 거부되면 전체가 거부된다. try , catch문 사용하면 문제 없음.// 두 개의 API 엔드포인트를 호출하여 결과를 병렬로 받아오는 함수async function fetchParallel() { // 첫 번째 API와 두 번째 API 엔드포인트 const url1 = 'https://api.example.com/data1'; const url2 = 'https://api.example.com/data2'; .. 2024. 7. 30.
서버 띄우는법 , http통신 json-server라는 놈을 사용한다.다운 방법https://www.npmjs.com/package/json-server json-server[![Node.js CI](https://github.com/typicode/json-server/actions/workflows/node.js.yml/badge.svg)](https://github.com/typicode/json-server/actions/workflows/node.js.yml). Latest version: 1.0.0-beta.1, last published: 2 months ago. Start using json-server inwww.npmjs.com이쪽에 들어가서  보면 된다.1.일단 라이브러리 설치한다.npm install json-.. 2024. 7. 26.
리액트 왜 씀? 강력한 커뮤니티와 광범위한 생태계원래 유저 수가 많으면 내가 겪을 문제를 미리 해결하신 분들이 많다는 뜻이다.정보량이 많아 문제해결이 비교적 쉽다. 가상 돔 - 원래 돔 구조 카피한게 가상돔임. 그냥 돔으로만 작업하면 최하단에 있는 놈을 건드렸을 때 ,제일 위부터 최하단 놈을 건드려야 하는데 이게 성능저하가 굉장히 많이 일어남.가상돔을 이용하면 그 부분만 교체할 수 있음.  작동방식초기 렌더링시 - 가상돔 생성 변경 사항 감시 - 상태,props가 변경되면 새로운 가상돔 생성 , 기존 돔과 비교해 차이점을 찾음 실제 dom 업데이트 - 변경된 부분만 실제 dom에 반영    Tip)export default 가 없다면 , import { App } from "./app.tsx" 이렇게 사용해야 한다.ex.. 2024. 7. 22.