FrontEnd :-)

FE : React , yarn BE: Express, npm FE 최종 코드 //App.js import React, { useCallback, useEffect, useState } from "react"; import instance from "./API/instance"; import "./App.css"; import CurrencyBox from "./components/CurrencyBox"; import Spinner from "./components/Spinner"; function App() { const [data, setData] = useState([]); const [list, setList] = useState([]); const [date, setDate] = useState..

FE : React , yarn BE: Express, npm ① First commit 우선, 백엔드 서버는 만들어 본 적이 없어서 프론트에서 환율 정보를 받아서 작동하게 했다. 환율 정보 받아오는 API 코드는 해당 홈페이지 document를 참고했다. 1. "https://exchangerate.host/#/"에서 환율 정보 받음 2. 기본 UI import React, { useEffect, useState } from "react"; import "./App.css"; function App() { const [money, setMoney] = useState(1); const [list, setList] = useState([]); const [currency1, setCurrency1] = ..

토큰 유효 시간이 비교적 긴 리프레시 토큰을 활용하여, 시간이 지나도 로그인을 유지할 수 있게 했다. 어떻게 활용했나? 안전한 보안과 사용자 편리성을 위한 로그인 유지를 위해. access 토큰 만료 후 401에러가 떴는데, 이때 refresh 토큰으로 access 토큰을 재발행함으로써 로그인을 유지. 유효 시간을 늘리는 방식이 아닌 토큰 재발행을 활용했다. 1. Refresh Token과 Access Token 1-1. 토큰 토큰 기반 인증 시스템은 클라이언트가 서버에 접속을 하면 서버에서 해당 클라이언트에게 인증되었다는 의미로 '토큰'을 부여한다. 이 토큰은 유일하며 토큰을 발급받은 클라이언트는 또 다시 서버에 요청을 보낼 때 요청 헤더에 토큰을 심어서 보낸다. 그러면 서버에서는 클라이언트로부터 받은..

서버에서 보내주는 토큰을 로컬스토리지가 아닌 세션스토리지에 저장하기로 했다. 왜? => 시간이 지나 액세스 토큰이 만료되었을 때, 로그아웃 상태가 제대로 반영되지 않아서, 탭/브라우저 종료로 리셋되는 세션스토리지를 활용하게 됨. ==> 리프레시 토큰으로 액세스 토큰 재발행하면서 로그인 유지! - 문제 해결 (리프레시 토큰 관련은 다음 글에서 정리) ===> 브라우저 종료로 토큰 등 저장 내용이 없어지는 게 보안상 나은 선택이라 생각하여 세션스토리지에 저장키로. 1. localStorage와 sessionStorage란 무엇인가? 1-1. 웹 스토리지 객체 - 웹 스토리지 객체(web storage object)인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 ..

파일을 수정하면 정상적으로 나왔다가, 새로고침하면 map을 읽을 수 없다는 오류가 뜸!! data가 아직 도착하지 않았는데 map 함수가 실행되었기 때문.....! 옵셔널 체이닝으로 문제 해결! {detailList?.applyList?.map((value) => { (참고) https://ko.javascript.info/optional-chaining 옵셔널 체이닝 '?.' ko.javascript.info https://aosjehdgus.tistory.com/132 [Javascript] 옵셔널 체이닝 (Optional Chaining)을 사용해보자 Optional chaining 이 필요한 이유? 옵셔널 체이닝은 왜 필요한 것일까? 일단 옵셔널 체이닝(optional chaining)?. 을 사..

https://wsss.tistory.com/1507 원 모양의 텍스트 애니메이션 만들기 See the Pen Circular text by Fabio Ottaviani (@supah) on CodePen. 원 모양의 텍스트 애니메이션 만들기 wsss.tistory.com 위 블로그를 참고하여 리액트에서 글씨 구부려서 회전시키기를 구현함. 처음엔 HTML, SCSS 코드를 그대로 활용하고, styled-components에서 animtaion 효과와 @keyframs spin 을 이용했다. 하지만 박스 전체가 움직이고 글씨는 구부려지지 않았는데... HTML 부분이 svg 태그로 시작해 닫히길래 svg 파일을 만든 다음 임포트해봤지만, 제대로 반영되지 않았다. 다시, 페이지에 그대로 넣어봤더니, 오류가 ..

CI/CD 파이프라인 구축 과정 AWS : S3 버킷 생성 , CloudFront 생성, IAM 생성 -> GITHUB ACTIONS : 연결 (yml 파일 생성) AWS S3 : Simple Storage Service. 파일이 담긴 서버의 역할을 대신하는 서비스. 리액트에서 빌드한 파일을 업로드해서 사용! Cloudfront : 정적 또는 동적인 웹사이트 컨텐츠 다양한 데이터를 AWS에서 안전하게 전달 제공하는 CDN (Content Delivery Network) 서비스. 이걸 통해서 SSL* 과 더 빠른 접속속도 (CDN) 를 보장한다. => S3라는 저장소에 올렸다면 이제는 실 사용자들이 우리의 정적인 웹사이트를 사용할 수 있도록 Cloudfront에 배포하는 과정. *SSL(Secure Soc..