작심삼일

리액트 애플리케이션에서 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-..

Promise를 사용하는 이유 및 방법에 대해서 알아보기 위해 아래 예제를 따라 하면 된다. promise를 사용하지 않았을 때를 먼저 확인해보고 필요성을 알아가 보자. 1. Promise 사용하지 않는 방법 소스 코드 function isPositive(number, resolve, reject) { setTimeout(() => { if (typeof number === "number") { //성공 resolve resolve(number >= 0 ? "양수" : "음수"); } else { //실패 reject reject("주어진 값이 숫자형 값이 아닙니다."); } }, 2000); } isPositive( "10", (res) => { console.log("성공적으로 수행됨 : ", res..

동기적으로 작업을 하면 하나의 task가 오랬동안 시간이 소요되면, 다른 작업들이 진행 못하고 대기하게 된다. 모든 작업들을 동시에 작업하기 위해서는 멀티 스레드로 작업하면 소요 시간을 줄일 수 있지만 자바스크립트에서는 쓰레들가 단일 쓰레드 이다. 그래서 비동기 작업이 필요하다. 동기 방식은 다른 task를 진행하지 못하게 블로킹하고 있기 때문에 비동기 작업을 하면 하나의 작업을 할때 다른 작업을 블로킹 하지 않는다. 1. 동기 방식 지금까지 소스코드를 짜던 방식은 동기 방식으로 작성했었다. 소스 코드 function taskA() { console.log("A 작업 끝"); } taskA(); console.log("코드 끝"); 결과 A 작업 끝 코드 끝 "A 작업 끝"로그가 찍히고 난 뒤에 "코드 ..

1. 객체에서 Spread 연산자 사용 소스 코드 const cookie = { base: "cookie", madeIn: "Korea" }; const chocoCookie = { ...cookie, toping: "choco" }; console.log(chocoCookie); 결과 객체를 생성할 때 자주 반복되는 프로퍼티를 직접 입력하지 않고, ...객체명 을 사용해서 손쉽게 복제?할 수 있다. 2. 배열에서 Spread 연산자 사용 소스 코드 const arrA = ["가", "나"]; const arrB = ["다", "라"]; const arrC = [...arrA, ...arrB]; console.log(arrC); 결과 배열에서도 배열명 앞에 ...을 입력해서 사용할 수 있다.

자바스크립트에서 사용되는 Truthy, Falsy를 알아보고 어떤 상황에서 사용되는지 예제를 통해 확인해보자. 먼저, 예제를 따라 하기 전에 메서드 하나를 만든다. 소스 코드 function trueCheck(input) { if (input) { console.log("TRUE"); } else { console.log("FALSE"); } } 인풋에 무언가를 넣었을때, True인지 False인지 구분하기 위한 메서드다. 1. True로 판정되는 Truthy 소스 코드 let truthy1 = "string"; let truthy2 = Infinity; let truthy3 = "0"; let truthy4 = 13; let truthy5 = []; trueCheck(truthy1); trueCheck..

자바스크립트에서의 배열 내장함수 예제를 통해 배워보도록 하자. 배열 내장함수 예제 목차 1. foreach 2. map : 새로운 배열에 옮기는 방법 3. includes, indexOf : 숫자 배열에 숫자 찾는 방법 4. findIndex, find : 객체 배열에 객체 찾는 방법 5. filter : 객체 배열에 필요한 내용 필터하기 6. slice : 배열 자르기 7. concat : 배열 합치기 8. sort 사용방법 9. join 1. foreach 소스 코드 const arr = [1, 2, 3, 4]; for (let i = 0; i console.log(elm * 2)); // 콜백함수 arr.forEach(function (elm) { console.log(elm * 2); }); 결과..

자바스크립트에서도 객체가 존재한다. 객체를 어떻게 생성하고 사용하는지 알아보도록 하자. 1. 객체 생성 소스 코드 // 생성자 방식 let personA = new Object(); // 리터럴 방식 let personB = {}; 생성 방식은 생성자 방식, 리터럴 방식 2가지가 있다. 리터럴 방식이 더 쉽고 많이 사용된다. 2. 객체의 Property 객체에서 변수로 사용되는 것을 Property라고 한다. Property를 만드는 법과 출력하는 방법을 알아보자. print 결과 let personD = { name: "JY", age: 28 }; personD라는 객체를 생성했다. 해당 객체의 name, age에 관한 property까지 작성했다. property를 출력하는 방법은 다양하다. 소스 코..

혹시 함수에 대해서 명확하게 모른다면, 함수 부분을 먼저 보고 오자. https://shoney.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%95%A8%EC%88%98-%EC%84%A0%EC%96%B8-%EB%AC%B4%EB%AA%85-%ED%95%A8%EC%88%98-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98-%EC%82%AC%EC%9A%A9%EB%B2%95-%EB%B0%8F-%EA%B8%B0%EB%B3%B8%EC%98%88%EC%A0%9C [자바스크립트] 함수 선언, 무명 함수, 화살표 함수 사용법 및 기본예제 함수 사용 이유 프로그래밍을 하다보면 중복되는 기능들을 묶..