Life is connecting the dots .

최근 프로젝트를 하면서 useImperativeHandle hook에 대해 알게 되었다. 이번 포스팅은 해당 hook이 무엇인지, 언제 사용하는지, 어떻게 사용하는지에 대해 정리해 두고자 작성한다. 정의useImperativeHandle은 React Hook으로 ref로 커스텀 메소드를 만들 수 있게 해 준다. 다시 말하면, 사용자 정의 ref 핸들러를 부모 컴포넌트에서 사용할 수 있도록 노출시킬 수 있다. 사용법은 컴포넌트 최상위 레벨에서 useImperativeHandle을 호출해서 노출할 ref에 커스텀 메소드(createHandle)를 작성해 준다. // (참고) React v19// (1)import { useImperativeHandle } from 'react';// 자식 컴포넌트functi..

프로젝트 [리스티웨이브]를 하면서 점점 기능이 늘어남에 따라 API도 늘어나고 있다. 리액트쿼리를 이용해서 서버 상태를 동기화해주고 있는데 useMutation을 사용해 API를 호출할 때 다음과 같이 사용하고 있다.  // 삭제 뮤테이션 const deleteMutation = useMutation({ mutationFn: deleteNotice, onSuccess: () => { queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.getAdminAllNotice] }); }, }); // 알림 보내기 뮤테이션 const sendAlarmMutation = useMutation({ mutationFn: sendNotic..

프로젝트 [리스티웨이브]의 어드민 게시물/공지 기능을 만들면서 이미지업로드 기능을 만들어야 했다. 우리 서비스의 특성상 사용자가 이미지 업로드를 빈번하게 하고, 또 이번에 어드민 기능의 게시물을 업로드하는 과정에도 이미지 업로드를 여러 번 할 수 있다. 이처럼 이미지를 업로드할 때 AWS의 S3를 이용해서 다음과 같은 절차로 이미지가 업로드된다. 참고로 aws S3(Amazon Simple Storage Service)는 데이터를 버킷(컨테이너) 내의 객체로 저장하는 객체 스토리지 서비스이다. 여기서 객체는 해당 파일을 설명하는 모든 메타데이터이고, 버킷은 객체에 대한 컨테이너로 생각하면 된다. Amazon S3에 데이터를 저장하려면 (1) 버킷을 생성하고, 버킷 이름 및 AWS 리전을 지정하고, (2)..

프레임워크 Next.js에 대해 한번 정리해 볼 겸 글을 작성하게 되었다. Next.js란 무엇이며 주요 특징과 라우팅 방식에 따른 특징 등을 적어볼 예정이다. 해당 글은 이후 새롭게 학습한 개념 등을 추가로 계속 업데이트할 예정이다. React의 프레임워크 Next.js Next.js는 리액트의 프레임워크이다. 리액트는 자바스크립트 UI 라이브러리로 주로 싱글 페이지 애플리케이션(SPA)을 만들 때 사용한다. 리액트는 자체만으로 많은 장점을 가진 라이브러리지만 라이브러리이기 때문에 제공하는 기본 기능이 적을 수밖에 없다. 리액트의 주요 특징은 기존에 정리해 둔 포스팅에서 확인할 수 있다. 2023.08.04 - [Programming/React] - React를 사용하는 이유 React를 사용하는 이유..

이 글은 React 프로젝트를 하면서 Zustand와 Recoil을 사용하여 상태 관리를 구현했던 경험을 바탕으로 프로젝트에 Zustand를 선택한 이유를 되짚어 보기 위해 작성한 글이다. 과거 Zustand로 상태관리를 구현한 코드를 다시 보면서 해당 라이브러리를 선택한 이유와 장점에 대해 간단하게 글로 정리해 보았다. Zustand를 선택한 이유프로젝트에서 전역 상태관리를 사용한 이유는 사용자 정보와 같이 여러 컴포넌트에서 사용하는 정보를 관리할 때, 상태 변화에 따른 불필요한 렌더링 최소화 하기 위해 사용했다. 프로젝트에 적용한 부분은 사용자 아이디를 여러 컴포넌트에서 필요로 한 경우가 많았고, 로그인 및 로그아웃 상태를 전역으로 관리하는 것이 더 효율적이라고 판단하여 사용자 상태를 전역상태로 설정..

이번에 토이 프로젝트로 채팅 기능을 만들어보게 되면서 웹소켓을 사용해 보았다. 이번 포스팅에서는 웹소켓을 사용하여 메시지를 주고받는 채팅 기능을 구현하는 과정을 기록해 보려 한다. 지금은 연결 후 간단하게만 구현해 놓은 상태이고, 이후 인증 처리 및 메시지 저장하는 기능을 붙일 예정이다. 사용한 기술 스택은 프론트엔드는 React, WebSocket API, 백엔드는 Node.js(express), ws (node.js 웹소켓 라이브러리)를 사용했다. 1. WebSocket웹소켓은 하나의 TCP 접속(connection)에 서버와 클라이언트 간 양방향 통신을 할 수 있게 만든 프로토콜이다. 웹소켓 프로토콜은 HTTP 폴링과 같은 방식에 비해 더 낮은 부하를 사용하여 웹브라우저와 웹서버 간의 통신을 가능하..

프론트엔드는 React, Next.js를 사용하고, 백엔드는 node.js, express, DB는 mysql을 사용하여 연동하는 과정을 기록해 본다. node.js(express)를 공부한 이유는 프론트엔드 토이 프로젝트를 할 때 간단하게나마 백엔드 서버를 구축해서 모두 만들어보고 싶어서이다. 1. 폴더구조프론트엔드와 백엔드를 한 번에 세팅해 본 적이 없어서 폴더구조에 고민이 많았다. 결론은  (1) 한 폴더에 한 번에 만들어서 서버를 한 번만 띄우는 방법과  (2) 백엔드와 프런트엔드 폴더를 각각 두어 서버를 각각 띄우는 방법으로 좁혀졌는데최종 (2) 번을 선택해서 만들었다. 그 이유는 각 폴더 안에서 서버를 띄우는 것이 익숙하면서 개발하기에도 편했고, 에러가 발생했을 때도 빨리 확인할 수 있다고 판..

올해 2월 28일에 런칭한 웹어플리케이션 [리스티웨이브]는 단발성 프로젝트로 끝나지 않고, 지금까지도 꾸준히 회의를 통해 기능을 업데이트하고, 사용자의 피드백을 받아서 사용성을 개선하고 있다. 또한, 최근에는 구글에 영어로 listywave를 검색하면 최상단에 노출되는 점을 발견했다.🤩리스티웨이브가 궁금하다면 👀 프로젝트에 Next.js를 선택하면서 기대했던 점 중에 하나는 바로 Next.js의 Metadata API를 사용해서 향상된 SEO를 적용할 수 있다는 점이었는데 기대만큼 잘 적용된 것 같다. Next.js의 Metadata의 상세 적용 방법이 궁금하다면 아래 이전 포스팅에서 확인할 수 있다. 2023.08.18 - [Programming/Next.js] - SEO 향상을 위한 Metadat..