img[src]를 업로드한 image로 변경

const handleAvatarChange = (e) => {
  // input[type='file']에서 받은 파일 데이터 받기.
  const avatar = $("#input-avatar")[0].files[0];
  
  // 서버에 전달할 form data. (여기선 중요하지 않음)
  const formData = new FormData();
  formData.append("user_img", avatar);
  formData.append("user_id", window.location.href.split("/user/")[1]);
  
  $.ajax({
    type: "POST",
    url: "/api/user/img",
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    success: (res) => {
      alert(res["msg"]);
      // 서버로 데이터를 성공적으로 보내면, img 태그의 src를 변경.
      $("#user-avatar").attr("src", URL.createObjectURL(avatar));
    },
  });
};

const init = () => {
  // input[type='file']의 change event handling
  $(".input-group").on("change", "#input-avatar", handleAvatarChange);
};

flask에서 이미지 파일 받아서 local에 저장하기

file = request.files["file_give"]

save_to = 'static/mypicture.jpg'
file.save(save_to)

FormData

key/value 구조의 form data를 쉽게 만들어 주는 class.

자주 사용하는 문법

const newForm = new FormData();

// key, value 추가
newForm.append('name', 'bob');

// key, value 삭제
newForm.delete('name');

// 해당 key가 있는지 확인
newForm.has('name');

// 순회하기
for(let data of newForm) {
  const key = data[0];
  const value = data[1];
}

hash 함수

임의의 길이의 값을 고정된 길이의 값으로 변환해주는 함수.

hash의 특징으로 몇 가지가 있는데, 이러한 특징들 때문에 암호화에 사용될 수 있다.

• 해시 함수를 거친 출력값만으론 입력값을 유추할 수 없다.
  (정확히는 불가능에 가깝다.)
• 서로 다른 입력값으로 동일한 출력값을 만들 수 없다.
• 출력값으로 입력값을 복호화할 수 없다.
• 아무리 거대한 데이터라해도 일정한 길이로 출력되기 때문에, 거대한 데이터끼리의 무결성을 보장할 수 있다.
• 입력값의 아주 작은 변화로도 결과값이 전혀 다르게 도출된다.

출처: https://velog.io/@zuyonze/해시함수에-대한-개념-정리하기

해시 함수를 동작하게하는 알고리즘에도 여러 종류가 있는데, 제일 보편적인 알고리즘이 SHA256 이다.

import hashlib

password = 'hello'
hash_password = hashlib.sha256(password.encode('utf-8')).hexdigest()

python의 hashlib 내장 라이브러리를 이용해 쉽게 사용할 수 있다.
encoding(): string data를 byte data로 encoding 해주는 메소드. sha256을 사용하려면 encoding을 해줘야한다.
(보통 암호화하는 알고리즘의 경우, 데이터를 byte 단위로 다루기 때문에 encoding 과정이 들어가는 거라 유추해볼 수 있다.)
hexdigest(): 16진수로 구성된 string으로 변환해주는 메소드.