클로저함수와 그 함수가 선언될 당시의 렉시컬 환경(선언 됬을때의 렉시컬 환경)의 조합.함수가 외부 스코프 변수를 참조 할 수 있고 외부 함수의 실행이 끝나도 변수에 접근 할 수 있다. 바닐라 JavaScript에서 클로저 이슈for (var i = 0; i 반복문을 돌며 setTimeout 호출 시 콘솔에 i를 출력하는 예시 코드다.결과가 어떻게 나올까?클로저를 모르면 0,1,2가 출력된다고 볼 수 있다.하지만 클로저는 외부 스코프의 변수를 참조하기 때문에 setTimeout 함수가 1초 후 실행됬을때는 i는 이미 3가 되어 콘솔에는 3이 출력된다.var는 함수 스코프이기 때문에 반복문을 돌며 새로운 i를 생성하지 않고 하나의 i로 공유가 되기 때문이다. 리액트에서의 클로저자바스크립트에서는 var를 사용..

시간에 쫒겨 개발 중 HotReload 에러를 마주했다.해석을 해보니 무언가 컴포넌트가 렌더링 중에 상태를 업데이트 할 수 없다. 라는 말이다.const TodoList = ({ data, isDashboard }: TodoListProps) => { // queries => todos const {todos} = useQueries({ queries: data?.content ? data?.content.map((id: string) => ({ queryKey: QUERY_KEY.TODO(id), queryFn: getTodo, })) : [], combine: (results) => { return: { ..

모바일 브라우저에서는 터치 스크린을 기반으로 하기 때문에 scroll이 있을때 드래그를 하면 자연스럽게 스크롤이 된다. 하지만 데스크탑의 경우에는 마우스를 기반이라 마우스로 드래그를 하면 일반 요소를 드래그 하는걸로 인식이 된다. 드래그 했을때 스크롤이 되지 않기 때문에 직접 드래그 이벤트를 걸어줘야 한다.이번에 리스트에 가로스크롤을 구현하게 되었는데 모바일&데스크탑에서도 구현이 가능해야 했으므로 직접 드래그 이벤트를 구현해 적용했다. Drag and Drop API 사용하기HTML요소를 드래그 앤 드롭 하게 해줄 수 있는 기능이다.나는 총 5가지의 기능을 사용했다.1. draggable : 드래그 대상에 true값을 설정해주면 해당 요소가 드래그 된다.2. dragstart : 드래그가 시작될때 발생...

이번에 리액트로 별점(Rating) 기능을 구현해 보았다. ✅ 요구사항1. 별 5개중에서 아무 순서를 클릭 했을때 별점이 그 순서만큼 채워져야함. 5개의 별점중 3번째 별 클릭시 별점 3점이 된다.2. 별점이 소수점일시(4.8 등) 별이 소수점에 맞게 채워져야함.  요구사항 1번 부터import { useState } from 'react';import { FaStar } from 'react-icons/fa6';interface IStarProps { w: string; h: string; readonly: boolean; rate?: number;}export default function Star({ w, h, readonly, rate }: IStarProps) { co..

useState(setState)를 사용할때 그런경우가 있다. 바로 엇,,왜 내가 생각한대로 동작이 안되지,,?그 이유는 바로 비동기적으로 동작하기 때문이었다.useState가 비동기적으로 동작하는 이유에 대해서 알아보려고 한다.  원인을 알아보기function App() { const [number, setNumber] = useState(1); const handleAdd = () => { setNumber(number + 1); }; const handleMultiply = () => { setNumber(number * 2); }; const handleMultiplyAddNumber = () => { setNumber(number * 2); setNumber(number + 1);..

최근에 리액트로 포트폴리오를 구축했는데 애니메이션을 빠르고 쉽게 적용하고 싶었다. framer-motion이 내가 찾던 라이브러리 였다. (왜 이제 안걸까;;? ㅎ) https://www.npmjs.com/package/framer-motion framer-motion A simple and powerful JavaScript animation library. Latest version: 11.1.5, last published: 16 hours ago. Start using framer-motion in your project by running `npm i framer-motion`. There are 4191 other projects in the npm registry using framer-mo..