공부 과정 기록07_노마드코더 시청 후 제작한 페이지 소개(02)
전 글에서 노마드코더 클론 코딩 강의를 시청했었다고 했습니다.
이번 글에서는 강의 시청에서 얻은 지식들을 활용하여 제가 구상한 페이지를 만들어 봤었는데,
그 페이지를 살펴 보는 시간을 갖도록 하겠습니다.
처음 페이지에 들어가면 이렇게 로그인 페이지가 나옵니다.
페이지 중앙의 로그인 폼이 들어 있는 영역을 제외하면 나머지 영역의 색을 회색으로 줬고, 로그인 버튼과 회원가입
버튼 2개가 있는 것이 보입니다.
만약 회원가입이 되어 있지 않은 id, pw를 입력하거나 둘 중 하나를 입력하지 않은 상태에서 로그인 버튼을 누르면
상황에 따라 위와 같이 경고창을 띄워 줍니다.
그럼 회원가입 페이지를 보겠습니다.
회원가입 페이지도 디자인은 로그인 페이지와 비슷합니다.
다만 다른 점은 id, pw, pw check까지 3개의 입력 칸이 있고 회원가입 버튼 1개만 존재합니다.
여기서도 회원가입 버튼 클릭 시 비밀번호와 비밀번호 확인 칸의 입력값이 동일하지 않으면 경고창을 띄우고 회원가입이
되지 않습니다.
그럼 예시로 id를 asdf, 비밀번호를 1234로 입력하고 회원가입 버튼을 눌러 보겠습니다.
그럼 이렇게 메시지 창이 뜨고, 로그인 화면으로 돌아가게 됩니다.
이제 로그인 창에서 방금 회원가입했던 id와 pw 값을 입력하고 로그인 버튼을 눌러 보겠습니다.
그럼 이렇게 메인 페이지로 이동하게 되는데, 화면 중앙의 Hello asdf라고 로그인한 id 값을 표시해 주고 있습니다.
그리고 맨 위를 보면 현재 시간을 표시해 주고 있으며, 아래에는 "Input your todo list!" 라는 todo 리스트 값을 입력하는
칸이 있으며, 그 아래의 흰색 테두리로 표시되어 있는 영역은 입력된 todo 리스트가 표시되는 영역입니다.
페이지 맨 아래쪽을 보면 랜덤 명언을 띄워 주며, 이 명언은 배경화면 사진과 같이 페이지 새로고침을 할 때마다
바뀌게 됩니다.
오른쪽 상단을 보면 현재 위치와 로그아웃 버튼이 있는데, 이 현재 위치는 페이지를 처음 들어갈 때
권한 허가를 받게 됩니다.
이렇게 페이지 좌측 상단에 띄워지게 되며, 허용을 누르지 않는다면
이렇게 경고창을 띄우고,
로그아웃 위에 현재 위치 정보가 띄워지지 않습니다.
페이지 새로고침을 했을 때 배경사진과 명언도 바뀐 것을 볼 수 있습니다.
(다만 배경사진과 명언은 일정 범위의 배열에서 랜덤으로 가져오는 것이라 새로고침하다 보면 동일한 배경사진이나
명언이 나올 수 있습니다.)
이렇게 "Input your todo list!" 영역에 "안녕", "하세요" 텍스트를 2번에 나눠 입력하고 엔터키를 누르면
흰색 테두리 영역에 추가되는 것을 볼 수 있습니다.
여기서 X 버튼을 누르게 되면
이렇게 해당 todo 리스트가 삭제됩니다.
이 상태에서 페이지 새로고침을 한다 해도 todo 리스트 값이 여전히 남아 있습니다.
로그아웃 버튼을 누르면 위의 경고창을 띄워 주고, 로그인 창으로 돌아갑니다.
이번에는 테스트를 위해 id를 asdf01, pw를 12345로 하고 회원가입을 합니다.
이렇게 로그인을 하면 Hello asdf01이라고 다른 id 값을 띄우고 todo 리스트 영역을 보면 아무것도 없는 것을
볼 수 있습니다.
이를 통해 회원가입한 유저마다 데이터를 다르게 저장하고, 현재 로그인한 유저를 구분할 수 있다는 것을
알 수 있습니다.
asdf01 유저에게 todo 리스트 값을 3개 준 상태이고, 여기서 로그아웃하고 아까 로그인했던 asdf 계정으로
로그인 해 보겠습니다.
asdf 계정으로 로그인했더니 이전의 asdf01에서 입력했던 todo 리스트 값은 보이지 않고 전에 asdf 계정에서 입력한
todo 리스트 값이 보이는 것을 알 수 있습니다.
다음 글에서는 어떻게 로그인 계정을 구분할 수 있었는지, 현재 위치를 어떻게 가져와서 표시할 수 있는지 등
코드를 보면서 설명해 드리도록 하겠습니다.