반응형 Create / Update 시 응답에 변경된 리소스를 포함해야 할까? 최근 회사에서 리액트를 사용해 어드민 서비스를 개발하면서, POST 요청의 처리 방식에 대해 생각하게 되었다. '왜 POST 요청 후에 변경된 데이터가 응답으로 오지 않을까?' 라는 의문이 든 것이다. 현재의 방식에서, 서버는 HTTP 상태 코드와 간단한 결과 메시지만을 응답한다. 예를 들어, "처리되었습니다."와 같은 메시지다. 그런데 만약 API 응답에 변경된 리소스가 포함되어 온다면 그 데이터를 즉시 사용할 수 있어서, 클라이언트는 추가적인 GET 요청을 보낼 필요가 없어진다. 또한, 별도의 데이터 리패치(refetch) 함수를 만들 필요도 없다. 그래서 좀 더 효율적이고, 깔끔하게 구현할 수 있을거라 생각했다. 다른 개발자들의 생각은 어떨까? 그래서 궁금했다. 다른 개발자들은 어떻게 구현하고 있을.. 2023. 12. 17. 타입스크립트 사용기 처음에는 무작정 사용해봤다. 그러다 실무에서 사용하기 시작하면서 정말 많은 혼란을 겪었다. 타입때문에 에러가 날 때면 짜증도 났다. 빨간 줄이 더 싫어지기 전에 VS Code의 자동완성 기능을 포기하고 타입을 any로 도배를 하다가 결국 사달이 난 것이다. 프로젝트의 복잡성이 증가하면서 매우 많은 컴포넌트가 생겨났고, 런타임에서 에러가 나면 디버깅 하기가 굉장히 힘들었다. 특히 여러 곳에서 쓰이는 프로퍼티 값을 내가 어느 데이터 타입으로 저장을 했는지 기억하기가 힘들었다. 이제는 컴포넌트든 커스텀 훅이든, 유틸 함수든 필요한 곳에 모두 무조건 타입을 제대로 정의해 준다. 이 작은 정성이 코드 레벨에서 에러를 잡아주고, 닷(.)만 입력해도 props 목록을 알려주고, 함수가 어떤 매개변수를 받고, 타입/값.. 2023. 11. 10. [React] API 응답 시간이 너무 길다면 어떻게 해야 할까? 만약 API 응답 시간이 너무 오래 걸린다면 어떻게 처리해야 할까? 사용자가 버튼을 클릭 했는데 아무 반응이 없거나, 무한 로딩만 표시되고 있다면 아마 몇 초도 안돼서 이탈할 것 같다. 이 글에서 React를 사용한 여러 예시를 통해 어떤 방법이 더 좋을지 알아보자. AbortController로 요청 중단하기 응답 시간이 너무 오래 걸리면 웹 요청을 중단하는 것은 어떨까? "불러오는 중"과 같은 로딩 화면만 보여주는 것이 아닌 시간을 제한하여 사용자를 마냥 기다리게 하지 않고, 이렇게 함으로써 네트워크 트래픽도 줄일 수 있다. AbortController는 Fetch API와 같은 웹 요청을 중단 할 수 있게 만들어준다. AbortController() 생성자를 통해 객체를 생성한 다음, 해당 객체의 .. 2023. 11. 4. 너디너리 데모데이 후기 올해 12월은 내가 회사를 다닌 지 2년이 되는 달이다. 이제 곧 3년 차가 되는데, 인사이트를 얻고자 오랜만에 IT 관련 행사를 다녀왔다. 대부분의 컨퍼런스 발표들이 그렇듯, 유튜브에 영상이 업로드 되겠지만 막상 올라오면 잘 안보게 되는 것도 있고 시간을 정하여 온전히 발표에만 집중하고 싶었다. 뤼튼 PO님과의 대화 내가 신청한 발표 세션은 후반 세션이었기 때문에 점심 먹고 여유롭게 갔는데도 시간이 남았었다. 1층에는 IT 기업 부스들이 쭉 늘어나 있었다. 초반에는 긴장을 해서 그런지 관심있는 곳보다는 적극적인 곳에 먼저 가게 되더라. 조금씩 긴장이 풀리고, 기업 부스들을 구경하다 뤼튼이라는 곳에 들렀다. 지금은 ChatGPT를 유료로 사용하고 있지만 뤼튼은 출시 초기에 무료에다가, 이미지 생성까지 해.. 2023. 9. 10. 회사 웹 서비스 개선기: URL 인코딩 최근 문제를 재미있게 해결한 경험이 있다. 그렇게 큰 문제는 아니었지만, 나름 뿌듯했던 순간들이 있어서 글을 쓰게 되었다. 이번 글에서는 해당 문제의 해결 과정과 URL 인코딩에 대한 간략한 설명을 다룬다. 해시(#) 이후 문자들이 잘려요 회사에서는 이미지 파일들을 업로드 하고 관리하기 위한 회사 전용 웹 서비스가 있다. 예를 들어, 행사나 새로운 서비스를 홍보하는 이미지를 업로드하면 회사 홈페이지나 어드민 페이지의 공지사항 모달창에 표시된다. 업로드를 할 때는 이미지의 노출 기간과 링크를 입력할 수 있다. 문제는 이미지 링크에 해시(#) 문자를 포함하면 '#'부터 이후 문자들까지 전부 잘려서 업로드가 된다는 것이었다. 이미지를 클릭하면 링크 페이지로 이동 후, 해당 위치로 스크롤이 되지 않는 것이다. .. 2023. 8. 15. 프로젝트 진행 중 내가 한 후회들 회사에서 프로젝트를 하다보면 이런저런 후회들을 하게된다. 이 글은 그 후회들을 공유하며, 나아가 내가 겪은 것들을 회고하고 개선하고자 하는 내용을 담았다. 올해 3월에 시작한 이번 프로젝트는 나에게 의미가 크다. 그 과정에서 내가 한 (약간은 바보 같은) 후회들을 여러분과 공유하려 한다. 그리고 이를 통해 내가 겪었던 것들을 간접적으로 경험하여, 조금이라도 도움이 될 수 있기를 바란다. 1. 기획서를 꼼꼼하게 읽지 않았다 2년 차 개발자이고 여러 프로젝트를 해왔지만, 사실 이번 프로젝트 때 기획서를 처음 받아보았다. 그리고 나는 그 당시에 기획서를 볼 일이 거의 없을 거라 생각했다. 디자이너님이 디테일한 내용은 피그마에 댓글로 남겨 주시기도 했고, '막힐 때마다 기획서를 보면 충분히 구현이 가능할 것 같.. 2023. 8. 6. React 페이지네이션 UI 직접 만들기 페이지네이션(pagination)은 큰 데이터를 사용자가 보기 편하도록 작은 부분으로 나누어 여러 페이지로 표시하는 것을 뜻한다. 사용자는 이 페이지들을 순차적으로 또는 선택적으로 볼 수 있다. 요즘은 비즈니스나 UX적인 측면에서 무한 스크롤이 더 많이 쓰이는 것 같지만, 사용자가 특정 정보를 찾기 위해 몇 페이지를 건너뛰어야 하거나, 어드민의 데이터 테이블 UI와 같이 내용이 많고 구조화된 정보를 제공해야 하는 경우에는 페이지네이션이 더 적합할 수 있다. 페이지네이션 핵심 로직 이해하기 페이지네이션의 일반적인 예를 들자면, 사용자는 페이지마다 보여지는 데이터의 양을 선택할 수 있고, 원하는 페이지 번호를 클릭함으로써 해당 페이지로 즉시 이동할 수 있다. 또한, 앞뒤 페이지로 쉽게 이동할 수 있는 네비게.. 2023. 8. 2. 이전 1 2 3 4 5 ··· 27 다음 반응형
