728x90 Project4 [Project] Agile 시스템 구축 - Redux-persist를 이용하여 JWT 토큰을 받아 로그인 상태 관리하는 방법(1) 지난 포스팅에 JWT 토큰을 이용하여 로그인 상태 관리에 대한 개념들을 알아보았고 이제 실제로 Redux-persist를 이용해 jwt 토큰을 받아 로그인 상태 관리를 하는 코드를 작성해보았습니다. 솔직히 여러 코드를 찾아보고 적용해보고 이게 맞나? 싶을 때가 너무 많아 내가 잘 짜고 있는지도 모르겠고 많은 것들을 import 해오면서 뭐가 뭔지 헷갈리고 얽히고 그랬었습니다.. 하지만 이렇게 벽에 부딪히고 막히면 찾아보고 하는 과정에서 처음에는 뭔지 아예 모르겠던 코드들이 그래 그래도 이건 이런 코드지 하면서 뭔가 트였다는 느낌이 들게된 게 속으로 그래도 실력이 좀 상승하고 있는건가..? 하며 계속 공부해볼 수 있게 된 듯 합니다 ㅎㅎ 밑에는 제가 직접 짜보면서 적용했던 순서를 나타내보았습니다. 우선, .. 2023. 4. 22. [Project] Agile 시스템 구축 - JWT 토큰을 이용하여 로그인 상태 관리 지난 2주간 Redux-persist를 이용하여 jwt token을 받고 로그인 상태관리를 하기위해 많은 시간을 사용하였습니다. 아직까지도 이해가 완전히 되지는 않았지만 글을 쓰면서 내가 작성한 코드도 리뷰하고 지금까지 찾아보고 공부한 로그인 인증 관련 지식을 정리해 기록하려고 합니다. JWT(JSON Web Token) 인증은 무엇일까? JWT은 JSON 객체를 사용하여 가볍고 self-contained 방식으로정보를 안전성 있게 전달해줍니다. 인증 유지란? 사용자가 한 번 로그인 한 후 특정 시간 내 까지는 사용자의 로그인 상태를 유지하는 것 인증 유지 방식 대부분 서버는 접속 시 로그인 과정을 통해 로그인 된 사용자를 유일하게 식별할 수 있는 인증 키 등을 발급하고, 이러한 키 정보를 이용해 계속 .. 2023. 4. 21. [Project] Agile 시스템 구축 - 04.07 멘토링 지난 회의 이후 첫 시작화면과 메인화면의 header, sidebar 등을 만들어보았다. 1. 첫 시작 화면 첫 시작화면은 다음과 같이 구상하였고하단에 보이는 Slide bar의 사진에는 앞으로 우리가 만든 웹에서의 기능이나 화면을 캡처해서 넣을 예정이다. 로그인 버튼에는 회원 가입, 아이디 찾기, 비밀번호 찾기 버튼도 추가 예정이다. 2. 로그인 페이지 로그인 폼은 react-bootstrap에서 가져와 css를 수정했다. 여기에도 역시 아이디 찾기, 비밀번호 찾기, 회원 가입 버튼을 만들 예정이다. 3. 로그인 후 들어가는 페이지 (header, sidebar 컴포넌트 구성) header와 sidebar 역시 bootstrap에서 가져와서 수정을 했다.앞으로 header 우측 계정 부분에 프로필 사진.. 2023. 4. 7. [Project] Agile 시스템 구축 - 04.03 회의 프론트엔드 화면구성을 위해 모여서 어떤 페이지들을 만들지 컴포넌트 구성은 어떻게 할 지 회의를 하였다. 물론 말로는 로그인페이지, 회원가입 페이지, 메인화면 등등을 만들면 좋겠다고말로만 해왔었고, 이런걸 어떻게 정리해서 할 수 있을지 혼자 고민하고 있었는데.. 이런 고민을 하고 있던걸 알았던건가 재은이가 짠 하고 Flow Chart를 대략 그려왔다..! 생각해보니 정보처리기사 준비 할 때도 공부했는데 ㅋㅋㅋ 이번에 진짜로 만들어보는건가! 여기서 Flow Chart란 무엇일까 ? 순서도( flowchart)는 워크플로 혹은 프로세스를 보여주는 다이어그램의 한 종류다. 여러 종류의 상자와 이를 이어주는 화살표를 이용해 주어진 문제에 대한 솔루션 모델을 보여준다. 프로세스 작용은 이 같은 상자들과 작업의 흐름.. 2023. 4. 5. 이전 1 다음 728x90
