728x90 개발일지/JavaScript13 Promise.all()은 언제 쓰고 왜 쓰나요? - 여러 비동기 요청 한 번에 처리하기 Javascript를 통해 비동기 코드를 처리하는 기본적인 방법으로는 Callback 함수, Promise, async/await 등이 있다. 하지만 다수의 비동기 요청의 실행이 필요한 경우 우리는 Promise.all()을 사용해볼 수 있다. Promise.all()이란? 여러 개의 Promise를 동시에 처리하고, 모든 Promise가 완료되었을 때 그 결과들을 반환하는 Javascript의 메서드이다. Promise.all()은 배열형태의 Promise들을 인자로 받고, 이 Promise들은 병렬로 실행된다. Promise.all()은 모든 Promise들이 해결될 때까지 기다리고, 모든 Promise가 성공적으로 해결되었을때, Promise.all()은 해당 Promise들의 결과를 배열로 반환한.. 2023. 5. 19. jest를 통한 테스트코드 사용 jest란? 단순성에 중점을 둔 javascript 테스트 프레임워크이며, babel, Typescript, node, React, Angular, Vue 등을 사용하는 프로젝트에서 작동한다. 본 포스팅은 React 환경을 기준으로 작성되었다. 1. jest 설치 npm install --save-dev jest @babel/preset-env # or yarn add --dev jest @babel/preset-env node.js 환경에서 import 등의 ES6 문법을 사용하기 위해 @babel/preset-env도 함께 설치해준다. 2. 루트 경로에 babel.config.js 파일 생성 module.exports = { presets: [ "@babel/preset-env", // typescr.. 2023. 3. 18. Dynamic import를 사용해 동적으로 모듈 가져오기 Dynamic import란? import() 표현식으로 사용하며, 표현식은 모듈을 읽고 해당 모듈이 내보내는 것들을 모두 포함하는 객체를 담은 이행된 Promise를 반환한다. 호출은 어디서나 가능하다. Dynamic import를 사용하는 이유 1. 기존 import문은 정적인 방식으로, 정적으로 가져오는 경우 코드 로드 속도가 느려지고, 가져오는 코드가 필요할 가능성이 적거나 없을 가능성이 있다. 2. 정적으로 가져올 때 프로그램의 메모리 사용량이 크게 증가하고 가져오는 코드가 필요할 가능성이 낮다. 3. import문에 동적 매개변수를 사용할 수 없다. ※ 즉, 동적으로 import하는 것은 성능 향상과 필요한 경우에 맞춰 사용하는 것에 용이하다. 사용법 필요한 함수들을 정의하고, 필요한 곳에서 .. 2023. 3. 18. javaScript 스프레드 연산자로 객체 다뤄보기 js에서 객체는 동일한 key값(프로퍼티명)이 있는 경우 뒤의 프로퍼티가 첫 번째 프로퍼티를 덮어쓴다. let a = {x: 1, x: 2} console.log(a) // {x: 2} 이를 이용해 객체를 스프레드 연산자로 가져오면서 수정을 해줄 수 있다. let obj = { name: "john", job: "dev", }; console.log({ ...obj, job: "devdevdevdevdev" }); // => { name: 'john', job: 'devdevdevdevdev' } 혹시라도 객체 안에 객체가 또다시 있는 형식의 데이터에서 수정이 이뤄져야 한다면, 유사하게 아래와 같이 적용해줄 수 있다. let obj = { name: "1223", job: "222222", count: .. 2022. 10. 7. 이전 1 2 3 4 다음 728x90
