Kwangkki

모바일 웹에서 프로젝트를 만들며 api 요청 시간이 조금 소요되는 api가 있습니다. 문제는 이 api 요청 중에 다른 페이지로 이동하면 요청이 pending 상태에 계속 머물게 된다는 것인데요. 아래 사진으로 설명해보겠습니다. API 요청 pending[홈]에서 요청했던 plcProduction이라는 api 요청이 다른 페이지로 이동해도 여전히 pending입니다. 이것이 왜 문제가 되냐하면, 유저가 페이지를 빠르게 여러번 이동하면 pending 요청이 쌓이게됩니다.만약 빠르게 4번을 왔다 갔다 한다면 4개의 pending이 쌓이게 되겠죠? 이를 해결하기 위해 찾아보니 axios에서는 CancelToken을 제공한다는 것을 알았습니다. axios CancelToken 적용기존 api 요청 코드..

최근 회사에서 데이터 가공(?)에 시간을 많이 쓰고 있다. 배열로 받는 데이터를 객체로 만들어 그래프에 쓰기도 하고, 배열 -> 객체 -> 배열 -> 객체 4번을 타고 들어가서 쓰는 데이터도 있다. 처음에는 무지성으로 썼다만 요즘은 sql 쿼리문이나 api에서 로직을 수정해서 원하는 데이터로 만들기도 한다. 그렇게 다듬어진 데이터로 실시간 그래프를 구현하는데 1분에 한 번, 빠르면 5초에 한 번씩 데이터를 호출한다. 최근 이를 구현하면서 다양한 방법이 있어 시도해 보고 기록해 본다. api 반복 호출 setInterval 처음에 사용한 방법은 useEffect에서 setInterval을 사용하는 방법이다. setinterval을 useEffect에서 호출하는 것 자체가 좋은 코드는 아니었다. const ..

최근 내 개발 지식뿐만 아니라 디자인 지식까지 점프한 경험에 대해 공유하고자 한다. 웹 개발 팀 프로젝트 최근 거의 한 달 동안 진행한 웹사이트 개발 프로젝트에 참여했다. 디자이너가 없어 이제 막 개발 공부를 시작한 프론트 개발자 2명이서 머리를 싸맸다. 디자인을 어떻게 하면 좋을까 여러 가지 의견을 나누면서 우리는 얼마나 어떻게 예쁘게 만들까를 뒤로하고 한 가지 키워드에 대해 먼저 생각해 봤다. 재사용성 높은 디자인 예전에 유튜브 EO 채널에서 토스 디자인 시스템에 대한 영상을 본 적이 있는데, 비슷한 디자인과 패턴을 묶어 시스템화함으로 재사용성과 생산성을 높였다는 이야기였다. 퍽 감명적이었는지 한동안 토스 디자인 관련 블로그를 찾아 헤맸었던 기억이다. 그래서 이번 프로젝트에는 재사용성 높은 디자인을 ..

React의 큰 장점은 Hooks의 존재가 아닐까 싶다. 단순한 버튼 클릭 함수라도 두 번 이상 사용한다면 custom hook으로 만들어 재사용성을 높일 수 있다. hook? react에서 hook은 함수형 컴포넌트를 클래스 컴포넌트와 같은 기능으로 사용할 수 있도록 만들어 준다. 클래스는 하나를 만들어두면 복제해서 마구마구 쓸 수 있으니까 react에서 제공하는 hook 리액트는 자체적으로 만든 내장 hook이 존재한다. 그중 자주 사용하는 5개를 간단하게 설명하면 아래와 같다. useState 아마 리액트에서 가장 많이 사용하는 hook 일지도 모른다. 처음 배울 때 단순히 리액트에서 사용하는 변수라고 생각하니까 이해가 쉬웠다. 값을 추가하고 변경할 때 사용한다. useEffect 리액트의 생명주기..