<aside> 📄 To-do

• 카테고리별로 최신 뉴스 목록을 보여 주는 뉴스 뷰어 제작
• **https://newsapi.org/** 에서 제공하는 API 사용하여 데이터 받아오기
• styled-components 활용하여 프로젝트 스타일링 </aside>

<aside> ☝🏻 INDEX

1. 비동기 작업의 이해
2. axios로 API 호출해서 데이터 받아오기
3. 뉴스 뷰어 만들기
   1. newsapi API 키 발급받기
   2. 뉴스 뷰어 UI 만들기
   3. 데이터 연동하기
   4. 카테고리 기능 구현하기 </aside>

1. 비동기 작업의 이해

동기 : 요청을 보낸 후 해당 요청의 응답을 받은 후에 다음 동작을 실행한다. 따라서 먼저 시작한 작업이 끝날 때까지 다른 작업을 할 수 없다.

비동기 : 요청을 보낸 후 응답과 관계없이 다음 동작을 실행한다. 따라서 응답을 기다리는 과정에서서 다른 함수 호출이 가능하여 동시에 여러가지 작업을 처리할 수 있다.

비동기 처리의 예

• Ajax Web API 요청 : 서버에서 데이터를 받아와야 할 때, 요청을 보내고 서버에서 응답을 할 때까지 대기를 해야 하기 때문에 작업을 비동기적으로 처리한다. ** Ajax(Asynchronous Javascript And Xml) : 자바스크립트를 통해서 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능*
  • Ajax 코드
• 파일 읽기 : 주로 서버쪽에서 파일을 읽어야 하는 상황에는 비동기적으로 처리한다.
• 암호화/복호화 : 암호화/복호화 할 때에도 바로 처리가 되지 않고, 시간이 어느 정도 걸리는 경우가 있기 때문에 비동기적으로 처리한다.