[Firebase&Web연동 11] 프로필 페이지 session

[Firebase&Web연동 11] 프로필 페이지 session 

● 들어가기 전

지난 포스팅에서는 마이페이지 화면만 만들어 놓았다. 아직 기능이 구현이 안되어있는데, 이번 포스팅부터 화면에 기능을 하나씩 붙여보도록 하겠다. 먼저 session체크를 통해서 로그인한 유저인지 아닌지 확인한 다음 로그인한 유저에게만 마이페이지를 보여주도록 하겠다. 로그인 세션 체크 로직은 앞에서 구현을 해놓았는데 그파일을 따로 js파일로 만들어서 빼주겠다. 왜냐면 index.html,과 mypage.html에서 동시에 접근해야 되기 때문이다. 자세한건 아래에서 설명하겠다.

● 실습순서

1.sessoinCheck() 함수를 따로 파일을 만들어서 빼주기

2.index.html, mypage.html의 <title> 태그에 id="mypage" 이런식으로 구분 id  부여하기(왜냐면 로그인 체크가 끝나고 index.html, mypage.html 에서 각각 처리해줘야할 로직이 다르다.)

3.mypage.html 페이지면 프로필 사진, 한줄 상태 메시지 조회해서 뿌려주기

4.스크립트 부분에 경로설정 해주기

1.sessoinCheck() 함수를 따로 파일을 만들어서 빼주기

사진처럼 아래 폴더에 js 파일을 하나 만들자.

그 다음 그 폴더안에 index.html 스크립트 부분에 있는  function userSessionCheck() { } 이 로직 전체를 잘라서 붙여 준다. 그리고 현재 시간 가져 오는 스크립트아래 경로를 작성해준다. 이런식으로.

2.index.html, mypage.html <title> 태그에 id 부여하기

3.sessoinCheck.js파일에서 위에서 만든 titleCheck id를 이용해서 로직처리

js dom 선택자를 이용해서 id에 해당하는 텍스트를 가져와서  index.html 페이지면 감사리스트를 메인화면에 뿌려주는 함수를 호출해주고, mypage.html이면 사진과 한줄 상태 메시지를 받아온다. 우리는 아직 사진 업로드와 한줄 상태메시지 key를 안만들었기 때문에 사진은 디폴트로 더미 사진을 가져왔고, 상태메시지는 아직 없는 상태로 처리했다. userInfo = snapshot.val(); 이부분 아래에 로직을 넣어준다. snapshot.val()에는 sessoinCheck할때 로그인 한 유저와 관련된 값이 들어있다. 전체로직을 확인하자. 우리는 아직 .imgURl .comment 값을 만들지 않았다.

//이부분까지 index.html에 해당하는 로직 이후에 엘리멘트 id로 mypage인지 메인 페이지인지 구분

//mypage에서 호출했다면

if(document.getElementById("titleCheck").textContent=="mypage"){

//1.닉네임 변경하기

document.getElementById("nicname").textContent = name

//2.이미지가 존재하면, 이미지 url을 가져와서 img 태그에 넣어준다.

if (snapshot.val().imgURl) {

document.getElementById("myimage").src = snapshot.val().imgURl

console.log("이미지가 저장되어 있네요");

} else {

//없으면 다른 이미지 대체

document.getElementById("myimage").src = "https://www.w3schools.com/bootstrap/img_avatar3.png";

console.log("이미지가 없네요ㅠㅠ");

}

//3.한줄글이 있으면 가져와서 넣어준다.

if (snapshot.val().comment) {

document.getElementById("statetxt").textContent = snapshot.val().comment;

console.log("한줄글이 저장되어 있네요");

} else {

//없으면 더미 데이터 넣어준다.

document.getElementById("statetxt").textContent = "한줄 기분을 적고 프로필 사진을 선택해 주세요~";

console.log("한줄글이 없네요 ㅠㅠ");

}

}else{

//index.html에서 호출 했다면

//alert(userInfo.userid); //uid는 db에서 user 테이블의 각 개체들의 pk 인데, 이 값은 인증에서 생성된 아이디의 pk 값과 같다. *중요!

//감사리스트 호출

thanksList();

return true

}

4.mypage.html 스크립트 부분에도 js 경로를 표시해 주자.

5.firebase 서버를 실행하고 확인

터미널로 firebase 서버를 작동시키고 로그인을 해보자, 그리고 mypage에 들어가보자. firebase 조회 함수로 nickname을 가져와 뿌려준 것을 확인 할 수 있고, 더미 사진이 들어가 있는 것을 볼 수 있다. 

6.마무리

참고로 sessoinCheck() 함수에서 어떤일이 일어나는지 한번더 확인해 주면 로그인한 유저의 정보를 가져와 snapshot.val()에 넘겨주는데 여기에는 아래 사진과 같은 값이 들어있다.(우리는 아직 안만들어 주었다.) 그래서 그 값들을 체크해서 사진을 보여주고, 글을 보여주고, 숨기고 하는 기능을 만들어 주는 것이다. 이번 포스팅은 firebase 자체 함수보다 javascript에 대해서 중점이 맞춰진것 같다. 다음 시간에는 수정 버튼을 클릭 하면 사진을 업로드할 수 있는 file버튼과 한줄 글을 작성할 수 있는 input text 창을 만들어 주고 저장하기 버튼이 활성화 되는 법을 살펴보겠다.

7.소스코드

thanksMemo.zip

보다 자세한 설명은 유튜브에 영상으로 정리해 놓았으니 공부하시다가 참고하셔도 좋을것 같습니다