[Firebase&Web연동 13] 프로필 페이지 저장버튼 구현

[Firebase&Web연동 13] 프로필 페이지 저장버튼 구현

● 들어가기 전

지난포스팅에서는 수정버튼을 누르면 발생하는 이벤트 함수와 그 안에 로직구성을 살펴보았다. 이번 포스팅에서는 저장버튼을 누르면 사진이 저장되고 한줄 글이 저장될 수 있도록 구현을 해보자. 

● 실습순서

1. if문으로 저장하기 버튼이 눌렸을때 체크

2. 저장하기 버튼이 눌렸으면 먼저 firebase storage로 가서 사진 저장

3. 사진 url을 가져와서 firebase database user레퍼런스에 저장

4. 한줄글도 firebase database user 레퍼런스에 저장

5. 활성화된 file 버튼과 textarea 태그 삭제

1. if문으로 저장하기 버튼 체크

유저가 저장하기 버튼을 누르면 if문이 체크를 해서 firebase에 저장하는 함수를 호출해준다. 저장이 완료되면 저장함수는 true를 리턴하고, 저장이 실패하면 catch문 안에서 return을 시켜서 로직 실행을 종료시켜준다. firebase에 저장이 성공하면 앞에서 만들었던, 사진업로드를 위한 file 버튼과 textarea 버튼 엘리먼트를 제거해주도록 한다. 그리고 다시 버튼의 이름은 수정하기로 바꾸고 색깔은 노란색으로 바꿔준다. 아래는 로직이다. 이해가 잘 안간다면 맨아래 전체 로직을 다운받아서 살펴보자.

else {
 
                    console.log("저장 버튼 - input file 사라지게 input text태그 사라지고 p 태그에 넣고 저장버튼 비활성화 수정버튼 활성화를 시작합니다");
 
                    //저장하기 함수 호출
                    console.log("저장하기 함수 호출");
                    var saveChack = imageStateMsgAllSave();
 
                    if (saveChack) {
                        //활성화된 input file 객체 삭제                    
                        var parent = document.getElementById("showfile");
                        var child = document.getElementById("fileButton");
                        parent.removeChild(child);
                        console.log("활성화된 input file 객체 삭제 완료");
 
                        //input text area 객체 삭제해주기
                        var parentTwo = document.getElementById("statetxtP");
                        var childTwo = document.getElementById("comment");
                        parentTwo.removeChild(childTwo);
                        console.log("활성화된 input text area 객체 삭제 완료");
 
 
                        //p태그에 수정한 한줄 메시지 넣어주기
                        var htmlThree = "<p id=\"statetxt\">" + comment + "</p>";
                        $("#statetxtP").append(htmlThree);
                        console.log("할줄메시지가 들어있는 p 태그 활성화");
 
                        changeBtn.textContent = "수정하기"
                        changeBtn.className = "btn btn-default";
 
                        console.log("저장되었습니다");
                    }          
 
            }

imageStateMsgAllSave() 함수가 사진을 저장하고 한줄글을 저장하는 로직이 담겨 있다. 이 함수에 대해서는 아래에서 자세히 살펴보도록 하겠다.

2. firebase storage 이용해서 사진 저장하기

아래는 사진을 firebase 스토리지에 저장하고 다시 url을 불러와서 화면에 뿌려주고, 한줄글을 저장하고 다시 가져와서 화면에 뿌려주는 로직이다. 각 로직마다 상세하게 주석을 달아 놓았다. 핵심부분만 살펴보면 사진 저장은 firebase.storage()함수를 이용해서 .ref() 함수를 이용해서 사진을 저장할 위치(참조)를 정해준다는 것이다. 여기서는 이름이 중복되면 안되기때문에 로그인한 user의 key를 이용해서 정해주었다. 그리고 마찬가지로 put을 이용해서 파일을 업로드 한다. 그리고 또 중요한 것은 파일이 전송되면 객체 타입을 반환해주는데 그 객체에는 .then()이라는 콜백 함수가 있다. 전송이 완료되면 인자값 (여기서는snapshot)이 넘어오는데 그곳에는 사진에 관한 정보가 들어있다. 즉 사진 저장 url이 들어있는데 이 값을 가져와서 javascript dom을 이용해서 화면에 뿌려준다. 그리고 마지막으로 database 레퍼런스를 호출해서 사진 url과 한줄 글(comment)을 업데이트 해준다. url 변수는 전역변수로 만들어주는 것도 잊지말자. 사진 저장이 실패가 되면 catch안에 함수가 실행된다. 그렇다면 서버를 실행해서 한번 실행을 해보자.

        //이미지와 한줄글 최종 저장하는 함수!
        function imageStateMsgAllSave() {
            console.log("imageStateMsgAllSave로 들어왔습니다");
 
            //파일을 파이어 베이스 스토리지에 저장하는 로직
            var fileButton = document.getElementById("fileButton");
            comment = document.getElementById("comment").value;
            alert(comment);
            //수정 버튼을 눌러서 fileButton 객체가 생기면~! 작동
            if (fileButton) {
                //fileButton.addEventListener('change', function (e) {
                console.log("fileButton.addEventListener('change', function(e){ 함수 호출 - 들어왔습니다");
                var file = fileButton.files[0];
                //현재 유저 키를 파일이름으로 지정
                var storageRef = firebase.storage().ref(loginUserKey);
                var task = storageRef.put(file);
                // #.핵심
                //이곳에서 파이어베이스 스토리지에도 저장해주고, 데이터베이스에도 저장해줘야 함.
                //유저키(부모키)를 레퍼런스로 잡고 url 추가해줌 userSessionCheck() 먼저 실행
                //사진을 업데이트 하고 현재 상태글 업데이트 하고, 다시 불러오기
                //비동기 방식으로 움직임
                //최종완료되었을때 이곳에서 끝난다
                task.then(function (snapshot) {
                    url = snapshot.downloadURL;
                    console.log("파이어베이스 스토리지에 저장된 주소 =  " + url);
                    //파이어베이스에 이미지를 저장한후 그 url을 바로 가져와서 img 태그에 적용해줌
                    document.querySelector('#myimage').src = url;
 
                    //여기에 user 레퍼런스에 사진 url 저장
                    //선택된 키가 있으면 수정
                    userRef = firebaseDatabase.ref('users/' + loginUserKey);
                    userRef.update({
                        createtime: currentTime,
                        name: name,
                        imgURl: url,
                        comment: comment
                    });
                    console.log("파이어베이스 데이터베이스 user 레퍼런스에 성공적으로 저장 완료");
                    alert("성공적으로 변경되었습니다.")
 
                })
                    .catch(function (error) {
                        console.error(error);
                        return;
                    });
 
                //});
 
            }
            return true;
        }

3. 오류

서버를 실행하고 사진을 업로드 해보면 예상치 못한 오류가 발생한다.

▲ 파일 선택을 눌러서 올려줄 사진을 선택한다.

▲ 한줄글도 작성을 해준다. 사진은 바로 바뀌게 해놓지 않았다. (추후에..)

▲저장하기 버튼을 누르면. 한 줄글 확인을 위한 alert 창이 뜬다. 

▲ 문제는 저장이 안된다...파일이 커서그런가? 경고문을 읽어보자. pe...ermission...? 음 허가. 오케이.

4. firebase storage 설정

 firebase storage도 database 와 마찬가지로 사용하겠습니다. 라는 설정을 미리 해줘야 한다. 설정은 버튼하나만 누르면 된다. 아래 그림을 참고하자.

▲firebase 대쉬보드로가서 좌측에 firebase storage 메뉴를 누르면 위와 같은 창이 뜬다. 시작하기 버튼을 누르자. 

▲이와 같은 창이 뜨면 또 확인을 누르자. 이제 firebase storage를 사용할 수 있다.

5. 재실행

다시 firebase 서버를 가동시키고 위와 같은 작업을 해보자. 파일버튼으로 업로드할 사진을 올리고, 한줄글을 작성한다. 그리고 저장버튼을 누른다.

▲다시 사진을 업로드하고 한줄글을 적는다.

▲저장하기 버튼을 누른다.

▲파일일이 성공적으로 업로드된것을 볼 수 있다. 그리고 한줄글도 성공적으로 업로드 되었다. 버튼도 수정하기 버튼으로 바뀌었다. 

6. 확인

이제 firebase 대쉬보드로가서 데이터가 파일과 데이터가 잘 저장되었는지 확인해보자.

▲파일이 성공적으로 업로드되었다.

▲database에도 한줄 글과 이미지 url이 성공적으로 저장되었다.

7. 마무리

이번 포스팅에서는 firebae storage를 이용해서 html페이지에서 파일 업로드 하기와 database upload 함수를 이용해서 이미지 url과 한줄글을 업데이트 하는 법을 알아 보았다. 전체로직을 다운 받아서 살펴보도록하자.  

8. 소스코드

thanksMemo.zip

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