F개발자의 에러로그

노션으로 깔끔하게 보기: https://glistening-seashore-ed4.notion.site/useSWR-stale-while-revalidate-0e829551bc624b338b9bcfae97faa4a1 useSWR, 그리고 stale-while-revalidate useSWR을 사용하는 이유: 전역 상태관리를 위해 + 캐시를 효과적으로 사용하기 위해 glistening-seashore-ed4.notion.site useSWR을 사용하는 이유: 전역 상태관리를 위해 + 캐시를 효과적으로 사용하기 위해 잠깐, SWR이 뭔데? 공식문서에도 나와있지만, 다들 눈에서 자동으로 필터링 했을 것이므로 한번 더 언급하자면 useSWR에서 SWR은 stale-while-revalidate의 약자이다. 📌 ..

*깃헙에서 보기: https://github.com/uu29/TIL/blob/main/%5BReactJS%5D%20메모제이션으로%20리액트%20성능을%20올려보자.md 메모제이션(Memozation)이란? 기존 값을 기억해놨다가 특정 액션이 실행된 뒤의 값이 이전 값과 동일하면 이를 재활용하는 기법. Memoized된 내용을 재사용하여 렌더할 시, 가상 DOM에서 바뀐 부분을 확인하지 않아 성능이 향상됨. 메모제이션 전에 꼭 알아야 할 리액트 특징 리액트가 상태관리를 할 수 있는 이유는 가상 DOM을 만들어놓고 값이 바뀔 때 마다 컴포넌트를 새로 그리기 때문. 값을 비교하고 어디서 해당 값을 업데이트해줘야 하는지 찾지 않고 무조건 가상 DOM을 새로 그리기 때문에 상태관리가 쉬운 것이다. 하지만 이렇게 ..

보통 자바스크립트에서는 fetch를 사용하여 데이터를 가져오지만 fetch보다 더 좋은 것이 axios다. 리액트, 뷰와 같은 프레임 워크 안에서 쓰기 딱 좋다. 오늘 강의는 axios를 쓰기 위한 기본 세팅법을 배웠다. 우선 엑시오스(또는 에이시오스) 설치부터 해야 1. npm i axios 2. import axios from "axios"; [코드 샘플] import React from 'react'; import axios from 'axios'; class App extends React.Component{ state = { isLoading: true, movies: [] }; getMovies = async() => { const movies = await axios.get('https://..

리액트에서는 하나의 앱은 하나의 컴포넌트밖에 렌더링할 수 없다. 무슨 말이냐하면 ReactDOM.render(, document.getElementById('root')); 이런식으로 App, Potato라는 컴포넌트를 동시에 렌더링할 수 없다는 말이다. 그러면 어떻게 하냐 App.js라는 컴포넌트에 Potato까지 넣어서 한꺼번에 렌더링하면 된다. Potato.js import React from 'react'; function Potato() { return I love Potato; } export default Potato; App.js import React from 'react'; import Potato from './Potato'; function App() { return ( Hello!..

입사 전에 잠깐 배우다가 영원히 멈춰버린 줄 알았던 리액트.. 다시 시작한다. with 노마드 코더 우선 리액트 전에 환경 설정하기 1. node설치/버전 확인: node -v 2. npm 설치/버전 확인: npm -v 3. npx 설치/버전 확인: npm install npx -g (g는 글로벌로 설치함) 4. git 설치/버전 확인: git --version - 리액트 시작하기: npx를 이용 원하는 폴더에 npx를 설치한다. 혹은 npx로 폴더를 생성할 수 있다. npx create-react-app {프로젝트명} 원래 이것저것 해야할게 많지만 페이스북에서 만든 마법의 명령어 'create-react-app' 하나로 세팅이 끝난다. npx는 프로젝트를 만드는 패키지이다. 설치가 되면 해당 프로젝트명..