front-end/Code refactoring2 Promise.all을 활용하여 비동기 코드 작성하기 현재 진행 중엔 프로젝트에서 비동기 로직을 개선/수정하는 사항이 생겼다. 그래서 Promise.all을 처음 사용하게 되었는데 아직도 내가 모르는 것이 정말 많다고 느꼈다. 문제 상황 배열을 순환하면서 배열의 값을 parameter로 api를 여러번 호출시켜야 하는 상황 해결 방안 검색 결과 “배열을 순환하면서 배열의 값을 parameter로 넣어 api를 여러번 반복적으로 호출” 하기 위해 Promise.all을 사용하는 것이 좋다고 판단했다 1. 첫번째 시도 fetchAbsolute가 promise를 반환해서 이걸 처리하는데 문제가 있는듯 했다. 즉, fetchAbsolute의 result를 끝까지 기다리도록 만들어야 하는 문제가 생겼다. const fetchData = async (param1, p.. 2024. 3. 5. 불필요한 api 호출을 단축시켜 성능 개선하기 현재 내가 하고 있는 프로젝트는 기능 구현에 초점을 맞추어 진행되다 보니 불필요한 api 호출, 리렌더링이 너무 많이 일어나는 상황이었다. 이것들을 최대한 줄여보고자 코드 개선 작업을 하는 중인데 (제대로 하고 있는건지 모르겠으나...) 가장 최근에 한 작업을 기록해보려고 한다. 수정한 페이지 상황 3개의 게시판 페이지가 있는데 각각의 게시판에 접속하면 api를 호출해서 해당 게시판의 데이터를 가져온다. 그리고 그 데이터는 게시판 리스트, 게시글 조회, 게시글 작성(수정) 페이지에서 모두 사용된다. 수정 전 각 게시판의 리스트, 글조회, 글작성(수정) 페이지에 접속할 때마다 게시판 정보 api를 호출해서 불러온 데이터를 새로운 state에 넣어주고 있었다. 하지만 같은 게시판안의 모든 페이지는 같은 데이.. 2024. 1. 9. 이전 1 다음