react

리액트 개발을 하던 중 useLayoutEffect를 마주쳤다.이름만 봤을 땐 useEffect와 비슷해 보이는데 Layout이 무엇인가 궁금해졌다.  먼저, 브라우저 렌더링 과정에 대해 정리해 보자.1. 브라우저가 서버에 필요한 리소스를 요청한다.(Navigation)2. HTML파일과 CSS파일을 파싱 하여 각각의 DOM트리와 CSSOM 트리를 만든다(Parsing)3. 두 트리를 결합하여 렌더 트리를 만들고(Render Tree)4. 렌더 트리에서 각 요소의 위치와 크기를 계산한다(Layout)5. 계산된 값을 바탕으로 요소들의 스타일을 적용하고, 픽셀로 변환하여 화면에 그림을 그린다.(Painting)6. 페인트 단계에서 생성된 레이어들을 합성하여 실제 화면에 나타낸다.(Composite)  us..

화면 너비에 따라 반응형 디자인을 위해 useMediaQuery과 @media가 자주 사용되는데, 각각 사용 환경과 방식이 다르다.  @media@media는 주로 css 파일이나 태그 내부에서 사용하는 반응형 스타일링 방법으로 css 파일에 직접 작성해 특정 화면 크기에 따라 스타일을 적용할 수 있다.html이나 js 파일을 수정하지 않고도 반응형 디자인을 적용할 수 있다는 것이 장점이다.box { width: 100%; background-color: blue;}/* 화면 너비가 768px 이하일 때 스타일 변경 */@media (max-width: 768px) { .box { background-color: red; }} @media 설정으로 .box의 배경색은 기본적으로 파란색이지만..

React-query v5(TanStack Query) 설치npm i @tanstack/react-query 최상위 컴포넌트를 QueryClientProvider로 감싸줘야 함import { QueryClientProvider, QueryClient } from '@tanstack/react-query';const queryClient = new QueryClient();function App() { return ( ... );} useQuery v5에서 onSuccess, onError, onSettled 콜백들은 이제 사용되지 않음import { useQuery } from '@tanstack/react-query'const { data, error, isLoading } ..

Recoil 공식문서를 바탕으로 사용법을 정리하였습니다. 개념뿌리(atoms)로부터 순수함수(selectors)를 거쳐 컴포넌트로 흐름React의 내부에서 사용하는 상태관리(ex. usestate)처럼 get/set을 사용하여 전역 상태 관리  패키지 설치npm install recoil  라이브러리 불러오기import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue,} from 'recoil';  RecoilRootRecoilRoot는 root component에 사용function App() { return ( // 이렇게 감싸주어야 함 );}  AtomAtom은 Recoil에서 상태(state)를 정의함어..

리액트에서 form 컴포넌트를 사용해 데이터를 서버로 전송하는 과정을 공식문서를 바탕으로 정리해보려 한다. 먼저, form 컴포넌트는 built-in 컴포넌트로 다음과 같이 사용할 수 있다. Submit    textarea를 form 태그로 감싸면 버튼을 클릭했을 때 onSubmit 이벤트 핸들러가 호출된다. 리액트 공식문서에 제공된 이벤트 핸들러 코드는 다음과 같다.이벤트가 발생한 타깃의 값을 가져와 new FormData()로 FormData 객체를 생성한 뒤 body에 담아 전송하는 방식이다.function handleSubmit(e) { // Prevent the browser from reloading the page e.preventDefault(); ..

npm install을 사용해 모듈들을 설치하려 하자 다음과 같은 에러가 발생했다.npm ERR! code SELF_SIGNED_CERT_IN_CHAINnpm ERR! errno SELF_SIGNED_CERT_IN_CHAIN  회사 같은 사내 인터넷망을 사용할 때 보안적인 문제로 이런 에러가 발생할 수 있는데, 찾아보니 SSL 인증서 검증을 통과하지 못하는 것이 원인이라 한다. 따라서, SSL 검증을 하지 않기 위해 다음 명령어를 터미널에서 한 번 실행한 후, 다시 npm install을 하면 정상적으로 작동된다.npm config set strict-ssl false -g