FrontEnd/React

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

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 } ..

리액트에서 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

React 프로젝트는 기본적으로 3000번 포트에서 실행된다. 그러나 이전 작업을 제대로 종료하지 않았다면 npm start로 프로젝트 재 실행 시 3000번 포트에 작업이 있다는 메시지가 출력된다. 이때, yes를 입력하면 기존 3000번 포트가 아닌 3001번 포트에서 실행되는 걸 볼 수 있다.  현재 열려있는 모든 포트, IP주소, PID를 살펴보기 위해 아래 명령어를 사용할 수 있다.netstat -ano  3000 포트에 해당하는 PID를 가지고 작업을 종료시킬 수 있으며 명령어는 다음과 같다.taskkill /f /pid PID 번호  또는 포트번호를 사용해 작업을 죽이는 방법도 있다.npx kill-port 포트번호  이후에 프로젝트를 다시 실행시켜 보면 기본 포트 3000번에서 React ..