리액트(React)26 리액트로 뉴스뷰어 만들어 보기(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. 리액트 라우터(React Router) 부가기능 활용 이전 블로그의 리액트 라우터 사용법 예제를 이어서 부가기능에 대해 설명하고자 합니다. 1. useNavigate Link 컴포넌트를 사용하지 않고 다른 페이지로 이동해야 하는 상황에서 사용하는 Hook 입니다. Layout 컴포넌트를 아래와 같이 수정합니다. import { Outlet, useNavigate } from 'react-router-dom'; const Layout = () => { const navigate = useNavigate(); const goBack = () => { // 이전 페이지로 이동 navigate(-1); }; const goArticles = () => { // articles 경로로 이동 navigate('/articles'); }; return ( 뒤로가기 게시.. 2023. 5. 29. 리액트 라우터(React Router) 사용법(4) 1. 라우터에서 쿼리스트링을 사용하는 방법 우선 쿼리스트링을 화면에 표출해 봅니다. import { useLocation } from 'react-router-dom'; const About = () => { const location = useLocation(); return ( 소개 리액트 라우터를 사용해 보는 프로젝트입니다. 쿼리스트링: {location.search} ); }; export default About; useLocation 이라는 Hook을 사용합니다. 이 훅은 location이라는 객체를 반환하는데 사용자가 보고 있는 페이지 정보를 가지고 있습니다. pathname : 현재 주소의 경로 (쿼리스트링 제외) search : 맨 앞의 ? 문자를 포함한 쿼리스트링 값 hash : 주소의.. 2023. 5. 29. 리액트 라우터(React Router) 사용법(3) 페이지 주소를 설정할 때 유동적인 값을 사용할 때가 많습니다.일반적으로 다음과 같이 두가지 형태로 사용합니다.URL 파라미터 : 주소의 경로에 유동적인 값을 넣는 형태주로 ID 또는 이름을 사용하여 특정 데이터를 조회할 때 사용쿼리스트링 : 주소의 뒷부분에 "?" 문자열 이후에 key=value 로 값을 정의하며 "&" 로 구분하는 형태키워드 검색, 페이지네이션, 정렬방식 등 데이터 조회에 필요한 옵션을 전달할 때 사용1. URL 파리미터 이를 사용하기 위해 새로운 페이지 컴포넌트로 Profile 컴포넌트를 만듭니다. URL 파라미터는 useParams 라는 Hook을 사용하여 객체 형태로 조회할 수 있습니다. URL 파미미터의 이름은 라우트 설정을 할 때 Route 컴포넌트의 path .. 2023. 5. 28. 이전 1 2 3 4 5 다음 반응형
