프론트엔드 3

🔥 테오의 스프린트 12기 회고

테오의 스프린트 12기 외부에서 진행하는 스터디를 참여하면서 테오의 스프린트에 참여해 봤는지에 대한 질문을 많이 받았다. 기존에 신청을 했다가 개인 사정으로 인해서 포기했었다는 이야기를 했지만 많은 분들이 매우 좋은 경험이었다며 추천을 해주다 보니 다시 흥미가 생겼다. 특히, 스터디 마지막 날 테오를 만나 이야기를 나누면서 현업에서도 쉽게 하지 못할 경험을 얻을 수 있을 것 같아 도전해보게 되었다. 1일차 ❓ 아이디어 선정 테오의 안내 메일을 받고 보니, 1일에는 각자의 아이디어를 발표하고 투표를 통해서 진행하게 될 프로젝트를 결정하는 날이었다. 나는 스터디를 관리하는 스터잉 이라는 서비스를 발표했는데, 자신이 없기도 했고 급하게 준비하다 보니 인기가 없었다. 50명 정도가 되는 사람들이 아이디어를 작성..

회고록 2022.10.29

React | 공통 API 에러 처리 제작기(feat. React Query)

들어가며 회사 프로젝트에 React Query를 도입시켜보면서 그동안 함부로 건들지 못했던 API 핸들링 관련 로직을 건들어야만 했다. React Query 잘 도입해서 팀원들이 편하게 사용할 수 있으면 좋겠다는 마음이 들어 대대적으로 한번 뜯어봤다. 아래는 기존에 사용하던 API 에러 핸들링을 더 잘해보기 위해서 고민한 내용이다. 고민하게 된 계기 React Query만 잘 도입하면 되겠다 싶었는데, 세션에 대한 처리가 필요했다. 기존에는 세션에 관련된 커스텀 훅을 만들고 여기에 API 응답을 넣어서 처리가 될 수 있도록 했는데 React Query를 도입하면서 동일하게 처리할 수 없었다. React Query에서는 이를 onError 옵션을 통해 처리할 수 있도록 하고 있는데 기존 세션 만료 응답은 ..

React 2022.06.15

React | Axios를 이용하여 파일 다운로드 구현하기.

들어가며 현재, 현장에서 일하는 직원들을 위한 협업툴을 서비스하는 회사에서 개발을 하고 있다. 입사 초기에는 기존 서비스를 리액트로 마이그레이션 하는 작업을 천천히 맡아 진행하고 있었는데, SAAS 부분을 강화하는 프로젝트를 진행하게 되면서 운영 어드민을 새롭게 리드해서 만들게 되었다. 운영 어드민의 경우에 여러가지 핵심 비지니스 로직들이 많아서 부담이 되는 부분도 있었지만, 다양한 데이터를 다뤄보고 비지니스 로직을 구현할 수 있어 즐겁게 진행하는 중이다. 그 중에 결제 관련 기능을 구현하면서 인보이스, 청구서 다운로드 기능을 구현하게 됐다. 기존에 URL을 통해서 쉽게 다운로드를 구현할 수 있구나 싶었는데, 전과는 다른 방법을 이용해야 했기 때문에 기록으로 남겨두려고 한다. API 호출했는데 이상한 문..

React 2022.05.18