Algorithm Cinema

🔹 1. 문제 상황 및 개요 📌 문제: 서버에서 데이터를 가져올 때 UI가 깜빡이는 현상 발생React에서 API 호출을 통해 데이터를 가져올 때, 데이터가 도착하기 전까지 UI가 올바르게 렌더링되지 않을 수 있음예를 들어, goalAmount가 초기에는 null이지만, 서버 응답 후 100000으로 변경될 경우, 화면이 갑자기 변하면서 깜빡이는 현상이 발생할 수 있음이러한 UI 깜빡임(Flash of Unstyled Content, FOUC)은 사용자 경험(UX)을 저하시킬 수 있음 참고로FOUC (깜빡임)이 발생하는 조건1. 비동기 요청의 응답이 지연되었을때 (await 없이 비동기 요청이 실행됬을때) 2. 상태 값이 비동기 응답 이후 변경될때 • useState()로 관리하는 값(goalAmou..

🔹 1. 문제 상황 및 개요📌 문제: 로그인 후 예산 데이터를 확인하기 전에 페이지가 먼저 이동하는 문제사용자가 로그인하면 기존 예산 데이터를 확인한 후 페이지를 이동해야 함하지만 비동기 요청(fetchBudget())이 완료되기 전에 페이지 이동 코드가 실행됨결과적으로, 예산이 있는 경우에도 /goal-setting으로 이동하거나 잘못된 데이터를 표시하는 문제 발생🛠 해결 목표✅ 로그인 성공 후, 기존 예산 데이터를 가져온 후 페이지 이동✅ 비동기 요청(fetchBudget())이 끝날 때까지 goalAmount 값을 기다린 후 페이지 전환✅ UI 깜빡임을 방지하고 자연스러운 화면 전환 제공🔹 2. 비동기 요청과 await의 개념📌 비동기 요청이란?비동기(asynchronous) 요청은 백엔드..

🚀 개요 및 문제상황사용자가 처음 회원가입 후 로그인을 하면, 매달 자신의 첫 가계부에 필요한 예산을 설정합니다. 저는 이 예산을 전역 상태 관리로 하였습니다. -> goalContext.jsx 그러나, 분명 로그인 로직에는 goalAmount가 있으면 -> mainPage.jsx, 없으면 -> goal-setting.jsx로 가게끔 설계를 했는데제 코드의 의도와는 다르게 계속 오류가 났습니다. 심지어, 이미 로그인을 하여 예산 설정을 한 사용자도 다시 goal-setting으로 가는 문제상황이 발생했습니다. -> 서버(백엔드 개발자)는 한 달에 딱 한번 예산을 설정할수 있게 설계를 했는데 이 땜에 두 번 예산 설정을 하면 오류가 나는 최악의 상황이었습니다. 정리하면1. 의도치않은 리다이렉션 불가2. ..

🔹 문제: 개별 페이지마다 인증을 적용하면?React 애플리케이션에서 로그인 후 특정 페이지에만 접근할 수 있도록 보호하는 방법은 여러 가지가 있습니다. 하지만 잘못된 방식으로 구현하면 불필요한 연산이 발생하고, 코드의 유지보수성이 떨어질 수 있습니다.일반적으로 인증을 적용하는 방법 중 하나는 각 페이지마다 개별적으로 인증 로직을 감싸는 것입니다.❌ 개별 페이지마다 인증을 적용하는 방식} />} />} />➡ 문제점:각 페이지마다 AuthenticatedComponent가 실행됨 → 불필요한 연산 증가 ❌모든 페이지에서 인증 로직이 중복됨 → 유지보수 어려움 ❌공통 UI(Navbar, Sidebar)도 불필요하게 리렌더링될 가능성 ❌🔹 해결책: Layout을 감싸 인증을 최적화하기대신, Layout ..

🔹 서론웹 애플리케이션에서 로그인 및 인증 보안 강화는 필수입니다. 저는 프로젝트 의 프론트엔드에서 로그인, 토큰 인증, 사용자 정보 보호, 접근 제어 등의 보안 과정을 설계하면서 보다 안전한 사용자 경험을 제공할 수 있도록 개선했습니다.  이번 포스팅에서는 우리가 적용한 보안 설계 과정에 대해 정리합니다. 1️⃣ JWT 기반 인증 시스템 구축✅ 로그인 시 토큰 발급 및 저장사용자가 로그인하면 JWT(JSON Web Token) 를 발급하여 인증을 관리합니다.accessToken과 refreshToken을 서버에서 응답받아 클라이언트(LocalStorage)에 저장합니다.당연히 이 과정은 백엔드와 소통으로서 정했던 방식입니다.로그인 함수 로직입니다.const handleLogin = async (e) ..

1. 서론: 왜 토큰 인증이 문제였을까? 최근 프로젝트에서 JWT 토큰을 이용한 인증 시스템을 구현하는 과정에서 예상치 못한 문제를 마주하게 되었습니다.로그인 후 localStorage에 accessToken과 refreshToken이 저장되는 것은 확인되었지만,이후 API 요청을 보낼 때 accessToken이 null로 나오는 이상한 현상이 발생했습니다. 이 글에서는 API 인증 과정에서 발생할 수 있는 토큰 문제를 어떤 방식으로 해결했는지 상세히 기록해두고자 합니다.JWT 인증을 구현하는 과정에서 accessToken과 refreshToken을 헷갈리지 않도록 설정하는 방법을 중심으로 설명하겠습니다. 서버에는 잘 토큰 두개가 정상적으로 저장되는가?서버는 명세서대로 정확히 전달되었습니다. 즉, 사용자..

프로젝트 개발 중 생각한 방식!여러 개의 계정을 개시할 때 복잡해지는 경우가 많은데, 특히 같은 브라우저에서 다른 계정을 개시할 때 고유한 정보가 남아있으면 문제가 될 수 있다.특히, 회원가입 후가 되도 기존의 토큰이 공유되면, 새로 개시된 계정이 기존 사용자로 로그인 되는 문제가 발생할 수 있다.현재 발생하는 문제: 회원가입후 여전한 결과현재 회원가입을 한 후, localStorage에 고유되는 토큰이 보이고 있는 경우가 많다.회원가입 성공: {message: '요청에 성공했습니다.'}apiClient.jsx:17 🔑 ACCESS-AUTH-KEY: eyJhbGciOiJIUzI1NiJ9...apiClient.jsx:18 🔄 REFRESH-AUTH-KEY: eyJhbGciOiJIUzI1NiJ9...이 ..

표현식 → 하나의 값!표현식(Expression)은 하나의 값으로 평가(Evaluation)된다.값(리터럴), 변수, 객체의 프로퍼티, 배열의 요소, 함수 호출, 메소드 호출, 피연산자와 연산자의 조합은 모두 표현식이며 하나의 값으로 평가(Evaluation)된다.표현식은 결국 하나의 값이 되기 때문에 다른 표현식의 일부가 되어 조금 더 복잡한 표현식을 구성할 수도 있다.아래의 예에서 5 * 10은 50으로 평가(연산)된다.// 표현식5 // 55 * 10 // 505 * 10 > 10 // true(5 * 10 > 10) && (5 * 10 THEME #4의 문과 사뭇 다른데요자연어에서 문(Statement)이 마침표로 끝나는 하나의 완전한 문장(Sentence)이..

변수변수(Variable)는 값(value)을 저장(할당)하고 그 저장된 값을 참조하기 위해 사용한다. 한번 쓰고 버리는 값이 아닌 유지(캐싱)할 필요가 있는 값은 변수에 담아 사용한다. 또한 변수 이름을 통해 값의 의미를 명확히 할 수 있어 코드의 가독성이 좋아진다.변수는 위치(주소)를 기억하는 저장소이다. 위치란 메모리 상의 주소(address)를 의미한다. 즉, 변수란 메모리 주소(Memory address)에 접근하기 위해 사람이 이해할 수 있는 언어로 지정한 식별자(identifier)이다.변수를 선언할 때 var 키워드를 사용한다. 할당 연산자 =는 변수에 값을 할당하기 위해 사용한다.아래의 예에서 x는 변수로 선언되었고 변수 x에는 정수값 6이 할당되었다.var x; // 변수의 선언x = ..

브라우저의 역할?모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다.브라우저뿐만 아니라 Node.js도 자바스크립트 엔진을 내장하고 있다. 따라서 자바스크립트는 브라우저와 Node.js 환경에서 실행할 수 있다.기본적으로 브라우저에서 동작하는 코드는 Node.js 환경에서도 동작한다.Node.js와의 차이브라우저와 Node.js는 존재 목적이 다르다.브라우저는 HTML, CSS, 자바스크립트를 실행하여 웹 페이지를 화면에 렌더링하는 것이 주된 목적이지만, Node.js는 서버 개발 환경을 제공하는 것이 주된 목적이다.따라서 브라우저와 Node.js 모두 자바스크립트의 코어인 ECMAScript를 실행할 수 있지만 브라우저와 Node.js에서 ECMAScript 이외에..