웹개발 2

[JWT] 로그인 세션 관리하기 1 (JWT에 관하여)

오늘이 아시안컵 16강이 있던 날인데, 축구를 보니 볼 차고 싶은 생각이 너무 들던 하루,,, (사진은 축구하고 있는 나) 오늘은 프론트엔드를 개발하면서 로그인 세션을 어떻게 관리하였는지 작성해보겠다. 서버에서는 사용자가 로그인 되어 있는지 알 필요가 있다. 이를 위해 JWT 라는 것을 사용한다. JWT 란 무엇이고 왜 필요할까? 1. JWT란? JWT (JSON Web Token)는 Json 형식을 이용하여 사용자의 속성을 저장하는 Token이다. 즉, 정보를 비밀리에 전달하거나 사용자 인증 시 사용된다. ex) 앱을 실행했을 때 사용자가 가진 JWT를 비교하여 자동로그인을 기능을 제공 상품 구매, 예약 신청 등을 시도할 때 사용자 인증 2. JWT가 필요한 이유 1) 무상태성 (Statelessnes..

JWT 2024.02.01

[React, CSS] 따라다니는 (동적) 사이드 바 만들기

요즘 동심에 빠진 것 같아. 유튜브에 이런 플레이리스트가 자꾸 떠,, 프로젝트 진행 중에 좌측 여백 공간에 스크롤에 따라다니는 사이드 바를 넣어야 했다. 좌측 공간에 사이드 바 고정하기 position: fixed; left: 20px; /* 왼쪽 여백 */ top: 50%; transform: translateY(-50%); top: 50% - top 속성은 부모 요소에 대한 요소의 상대적 위치를 지정. - 요소의 상단이 부모 컨테이너의 높이의 50% 지점에 위치하도록 함. - 즉, 요소는 부모 컨테이너의 상단에서부터 시작하여 중간 지점까지 배치된다. transform: translateY(-50%); - transform 속성은 요소를 변형시키는 데 사용되며, translateY는 요소를 수직 방향으..

CSS 2024.01.16