전체 글27 Promise.all을 활용하여 비동기 코드 작성하기 현재 진행 중엔 프로젝트에서 비동기 로직을 개선/수정하는 사항이 생겼다. 그래서 Promise.all을 처음 사용하게 되었는데 아직도 내가 모르는 것이 정말 많다고 느꼈다. 문제 상황 배열을 순환하면서 배열의 값을 parameter로 api를 여러번 호출시켜야 하는 상황 해결 방안 검색 결과 “배열을 순환하면서 배열의 값을 parameter로 넣어 api를 여러번 반복적으로 호출” 하기 위해 Promise.all을 사용하는 것이 좋다고 판단했다 1. 첫번째 시도 fetchAbsolute가 promise를 반환해서 이걸 처리하는데 문제가 있는듯 했다. 즉, fetchAbsolute의 result를 끝까지 기다리도록 만들어야 하는 문제가 생겼다. const fetchData = async (param1, p.. 2024. 3. 5. 폐쇄망 환경에서 개발 환경 세팅하기 (npm install) 폐쇄망 환경에서 npm install하기 처음 내 생각) node_modules 폴더를 압축해서 폐쇄망 환경에서 받은 후, npm install하면 되지 않을까? → 그런데 검색해보니, node_modules 폴더는 압축해도 너무 무겁고 npm이나 yarn 버전에 따라 내용이 조금씩 다르다고함 → 다른 방법을 찾아보자 해결방법) yarn-offline-mirror 검색하다 보니 yarn-offline-mirror라는게 많이 나왔음. offline mirror는 다운받은 패키지 아카이브를 압축 해제하기 전 상태로 보관하는 저장소를 말한다. 오프라인에서 패키지를 가져오기 위해 먼저, 프로젝트 폴더 안에 offline 디렉토리를 만들고, 미리 패키지를 다운로드 해놓는다. 그리고 폐쇄망 환경에서 offline .. 2024. 1. 30. 불필요한 api 호출을 단축시켜 성능 개선하기 현재 내가 하고 있는 프로젝트는 기능 구현에 초점을 맞추어 진행되다 보니 불필요한 api 호출, 리렌더링이 너무 많이 일어나는 상황이었다. 이것들을 최대한 줄여보고자 코드 개선 작업을 하는 중인데 (제대로 하고 있는건지 모르겠으나...) 가장 최근에 한 작업을 기록해보려고 한다. 수정한 페이지 상황 3개의 게시판 페이지가 있는데 각각의 게시판에 접속하면 api를 호출해서 해당 게시판의 데이터를 가져온다. 그리고 그 데이터는 게시판 리스트, 게시글 조회, 게시글 작성(수정) 페이지에서 모두 사용된다. 수정 전 각 게시판의 리스트, 글조회, 글작성(수정) 페이지에 접속할 때마다 게시판 정보 api를 호출해서 불러온 데이터를 새로운 state에 넣어주고 있었다. 하지만 같은 게시판안의 모든 페이지는 같은 데이.. 2024. 1. 9. React + TypeScript로 만든 TodoList에 recoil 적용하기 Recoil 사용이유 원래는 redux를 사용했었는데 TypeScript로 처음 프로젝트를 하면서 redux를 적용하려니 너무 어려웠음 그래서 redux보다 간단하다는 recoil을 사용해보기로 결정!! (실제로 훨씬 사용하기 수월했다) Recoil 적용 1. 프로젝트에 Recoil 설치하기 npm i recoil 2. RecoilRoot로 App 컴포넌트 감싸주기 (index.tsx) import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { RecoilR.. 2023. 11. 7. 이전 1 2 3 4 ··· 7 다음