[Firebase&Web연동 10] 나의 프로필 페이지 만들기

[Firebase&Web연동 10] 나의 프로필 페이지 만들기

● 들어가기 전

이전포스팅에서는 로그인한 사람만 글을 볼 수 있도록 loginUserKey를 이용해서 sessoin체크를 했고, firebase 데이터 베이스 on 함수로 글을 조회 하는 기능을 구현해 보았다. 이번에는 네비게이션에서 프로필 페이지 메뉴를 클릭하면 프로필 페이지 메뉴로 이동하는 기능을 구현해보겠다. 그리고 간단하게 프로필 페이지를 꾸며보겠다.

● 실습순서

1.프로필 페이지 만들기

2.프로필 페이지 화면 설명

● 프로필 페이지 만들기

프로필 페이지 화면은 아래와 같다. 소스코드는 제일 아래 첨부해놓았다. 파일을 열어서 확인해보자. 참고로 여기서 페이지 디자인이나 각 엘리먼트의 위치는 크게 중요하지 않다. 중요한 것은 firebase 데이터베이스에서 어떻게 데이터를 가져와서 이곳에 뿌려주는가, 수정하기 버튼을 눌러서 값을 입력하려면 firebase 데이터베이스 로직을 어떻게 작성해야 하는가이다. 

● 프로필 페이지 설명

아래 코드를 잠깐 살펴보면 <!-- file --> 부분과 <!-- 상태메시지 --> 부분을 보자. file부분은 수정하기 버튼을 클릭했을때 file 업로드를 할 수 있는 file 버튼이 활성화 되고, 상태메시지 부분은 수정버튼을 눌렀을 때 input text 엘리먼트를 동적으로 붙여줄 것이다. 그리고 저장버튼을 누르면 데이터를 저장하고 위에서 만들었던 file 버튼과 input text 엘리먼트가 삭제된다. (참고로 위에 있는 더미 사진은 w3cSchool 여기서 url 주소를 통해서 가져왔다.마음에 드는 사진으로 바꾸어도 좋다.)

<h1>mypage</h1>

<br>

<!-- 프로필 사진 부분 -->

<div class="media">

<div class="media-left">

<img id="myimage" src="https://www.w3schools.com/bootstrap/img_avatar3.png" class="media-object" style="width:60px">

<!-- file -->

<div id="showfile">

</div>

</div>

<div class="media-body">

<h4 class="media-heading" id="nicname">닉네임</h4>

<!-- 상태메시지 -->

<div id="statetxtP">

<p id="statetxt"></p>

</div>

</div>

<br>

<div align="right">

<button id="changeBtn" type="button" class="btn btn-warning">수정하기</button>

</div>

</div>

<hr>

● 프로필 페이지 포스팅 단계

앞으로 포스팅 단계별로 각 기능을 구현할것이다. 대략적인 순서는 아래와 같다.

• 1.세션체크(로그인 한 사람만 이 페이지를 볼 수 있게함)
• 2.로그인한 유저의 닉네임을 받아와서 닉네임 부분에 뿌려주기.
• 3.수정하기 버튼 구현(클릭하면 사진 아래 부분에 파일업로드 버튼 활성화, 한줄 상태 메시지 활성화)
• 4.수정하기 버튼을 누르면 버튼이 자동으로 "저장하기" 초록색 버튼으로 변경.
• 5.저장하기 버튼을 누르면 사진과 상태메시지를  firebase storage 와 firebase database에 각각 저장.(사진은 파일 url 경로가 지정이 된다.)
• 6.내가 쓴 감사리스트만 key 값 비교를 통해서 조회해서 뿌려주기. 

● 소스코드

thanksMemo.zip

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