다음 카카오 우편번호

• 다음 카카오 우편번호를 사용했습니다.
  출 처 https://postcode.map.daum.net/guide#usage
  
• 사용 방법은 위에 사진에 나와있습니다.

// 우편번호 찾기
  const btn_zipcode = document.querySelector("#btn_zipcode")
  
  btn_zipcode.addEventListener("click", () => {
    new daum.Postcode({
      oncomplete: function (data) {
        let addr = ""
        let extra_addr = ""

        if (data.userSelectedType == "R") {
          addr = data.roadAddress
        } else {
          addr = data.jibunAddress
        }

        if (data.bname != "") {
          extra_addr = data.bname
        }

        if (data.buildingName != "") {
          if (extra_addr == "") {
            extra_addr = data.buildingName
          } else {
            extra_addr += ', ' + data.buildingName
          }
        }

        if (extra_addr != "") {
          extra_addr = ' (' + extra_addr + ')'
        }

        const zip_code = document.querySelector("#zip_code")
        zip_code.value = data.zonecode

        const f_addr1 = document.querySelector("#f_addr1")
        f_addr1.value = addr + extra_addr

        const f_addr2 = document.querySelector("#f_addr2")
        f_addr2.focus()
        console.log(data)
      }
    }).open();
  })

• 위에 코드를 설명해 보면

1. 스크립트 부분은 팝업창을 띄울 곳인 회원가입 페이지에 넣어줍니다.
   

2. 데이터를 불러오면 아래와 같은 값들이 나옵니다.
   

3. 현재 주소 addr 과 추가 주소 extar_addr 을 선언합니다.

4. data.userSelectedType을 사용하여 현재 도로명주소인지 지번주소인지 확인 후 주소를 넣습니다.

   • data.userSelectedType == "R" 이면 도로명 주소
   • data.userSelectedType == "J" 이면 지번 주소

5. bname(법정동/법정리 이름)이 있을 때 extar_addr에 담아줍니다.

6. buildingName(건물명)이 있을 때,

   • extar_addr 변수에 문자열로 이어서 붙여줍니다.

   buildingName(건물명)이 없을 때,

   • extar_addr 변수에 새로 값을 넣어줍니다.

7. extar_addr 값이 비어있지 않다면 (소괄호)를 해줘서 구분을 해줍니다.

8. 마지막으로 현재 주소에 추가 주소를 붙여줍니다.

프로필 이미지 바꾸기

// 프로필 이미지 변경
  const f_photo = document.querySelector("#f_photo")
  f_photo.addEventListener("change", (e) => {
    // console.log(e)
    const reader = new FileReader()
    reader.readAsDataURL(e.target.files[0])

    reader.onload = (e) => {
      // console.log(e)
      const f_preview = document.querySelector("#f_preview")
      f_preview.setAttribute("src", e.target.result)
    }
  })

• 위에 코드를 설명해 보면

1. 변경할 이미지를 가져옵니다.
2. 해당 이미지가 변화했을 때 다음 코드를 수행합니다.
3. Filereader 객체를 선언합니다.

Filereader 객체

출처 https://developer.mozilla.org/ko/docs/Web/API/FileReader/readAsDataURL

• file이 읽어졌을 때 해당 파일을 핸들링 할 수 있습니다.

4. 이벤트가 발생했을 때 event의 files에서 해당 파일을 선택합니다.
5. 파일을 전부 읽어왔다면 다음을 수행합니다.
6. 바꿀 프로필을 가져옵니다.
7. 해당 프로필의 속성값을 event 객체에서 tager 안에 result 값으로 바꿔줍니다.
   

• base64로 인코딩되어 있는 파일이 들어있습니다. base64로 인코딩된 것은 바로 이미지로 표현이 가능

8. 기본 이미지에서 선택한 이미지로 변경된 것을 확인할 수 있습니다.
   

마무리

다음 시간에는 DB에 데이터가 등록되는 부분을 해보겠습니다.

긴 글 봐주셔서 감사합니다.