서론SPA의 정의 및 기본 개념SPA(Single Page Application)는 단일 HTML 페이지로 구성된 웹 애플리케이션을 의미합니다. 사용자가 웹 페이지를 탐색할 때, 전체 페이지를 다시 로드하지 않고 현재 페이지 내에서 필요한 콘텐츠만 동적으로 로드하여 빠르고 원활한 사용자 경험을 제공합니다. 이는 주로 JavaScript 프레임워크와 라이브러리를 활용하여 구현됩니다. SPA의 동작 원리기존의 다중 페이지 애플리케이션(MPA)에서는 사용자가 다른 페이지로 이동할 때마다 서버로부터 새로운 HTML 페이지를 받아오고 전체 페이지를 새로 고칩니다. 반면에 SPA에서는 처음에 한 번만 전체 페이지를 로드하고, 이후의 페이지 전환은 서버와 비동기적 통신(AJAX)을 통해 필요한 데이터만 받아와 화면을..

JWT (Json Web Token)JWT(Jason Web Token)는 인터넷에서 정보를 안전하게 전송하기 위해 사용되는 방법 중 하나입니다. 단순히 말해서, JWT는 작은 정보 조각들을 안전하게 교환할 수 있도록 돕는 "티켓" 또는 "증명서"와 같습니다.    1. JWT의 구조와 무결성이 티켓은 세 부분으로 구성되어 있으며, 각 부분은 점(.)으로 구분됩니다.Header (헤더): 헤더는 주로 토큰의 타입을 선언하고, 정보를 암호화하는 데 사용된 알고리즘의 종류를 말합니다. 예를 들어, 종종 "JWT"와 "HS256"라는 알고리즘 이름을 볼 수 있습니다.Payload (페이로드): 페이로드는 토큰 안에 실제로 담겨 있는 데이터입니다. 여기에는 사용자 ID, 사용 권한, 토큰이 만료되는 시간 등이 ..

현재 상황 위 화면은 현재까지 내가 구현한 학점 계산기 웹이다. 계산기의 과목명, 학점, 출석점수 등 모든 입력들은 Material UI의 TextField 컴포넌트를 사용하고 있다. 현재 계산기에는 학점을 정상적으로 계산하기 위해서 입력값에 대한 몇가지 유효 조건들이 존재한다. (과목명 중복 불가, 학점의 최소, 최대 점수 등) 그리고 위 유효성들에 대한 검사 로직은 이미 구현 되어있고, 저장 버튼을 눌렀을 때 유효 조건을 만족하지 않으면 예외처리 후 Alert를 띄우고 문제의 TextField로 focus하는 것까지 마친 상태이다. 목표 이번 포스팅에서 구현하고자 하는 것은 저장 버튼을 누르기 전에도 사용자가 잘못된 값을 입력했다는 것을 인지할 수 있도록 TextField의 error 속성을 이용하여..

오늘은 팀원들과 만든 쇼핑몰 사이트를 netlify를 이용해 배포해봤다. 여러가지 문제들이 있었지만 다행히 잘 해결하고 성공적으로 배포 했다. 먼저 본인의 프로젝트는 CRA로 만든 React 기반임을 알아두길 바란다. 1. GitHub 리포지토리 생성 프로젝트를 배포하는 단계까지 왔다면 당연히 해당 프로젝트의 리포지토리를 GitHub에 생성했을 것이다. 2. netlify 계정 생성 사이트를 netlify에 호스팅 할 것이기 때문에 netlify 계정을 만들어주면 된다. Develop and deploy websites and apps in record time | Netlify 계정 생성에 대해선 지난 옵시디언 배포하는 법을 포스팅 할 때 다뤘으니 참고 바랍니다. 옵시디언 노션처럼 페이지로 배포하는 법..