async
-
자바스크립트 :: 비동기처리 & 이벤트 루프Dev/프론트엔드 2021. 7. 30. 11:00
자바스크립트 비동기 처리 자바스크립트 엔진중 가장 많이 사용하는 v8엔진을 기반으로 작성되었습니다. (구글 크롬) 자바스크립트의 비동기 처리는 특정 코드의 연산이 실행되고있지만 결과를 기다리지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다. 자바스크립트 엔진 자바스크립트 동작 방식은 아래이미지로 표현이 됩니다. V8엔진은 크게 두 부분으로 구성됩니다. 메모리 힙 (Memory Heap) : 메모리 할당이 이루어지는 곳 콜 스택 (call Stack) : 코드가 실행되면서 스택 프레임이 쌓이는곳 콜 스택 (Call Stack) 자바스크립트는 콜 스택이 하나이기에 싱글쓰레드 프로그래밍 언어입니다. 따라서 한번에 하나의 일만 처리할수 있습니다. 콜스택에 쌓인 함수나 코드를 위에서 아래로 차례..
-
React :: 14. 외부 API를 연동하여 뉴스 뷰어 만들기Dev/프론트엔드 2021. 7. 23. 11:59
이 글은 김민준(벨로퍼트)님의 - 리액트를 다루는 기술 도서를 참고하여 학습하는 글 입니다. 지금까지 배운 것을 활용하여 카테고리별 최신 뉴스 목록을 보여주는 뉴스 뷰어 프로젝트를 만들어보자. https://newsapi.org/ 에서 제공하는 API를 사용하여 데이터를 받아 오고, 9장에서 배운 styled-components를 활욯하여 프로젝트를 스타일링 해보자. 이번 실습은 다음 흐름으로 진행된다 비동기 작업의 이해 - axios로 API 호출해서 데이터 받아오기 - newsapi API 키 발급받기 - 뉴스 뷰어 UI 만들기 - 데이터 연동하기 - 카테고리 기능 구현하기 - 리액트 라우터 적용하기 14.1 비동기 작업의 이해 웹 애플리케이션을 만들다 보면 처리할 때 시간이 걸리는 작업이 있다. 예..