coding/react17 SWR로 로그인 처리해보기 들어가기 로그인이 성공되었다. 그럼 백엔드 서버에서 로그인한 유저의 정보를 프론트로 보내주는데, 프론트 입장에서는 이 정보를 담아야 하는데 전역적으로 어떻게 담을 것인가? 1. 리덕스 2. Context API 3. SWR (v) 4. 그래프큐엘 makeVar 등등... 오늘은 3번째 방법으로 로그인 처리를 간단하게 구현해보고, 컴포넌트를 넘나들며 전역적으로 상태관리를 해보는 방법을 알아보자. SWR? HTTP RFC 5861에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revaslidate에서 유래된 것으로 먼저 캐시로 부터 데이터를 반환한 후에 fetch 요청을 하고 최정적으로 최신화된 데이터를 가져오는 전략인 즉, 데이터를 가져오기 위한 react hooks. 그리고 다른 탭에서 .. 2021. 10. 7. 리액트에 핫 리로딩 수동 설치해보기 create-react-app 하면 설치되는 핫 리로딩! 어떤식으로 설치되고 동작하는지 궁금해서 수동으로 설치해보면서 삽질해보는 시간을 가졌다 🤪 1. 핫 리로딩 관련 패키지 설치 $npm i webpack-dev-server webpack-cli @types/webpack-dev-server fork-ts-checker-webpack-plugin -D $npm i @pmmmwh/react-refresh-webpack-plugin react-refresh webpack-dev-server: CORS 문제를 해결해주는 녀석 fork-ts-checker-webpack-plugin: 타입스크립트 검사는 원래 블로킹 형태로 검사되는데 이 녀석으로 타입스크립트와 웹팩을 동시에 검사할 수 있다 (동시에 가능하니까 .. 2021. 10. 7. React + Typescript 프로젝트 수동 세팅 및 템플릿화 이번 포스팅은 React + Typescript 프로젝트를 직접 빌드업하면서 뜯어보고, Github에 템플릿화 시켜놓기. 1. package.json $npm init $npm i react react-dom $npm i typescript @types/react @types/react-dom package.json package-lock.json: 내가 의존하고 있는 패키지가 사용하는 혹은 또 의존하는 패키지의 정확한 버전링을 확인할 수 있음. 2. ESLint 코드 검사 도구. $npm i -D eslint $vi .eslintrc // .eslintrc { "extends": ["plugin:prettier/recommended", "react-app"] } 3. Prettier 코드 자동 정렬. .. 2021. 10. 6. [React] 함수의 재생성 방지해주는 useCallback로 퍼포먼스 향상하기 useCallback(callback, deps) useCallback은 함수를 의미없이 호출하는 것을 방지하기위해 캐싱해두는데, deps의 값들 중 하나라도 변경되었다면 그것을 감지해서 함수를 새로만든다. 바뀐게 없으면 이전에 만든 함수를 사용함. const onSubmit = useCallback((e)=>{ e.preventDefault(); console.log(email, nickname) }, [email, nickname]) 내부 변수(=e)는 선언할 필요가 거의 없고, 외부변수인 경우만 deps 추가해주도록한다. 2021. 9. 3. 이전 1 2 3 4 5 다음
