redux 상태 업데이트 전/후 콘솔 찍기 const handleClick = () => { console.log("before count", count); dispatch(increment()); console.log("after count", count); }; return <button onClick={handleClic...

리액트에서 불변성 지키면서 상태 관리하기 리액트에서는 상태를 불변성으로 관리해야 한다. 보통 상태를 업데이트 할 때 스프레드 연산자를 사용하여 얕은 복사를 한다. const onToggle = (id) => { setUsers( users.map((user) => user.id === id ? { ...user, ...

브라우저에 url을 입력하면 일어나는 일 브라우저에 url을 입력하면 가장 가까운 DNS 서버에 IP 주소를 요청한다. DNS 서버에 조회한다는 것은 DNS 서버에 조회 메시지를 보내고, 응답 메시지를 받는다는 것을 의미한다. 브라우저 자체에는 메시지를 네트워크로 송출하는 기능이 없으므로 Socket 라이브러리를 사용하여 OS의 프로토콜 스택을 ...

설치하기 npm i @tanstack/react-query # or yarn add @tanstack/react-query @tanstack/react-query(v4)는 react-query(v3)에서 업그레이드 된 최신 버전으로 React 18을 지원한다. 참고 기본 사용법 먼저 react-query를 사용하기 위해 QueryCli...

useEffect 의존성 배열에 useCallback 함수를 넣으면 어떻게 될까? useEffect 안에서 useCallback 함수를 사용하는 경우, 의존성 배열에 함수를 넣지 않으면 eslint가 노란색 밑줄을 표시한다. 밑줄에 마우스를 갖다대면 ‘Either include it or remove the dependency array.’ 이런...

에러 발생 아래와 같이 컴포넌트에서 ref.current를 클린업하면 에러가 발생한다. useEffect(() => { if (containerRef.current) { containerRef.current.addEventListener(() => { console.log('event') }) } r...

기존 방식 기존에는 gapi.auth2나 gapi.client를 통해 인증을 받을 수 있었지만 앞으로 지원이 중단되어 아래와 같이 gapi.client.init 호출 시 새로운 라이브러리를 사용하라는 오류 메시지가 나온다. gapi.client.init({ apiKey: 'YOUR_API_KEY', clientId: 'YOUR_CLIENT_...

?? ??는 null 병합 연산자이다. 왼쪽 피연산자가 null이거나 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환한다. const foo = null ?? 'default string' console.log(foo) // 'default string' || ||는 왼쪽 피연산자가 참(true)이면 ...

파이썬 설치 VSCode의 Extensions에서 “python”을 검색하여 설치한다. 파이썬 터미널에서 실행 파이썬으로 작성된 파일에 들어가서 오른쪽 마우스 클릭 후 “터미널에서 Python 파일 실행” 선택 인터프리터 설치 Microsoft Store에서 Python 인터프리터를 설치한다. (오래걸림) 파이썬 실행 인터프리터 설...

모듈 동작 원리 모듈 순환 참조의 문제를 보기에 앞서 브라우저에서 모듈이 어떻게 동작하는지 먼저 알아보자. // index.js import './a.js' // a.js import { sayHello } from './b.js' export const NAME = 'mike' sayHello() // b.js import { NAME } f...