리액트에서 불변성 지키면서 상태 관리하기 리액트에서는 상태를 불변성으로 관리해야 한다. 보통 상태를 업데이트 할 때 스프레드 연산자를 사용하여 얕은 복사를 한다. 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...

(허접한) 자동 커밋 프로그램 만들어보기 python 파일 생성 우선 README 파일을 업데이트 해주는 python 파일을 만들어준다. 시간대는 pytz 라이브러리를 사용하여 서울 시간 기준으로 맞춰줬다. from datetime import datetime import pytz readme = open("README.md", "w") ti...