프론트엔드/React

[프론트엔드] REACT 뉴스 뷰어 만들기 [2]

이전 글 2022.03.22 - [프론트엔드/React] - [프론트앤드] REACT 뉴스 뷰어 만들기 [1] 1. axios를 사용한 API 테스트 axios 라이브러리를 사용하여 먼저 API를 GET 으로 가져올 수 있는지 테스트 해보자. - App.js import React, { useState } from 'react'; import axios from 'axios'; const App = () => { // API를 넘겨받을 state 선언 const [data, setData ] = useState(null); const onClick = async () => { // axios 라이브러리로 apic call try { const response = await axios.get( 'https..

[프론트엔드] REACT 뉴스 뷰어 만들기 [1]

1. 사전 준비 - git 저장소 생성 먼저 뉴스뷰어 개발을 위한 git 저장소를 추가한다. Add a README file : README 파일 기본생성 Add gitignore : node 모듈 commit 제외 - git Clone (Mac 기준) clone 폴더에서 티미널 열기 생성한 저장소 git 주소 clone 2. react 프로젝트 설치 아래의 3가지 명령어를 vscode를 열어서 실행한다. 뉴스 뷰어 프로젝트 설치. cd 명령어로 생성한 프로젝트 경로로 이동 외부 API 연동을 위한 axios 라이브러리 설치 $ yarn create react-app news-viewer $ cd news-viewer $ yarn add axios 3. react 프로젝트 설정 - prettierrc 추..

[프론트엔드] react router v6 NavLink

이전 글 2022.03.21 - [분류 전체보기] - [프론트앤드] react router v6 NavLink 1. NavLink 사용 예제 - Profiles.js v6 버전에서 NavLink 사용 방법은 동일하나 activeStyle, activeClassName 속성이 삭제되었다. 따라서 아래와 같이 NavLink 태그안에 isActive를 선언하여 활성화시키고 싶은 스타일에 css를 적용 할 수 있다. (클릭/활성화 시 active class 변경됨) import React from "react"; import { NavLink, Route, Routes } from 'react-router-dom' import Profile from "./Profile"; const Profiles = () =..

[프론트엔드] react router v6 Switch

이전 글 2022.03.21 - [프론트엔드/React] - [프론트엔드] react router v6 withRouter 1. Switch 사용 예제 - App.js v6 버전에서 Switch 사용하려면 Routes로 라우팅 경로만 설정해주면 된다. Routes를 아래처럼 분리한 후 전체경로를 기준으로 보여줄 내용을 html 태그로 설정한다. 아래왁 같이 작성함으로써 Swtch 기능을 사용한 예외처리가 동일하게 가능하다. import React from 'react'; import {Link, Route, Routes} from 'react-router-dom'; import About from './About'; import Home from './Home'; import Profiles from '..