React

devDependency와 dependency는 자바스크립트 프로젝트에서 package.json 파일 내에서 사용되는 두가지 종류의 의존성 카테고리입니다. 이 두 카테고리는 다음과 같은 주요 차이점을 가지고 있습니다.이 카테고리에 나열된 패키지는 프로젝트가 실제로 실행

Recoil 공식문서를 참고하였습니다. RecoilRoot 부모트리에 RecoilRoot가 필요, 루트 컴포넌트가 가장 최적이다. Atom Atom은 상태 state의 일부를 나타낸다. (이름부터 atom..) Atom은 어느 컴포넌트에서나 읽고 쓸 수 있다. Ato

Recoil에서 Selector는 파생된 상태 또는 계산된 상태를 나타낸다. 즉 기본적인 atom상태나 다른 selector의 상태를 기반으로 계산되거나 변환된 값을 나타내는데 사용된다.파생된 상태 계산selector는 하나이상의 atom 또는 다른 selector의

연속된 함수 호출을 지연시켜서 최종호출만 실행되도록 하는 기법이다.리액트에서 debounce를 사용하는 주된 지유는 사용자의 입력 이벤트, 예를 들어서 사용자의 검색창 입력, 이나 윈도우 리사이즈 이벤트 등에서 발생하는 불필요한 연속 호출을 방지하여 성능을 최적화하기

회사에서 프로젝트를 하는데, axios와 recoil을 사용해서 데이터를 가져오고, 전역상태를 관리하였다. 여러가지 골치아픈 것들이 있었다.1\. 데이터를 가져오기 전, 가져오고 난 후의 분기 처리를 위해서 코드가 난잡해진다.예를 들어서근데 setState는 정확히는

불완전한 렌더링을 막기 위해서 한번 더 렌더링한다.useEffect 사용시 Effect 클린업이 누락되어 발생한 버그를 찾기위해서 Effect를 한번 더 실행한다. 지원 중단된 API의 사용여부를 확인한다. 위의 작동들은 개발환경 전용이며, 상용 빌드에는 영향을 주지

자바스크립트는 이미지와 다르게 네트워크 전송 이후에도 파싱, 컴파일, 실행 등의 추가적인 처리가 필요하기 때문에 더 많은 리소스를 소비한다. 170kb 크기의 자바스크립트를 파싱하고 컴파일하는데 드는 비용은 같은 크기의 jpeg 이미지를 디코딩하는 시간보다 훨씬 더 많

<Suspense>를 사용하면 자식이 로딩을 완료할 때까지 fallback을 표시한다. children렌더링하려는 실제 UI이다. 렌더링하는동안 children이 일시중단되면 Suspense 경계가 fallback 렌더링으로 전환된다. fallback로딩이 완료되

처음에는 스타일링을 일일히 페이지 별로 만들어서 했었다. 예를 들어서그런데 이렇게 하다보니까. 한번 쓰고 정작 안쓰게 되는 것 같기도 하고, 만들어놓고나니까, 재사용해야할 것 같은 은근한 압박감이 들면서도 쓰게되면 결국에 인라인 스타일링을 하게되어서 결국에 쓰게 된 것

리액트를 iis에 배포하려면 react-router-dom 관련 설정 때문에 라우팅이 제대로 되지 않아서 404 not found가 뜨는 경우가 있었다. 이 경우에 CreateBrowserRouter를 사용하는 것이 아니라 CreateHashRouter를 사용하면 해결