Algorithm Cinema

🚀 개요 및 문제상황사용자가 처음 회원가입 후 로그인을 하면, 매달 자신의 첫 가계부에 필요한 예산을 설정합니다. 저는 이 예산을 전역 상태 관리로 하였습니다. -> 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 이외에..

프로그래밍 언어겠죠 당연히자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다.→ 자바스크립트는 기존의 프로그래밍 언어에서 많은 영향을 받았다.기본 문법은 C, Java와 유사하고 Self에서는 프로토타입 기반 상속을, Scheme에서는 일급 함수의 개념을 차용했다.인터프러터(Interpreter) Language인터프리터는 소스코드를 즉시 실행하고 컴파일러는 빠르게 동작하는 머신 코드를 생성하고 최적화한다. 이를 통해 컴파일 단계에서 추가적인 시간이 필요함에도 불구하고 보다 빠른 코드의 실행이 가능하다.인터프러터 언어가 뭔데요→ 쉽게 설명하면 코드를 한줄씩 읽고 즉시 실행하는 방식의 프로그래밍 언어📌 인터프리터 언어의 특징실시간 실행..

개념을 아는게 그렇게도 중요한가?프로그래머가 해야 할 일은 문제를 해결하기 위한 방안을 고안하고 이것을 문법에 맞게 코드로 구현하는 것이다.구현된 코드는 의도한 대로 정확히 동작하여 문제를 해결해야 한다. 이때 자신이 구현한 코드가 컴퓨터 내부에서 어떻게 동작할 것인지 그리고 무엇을 돌려 줄 것인지 예측 가능해야 하며 이것을 동료에게 명확히 설명할 수 있어야 한다.→ 내가 쓴 코드를 남에게 나의 의도대로 정확히 구현하여 줘야하고 이에 대한 정보를 완벽히 알아야 함 ( 아는척하지말아야함) 필자도 그러기 위해 처음부터 다시 한다는 마음으로 자바스크립트 딥다이빙을 시작합니다!  복붙하면 되지않는가?Copy & Paste로 단순히 동작만 하는 코드를 만들고 그것에 만족한다면 여러분이 구현한 코드는 언제 무너져도..