Done is better than perfect

React란?Facebook에서 개발한 자바스크립트 라이브러리, 사용자 인터페이스를 구축하는 데 사용  참고) 프레임워크가 아님!  React의 원리 1. Virtual DOM- 메모리 상에서 가장의 DOM을 관리한다 - 실제 DOM을 바로 수정하지 않고 Virtual DOM을 먼저 변경한다  2. Reconciliation - React는 Fiber Reconciliation Algorithm을 사용한다 3. 컴포넌트 기반 아키텍처- 재사용성과 유지보수성 향상 4. 단방향 데이터 흐름 - 예측 가능성을 증가시키고, 디버깅을 용이하게 만든다 - 하위 컴포넌트에서 데이터를 직접 변경 못한다 5. Hooks- 함수형 컴포넌트에서도 상태 관리 및 라이프사이클 기능을 사용할 수 있도록 도와주는 기능  참고) 함..

React-query란?React Application에서 서버 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리   React Query를 쓰는 이유- 복잡하고 장황한 코드가 필요한 다른 데이터 불러오기 방식과 달리 React Component 내부에서 간단하고 직관적으로 API를 사용할 수 있음 - 서버 데이터와 클라이언트 데이터를 분리하고 싶을 때 유용함  useQuery란?React Query 라이브러리에서 제공하는 훅으로, 서버에서 데이터를 가져오고 캐싱, 상태관리, 자동 업데이트 등을 효율적으로 처리 가능  주요 매개변수 queryKey: 쿼리의 고유 키 역할을 하며 배열 형태로 설정됨 queryFn: 데이터를 가져오는 함수 staleTime(선택사항):..

class vs function최근에는 함수를 이용해서 만드는 경우가 많아짐 그래서 함수를 사용함 useState: 컴포넌트에서 바뀌는 값 관리하기첫번째 원소는 현재 상태, 두번째 원소는 setter 함수 useEffect: 컴포넌트가 처음 나타났을 때 사라질 때 특정 props가 바뀔 때 특정 작업을 처리하는 것첫번째 parameter에는 함수 두번째 parameter에는 배열(의존값이 들어잇음)deps에 특정 값을 넣게 되면 처음 마운트 될 때에도 호출이 되고 지정한 값이 바뀔 때에도 호출이된다 useMemo: 재사용하는 방법성능 최적화를 위해 memoized 이전에 계산한 값을 재사용한다는 의미첫번째 parameter: 어떻게 연산할지 정의하는 함수 두번째 parameter: deps 배열을 넣어주..

Javascript에서 사용되는 기능이지만 React에서 사용했어서 정리를 해본다 이벤트란?웹페이지에서 특정 동작이 발생했을 때 실행되는 신호 또는 행동을 의미한다 이벤트 버블링 이벤트가 자식요소에서 부모요소로 전파됨  이벤트 캡처링이벤트가 부모요소에서 자식요소로 전달됨  e.stopPropagation이벤트가 상위 엘리먼트에 전달되지 않게 막아준다특정 경우에는 이벤트가 부모 요소로 전달되지 않도록 차단해야 합니다 1. 모달 창 내부 클릭 시 배경 클릭 이벤트 방지2. 중첩된 이벤트 핸들러에서 특정 요소만 이벤트 실행3. 드롭 다운 메뉴 클릭시 부모 onclick 이벤트가 실행되지 않도록 차단 e.preventDefault고유 동작(브라우저의 기본 이벤트)을 중단시킨다. 1. 폼 제출 시 새로고침 방지2..

마운트: 처음 나타났을 때 -> props로 받은 값을 컴포넌트의 로컬 상태로 설정 / 외부 API 요청 / 라이브러리 사용 / setInterval을 통한 반복작업 혹은 setTimeout을 통한 작업 예약 언마운트: 사라질 때 -> setInterval, setTimeout 을 이용하여 등록한 작업들 clear하기 (clearInterval, clearTimeout)업데이트 될 때: 특정 props가 바뀔때 useEffect(() => {}, [])deps 배열이 없으면: 컴포넌트가 처음 나타날 때만 함수가 호출된다 함수를 반환할 수 있음: clean up 함수: 컴포넌트가 사라질 때 cleanup 함수가 호출된다

npm run build를 실행하였을 때 Module not found: Error: Can't resolve 'react/jsx-runtime' 에러가 발생하였다. 해결 방법npm install react@lastest react-dom@latest --legacy-peer-deps를 실행하여 해결하였다.이를 실행하고 나면 package.json 내용이 자동으로 바뀐다.

오류 사항 해결 방법node_modules 폴더를 지우고  package.json에 "proxy": "http://localhost:8080"을 추가함그리고 다시 npm run build를 하여 해결함.

useEffect안에서 addEventListener는 잘 동작했는데 removeEventListener를 실행할 때 property가 null이라는 오류가 계속하여 발생하였다. 전후instance라는 상수에 audioRef.current를 저장해두고 addEventListener와 removeEventListener를 처리하였더니 오류가 해결되었다.