작심삼일

리액트 애플리케이션에서 JWT(JSON Web Token)을 활용하여 Axios를 호출하기 전에 액세스 토큰을 요청하여 사용할 수 있는 유틸리티를 만들어 보았습니다. 이를 통해 애플리케이션에서 보안적인 통신을 구현할 수 있게 되었습니다. JWT Util로 Axios 인터셉터 설정하기 import axios from "axios"; import { getCookie, setCookie } from "./cookieUtil"; import { API_SERVER_HOST } from "../api/todoApi"; // Axios 인스턴스 생성 const jwtAxios = axios.create(); // JWT 갱신 함수 const refreshJWT = async (accessToken, refresh..

리액트에서 axios로 get, post, put, delete 간단한 예제를 알아보도록 하자. 소스 코드 import React, { useEffect, useState } from "react"; import axios from "axios"; function App() { const [users, setUsers] = useState([]); const [name, setName] = useState(""); const [email, setEmail] = useState(""); useEffect(() => { getUsers(); }, []); const getUsers = () => { axios .get("https://api.example.com/users") .then((response) ..

creat-react-app 을 사용하려고 하는데, You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.1). 이라는 에러가 발생했다. 정확하게는 아래와 같은 에러였다. 에러 문구 You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.1). We no longer support global installation of Create React App. Please remove any global installs with one of the following commands: - npm uninstall -g create-..

1. 현상 맥os에서도 React를 사용하기 위해서 터미널에 'npm install -g create-react-app' 를 입력했더니, 아래와 같은 에러가 발생했습니다. 에러 npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap. npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules npm ERR! code EACCES npm ERR! syscall access npm ERR! path /usr/local/lib/node_modules..

useEffect useEffect( 실행함수 , [모니터링 대상] ) 바로 실행함수를 실행하고, 모니터링할 대상의 변수가 변했을 경우 실행함수를 재실행합니다. 아래 예제를 살펴봅시다. 1. useEffect( 실행함수, [] ) 모니터링 대상을 비웠을 경우 한번만 실행합니다. 소스 코드 import React from 'react'; // useEffect(실행함수, [모니터링대상없음]) : 컴포넌트 한번만 실행됨 function Component1(){ const [base, Func] = React.useState(0); React.useEffect(() => { Func(base+1); console.log('컴포넌트 한번 반복'); }, []); return ( {base} ) } 결과 2. u..

React 에서 컴포넌트에서 데이터를 관리할때 사용 하는 개념으로 State와 Props 가 있습니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달 할때, Props를 사용합니다. 컴포넌트에서의 변화에 대한 UI 업데이트 진행하려면, State를 사용합니다. 아래의 예제를 따라하면 이해하기 수월합니다. 1. Props 이전 포스팅에서 상속관계에 대해서 배웠습니다. (이전 포스팅 바로가기 : [React] 컴포넌트 상속(부모, 자식) 구현 방법) parent.js에서 자식 컴포넌트를 호출 할 때, name과 age를 입력해 봅니다. child.js에는 props로 태그에 표시되도록 작성해줍니다. parent.js import ChildCom from './child'; function ParentCom..

React에서는 컴포넌트에서 JSX 문법을 사용할 수 있습니다. {}중괄호를 사용해서 자바스크립트에서 사용한 변수, 메서드 같은 것을 자유롭게 사용 가능합니다. 1. 변수 불러오기 태그 요소안에 변수를 사이에 넣을수 있습니다. 소스 코드 // 1. 변수를 불러온다. function JsxComponent(){ const text = "숫자"; const num = 2; return ( JSX 예시 1 : {text} {num} {/* 중괄호를 통해 text, num 불러오기 */} ) } 결과 2. 메서드 불러오기 함수를 {}중괄호로 불러 올 수도 있습니다. 소스 코드 // 2. function을 불러온다. function JsxComponent1(){ const textfunc = function(){..

컴포넌트도 부모 자식 관계처럼 불러와서 사용할 수 있습니다. 사실 상속관계라고 하기엔 좀 너무 간단합니다. 그냥 export 하는 컴포넌트를 import로 불러와서 사용하는 겁니다. 1. 자식 자식이라는 태그를 리턴하는 child.js 파일을 생성합니다. child.js function ChildComponent(){ return 자식 } export default ChildComponent; export에 default를 사용하는 이유는 단일 함수이기 때문입니다. (함수가 여러개일 경우는 사용하지 않도록 합니다.) 2. 부모 부모 컴포넌트에서는 import로 ./child를 불러옵니다. 단일(default)로 export 했기 때문에, ChildCom 이름으로 바꿔서 사용 가능합니다. ParentCom..

0. 컴포넌트 설명 리액트에서 꽃은 컴포넌트 입니다. 컴포넌트를 통해서 동일한 형태를 여러 곳에서 쉽게 불러올 수 있습니다. 컴포넌트는 딱 두가지만 기억하면 됩니다. 1. 함수로 구성 2. UI 를 Return 결국 HTML를 리턴하는 함수라고 볼 수 있습니다. (HTML 태그에서 class를 className으로 사용하는 차이점은 있습니다. ) 컴포넌트 특징 1) 함수 형태 2) HTML 리턴 1. 간단한 컴포넌트 만들기 1) Component.js 파일 생성 src폴더에 Component.js 라는 파일을 만들어 줍니다. 제 블로그 이름을 태그로 출력하는 컴포넌트를 만들겠습니다. Component.js function exFunc() { const blogName = "shoney"; return( ..

1. 컴포넌트 설명 리액트에서 꽃은 컴포넌트 입니다. 컴포넌트를 통해서 동일한 형태를 여러 곳에서 쉽게 불러올 수 있습니다. 컴포넌트는 딱 두가지만 기억하면 됩니다. 1. 함수로 구성 2. UI 를 Return 결국 HTML를 리턴하는 함수라고 볼 수 있습니다. (HTML 태그에서 class를 className으로 사용하는 차이점은 있습니다. ) 2. React 시작의 App.js 를 살펴보자 우리가 리액트를 사용하기 위해서 폴더에 리액터를 지정하게 되면 App.js 파일을 확인 할 수 있습니다. App.js 도 물론 컴포넌트를 만들어 준 하나의 js 파일입니다. App.js import logo from './logo.svg'; import './App.css'; //함수로 선언 function App..