블로그 만들기(8) - 프로필 페이지 만들기

프로필 페이지를 클릭하면 이름만 나오는데

프로필 페이지에 들어갈 기능들 좀 추가해주면 좋을것 같습니다.

 

프로필 페이지 내부에 새로운 세로로 되어있는 nav 바 하나 있으면 편할것 같은데

간단하게 내가 쓴 글목록, 회원 정보 이렇게 두개만 추가하면 편할듯요

 

gpt 이용해서 만들어보겠습니다.

 

html 이런식으로 구성해주고 gpt 한테 스타일링 부탁하면

의도한대로 왼쪽에 잘 nav 바를 만들어 줬습니다.

이제 nav 바를 클릭했을때 기능을 만들면

 

1. 작성한 글목록을 클릭했을떄 /posts로 get요청을 하면

2. server.js에서 /posts의 get 요청이 갔을떄 현재 유저가 작성한 글목록 정보를 가져오고

3. 가져온 정보를 작성한 글목록 파일에 보내줘서 그걸 html로 만들어서 보여준다.

 

이렇게 3단계 해주면 될것같네요

 

그런데 글목록 가져오는거 저번 메인 페지이 만들때 전부 페이지네이션으로 구분해서 만들어 뒀습니다.

 

 

메인페이지랑 다른점은 result 변수에 userId : req.session.userId 인 것만 담아서 보여주면 됩니다.

이러고 main.ejs 글목록 부분 복붙해서, writeList.ejs 에 붙여넣으면 되겠네요.

 

자기가 쓴 글목록도 쉽게 찾아볼수 있겠네요.

이제 회원정보 탭 만들 차례인데

회원 정보 클릭하면

 

이름

전화번호

주민번호

집주소

이런 정보들이 저장되어 있으면 그 정보 보여주면 될것 같습니다.

그런데 정보를 받은적이 없어서

정보를 입력 받아야 할것 같네요.

 

원래 회원가입할때 이것저것 정보를 많이 입력하지 않나요?

그걸 user 컬렉션의 documnet에 id, ps 랑 같이 저장해두면 될것 같은데

회원가입 기능은 그냥 간단하게 냅두고

회원정보 수정 탭 하나 만들어서 회원정보 수정 가능하게 해주면 될것 같습니다.

 

그런데 생각해 보니깐

회원정보는 그냥 profile.ejs 페이지에서 보여주면 될듯요?

그래서 회원정보 탭 없애고 회원 정보 수정 탭 내용 먼저 만들어 보겠습니다.

 

input 내용을 입력하고, 변경하기 버튼을 누르면 /profileEdit 요청을 통해서 db 내용을 업데이트 해주면 되겠네요.

 

이렇게 하면 변경하기 버튼 눌렀을때 의도대로 동작할것 같습니다.

이제 회원정보만 표시해주면 될듯한데

profile.ejs render 할때 user 컬렉션에서 documnet 정보를 담아서 보내준다음

html으로 생성해서 보여주면 끝이겠군요

 

일단 이런식으로 정보를 표시해봅니다.

마지막에 /profile로 redirect 까지 해주면 될듯 

스타일링은 gpt에게 부탁합시다.

 

일단 이런식으로 스타일링 해줬네요

 

오늘 일단 프로필페이지 꾸며줬는데

 

예외처리 해야할 부분이 또 많이 생긴것 같네요

 

1. 로그아웃 기능 만들어 뒀는데, 로그아웃에 대한 예외처리가 필요해 보입니다.

2. 회원정보 수정 기능을 페이지 위변조를 통해 악용 가능할것 같군요 수정기능 또한 예외처리가 필요해 보입니다.

3. 기능 전체적으로 개선점이 있는지 평가해보고, 개선해야할 부분이 있으면 개선하도록 하겠습니다

 

다음 포스팅에서는 중간점검을 한번 해보겠습니다.