패스트캠퍼스 챌린지 37일차

회원 가입 폼 - 정보 UX 선택하기

 

회원가입 폼에서도 그렇지만 어떤 기능을 하는 웹에는 API를 사용하는 경우가 많다. API를 구현하는 것은 그렇게 어렵지 않지만 사용하려고 하는 API가 만들려고 하는 서비스에 부합하는 기능을 지원하는지, 해당하는 API의 지속 가능성이라던지 문서화가 얼마나 잘 되어있는지 등의 요건들을 맞추고 선택하는 것이 더 중요할 것이다.

 

회원가입 웹앱에서는 다음의 지도 API를 사용할 것이다.

 

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

export default class AddressField {
  private template = template;
  private container: string;
  private data: Props;
  private address1?: string;
  private zipcode?: string;

  constructor(container: string, data: Props) {
    this.container = container;
    this.data = { ...DefaultProps, ...data };
  }

  ...

  public render = (append: boolean = false) => {
    ...

    container.querySelector(`#search-address`)?.addEventListener('click', () => {
      new window.daum.Postcode({
        oncomplete: (data: DaumAddress) => {
          this.address1 = data.roadAddress;          
          this.zipcode = data.sigunguCode;
          
          (container.querySelector('#address1') as HTMLInputElement).value = `(${this.zipcode}) ${this.address1}`;
        }
      }).open();  
    });
  }
}

 

위에 있는 script 태그의 url은 카카오(다음)에서 지도를 사용하기 위해 사용하는 스크립트 파일이며 아래의 코드는 API 가이드에서 기능을 사용하는 방식이다. 렌더 메소드에서 address 필드를 선택자로 지정하고 클릭 이벤트를 통해 API 인스턴스를 생성한다. 주소를 입력하게되면 address 인스턴스에 address1, zipcode 필드에 API에서 가져오는 데이터의 주소와 우편번호를 저장할 수 있다.

 

 

 

 

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential