[축구모임 홈페이지개발] 04/16 개발일지 Nodejs / 마이페이지 구현

우선 알아보니 나는 main.js 와 server.js 간에 데이터를 주고받아야 하기 때문에

이는 직접적으로 데이터를 전달할 수 없다.

그래서 AJAX 요청을 통해서 전달을 해야했다.

마이페이지 아이콘을 눌렀을 때 실행하게 될 gotoMypage() 함수이다.

function gotoMypage() {

fetch('/user')

.then(response => response.json())

.then(data => {

const userId = data.userId;

window.location.href = '/mypage/' + userId;

})

.catch(error => console.error('Error fetching user data:', error));

}

app.get('/user', (req, res) => {

const userData = {

userId: req.user.userID

};

res.json(userData);

});

/user 엔드포인트와 데이터를 주고받고 이렇게 하면

아이콘 클릭시에 정상적으로 mypage/내ID 로 이동이 되었다.

하지만 아직 서버코드에서 해당 엔드포인트를 만들어주지 않았다.

간단하게

app.get('/mypage/:userId', async (req, res) => {

res.render('mypage.ejs')

});

우선 이대로만 해줬고

mypage.ejs 에서도

<body>

<%- include('nav.ejs') %>

<%=유저.username%> 님의 페이지

</div>

</body>

이렇게 해당 유저의 페이지인 것을 알 수 있도록 설정해주었다.

우선 여기서 해야할 게 두 가지가 생각났다.

1. 로그인이 안 되어 있는 상태에서 아이콘이 눌리면 로그인페이지로 이동시켜야한다는 부분

2. 자기 자신만 마이페이지로 접속할 수 있도록.

→ 생각하면서 또 생각이 든건데, 애초에 우리가 다른 사람의 스탯이나 정보를 보고자 할 때 팀 소개 탭에서 선수를 클릭하면 새로운 창이 뜨면서 확인할 수 있도록 구현하려고 기획중인데, 차라리 그 해당 선수의 마이페이지로 이동시켜서 확인하면 작업 속도가 더 줄지 않을까? 하는 생각이 듦. 대신 마이페이지에서 스스로 변경하는 버튼들은 자신들만 보이게끔 설정.

(목요일 회의 때 얘기해봐야겠다.)

<% if (typeof 유저 !=='undefined' ) { %>

<img class="nav-myprofileBt" src="https://ik.imagekit.io/wlalafg7g/GoalPostAgain/login.png?updatedAt=1707221589727" alt="login"

onclick="gotoMypage()">

<% } else { %>

<img class="nav-myprofileBt" src="https://ik.imagekit.io/wlalafg7g/GoalPostAgain/login.png?updatedAt=1707221589727" alt="login"

onclick="gotoLogin()">

<% } %>

우선 위와 같이 유저에 대한 정보가 있다면 gotoMypage() 를 실행시키고 없다면 gotoLogin() 함수를 실행시켰다.

이제 여기서 각각의 유저마다 갖고 있는 정보들을 어떻게 불러와서 효율적으로 관리하느냐 문제이다.

저작자표시

'Project > 축구모임 홈페이지개발' 카테고리의 다른 글

[축구모임 홈페이지개발] 04/24 개발일지 Nodejs / tooltip 직접 만들기 (0)	2024.04.24
[축구모임 홈페이지개발] 04/21 개발일지 Nodejs / 로그인 성공 시 기존 접근 주소로 이동하기 (0)	2024.04.22
[축구모임 홈페이지개발] 04/15 개발일지 Nodejs / 공지사항 탭 기능 추가, 마이페이지 기능 계획 (0)	2024.04.15
[축구모임 홈페이지개발] 04/06 개발일지 Nodejs / 업데이트 공지 탭 활성화 (0)	2024.04.07
[축구모임 홈페이지개발] 03/27 개발일지 Nodejs / 승부차기 게임 구현 3 (불리언 타입 함수) (0)	2024.03.28