개발블로그

[react-router] CSR, SSR, loader, HydrationBoundary (framwork)

SSR / CSR / loader 정리1. 서버와 브라우저브라우저 — 사용자 개인의 노트북, 핸드폰에서 도는 것. 사람마다 각자 있음서버 — 모든 사용자의 요청을 받는 Node 프로세스개발 중 내 컴퓨터: Node 프로세스(서버) + 크롬(브라우저) ← 한 기계배포 후 AWS: Node 프로세스 / 사용자 기기: 크롬 터미널은 컴퓨터가 아니라 프로세스의 출력을 보여주는 창. npm run dev로 띄운 Node 프로세스가 서버 역할을 하고, 그게 출력한 글자가 터미널에 나옴. loader는 서버에서 돌기 때문에 console.log가 터미널에만 찍힘.2. CSR vs SSR컴포넌트 함수를 어디서 실행하느냐의 차이. CSRSSR서버에서 실행❌✅ 서버에서 실행 후 HTML 생성브라우저에서 실행✅ D..

🔨 기초 세팅 : 타입스크립트와 타입 버전 eslint 설치1. 타입스크립트 설치npm install --save typescript @types/node @types/react @types/react-dom @types/jest # 패키지 설치npx tsc --init # tsconfig.json 파일 생성(jsconfig.json은 삭제한다) 2. tsconfig 설정 (애플코딩 참고)플젝의 tsconfig는 아래와 같이 설정했고, 그 외로 설정할 수 있는 속성들은 그 아래에 작성했다// tsconfig.json{ "compilerOptions": { "baseUrl": "src", "module": "esnext", // 리액트 프로젝트에서 추천(최신 ECMAScript 모듈) ..

api요청을 한 후 새롭게 적용된 데이터를 보여줘야할 때, 우리가 생각하는 것보다 늦게 데이터가 반영된다.이를 해결하기 위해 api 요청을 하면서 ui를 미리 반영하는 낙관적 업데이트라는 것을 한다. 대표적인 예로 좋아요 클릭 시 하트 색 또는 좋아요 개수를 변경시키는 것이 있다. (gif가 좀 이상하게 잘려서 아다리가 안맞음 ㅠ;) 이렇게 좋아요를 클릭해도 숫자가 늦게 반영이 되는 상황에서 낙관적 업데이트를 사용하면 좋아요를 클릭 시 개수를 바로 반영시킬 수 있다. 낙관적 업데이트 방법(두둥) 일단 나는 react-query를 사용하고 있고, 좋아요 클릭 시 post 요청을 보내고 있다. 1. useMutate의 onMutate에서 변경하고자 하는 쿼리를 queryClient.cancelQueries..

React-hook-form에 대해서는 input 입력 시 렌더링을 최소화하는 라이브러리 정도로만 알고 있었다. 현 회사에 입사해서 계속 리액트 훅 폼을 사용하고 있는데, 기계적으로 붙여넣기(..)만 하다가 제대로 공부해야겠다는 생각이 들어 작성하는 리액트 훅 폼 정리 글이다. 1. 제어 컴포넌트 vs 비제어 컴포넌트제어/비제어 컴포넌트는 리액트가 실시간으로 state를 제어할 수 있는지 없는지에 따라 나눠진다. 제어 컴포넌트를 사용하게 되면 과도한 리렌더링이 발생하게 되는데 이러한 특성을 보완하기 위해 비제어 컴포넌트인 리액트 훅 폼 라이브러리를 사용하기 시작했다. 🔗 제어 컴포넌트기존 리액트에서 input창에 입력을 하면 onChange함수에 state 변경 함수를 연결하여 실시간으로 상태 변화가..

🐞 문제상황리스트 정렬 변경 시 변경된 리스트가 바로 적용되는 것이 아니라 변경 탭을 한번 더 클릭하면(modalVisible 상태가 변경되면) 그때 리스트가 변경된다💡해결과정기존 코드 const [modalVisible, setModalVisible] = useState(false); // 모달보기 const [order, setOrder] = useState('time'); // 정렬방법 useEffect(() => { if (pickList) { let sortedList; if (order === 'time') { // 최신순 sortedList = pickList.sort( (a, b) => new Date(b.CREA..

상황 : 투표하기를 여러 번 클릭 시 아직 요청 결과 값을 받지 않았는데, 여러 번 api요청이 되므로 이미 선택했다는 팝업이 뜸해결 : 제일 첫번째 요청만 수행되도록 하는 throttle 처리 💫 debounce와 throttle에 대해 알아보자 debounce, throttle은 자바스크립트 기능이 아닌 프로그래밍 방식이다. 과도한 이벤트 처리 또는 api 요청을 방지하는 기능으로 일정 시간 이후 또는 일정 시간 동안 한번의 작업이 이루어진다.debounce는 사용자 입력이 모두 끝난 후 일정 시간 후에 요청이 일어난다.throttle은 일정 간격 동안 한번의 요청이 일어난다.이런 기능들은 보통 자동 완성이나 스크롤 이벤트 등에서 사용된다.자동 완성에서 debounce를 사용할 경우, 검색어를 쭉..

1. useState를 사용해서 상태관리를 할 때, 객체나 배열의 상태가 업데이트 되는 경우 새로운 변수를 만들고 그 변수에 업데이트 되는 값을 넣은 뒤 그 변수를 상태변화함수에 넣어주도록 한다.숫자나 문자열은 따로 새로운 변수를 만들지 않고, 바뀌는 값을 그대로 넣어도 되는데 왜 객체나 배열은 이렇게 새로운 변수를 만들어 줘야할까? → 리액트는 상태가 변경될 때 컴포넌트의 리렌더링이 결정된다. 상태 객체를 직접 변경하면 리액트가 이전 상태와 새로운 상태를 비교할 때 차이점을 감지하지 못할 수 있다. 왜냐하면 리액트의 상태 비교 알고리즘이 얕은 비교를 수행하기 때문이다. 즉, 객체의 참조가 변경되었는지만 확인한다. 객체의 내부 속성이 변경되어도 참조가 같다면 리액트는 상태가 변경되지 않았다고 판단하고 재..

useMemo 함수 컴포넌트에서 발생하는 연산을 최적화한다. 렌더링할 때 특정 값이 바뀌었을 때만 연산을 실행하고, 그 값이 바뀌지 않는다면 이전에 연산했던 결과를 그대로 사용. 1. 연산 최적화 하고자하는 함수에 useMemo를 붙여 콜백함수로 만들어준다. const getDiaryAnalysis = useMemo( () => { const goodCount = data.filter((it) => it.emotion >= 3).length; const badCount = data.length - goodCount; const goodRatio = (goodCount / data.length) * 100; return { goodCount, badCount, goodRatio }; }, [data.len..

요즘 교육때 들었던 유데미 강의 '한입 크기로 잘라먹는 리액트'를 다시 듣고있다. 오늘 들었던 강의 중 useRef 관련해서 새롭게 알게된 것이 있어 정리해보려고 한다. 강의 내용은 리액트로 다이어리를 만드는 것이고, 현재 useState를 사용하여 data라는 배열에 일기를 추가하는 방식을 사용하고 있다. 최상위컴포넌트인 App 컴포넌트에 일기를 작성할 수 있는 컴포넌트가 있고, 이 작성한 일기들을 하단에 보여주는 컴포넌트가 있다. App 컴포넌트에서는 useState를 사용하여 data라는 배열 상태에 일기를 추가하도록 하고있다. App 컴포넌트는 이렇게 생겼다. function App() { const [data, setData] = useState([]); const dataId = useRef(..

useMutation 서버에 데이터 변경 작업을 요청할 때 사용하며, crud의 create, update, delete에 해당한다. useQuery와 다르게 자동으로 실행되지 않는다. 옵션과 반환값은 useMutation과 크게 차이가 없다. const { mutation } = useMutation(mutationFn , options) 반환값 매개변수 매개변수 1) mutationFn : api 호출 함수 usequery와 마찬가지로 promise 처리가 이루어지는 함수이며 axios를 이용해 서버에 API를 요청하는 부분이다 2) option : 선택사항 - onMutate : 본격적인 Mutation 동작 전에 먼저 동작하는 함수. optimistic update 적용할 때 유용 - optimi..