REMIND!!
DATE : 2023/11/23
Last updated
DATE : 2023/11/23
Last updated
자! 이번엔 다시 돌아와 web Server 개발이다!!
이번에 만들고자 하는 건 "게시판"인데,
이를 진행하기에 앞서 전체적인 흐름을 정리할 필요가 있어 보인다.
지금까지 web Server와 관련하여 공부한 내용은 다음과 같다.
[1 주차] : 로그인 페이지 구현
[2 주차] : 회원 가입 페이지 구현 & DB 연동
[3 주차] : [1~2 주차] 내용을 JWT로 구현
현재 Login & Register Page와 관련된 부분만 정리를 해두었기 때문에
그 외에 어떤 페이지가 존재하는 지, 페이지 간의 흐름이 어떻게 구성되어 있는지 짚고 넘어가도록 하자.
에서 알아 봤듯이 원래 index page는 사용자가 요청한 URL이 directory 값으로
끝나는 경우, 제공되는 페이지이다. (index page가 존재하는 경우)
정말 그런 지 확인해볼까??
index page를 만들어둔 경로를 입력하고 엔터를 누르면..!
음? 분명 index page가 나와야 하는데 login page로 이동했다.
개발해둔 web server는 index page에서 사용자가 인증된 사람인지 확인하는 과정을 거친다.
이 말은 로그인 하지 않는 사용자는 index page에 접근할 수 없고,
바로 로그인 페이지로 redirection 하게 된다는 것!
그렇기 때문에 사용자는 맨 처음 서버에 접근하게 되면
index page가 아닌 login page를 제일 먼저 마주하게 된다.
index page에서 redirection 되어 login page로 오게 되면
Username & Password를 입력하는 Form을 볼 수 있다.
계정을 이미 가지고 있는 사람은 바로 로그인을 하면 되고, 계정이 없다면
링크를 클릭해서 회원 가입 페이지로 이동할 수 있다.
register page로 이동했다면, 필요한 인적 사항을 작성해서 Register 버튼을 눌러주면 끝!
회원 가입이 성공적으로 완료되면 자동으로 다시 login page로 이동하게 된다.
이제는 회원 가입을 했으니 로그인을 할 수 있다!
사용자가 Username:Password를 입력하면 식별 / 인증 과정을 통해서 로그인 성공 여부를 판단한다.
로그인을 완료한 사용자라면 앞에서 거부 당했던 index page로 접근할 수 있게 된다.
index page로 이동한 사용자에게는 우측 상단에 MyPage 버튼이 제공된다.
해당 버튼을 클릭하면 자신의 정보를 확인할 수 있는 my page로 이동하게 된다.
마이페이지에서 확인할 수 있는 정보는 이름, username, 메일이고
하단에 위치한 버튼은 각각
BACK : 이전 페이지로 이동
LOGOUT : 로그아웃 시, 사용하는 버튼
EDIT : 개인 정보 수정 페이지로 이동하는 버튼
이와 같은 기능을 담당한다.
여기서 EDIT 버튼을 눌러, 회원 정보 수정 페이지로 이동해보자!
회원 정보를 수정하는 페이지에 들어가면 기본적으로 이름, username, 메일 정보가 작성되어 있는 데
이 중에서 Username은 식별 정보로 사용하는 값인 만큼 회원 가입 이후에는 변경하지 못하도록
설정해두었다.
따라서 "hanhxx" 부분을 클릭해도 readonly 처리되어 있기 때문에
이렇게 드래그만 되지, 값 수정은 불가능하다.
사용자가 정보를 모두 수정한 다음, Edit 버튼에 마우스를 올리면
마우스가 버튼에 올려졌다!는 걸 알아보기 쉽게 버튼의 색상이 진해지는 효과를 볼 수 있다!
이 페이지의 상단에는 총 2개의 버튼이 위치해 있는데
HOME 버튼은 회원 정보를 수정한 다음,
마이페이지를 거쳐 index page로 이동할 필요 없이 바로 index page로 이동하기 위해 넣어둔 버튼이다.
LEAVE 버튼의 경우에는 사용자가 로그아웃이 아닌, 회원 탈퇴를 원하는 경우 사용하는 버튼이다.
이렇게 해서 전체적인 페이지 흐름을 살펴보았다.
다음으로 만들어 볼 것은 바로 게시판 만들기!
게시판은 사용자가 로그인 한 후에 바로 보여지도록 index page에 구성할 생각이다.
[NEXT] : 게시판 만들기 (within Index page)
