[JavaScript] 개인 프로젝트 중 막힌 부분 - 프로필 사진 적용하기

개인 프로젝트를 하면서 사용자의 이름과 프로필 사진을 적용할 수 있는 기능을 만들었다.

나의 계획은 다음과 같았다.

• (초기에 설정한) 사용자이름을 새로 바꿀 때 , 기본 이미지의 프로필 사진을 직접 선택하여 적용한 경우 localStorage에 저장된다.
• 새로고침하여도 두 값이 유지된다.
• 사용자의 이름과 프로필 사진을 한번 더 수정하면 수정한 값이 출력된다.

이 글에서는 사용자의 이름을 변경하는 부분은 설명하지 않고 프로필 사진을 적용하는 것만 다룬다.

 

---

(*css 코드는 미포함)

 

초기에 설정해둔 사용자의 이름은 '춘식이'이고 프로필 사진은 아무것도 직접 정해주지 않았기 때문에 기본이미지가 화면에 나타난다.

기본 이미지는 html을 설정할 때 아예 같이 설정해주었다.

 

<div class="info">
  <h2 class="userName"></h2>
  <input type="text" class="userName_input" maxlength="12">
  <input type="file" name="profile_img" accept="image/*" class="profile_img">
  <figure class="profileImg_btn">
   <img src="img/bros_blank.jpg" alt="기본이미지">
  </figure>
</div>

 

기본 이미지를 클릭하면 사진을 바꿀 수 있도록 파일 찾기 화면이 뜬다.

왜이렇게 깨지지

 

저기서 사진을 하나 골라 적용해본다.

 

적용이 잘된다! 새로 고침을 해도 초기화되지 않고 제대로 나타난다.

새로고침 중 ....

localStorage 에도 제대로 저장되고 있다. 사진이 바뀔 때마다 이곳의 값도 바뀐다.

 

 

소스 코드 (최종코드)

/* 프로필 사진 */

const profileBtn = document.querySelector(".profileImg_btn");
const profileInput = document.querySelector(".profile_img");
const profileIcon = document.querySelector(".fa-user-plus");
const img = document.querySelector(".profileImg_btn img");
const fileTypes = [
  "image/apng",
  "image/bmp",
  "image/gif",
  "image/jpeg",
  "image/pjpeg",
  "image/png",
  "image/svg+xml",
  "image/tiff",
  "image/webp",
  "image/x-icon",
];

const NAME_KEY = "exam";
const PROFILE_IMG = "exImg";

/* 프로필 사진 변경 */
profileBtn.addEventListener("click", () => {
  profileInput.click();
});

function handleProfileImg() {
  // 선택한 이미지 파일을 currentFiles 변수에 담는다.
  const currentFiles = profileInput.files;
  if (profileBtn.children.length > 0) {
    // 프로필 사진이 두개이면 처음 사진을 지우고 하나만 띄운다.
    localStorage.removeItem(PROFILE_IMG);
    //profileBtn.children[0].remove();
  }

  // 만약, 파일이 없으면 경고창을 띄운다.
  if (currentFiles.length === 0) {
    alert("No files currently selected for upload");
  } else {
    // for of 는 배열
    for (const file of currentFiles) {
      // 만약, file의 타입이 fileTypes 에 포함되면 
      if (validFileType(file)) {
        // FileReader 인스턴스 생성
        const reader = new FileReader();
        // 파일을 읽었을 때 해당 이벤트 실행
        reader.addEventListener("load", () => {
          // localStorage에 PROFILE_IMG 를 key로 가진 reader.result를 읽는다.
          localStorage.setItem(PROFILE_IMG, reader.result);
          // reader.result를 이미지의 src에 넣어 화면에 보여준다.
          img.src = reader.result;
        });
        // 업로드 된 파일의 정보를 읽는다.
        reader.readAsDataURL(file);
      } else {
        alert("Not a valid file type. Update your selection.");
      }
    }
  }
  function validFileType(file) {
  return fileTypes.includes(file.type);
}
}

profileInput.addEventListener("change", handleProfileImg);

 

---

 

수정한 부분

 

기존 코드에서 수정한 부분은 다음과 같다.

 

// 수정 전

localStorage.setItem(PROFILE_IMG, file.name);  
loadImgUrl(reader.result);
.....
}


function loadImgUrl(DataUrl) {
  const image = document.createElement("img");
  //profileIcon.remove()
  profileBtn.appendChild(image);
  image.src = DataUrl;
}  


// 수정 후
localStorage.setItem(PROFILE_IMG, reader.result);
img.src = reader.result;
......

 

• 수정 전
  localStotage에 PROFILE_IMG 변수에 저장된 값 (key)을 가진 file.name을 읽고, 
  loadImgUrl() 함수를 호출하여 새로운 이미지 태그를 생성하여 profileBtn의 자식 요소로 지정한다.
  그 후, loadImgUrl  함수의 파라미터로 받아온 DataUrl을 새롭게 생성한 이미지 태그의 src 값으로 지정한다.
• 수정 후
  localStorage에 PROFILE_IMG 변수에 저장된 값 (key)을 가진 reader.result 를 읽고,
  loadImgUrl() 함수를 아예 삭제하고 곧바로 본래 기본이미지를 가지고 있던 img 태그의 src 값으로 reader.result를 지정한다.

 

 

수정 전 코드는 .. 어떻게 구현해야할지 몰라 여기저기에서 본 것을 짜집기 해서 그런지 ㅠ

이미 img 태그가 있는데 쌩뚱맞게 또 만들고 거기에 프로필 사진을 넣고 있다.

그러니 당연히 새로고침하면 사라져서 안보이지 ...!!!ㅋㅋㅋ큐ㅠㅠ

 

엉뚱하게 코드를 짜놓고 오랜 시간 헤맸다는게 어이없고 웃기다.

 

그치만 그땐 정~~~말 javascript 초반이었을 때고 지금은 그래도 몇번 해봤다고 코드 이해가 조금 더 성장한 것 같다.

그래서  뭐가 잘못된건지 바로 알아차릴 수 있던거겠지?

 

느리지만 성장하고 있다는 생각에 너무 뿌듯하다!