본문 바로가기
SMALL

분류 전체보기527

React) 외부 API를 연동하여 뉴스 뷰어 만들기 ② - 카테고리 기능 구현 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 외부 API를 연동하여 뉴스 뷰어 만들기 카테고리 기능 구현하기 총 카테고리를 여섯 개이며, 다음과 같습니다. business (비즈니스) science (과학) entertainment (연예) sports (스포츠) health (건강) technology (기술) 카테고리 선택 UI 만들기 Categories.js import styled from "styled-components"; const categories = [ { name: 'all', text: '전체보기' }, { name:'business', text: '비즈니스' }, { name: 'entertainment'.. 2022. 11. 24.
React) 외부 API를 연동하여 뉴스 뷰어 만들기 ① - API 키 발급, 데이터 연동 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 외부 API를 연동하여 뉴스 뷰어 만들기 newsapi API 키 발급받기 API 키 발급을 위해 https://newsapi.org/register 해당 주소에 접속 → 가입 발급받은 API 키는 추후 API 요청 시 API 주소의 쿼리 파라미터로 넣어 사용합니다. 아래 링크에 접속하면 한국 뉴스를 가져오는 API에 대한 설명서가 있습니다. https://newsapi.org/s/south-korea-news-api 여러 카테고리가 존재하는 것 또한 확인할 수 있고, API를 가져와 사용해보겠습니다. import logo from './logo.svg'; import './App.c.. 2022. 11. 24.
React) 비동기 작업의 이해 - 콜백함수, Promise, async/await, axios 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 비동기 작업의 이해 동기적 처리는 요청이 끝날 때까지 기다리는 동안 중지 상태가 되므로 다른 작업을 할 수 없습니다. 즉, 요청이 끝난 후 다음 작업이 실행되는 것 하지만 비동기 처리는 웹 애플리케이션이 멈추지 않으므로 동시에 여러 요인을 처리할 수 있고, 기다리는 동안 다른 함수를 호출할 수도 있습니다. https://chanychu.tistory.com/281 Javascript) 동기식 / 비동기식 - Timer API, DOM 관련 이벤트 처리, DOM 연속 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 동기.. 2022. 11. 24.
React) 리액트 라우터로 SPA 개발하기 - useNavigate, NavLink, NotFound, Navigate) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 리액트 라우터로 SPA 개발하기 리액트 라우터 부가 기능 useNavigate Link 컴포넌트를 사용하지 않고 다른 페이지로 이동해야하는 상황에 사용하는 Hook Layout.js import { Outlet, useNavigate } from "react-router-dom"; // 헤더 레이아웃 const Layout = () => { const navigate = useNavigate(); const goBack = () => { // 이전 페이지로 이동 navigate(-1); }; const goArticles = () => { // 게시글 목록으로 이동 navigate('.. 2022. 11. 23.
React) 리액트 라우터로 SPA 개발하기 - 중첩된 라우트 (Outlet 컴포넌트, index props) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 리액트 라우터로 SPA 개발하기 중첩된 라우트 Articles.js import { Link } from 'react-router-dom' const Articles = () => { return( 게시글 1 게시글 2 게시글 3 ) } export default Articles; Article.js import { useParams } from "react-router-dom"; const Article = () => { const { id } = useParams(); return ( 게시글 {id} ) } export default Article; useParams Hook을 이.. 2022. 11. 23.
React) 리액트 라우터로 SPA 개발하기 - URL 파라미터와 쿼리스트링 (useParams, useLocation, useSearchParam Hook) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 리액트 라우터로 SPA 개발하기 URL 파라미터와 쿼리스트링 URL 파라미터 예시 : /profile/chany 쿼리 스트링 예시 : /articles?page=1&keyword=react 이처럼 페이지 주소를 정의할 때 유동적인 값을 사용해야할 때가 많습니다. URL 파라미터 주소 경로에 유동적인 값을 넣는 형태 주로 ID 또는 이름을 사용해 특정 데이터를 조회할 때 사용 src/pages/Profile.js import { useParams } from "react-router-dom"; const data = { chany: { name: '박채니', description: '리.. 2022. 11. 23.
LIST

티스토리툴바