비동기3 React ) Recoil 로 Axios 비동기 처리하기 React-News Web App 에 Recoil 적용하기 기존에 react hook 방식과 redux-saga 를 적용해 만든 HackerRank News Web App 을 Recoil 을 이용해 상태를 관리하는 방식으로 다시 제작해봤습니다. HackerRank News OpenAPI 를 활용했습니다. 실행 화면 Code Recoil 초기 설정 먼저 npm i recoil 을 통해 recoil 을 설치합니다. Recoil 은 Redux 와 비교하면 초기설정이랄 것도 없습니다. import { RecoilRoot } from "recoil"; function App() { return ( ... ); } 그냥 RecoillRoot 로 감싸주면 끝입니다. 너무 좋습니다. atom.js import { at.. 2022. 5. 10. node.js ) 비동기 패턴 해결 (3) - async/await 비동기 패턴 해결 - async/await 이전 글에서 Promise 패턴을 이용해 비동기 처리를 동기 처리처럼 처리하는 방법을 다뤘습니다. node.js ) 비동기 패턴 해결 (2) - Promise 비동기 패턴 해결 - Promise 이전 글에서 콜백형태로 비동기 처리하는 방법을 다뤘습니다. 하지만 콜백 형태를 이용해 비동기를 처리하면, 처리는 가능하지만 매우 비효율적으로 코드가 작성됩니 jongik.tistory.com 하지만 async/await 을 이용하면 더 보기 좋은 형태로 비동기를 처리할 수 있습니다. async/await 구조 async 와 await 는 세트로 사용합니다. test.txt async test 1 async test 2 const fs = require('fs'); con.. 2022. 2. 5. node.js ) 비동기 (asynchronous) 패턴 비동기 (asynchronous) 패턴 비동기 방식이란? 메인 스레드가 존재하고 메인 스레드는 실제 코드를 실행합니다. 메인 스레드는 실행시간이 오래 걸린다고 판단하면 내부에 처리하는 다른 스레드로 해당 작업을 넘기게 됩니다. 하지만 메인 스레드에게 작업을 받은 스레드는 해당 작업이 끝나면 콜백함수를 메인 스레드에게 돌려줍니다. 메인 스레드는 전달받은 콜백함수를 실행하지만 이 콜백함수를 실행할 때는 이미 다른 코드가 처리된 이후입니다. 그리고 또 다른 작업을 스레드에게 전달하게 됩니다. 예시 : fs 를 이용해 파일을 읽고 결과를 출력하는 코드 index.js const fs = require('fs'); fs.readFile('./test.txt', (err, data) => { console.log(.. 2022. 2. 5. 이전 1 다음 반응형
