React

react로 커스텀 오디오 플레이어를 작업하고 있는데, useRef라는 hook을 처음 알게 되어 정리해보려 한다.useRef는 DOM 요소에 직접 접근할 때 사용한다. 바닐라JS에서 document.querySelector와 같은 역할을 한다고 할 수 있다. init

벌써 이 과제를 진행한 지 2주정도가 지났는데, 이제서야 회고록을 작성하는 나의 게으름을 다시 한 번 반성하면서 짧게 나마 기록을 해보고자 한다.버튼을 클릭했을 때, input창에 입력한 값을 가져와 1만 시간이 되려면 하루에 얼마나 훈련을 해야하는 지를 계산하여 화면

만든 이유 음악 플레이어 프로젝트를 시작하게 된 이유는 단순하다. React 강의를 듣고 나서 제대로 실습을 해본 적이 없어 연습을 위한 프로젝트가 필요했다. 사실 여러 주제를 생각했었는데 내가 가장 좋아하고 관심있는 분야에서 출발해야 프로젝트를 제대로 완성할 수 있겠

지난 번 포스팅 했던 음악 웹 플레이어 토이 프로젝트를 디벨롭하여, 서버 없이도 음악 파일을 업로드하여 재생목록을 만들 수 있는 기능을 추가했다. 나의 플레이어는 곡명, 아티스트명, 앨범커버 이미지가 반드시 필요한데 이러한 정보는 음악 파일의 메타데이터에 저장되어 있

✅동일한 계산을 반복해서 수행하지 않고, 이미 계산한 결과를 메모리에 저장했다가 재사용하여 프로그램의 성능을 향상시키는 기술위와 같이 같은 값을 리턴하는 함수를 여러 번 호출하는 경우가 있다고 하자. 메모이제이션 기법은 처음 계산할 때 그 값을 메모리에 저장해두고 그

기존의 구현 방식과 문제점 기존의 코드는 리렌더링을 방지하지 위해 모든 form의 input을 useRef로 구현했음 -> 각 input 필드에 대해 별도의 ref를 생성하고 관리해야하다보니 코드의 양이 증가하고, 반복이 많아짐. -> 결국 유지보수가 어려움 직접적인

데이터 패칭, 캐싱, 동기화, 상태 관리를 효율적으로 처리하기 위한 라이브러리로, 특히 서버 상태 관리에 초점을 둔다.컴포넌트가 마운트될 때 자동으로 데이터를 패칭하고, 특정 조건에서 자동으로 리패칭을 하여 최신 데이터를 가져올 수 있다.데이터를 캐싱하여 같은 쿼리 키

QueryClientProvider를 사용한 기본 세팅 방법부터 useQuery와 useMutation을 사용하는 방법에 대해서 알아보도록 하자.리액트 쿼리의 설정을 초기화하고, 기능을 사용할 수 있도록 전역적인 context를 제공한다.QueryClient 인스턴스를

리액트로 프로젝트나 과제를 하다가 종종 겪었던 클로저 트랩에 대해서 정리해보고자 한다.클로저 트랩을 알아보기 이전에 먼저 클로저의 특성에 대해서 이해해야 한다. 클로저는 내부 함수가 외부 함수의 변수에 접근할 수 있도록 해준다. 외부 함수의 생명 주기가 끝났다고 해도

SNS 팀프로젝트에서 채팅 기능 구현을 위해 Firebase의 Firestore를 이용해보았다. 실시간 채팅을 구현하면서 느꼈던 점들을 간단히 정리해보고자 한다.해당 프로젝트는 프론트엔드 개발자들만이 참여한 프로젝트였다. 서버를 구축하기 어려웠기 때문에, 쉽게 사용할

지난 한 주는 새로운 기획에 넘어온 것이 없었기에 리팩토링에 집중했다. 그중에서도 테이블을 재사용 가능한 컴포넌트로 만들고 싶었다. 회사에서 운영중인 여러 서비스에서 테이블을 자주 사용하고 있는데, 이미 만들어진 테이블 코드를 그대로 복붙해서 쓰다보니 코드의 중복이 많