리액트20 리액트로 뉴스뷰어 만들어 보기(4) 리액트 라우터로 뉴스 카테고리 페이지 만들어 봅니다. 라우터를 사용하기 위해 리액트-라우터를 설치합니다. >npm i react-router-dom 리액트 라우터를 적용할 때 만들어야 할 페이지는 단 하나입니다. src 디렉터리에 pages라는 디렉터리를 생성하고, 그 안에 NewsPage.js 파일을 다음과 같이 만듭니다. import { useParams } from 'react-router-dom'; import Categories from '../components/Categories'; import NewsList from '../components/NewsList'; const NewsPage = () => { const params = useParams(); // 카테고리가 선택되지 않았으면.. 2023. 6. 6. 리액트로 뉴스뷰어 만들어 보기(3) 뉴스 카테고리는 총 6개 입니다. business(비즈니스) science(과학) entertainment(연예) sports(스포츠) health(건강) technology(과학) API 카테고리는 영어로 되어 있어 카테고리 이름을 한글로 보여준 뒤 클릭시 영어로된 카테고리 값을 사용하도록 구현합니다. import styled from 'styled-components'; const categories = [ { name: 'all', text: '전체보기' }, { name: 'business', text: '비즈니스' }, { name: 'entertainment', text: '연예' }, { name: 'health', text: '건강' }, { name: 'science', text: '과학.. 2023. 6. 6. 리액트로 뉴스뷰어 만들어 보기(2) 뉴스 API 데이터를 연동해보겠습니다. 컴포넌트가 보이는 시점에 API를 요청하면되는데 이때 useEffect를 사용하여 컴포넌트가 렌더링되는 시점에 API를 요청합니다. 여기서 주의해야할 점은 useEffect에 등록하는 함수에 async를 붙이면 안됩니다. useEffect에서 반환해야 한느 값은 뒷정리 함수이기 때문입니다. 따라서 useEffect 내부에서 async/await 를 사용하려면 함수 내부에 async 키워드가 붙은 다른 함수를 만들어 사용합니다. API 요청이 대기 중인지 판별하기 위해 추가로 loading 이라는 상태도 관리하겠습니다. loagding 중일때는 true, 끝나면 false 로 변경합니다. import styled from 'styled-components'; impo.. 2023. 6. 6. 리액트로 뉴스뷰어 만들어 보기(1) 비동기 방식 통신의 대표적인 API를 활용하는 예제로 newsapi 를 이용하여 전체 뉴스와 특정 카테고리 뉴스를 불러와서 보여주는 프로젝트를 만들어 봅니다. 1. newsapi key 발급받기 발급받은 API 키는 API를 요청할 때 API 주소의 쿼리 파라미터로 넣어서 사용하면 됩니다. 한국 뉴스를 가져오는 API 설명서는 아래의 링크에서 확인 가느합니다. https://newsapi.org/s/south-korea-news-api 전체 뉴스 불러오기 (예시) GET https://newsapi.org/v2/top-headlines?country=kr&apiKey=1ea3c5d642534097a4ae5a32303b16d8 특정 카테고리 뉴스 불러오기 (예시) GET https://newsapi.org.. 2023. 6. 5. 리액트(React) axios 로 API 호출하기 axios는 현재 가장 많이 사용하고 있는 자바스크립트 HTTP 클라이언트 입니다. 이 라이브러리의 특징은 HTTP 요청을 Promise 기반으로 처리한다는 점입니다. 리액트 프로젝트를 생성하여 이 라이브러리 설치하고 사용해보도록 하겠습니다. 앞으로 axios 를 이용해 뉴스뷰어를 만들어 볼 예정이므로 프로젝트를 news-viewer로 만들어 보겠습니다. >npx create-react-app news-viewer >cd news-viewer >npm i axios 설치 후 개발 편의를 위해 VS Code에서 파일 자동 불러오기 기능을 활용하고 싶으면 최상위 디렉토리에서 jsconfig.json 파일을 만들어 줍니다. { "compilerOptions": { "target": "ES6" } } App.j.. 2023. 6. 1. 리액트(React) 비동기 작업 - 콜백함수, Promise, async/await 웹 애플리케이션을 만들다 보면 처리할 때 시간이 걸리는 작업이 있습니다. 예를 들어 웹 애플리케이션에서 서버쪽 데이터가 필요할 때는 Ajax 기법을 사용하여 서버의 API를 호출하여 데이터를 수신합니다. 이렇게 API를 호출할 때 네트워크 송수신 과정에서 시간이 걸리기 때문에 비동기 적으로 처리함으로써 웹 애플리케이션이 멈추지 않기 때문에 동시에 여러가지 요청을 처리할 수 있습니다. 1. 콜백함수 자바스크립트에서 함수는 객체입니다. 다른 함수의 파라미터로 전달되는 함수를 콜백함수라고 합니다. 콜백함수는 비동기 실행에서 태스크가 끝나기 전에 함수가 실행되지 않을 것을 보장합니다. 가장 흔하게 볼 수 있는 setTimeout 함수 예제입니다. 즉, 순차적으로 실행되다가 setTimeout 함수를 만나면 정해.. 2023. 5. 29. 이전 1 2 3 4 다음 반응형
