[웹개발] 웹 최종 한 눈에 보기 (끝) : 마이페이지, 회원 정보 조회, 회원 정보 변경, 내가 쓴 글 모아보기, 내가 공감한 글 모아보기

* 개인적인 공부 내용을 기록한 글입니다.

---

소감
최종 결과물을 화면과 화면에 대한 설명 위주로 한 눈에 펼쳐본다.

최종 소감
맨 아래로!

이전 포스팅
http://choco4study.tistory.com/46

[웹개발] 웹 최종 한 눈에 보기 (3) : 문의게시판, 비회원 글작성, 비밀번호 관리

---

마이페이지


1. 마이페이지 : 회원 정보 조회

[1] 메인 화면 네비바의 [마이페이지] 를 눌러 마이페이지로 진입했을 때의 첫 모습이다.
[2] 네비바가 마이페이지 전용 네비바로 바뀐다.
[3] 네비바를 통해 [내가 쓴 글] [내가 공감한 글] [내 정보 변경] 으로 진입할 수 있다.
[4] 최상단 맨 우측의 [MAIN] 버튼을 통해 메인 화면으로 다시 돌아갈 수 있다.
[5] 화면 중앙에는 현재 로그인되어있는 회원*의 정보를 표에 담아 보여준다.
* 비회원은 마이페이지 내로 진입할 수 없다.


2. 마이페이지 : 내가 쓴 글

[1] 내가 쓴 글을 모아서 목록으로 출력한다.
[2] 페이징 기능도 정상적으로 수행된다.
[3] 게시글을 클릭하면 해당 게시글을 바로 조회할 수 있다.


3. 마이페이지 : 내가 공감한 글

[1] 내가 공감 (= 좋아요) 한 글을 모아서 목록으로 출력한다.
[2] 이하 내용은 [내가 쓴 글] 과 동일하다.
* 개인적으로... 이거 만드느라 고민 많이 했다... (특히 공감글 모아서 페이징ㅎ...) 만들 때는 고생해도 막상 완성해놓고 보면 당연한건데 왜 이걸 몰랐지?? 싶을 정도로 로직이 단순한 경우가 많은 것 같다ㅜ 그럴 땐 뿌듯함에 허탈함이 한 스푼 추가되고는 한다..

---

마이페이지 : 회원 정보 변경


1. 마이페이지 : 내 정보 변경

[1] [내 정보 변경] 의 전체적인 모습이다.
[2] [변경] 버튼에 커서를 올리면 위와 같은 box-shadow 효과가 나타난다.
[3] 초기 상태에서는 입력 폼들과 [변경사항을 확정하기] 버튼이 모두 비활성화되어있다.
[4] 각각의 입력 폼에는 기존의 정보를 불러와 넣어준 상태이다.


2-1. 마이페이지 : 변경 버튼을 눌렀을 시

[1] [변경] 버튼을 누르면 해당 폼이 활성화된다.
[2] [변경] 버튼이 [확정] 버튼으로 바뀐다.


2-2. 마이페이지 : 확정 버튼을 눌렀을 시

[1] 새로운 정보를 기입한 후 [확정] 버튼을 누르면 입력 폼과 [확정] 버튼이 비활성화된다.
[2] 비밀번호와 이름은 비울 수 없도록 php 단에서 검사 처리*를 해놨다.
* 폼 자체에 required를 주는게 좋긴 한데.. 폼을 비활성화하기 전 값을 hidden으로 넘겨주고 그 값을 DB로 넘겨주는 작업을 해놨기 때문에 required 사용에 문제가 좀 있었다ㅠ
[2] [확정] 버튼을 누르면 [변경사항을 확정하기] 버튼이 활성화된다.


2-3. 마이페이지 : 변경 사항 최종 확정하기

[1] [변경사항을 확정하기] 버튼에 커서를 올리면 배경 색과 글씨 색을 반전해준다.
[2] [변경사항을 확정하기] 버튼을 클릭할 시, 변경 사항이 DB에 최종 반영된다.
[3] 변경 사항이 DB에 성공적으로 반영됐을 경우, 변경 사항의 개수와 함께 성공적으로 변경됐다는 alert를 출력해준다.
[2] [변경사항을 확정하기] 버튼을 누르지 않고 페이지를 이탈해버리면 변경 사항이 반영되지 않는다.


3. 마이페이지 : 변경 결과 보기

[1] 회원 정보가 정상적으로 변경되었음을 확인할 수 있다.


4. 마이페이지 : 비밀번호 변경

[1] 비밀번호는 소중하기 때문에... 변경을 원할 경우, 현재 비밀번호를 확인해준다.
[2] [변경] 버튼을 누르면 현재 비밀번호를 확인하는 새 창이 뜬다.

[3] 비밀번호가 일치할 경우, 새 비밀번호를 입력해달라는 alert를 출력하고 비밀번호 변경 폼을 활성화한 후 자식창을 꺼준다.
[4] 비밀번호가 일치하지 않을 경우에는 비밀번호 변경 폼이 활성화되지 않는다.
[5] 이후는 다른 정보의 변경 시와 동일*하다.
* 음 지금 생각해보니 변경 시에도 가입 시와 동일하게 비밀번호를 두 번 받는게 좋을 것 같다... 차후 수정!

---

최종 소감
이로써 웹개발이 끝났다.

남은 것은 세부적인 수정 사항들과 주소DB... 아 이거 계속 늘어지지 않게 빨리 찾아봐야겠다.
스터디도 그렇고 학교도 그렇고 다른 것들도 할게 많은데 개발에 갑자기 꽂혀서 너무 많은 시간을 써버린 것 같긴 하다ㅠ
그래도 앞으로 들일 노력을 미리 끌어다 썼다고 생각하면서 위안 중이다ㅎ..

또 sql이나 php 관련해서는 이제 겁부터 집어먹을 일은 없을 것 같다.
짧은 시간에 몰아친 만큼 급속도로 많이 익숙해진 것 같아서 약간 다행이라는 생각도 든다.

홈페이지를 이렇게 바닥부터 어느 정도 편의성이 갖춰질 때까지 구현해본 적이 없었는데
생각보다 정말 모든 기능 하나하나를 세부적으로 손대고 세팅하고 만들어줘야한다는게 좀 충격이기도 했다.

제일 힘들었던 점은 역시나 CSS.....ㅠ
꽂혀서 열심히 하긴 했지만 인생에서 조금 멀어졌으면 하는 친구다...ㅎ 그 생각이 좀 더 강해졌다ㅎ
컴퓨터 관련된 뭔가를 하면서 도저히 못하겠으니 그냥 대충 대충 해야겠다고 생각이 든건 처음이었다...;

오히려 백엔드 관련 부분은 생각보다 굉장히 재미있었다.
잘 알려진 기능들도 개발하는 사람에 따라 구현 방식이 다를 수 있다는 사실을 알고 나니
구글링으로 정답을 찾고 싶지 않아져서 스스로 고민해보고 구현하는 작업이 정말 색다르고 흥미로웠다.

나중에는 아예 프레임워크를 하나 잡고 공부해서 정말 쓸만한 웹도 한 번 개발해보고 싶다는 생각도 든다.

하여튼 이제 당분간 개발은 좀 접어두고 남은 것들을 열심히 해야겠다.
이상 끝! 잊지못할 재미있는 경험이었다!!!