일단 해보는 기록

이전 좋은 UX를 위한 보이지 않는 에러 다루기 글을 통해 예외 처리에 대해 알아보았다.이번에는 프로젝트를 진행하면서 겪은 관련 트러블 슈팅을 정리해 본다. *참고: 스크럼블은 JSESSION 기반 인증 방식과 리액트 쿼리를 이용해 서버 상태를 관리한다.Case 01. 잡히지 않는 에러에러가 눈에 보이는데 잡히지 않는다. 이게 무슨 말인가 싶을 수도 있는데 말 그대로 에러가 발생할 것이라 예상되고, 발생해야 맞는데 에러바운더리로 전달이 되지 않는다. 문제 상황로그인 후 스쿼드 목록을 조회하면, 서버에서 세션의 유효 여부를 검사한다. 이때, 브라우저 쿠키에서 세션 정보를 임의로 삭제한 뒤 뒤로 가기 후 다시 스쿼드 목록을 조회하면, 캐시 데이터가 `stale` 하면 리페치가 실행되어 `ErrorBounda..

FrontEnd 2024. 12. 22. 17:54

들어가며 스크럼블 프로젝트에서 백엔드 개발자와 처음 협업을 경험했다. 이전에도 에러 핸들링에 대한 갈망이 있었지만, 사용자가 없어 이에 대해 우선순위를 두지 못했다. 하지만 서비스를 개발하고, 운영하며 사용자가 직접 사용하게 된다면 기능이 동작하는 것은 기본이고, 발생할 수 있는 에러에 대비해 사용자의 이탈을 막아야 한다. 많이들 하는 얘기로 로딩 시간이 3초가 넘어갈 때부터 이탈률이 높아진다고 하는데 이 확률을 뚫고 기다려줬는데 에러가 발생해서 다음으로 진행하지 못한다면? 끔찍하다. 마침 스크럼블은 직접 사용하려고 만들게 된 만큼 에러 핸들링에 대해 더 고민해 볼 수 있는 기회가 되었다. 이전에는 에러 발생 지점을 예측하고 피해 다니며 테스트를 했다면, 이번에는 어떻게든 에러를 만나고 싶어서 안달 난 ..

FrontEnd 2024. 12. 16. 12:53

들어가며취미로 개발을 배울 때, 상태라는 개념과 활용도 알까 말까 하며 Redux(툴킷 X)도 겨우 이해하고 있는데 서버 상태라는 개념에 좌절했던 기억이 난다. 완전히 개발자로의 전향을 결심한 뒤에 시작한 모든 프로젝트에는 React Query를 사용했다. 처음에는 데이터 페칭 상태 관리가 너무 편해서 사용했고, 최근 스크럼블 프로젝트에서는 백엔드와 협업하면서 네트워크 호출을 줄이기 위한 고민을 많이 하게 되면서 알차게 활용할 수 있었다. * TanStack Query로 명칭이 변경되었지만, 해당 글에서는 React Query로 사용했다. React Query, 꼭 써야 할까?리액트 쿼리를 프로젝트에 도입하는 주요 목적은 데이터 페칭에 대한 상태 관리와 캐싱으로 생각해볼 수 있다. 서버와의 통신은 언제나..

FrontEnd 2024. 12. 8. 21:41

CORS란?[Cross-Origin Resource Sharing]웹 브라우저가 서버와 다른 도메인에서 리소스를 요청할 때 적용되는 보안 정책이다. 동일 출처 정책이라고 하는데 간단히 말하면 같은 도메인끼리 데이터를 주고받아야 안전하다는 것이다.// HTTP 헤더를 사용하여 허용할 도메인을 추가할 수 있다.Access-Control-Allow-Origin: 도메인CORS 에러라는 단어 자체를 고유 명사처럼 너무 많이 들어서 직접 경험해보고 싶었는데 이번 프로젝트를 진행하면서 원없이 경험할 수 있었다. 클라이언트 vs 서버, 누가 해결할래?프록시를 사용하여 클라이언트에서 CORS 문제를 해결하는 것은 완전한 해결이 아니라 단지 우회일 뿐이다. 서버가 적절히 CORS 설정을 하지 않으면, 클라이언트는 자유롭..

FrontEnd 2024. 12. 2. 23:08

해커톤에 운영진으로 참여하면서 각 팀이 개발을 진행하는 동안 오픈소스 기여를 위한 페어프로그래밍을 경험했다. 그리고 bench 성능 측정, 첫 Merge까지 무사히 마치고 그 과정을 기록해 본다.첫 기여의 시작오픈소스 선택가장 첫 번째로 해야 했던 결정은 어떤 오픈소스에 기여할 것인가였다. 기술은 하루가 다르게 바뀌고 새로운 것들이 마구 쏟아져 나오는 상황에 하나를 콕 집어낸다는 것이 쉽지 않았다. 게다가 뭐든지 관심이 가야 흡수가 빠르다고 생각하기 때문에 생뚱맞은 것을 선택할 수도 없었다. 함께 고민해 보며 라이브러리를 추천받았고, 그것은 이전에 도움을 받았던 toss에서 만들고 있는 라이브러리라는 점에서 좋은 기회라고 생각했다. 그렇게 우리가 선택한 라이브러리는 `toss/es-toolkit` 이 되..

FrontEnd 2024. 9. 8. 15:12

주제 선정 이유Suspense 기능을 직접 구현해 GitHub에 올리면서, 이번에는 CRA나 Vite 같은 빌드 도구 없이 프로젝트 환경을 직접 구성해 보았다. 처음 들었던 React 강의도 웹팩 설정부터 시작했지만, 당시에는 그 개념조차 이해하지 못한 채 무작정 설정 방법만 따라가느라 어려움이 컸던 기억이 있다. 이번에 직접 설정해보며, 관련된 개념들이 생각보다 서로 밀접하게 연결되어 있다는 것과, 내가 부족하게 이해하고 있던 부분들을 깨달았다. 이 글에서는 그런 잘못된 이해를 바로잡고, 각 개념을 이해해 나가는 과정을 순서대로 정리해보려 한다. 프로젝트를 빈 폴더에서 시작한다면?HTML과 CSS로 공부를 시작할 때는 새로운 폴더 생성이 무섭지 않다. 정말 간단히는 index.html 파일 하나로 모든..

FrontEnd 2024. 8. 8. 00:16

개인 프로젝트의 기능 중 일부로 Firebase를 이용한 실시간 통신으로 채팅 기능을 구현했다. 전체적인 기획 중에서는 일부이지만 현재 배포된 버전에서는 채팅 기능을 위주로 마무리된 상태이다. 그 이유는 채팅 구현이 생각보다 쉽지 않았기 때문이다. 그래도 소박하게나마 채팅을 구현할 수 있었던 이유는 Firebase가 제공하는 기능들 덕분이었는데 이번 글에서는 이 편리함이 어떻게 제공될 수 있었는지에 대해 적어보려고 한다.Firebase Realtime DatabaseGoogle에서 제공하는 클라우드 기반 NoSQL 데이터베이스이다. 무료이고 사용법이 간단하여, 이전에 진행했던 투두리스트나 쇼핑몰 프로젝트의 데이터베이스로 주로 사용했었다. 여러 가지 특징이 있지만, 주제와 관련하여 가장 큰 특징은 이름에..

FrontEnd 2024. 7. 14. 13:56

하나의 글에 함께 작성했었으나 내용이 섞여 있는 것 같아 React Query 관련 내용을 분리해서 다시 작성한다.서버로부터 데이터를 받아올 때는 상태 처리가 중요하다. 불러오는 중이거나 또는 성공/실패에 대한 처리를 잘해두는 것은 디버깅에도 용이하지만, 서비스 사용자 경험에도 큰 영향을 미칠 수 있다. 이전 기본 구현에서는 라이브러리를 사용하지 않아 직접 상태를 useState를 이용해 구현했었고, 요즘은 정말 기본이 되어버린 React Query를 이용하여 서버 데이터를 렌더링 하는 방법을 동일한 순서로 소개해본다. * 해당 글에서는 TanStack Query 대신 React Query로 표현한다. 01. React Query + Pagination페이지네이션에서는 라이브러리를 도입해서 번거로웠던 상..

FrontEnd 2024. 7. 10. 23:29