Express - User profile

유저 프로필 페이지를 수정을 해줄 건데

 

약간의 수정사항과 추가사항이 있다.

일단 로그인한 유저의 프로필 페이지로 이동을 하면 기존에는 /:id 를 이용해서 갔는데

userDetail 컨트롤러를 이용해서 id값을 찾아 이동을 했다.

사용자마다 똑같은 user template을 이용하는데 이부분을 바꾼다.

 

그래서 사용자 프로필 페이지 routes와  컨트롤러를 하나 더만들어준다

헤더 템플릿으로 가서 경로도 다시 설정 해주자

 

기존 userDetail과 같은 기능을 하지만 다른점은 userDetail은 사용자를 찾는 과정이 필요한데

새로 만든 getMe user를 지금 로그인한 유저인 req.user로 전달한다. 

햔재 userDetail은 제 역할을 못하기에 프로필 페이지 접속후 :id부분의 url을 임의로 바꿔도

지금 로그인한 유저의 페이지가 계속 뜬다. 

user가 global 변수로 overriding 하고 있기 때문이다. (미들웨어와 컨트롤러에서 사용하는 user가 겹침)

기존방식은  userDetail에서 실제 로그인 사용자를 id로 찾아서 override해줘야 url이 제대로 설정이 된다.

그래서 새로 url을 만들고 req.user로 전달... 아 정리가 힘들다...

 

 

자 이제 헤더에서 라우트 설정을 다시 해주면 /me의 경로로 이동하게 되고...

아 컨트롤러는 만들었는데 globalRouter에서 라우트 설정을 안했다 ㅡㅡ;;

 그리고 더 명확히 하기 위해 middleware에서 

req.local.user -> 이부분을 req.lcoal.loggedUser로 바꾸고 헤더에서 !user도 !loggedUser로 바꾸자

컨트롤러와 user가 겹치지 않도록.

이제 접속을 해서 profile 페이지를 보면

 

이렇게 url이 제대로 설정이 되고 해당 유저의 프로필이 가져와진다.

userDetail을 손볼 필요가 없어졌다. 

 

그리고 user/:id에 아무 값이나 줘도 프로필 페이지가 뜨던게

/users/임의의값 을 줘서 이동하면  이런 페이지가 뜬다

잘된다. middleWare의 res.local.user를 loggedUser로 바꾸었기때 때문에 user라는 글로벌 변수가 사라진것이다.

앞서 말했다시피 user변수가 컨트롤러로부터 전달 받은 것인지 middleware에서 받은것인지 구별이 되지 않았는데

이제 구별이 되는 것

그럼  해당 사용자의 프로필만을 가져와 사진을 뿌려줄 수 있게 된다.

 

자 이제 이런 에러가 뜨지 않게 바로 홈화면으로 보내주자.

그럼 userDetail 컨트롤러를 손봐주면 된다 try catch구문으로 에러발생시 홈화면

 

 

뭔가 순서가 복잡해서 정리가 어려운 강의였지만 이해 된다.. 아직 정리하는 기술은 부족함...