내일배움캠프 Day 21

프로젝트가 끝났다

 

시원섭섭하다

배운것도 많아서 이것저것 구현하였지만

내가 원한것을 구현하지 못한것도 많다.

 

그래도 구현한 것중 마음에 들었던 코드는

수정하기 기능 

 

    <script>
      const db = firebase.firestore();
      const storage = firebase.storage();
      const storageRef = firebase.storage().ref();
      const auth = firebase.auth();

	// 수정하기 전에 유저가 입력했던 값을 가져온다.
      var 쿼리스트링 = new URLSearchParams(window.location.search);
      console.log(쿼리스트링.get("id"));
      db.collection("post")
        .doc(쿼리스트링.get("id"))
        .get()
        .then((result) => {
          console.log(result.data());

          const imgtest = `${result.data().contentImgUrl}`;

          $("#title").val(result.data().title);
          $("#content").val(result.data().content);
          $("#testimg").val(result.data().contentImgUrl);
          // $('#editView').src(imgtest)
          $("#editView").attr("src", imgtest);

          // $('#category').get(result.data().category)
          // $('#image').val(result.data().contentImgUrl)
        });

        
    //   $("imgInput").click(() => {
        const onFileChange = (event) => {
          const theFile = event.target.files[0]; // file 객체를 theFile라는 변수에 담았음
          // FileReader는 JS가 자체적으로 제공하는 API
          const reader = new FileReader();
          reader.readAsDataURL(theFile); // file 객체를 브라우저가 읽을 수 있는 data URL로 읽음.
          // FileReader가 파일객체를 data URL로 변환 작업을 끝냈을 때
          // finishedEvent 이벤트가 발생해서 result 값을 imgDataUrl에 담음
          reader.onloadend = (finishedEvent) => {
            const imgDataUrl = finishedEvent.currentTarget.result;
            // 이미지를 업로드만 하고 업로드 버튼을 누르지 않았을 때는 스토리지에 저장하지 않기 위해
            // localStorage에 imgDataUrl을 임시로 보관함
            localStorage.setItem("imgDataUrl", imgDataUrl);
            document.getElementById("editView").src = imgDataUrl;
          };
        // };
      };

      function setThumbnail(event) {
        var reader = new FileReader();

        reader.onload = function(event) {
          var img = document.createElement("img");
          img.setAttribute("src", event.target.result);
          document.querySelector("div#image_container").appendChild(img);
        };

        reader.readAsDataURL(event.target.files[0]);
      }
	//수정 버튼 클릭시 발생 
      $("#send").click(() => {
        
        var 바꿀꺼 = {
          title: $("#title").val(),
          content: $("#content").val(),
       
        };

        db.collection("post")
          .doc(쿼리스트링.get("id"))
          .update(바꿀꺼)
          .then(() => {
            alert("수정완료");
            window.location.href = "/post.html?id=" + 쿼리스트링.get("id");
          });
      });
  
  
    </script>