Algorithm Cinema

🔹 서론웹 애플리케이션에서 로그인 및 인증 보안 강화는 필수입니다. 저는 프로젝트 의 프론트엔드에서 로그인, 토큰 인증, 사용자 정보 보호, 접근 제어 등의 보안 과정을 설계하면서 보다 안전한 사용자 경험을 제공할 수 있도록 개선했습니다.  이번 포스팅에서는 우리가 적용한 보안 설계 과정에 대해 정리합니다. 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로 단순히 동작만 하는 코드를 만들고 그것에 만족한다면 여러분이 구현한 코드는 언제 무너져도..

🚀 React에서 useEffect를 활용한 그래프 애니메이션 적용법 https://www.loom.com/share/c80fd4298f6d420e9d182623ded33997?sid=56b1c360-1dd4-427a-8208-ac537fe408a0 recharts를 활용하여 막대 그래프(BarChart)가 부드럽게 위에서 아래로 솟아오르는 효과를 구현합니다.👉 핵심 포인트는 초기 데이터(0 값)를 useState로 설정하고, useEffect를 사용하여 값을 점진적으로 증가시키는 것입니다. 📌 메커니즘와 아이디어 그리고 상황저는 프론트 개발을 하면서 백엔드 개발자 분들의 서버 배포 전에는 늘 더미데이터를 써서 서버 api가 없을때 제가 구현한 동작을 테스트하고는 했습니다. 보여지는 시각적 그래프가..

서론프론트엔드 개발에서 CSS-in-JS 라이브러리는 점점 더 널리 사용되고 있습니다. 그중 Emotion은 유연성과 강력한 기능 덕분에 많은 개발자가 선호하는 도구입니다. 특히 Emotion에서 제공하는 템플릿 문자열과 스타일 재활용 기능은 유지보수를 용이하게 하고 생산성을 높이는 데 중요한 역할을 합니다. 하지만 스타일 컴포넌트를 사용할 때 발생할 수 있는 단점도 고려해야 합니다. 이번 포스팅에서는 Emotion을 활용한 스타일 재활용 방법을 일반적인 방식과 비교하며 템플릿 문자열 활용의 장점과 한계를 알아보겠습니다. 템플릿 문자열 활용Emotion은 스타일을 정의할 때 JavaScript 템플릿 리터럴을 사용합니다. 이 템플릿 리터럴의 특징을 활용해 스타일 재활용을 간단하고 직관적으로 구현할 수 있..