- 목차
- 기간 : 2023 / 07 / 31 ~ 2023 / 08 / 11
LocalStorage에 고유ID를 저장 ➡️ 로그아웃을 하기 전까지는 자동로그인- 할 일을 추가 ➡️ 글을 클릭해서 수정하면 저장 가능
- 테마 변경 ➡️ 다크 모드와 라이트모드 변경 가능
- OAuth 로그인 API 사용
- 로그아웃
로그아웃 버튼을 클릭하면
localStorage의token삭제
- 메인 페이지 ➡️ 회원가입 하기 | 로그인 하기
- 로그인 하기 ➡️ 할 일을 추가 ➡️ + 버튼을 눌러 추가하기
- 회원가입 하기 ➡️ 로그인 하기
- 헤더 ➡️ 로그아웃 ➡️ 테마 변경
로그아웃하지 않을 경우, 다음 실행시 할일 추가탭에서 시작
- 하단 네비게이션 ➡️ 나의 GitHub Project Repository 바로가기
- 회원가입
➡️ 로그인 창에 회원가입 누르면 회원가입 화면 이동
➡️ 아이디, 비밀번호가 조건에 맞는 경우에만 제출 버튼 활성화
➡️ 회원가입 완료 시, 해당 아이디의 고유한token생성됨
➡️ 모두 완료 시, 로그인 페이지로 이동
- 로그인
➡️ 아이디 및 비밀번호 입력칸이 공란이 아닐 경우, 로그인 버튼 활성화
➡️ 로그인 성공한 경우, 해당 계정의 고유token을localStorage에저장
➡️localStorage에 고유token이 있는 경우, 로그인 화면을 생략하고 자동로그인
- 추가
➡️ 글 작성후 엔터키를 누르면 글이 저장 가능저장기능은 AWS RDS (DB)로 저장 됨.
- 수정
➡️ 글을 수정한 후 엔터키를 눌러야 저장 가능 - 삭제
➡️ 삭제는 휴지통 아이콘을 누르면 바로 삭제
- 테마 변경
➡️ 다크모드와 라이트모드로 설정 가능
➡️ 아쉽게도 전체 페이지에 테마 변경기능은 구현 하지 못함
- 로그아웃
➡️ 로그아웃 버튼을 클릭하면localStorage의token삭제
➡️ 로그아웃하여localStorage에 고유token이 없는 경우, 주소창에 강제 입력하여 경로 이동하더라도 로그인 화면으로 리디렉션
- grid 사용
소형프로젝트 이기에 혼자서도 할 수 있었고, 간단했지만 AWS에서 배포하는 과정이 복잡하고 어려워서
관련 정보들을 찾아보면서 하느라 오래 걸렸으며, Elastic Beanstalk에 설정과 배포 과정이 어려웠던거 같다.
또한 UI 배포중 502에러가 일어났는데 POWESHELL로 eb ssh 환경으로 들어가서 npm start를 하면 되는것을
알았지만 계속 컴퓨터를 계속 켜놓을수도 없어서 찾아본 결과 eb ssh안에서 npm start를 eb ssh를 꺼도 무한으로
지속 되게 하는법을 알아냈고, tmux를 설치해서 npm start를 해보니 컴퓨터를 꺼놔도 실행되고 502에러도 사라지는것을 볼 수 있었다.
이러한 해결 과정이 조금 길었지만 덕분에 Elastic Beanstalk 환경에서 배포하는 법을 익히게 되서 뜻깊은 시간이였던거 같다.
다만 아쉬웠던 점은 OAuth를 사용해 로그인 API를 받아서 해보고 싶었지만 대부분 도메인이 있어야 가능해서 무료 도메인으로도 시도를 해봤지만 방법이 없었고,
유료로 구매해서 하기엔 너무 가격이 나가기 때문에 시도를 못해봐서 아쉽긴 하다.