1. 들어가며React 개발을 하다보면 custom hooks를 구현해주어야 할 일이 많이 있는데요. 커스텀 훅을 사용하면 개발자가 여러 컴포넌트에서 로직을 재사용할 수 있기 때문에 코드를 더 유지보수하기 쉽고, 모듈화하여 읽기 쉽게 만들 수 있다는 장점이 있습니다. 다음에 나올 10가지의 커스텀 훅은 실제로 많이 사용되는 것들이며, 경우에 따라 유용한 커스텀 훅이 있으니 참고하시면 좋을 것 같습니다. 2. useFetchuseFetch 훅은 일반적으로 API에서 데이터를 가져오는 데 사용될 수 있습니다. loading, error 및 response status를 관리하며 데이터 검색에 필요한 모든 로직들을 캡슐화하고 있습니다. import { useState, useEffect } from 'reac..

1. 들어가며JavaScript에서 에러 핸들링(Error Handling) 작업은 굉장히 유연하지만, 양날의 검과도 같습니다. 사실 에러 핸들링을 전혀 사용하지 않고도 굉장히 규모가 있는 서비스를 구현하는 경우도 많이 있습니다. 임의로 거대한 코드 블록을 try-catch 블록으로 감싸서 모든 잠재적 오류를 한 번에 처리할 수 있는 것이죠. 하지만 그러면 어떻게 될까요? 물론 코드 작성이야 빨라지겠지만, 견고함이 떨어지고 에러의 명확도가 떨어져 디버깅하기도 더 어렵습니다. 그리고 이러한 현상은 코드의 규모가 커지면 커질수록 더 강조되는 문제이죠. 이번 포스팅에서는 TypeScript와 ESLint를 활용하여 보다 명시적인 에러 핸들링을 처리하는 방법에 대해 공유하고자 합니다. 일단, 그 전에 먼저 자바..

만났던 문제해당 프로젝트에서 겪었던 가장 크리티컬 했던 이슈는 강의를 다 들었는지에 대한 기준을 어떻게 잡을 것인가에 대한 것이었습니다초기에 클라이언트 측에서 제시한 요구사항은 플레이어바가 마지막에 도달하는 트리거(onPlayerEnd)를 기반으로 완료 처리를 하자는 의견이 나왔지만, 이는 강의를 실제로 다 듣지 않고 플레이어바를 끝으로 넘기는 인원이 있을 수 있기 때문에 다른 방식을 고안해야 했습니다. 첫 번째로 떠올린 방법은 setInterval() 을 통해 1초마다 상태를 업데이트하다가 영상의 길이와 똑같아 졌을 때 완료 처리를 하는 API를 보내는 방식으로 진행을 하기로 했습니다.실제로 이 방식으로 몇 주간 사용을 했었는데 사용자들의 불만이 몇 가지가 존재하였습니다.“강의를 끝까지 들었는데 체크가..

1. 들어가며Tanstack Query는 React에서 데이터 페칭을 위해 다양한 기능을 제공하는 라이브러리로, 캐싱 및 동기화, 데이터 업데이트 등을 효율적으로 관리할 수 있습니다. Tanstack Query에서 'Query Key'는 핵심 요소 중에 하나로, 데이터를 식별하는 key로 동작하여 데이터의 고유성(unique)을 식별하고 알맞은 캐싱 동작이 이루어지도록 하는 데 중요한 역할을 합니다. 2. Query Key FactoryQuery Key Factory는 Tanstack Query에서 Query Key를 생성하기 위한 함수나 객체 자체를 의미하빈다. 복잡하거나 계층적인 구조를 갖는 Query Key를 관리해야 하는 경우 유용하게 사용될 수 있는데요. Query Key Factory 기법을 ..

1. 들어가며개인적으로 Zustand 라이브러리를 여태껏 사용해보면서 굉장히 만족감을 느끼고 있고 가히 최신 상태 관리 라이브러리 중에 앞서고 있는 라이브러리가 아닐까 생각이 듭니다. 이에 Zustand의 기본적인 사용만 해보는 것이 아니라 조금 더 다양한 기능들을 알아보면서 심화된 기능들도 사용해보고자 글을 작성하게 되었습니다. 2. Zustand의 위엄Zustand는 모던 React 라이브러리로 React 웹 개발 생태계에 상당히 뜨거운 바람을 불어 넣고 있습니다. 그 단순함은 Redux와 비교했을 때 엄청난 차이를 보여주기도 합니다.(안정성 측면은 모르겠지만...) 제가 체감했을 때는 난이도도 난이도지만 코드 양 자체가 별찍기 문제를 C언어로 푸는 것과 파이썬을 푸는 것을 비교하는 것과 비슷하다고 ..

최근 프론트엔드 개발을 진행하면서 Sentry라는 에러 모니터링 도구를 알게되었습니다. 제가 맨 처음 프론트엔드 개발을 했을 때는 에러가 발생하는 경우 그냥 브라우저의 console.error()를 통해 에러 로그를 찍었었는데 이는 사용자 입장에서는 보이지도 않을 뿐더러 개발자 도구를 열어서 본다고 하더라도 의미없는 에러 로그만 보이게 됩니다. 개발자 입장에서도 어떤 에러가 발생했는지 사용자 브라우저에 들어가보지 않는 이상 모르기 때문에 디버깅을 하기 또한 어렵습니다. 그래서 최근에는 사용자 입장에서 유의미한 에러 문구를 보여주기 위해 콘솔을 찍지 않고 toast UI에 에러 메세지를 담아 보여주는 방식으로 사용하고 있습니다. 하지만 그렇다고 해도 그러한 에러를 수집하지 않는 이상 개발을 하는 제 입장에..

해당 문제는 AWS EC2에 올려 운영 배포 중이던 서버가 중간중간 죽는 문제를 겪게 되면서 이를 해결하기 위해 시도했던 방식들을 바탕으로 글을 작성해보았습니다. 아직도 정확한 원인은 파악하지 못해 계속해서 찾아보고 있는 중이며, 관련된 내용에 대해 의심이 가는 부분이 있다면 댓글로 남겨주시면 감사하겠습니다 :) 1. 문제 상황AWS EC2에 클라우드 환경을 구축하여 NestJS, NextJS, MySQL, Nginx를 Docker를 통해 컨테이너로 띄워 서비스를 운영을 하던 와중이었습니다. 실제 사용자를 받아 운영 중이던 서비스였고 사용자를 정식으로 받기 전부터 3명 정도가 미리 사용해보면서 문제가 되는 부분을 수정하는 느낌으로 미리 QA도 진행하여 성공적으로 서비스 런칭을 하게 되었습니다.  서버 스..

본 포스팅은 '카카오 테크 부트캠프'에서 진행한 프로젝트인 '깃트폴리오'를 진행하면서 겪었던 트러블 중 react-pdf과 관련된 내용을 바탕으로 작성하였습니다. 1. 들어가며'깃트폴리오'에서는 사용자의 이력서를 자동으로 생성해주며 AI와 같이 수정해 나가면서 최종적으로 나에게 온전히 맞춰진 이력서를 손쉽게 만들어 주는 것에 초점을 두고 있습니다. '이력서를 만들어준다'라는 것은 AI를 통해 만들어진 이력서의 내용을 단순히 보는 것에 그치는 것이 아니라 해당 이력서를 pdf 등의 문서로 저장하는 것까지 포함해야 했습니다. react 컴포넌트를 pdf로 저장하는 기능을 구현하려는 분들에게 제가 대신 겪었던 문제와 해결 방법을 공유하여 이 글이 조그만 이정표가 되어줬으면 하는 바램으로 글을 작성해보았습니다...