긴 프로젝트를 마치며....

인스타 클론 코딩이라는 긴 여정이 끝났습니다..

주요 기능을 정리해 볼까 합니다.

이미지 업로드

function photo_upload() {
  $("#photo_upload").click();
}

input창을 가려놓고 onclick 함수로 input창을 클릭한다.

$("#photo_upload").change(function () {
    $(".photo_upload").css("display", "none");
    $(".img_box").css("display", "flex");
    $(".first_title").css("display", "none");
    $(".second_title").css("display", "flex");
    setImageFromFile(this, "#preview");
  });

photobox 아이디값의 input의 값이 체인지 되었을때 아래 내용을 실행한다.

function setImageFromFile(input, expression) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        $(expression).attr("src", e.target.result);
      };
      reader.readAsDataURL(input.files[0]);
    }
  }

이미지를 미리보기 해주는 함수인데, 이미지 파일을 받아서 읽어 와서
setImageFromFile(this, "#아이디") 로 이미지 프리뷰를 해준다.

몽고DB 쿼리

all_feed = db.feed.find({'write_id': uid}).sort("feed_number", -1)

전체 내용을 write_id : uid 로 쿼리한다. sort는 feed_number 내림차순이다.

db.feed.update_one({"feed_number" : int(feed_number)}, {'$push': {'comment': doc }}, upsert=True)

feed 콜렉션에 feed_number 로 조회하여, commnet 안에 내용을 업데이트 해준다.
comment라는게 없다면 insert 해준후 업데이트 해준다. upsert=Ture

db.follow.update_one({"uid" : uid}, {'$pull': {'follow': username }})

follow 콜렉션에 uid값을 조회하여, 해당 내용에 follow 안에 username을 빼준다.
에러가 날수 있으니 try로 돌려준다.

AJAX 통신

  $.ajax({
    type: "POST",
    url: "/postclick",
    data: { username: username },
    success: function (response) {
  		let msg = response['msg']
        let rv = response['rv']
    }

  });

AJAX POST로 리퀘스트 받아 return 해준다.
추가로 변수까지 리턴해 줄수 있다.

rv = request.form['rv']

return jsonify({'response': 'success', 'rv' : rv})

focus blur 제이쿼리

  $(".serch_box > input").focus(function () {
    $(".serch_box > div").css("display", "none");
  });
  $(".serch_box > input").blur(function () {
    $(".serch_box > div").css("display", "block");
  });

input 창이 focus blur 되었을때 이벤트 처리를 해줄수 있다.

폼이 체인지 되었을때 바로 submit

  $("#pr_upload").change(function () {
    this.form.submit();
  });

즉시 submit 사진 올리기 할때 좋다.

 $(".photo_box").hover(
    function () {
      $(this).children(".info_feed").css("display", "flex");
      $(this).children(".info_feed").css("background", "rgba(0, 0, 0, 0.4)");
    },
    function () {
      $(this).children(".info_feed").css("display", "none");
    }
  );

해당 css를 hover 했을때 해당 css 및 자식요소의 css도 변경이 가능 하다.

솔직히 너무 힘든 과제 였다.

7일안에 인스타그램을 만들라니..ㅠㅠ

하지만 많은것을 배울수 있었던 시간 이였다.

다음을 기약하며,, 개발일지를 마무리 하겠당!!