HA젠옹의 프리랜서의 일상

이번에 지인한테 소개 받은 라이브러리 중 JWT 관련하여 유용한 패키지 라이브러리가 있다고 하여 알아보았습니다. 사용자 인증과 세션 관리를 위해 JSON Web Tokens(JWT)가 널리 사용되고 있습니다. JWT는 사용자의 인증 정보를 안전하게 전송하고 저장할 수 있는 방법을 제공합니다. 그러나 JWT는 Base64로 인코딩되어 있어, 그 내용을 이해하려면 디코딩 과정이 필요합니다. 이때 유용한 라이브러리가 바로 jwt-decode입니다. 이번 글에서는 jwt-decode 라이브러리에 대해 자세히 알아보고, 실제로 어떻게 사용하는지, 그리고 그 장단점에 대해 살펴보겠습니다.jwt-decode 라이브러리란 무엇인가?jwt-decode는 JWT를 디코딩하여 그 안에 담긴 정보를 쉽게 추출할 수 있게 해주..

최근 웹 개발에서 보안이 중요한 이슈로 대두되면서, 많은 개발자들이 JWT(Json Web Token)를 활용하여 클라이언트와 서버 간의 안전한 인증을 구현하고 있습니다. 그런데 여기서 흥미로운 점은, 개발자들이 JWT 토큰을 클라이언트에 전달할 때 responsebody가 아닌 responseheader를 통해 전달한다는 것입니다. 왜 그런 걸까요?1. 보안 향상CSRF 보호JWT를 responsebody로 전달하면, 클라이언트는 이를 로컬 스토리지나 세션 스토리지에 저장하게 됩니다. 그러나 이러한 저장 방식은 CSRF(Cross-Site Request Forgery) 공격에 취약할 수 있습니다. JWT를 responseheader로 전달하면 클라이언트는 이를 쿠키에 저장할 수 있고, 쿠키에 SameS..

Ajax를 활용하여 데이터를 가져올 때 흔히 사용하는 방법은 res를 호출하여 responseBody 값을 가져와서 사용을 합니다.하지만 보안을 위해 jwt 토큰 경우 responseBody가 아닌 responseHeader에 담아서 전달하는 경우가 많은데 저도 주 포지션이 백엔드가 아닌 프론트 개발자라 언제나 백엔드분께서 전달해주는 방법에 따라 작업을 진행하여 Header로 전달받은 적은 이번이 처음이라 해당 글을 작성하게 되었네요. AJAX 응답 이해하기비동기 JavaScript 및 XML의 약어인 AJAX를 사용하면 웹 페이지가 전체 페이지를 다시 로드하지 않고도 서버와 통신할 수 있습니다. 이 기능은 원활하고 역동적인 사용자 경험을 만드는 데 기초가 될 수 있죠. 그러나 실제 문제는 서버에서 반환..

웹 디자인의 역동적인 세계에서 부드러운 스크롤링은 단순한 기능 그 이상입니다. 이는 사용자 경험을 향상시키는 대화형 미학의 필수적인 부분입니다. 스크롤 애니메이션은 사용자에게 콘텐츠를 쉽고 스타일 있게 안내하는데 도움이 됩니다. 스크롤 애니메이션의 개념, jQuery를 사용하여 효과적으로 구현하는 방법, 성능과 접근성을 최적화하기 위한 몇 가지 모범 사례에 대해 이야기를 해보겠습니다. 스크롤 애니메이션이 중요한 이유스크롤 애니메이션은 웹사이트 탐색을 직관적일 뿐만 아니라 매력적으로 만듭니다. 웹페이지 섹션 간 전환에 애니메이션을 적용하면 무언가 변경되고 있다는 시각적 신호를 제공하여 사용자의 관심을 유지하고 콘텐츠 간 갑작스러운 이동을 줄이는 데 도움이 될 수 있습니다. 스크롤 애니메이션의 기본스크롤 애..

서론 시작 날짜와 종료 날짜를 입력 받아 해당 범위 내의 모든 날짜 및 일자를 구할려고 합니다. 예를 들어 2024-04-12 ~ 2024-04-16의 값을 넣을 경우 12,13,14,15,16의 일자와 추가적으로 해당 값에 이벤트를 위해 필요한 2024-04-12,2024-04-13... 를 구하는 방식입니다. 해당 기능의 필요성은 예약이나 스케줄러 같은 달력 및 날짜를 활용할 때 많이 사용될 수 있기 때문에 알아보도록 하겠습니다. 함수구현 우선 작업 방식은 jQuery를 활용하여 진행이 되었으며, 기본적으로 jQuery는 세팅이 되어 있다는 과정하에 진행하겠습니다. function createDateArrayWithJQuery(startDateStr, endDateStr) { var startDate..

The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later. 이 에러 메시지는 "서버가 일시적으로 요청을 처리할 수 없습니다. 유지보수 중이거나 용량 문제로 인해 발생합니다. 나중에 다시 시도해주세요."라는 의미입니다. 주로 웹 서비스나 애플리케이션을 이용하려고 할 때 서버 측에서 발생하는 문제로 인해 사용자의 요청을 처리할 수 없을 때 나타납니다. 주로 다음과 같은 상황에서 발생할 수 있습니다 유지보수 중: 서버나 웹 사이트가 정기적으로 또는 비정기적으로 시스템 업데이트, 보안 패치 적용, 서버 환경 개선 등의 유지보수 작업을 진행..

서론 날짜 관련 작업은 웹 개발에서 흔히 마주치는 과제 중 하나입니다. 특히, 여행 계획 앱이나 이벤트 스케줄링 툴 등에서 시작 날짜와 종료 날짜 사이의 기간을 계산해야 할 때가 많습니다. 오늘은 JavaScript를 사용하여 날짜 간 차이를 계산하고, 그 결과를 당일 또는 X박 Y일과 같은 형식으로 표현하는 방법에 대해 알아보겠습니다. JavaScript의 Date 객체는 날짜와 시간을 다루는 데 사용됩니다. 이 객체를 활용해 날짜 간의 차이를 계산할 수 있는데, 우리의 예제에서는 특히 new Date() 생성자를 사용하여 문자열로부터 날짜 객체를 생성하는 방법에 주목할 것입니다. 함수 구현 function calculateDuration(startDateStr, endDateStr) { const s..

시작하기 1. 카카오 개발자 사이트 접속 후 로그인을 해줍니다. Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 2. 새 애플리케이션을 생성한 뒤 기본입력 사항인 애플리케이션 이름, 사업자 명, 카테고리를 입력해줍니다. 3. 대시보드에서 API키를 확인 후 상황에 맞춰 사용해주면 됩니다. 이번 내용에서 다룰 API는 REST API 키를 활용하여 진행됩니다. 해당 API 사용에 관련하여 다양한 방식으로 사용할 수 있으며, 해당 글에서 사용할 방식은 jQuery 방식으로 진행이 됩니다. 소스코드 코드 설명 API KEY : REST_API_KEY ..

서론 JavaScript의 split() 함수는 문자열 조작을 위한 다재다능하고 강력한 도구로, 지정된 구분 기호를 기준으로 문자열을 배열로 나눌 수 있습니다. 양식 입력 처리부터 URL 경로 조작까지 다양한 텍스트에서 활용될 수 있습니다. 아래에서는 순수 JavaScript의 split() 함수와 jQuery의 사용법을 살펴보고, 장점과 한계를 강조하고, 대안에 대해 논의하고, 실제 사용 예를 제공합니다. 자바스크립트 string.split(separator, limit); separator: 문자열이 분할되는 문자 또는 정규식을 지정합니다. 생략하면 전체 문자열이 배열의 유일한 요소로 반환됩니다. limit: 결과 배열에 포함할 부분 문자열의 최대 수를 지정하는 선택적 정수입니다. 장점 다용성: 간단..

"마우스 이벤트란 무엇인가?" 말그대로 기본적으로 마우스 우클릭과 좌클릭 이벤트를 말할 수 있으며 이번에는 해당 내용을 다뤄볼 생각이다. 그외 다양한 이벤트도 존재하지만 그것은 나중에 다시 언급하도록 하겠다. 우선적으로 마우스 클릭 이벤트 관련하여 우클릭과 좌클릭에 관한 명령어 용어는 Click Event와 Contextmenu Event가 존재한다. jQuery를 활용한 마우스 이벤트 처리 jQuery를 활용한 왼쪽 좌클릭 이벤트 $(document).ready(function() { $("#elementId").click(function() { alert("왼쪽 클릭 이벤트 발생!"); }); }); jQuery를 활용한 오른쪽 우클릭 이벤트 $(document).ready(function() { $..