TypeScript는 JavaScript의 상위 집합 언어이기 때문에, 기본적인 문법은 JavaScript와 비슷합니다. 하지만 TypeScript는 정적 타입을 지원하기 때문에, 변수의 자료형을 미리 선언해야 합니다. 또한, 클래스, 인터페이스, 모듈 등의 기능을 지원합니다. 아래는 TypeScript의 기본 문법에 대해 설명합니다.
변수 선언 변수를 선언할 때는 let 또는 const 키워드를 사용합니다. let은 재할당이 가능한 변수를 선언할 때 사용하고, const는 상수를 선언할 때 사용합니다. 변수의 자료형은 : 뒤에 명시합니다.
let message: string = "Hello, world!";
const PI: number = 3.14;
함수 선언 함수를 선언할 때도 변수와 마찬가지로 : 뒤에 반환값의 자료형을 명시합니다.
function add(x: number, y: number): number {
return x + y;
}
클래스 선언 클래스는 class 키워드를 사용합니다. 클래스 내부에는 속성과 메서드를 정의할 수 있습니다. 클래스의 속성과 메서드는 접근 제한자(public, private, protected)를 사용하여 외부에서 접근할 수 있는 범위를 지정할 수 있습니다.
class Person {
private name: string;
public age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
public sayHello(): void {
console.log(`Hello, my name is ${this.name}. I'm ${this.age} years old.`);
}
}
인터페이스 선언 인터페이스는 interface 키워드를 사용합니다. 인터페이스는 클래스나 객체가 가져야 하는 속성과 메서드를 정의합니다.
JS API의 최신화는 업데이트시마다 자동으로 되고 있습니다. JS API호출시 도메인 뒤에 특정 파라미터의 경우엔 가이드페이지(아래 기본사용법)에서 정의하고 있는 특정 파라미터 외엔 허용하지 않습니다. 이외 더미 파라미터와 같은 데이터를 붙혀서 로딩하실 경우, 스크립트 호출이 거부 될수 있으니 삭제 부탁드립니다. ex) ?_=XXXXXX, ?t=5469821879 등등
위와 같은 로딩 url을 서비스할 view 파일 (PHP, JSP)파일에 body 하단 부분에 넣어주자
2-2 이제 어떤 방식으로 할지 고르자
팝업을 이용하여 도로명 주소와 지번 주소 모두 보여주기
기본적인 팝업을 이용하여 사용자가 선택한 주소의 도로명 주소와 지번 주소를 모두 보여주는 방식입니다. 아래 '우편번호 찾기' 버튼을 클릭해서 바로 확인해보세요.(몇몇 Webview기반 브라우저의 window.open 미대응으로 인하여, Webview기반 서비스에 적용시 embed()를 이용한 레이어모드를 추천합니다.)
사용자가 선택한 값 이용하기
우편번호와 주소필드에사용자가 선택한 주소 값을 채워 넣는 방식입니다. 단, 사용자가 선택한 값을 이용할 경우 영문주소와 정확히 매칭되지 않을 수 있습니다. 영문주소는 기본주소(address)에 해당하는 영문 주소가 내려갑니다.예제 코드보기
iframe을 이용하여 레이어 띄우기
모바일웹에서는 팝업을 띄우는게 부담스러울 수도 있으니, 아래 코드와 같이 특정 element에 크기를 지정하여 iframe으로 끼워넣는 방식을 이용할 수도 있습니다. 아래 '우편번호 찾기' 버튼을 클릭해서 바로 확인해보세요. (현재 iOS 8.x 이상, Safari, webview 브라우저에서 position:fixed, inner-scroll 이용시 가상키보드 터치 불량 및 스크롤이 멈추는 현상이 간혈적으로 발생하고 있습니다. 이점 참고해 주시기 바라며, 모바일 환경에서는 가급적 아래의 "페이지에 끼워넣기" 예제를 참고하시는 것을 추천드립니다.) 예제 코드보기
iframe을 이용하여 페이지에 끼워 넣기
화면내에 끼워넣는 방식일 경우, 내부 스크롤이 거슬릴수도 있습니다. 이때 onresize 속성을 추가해서 iframe 높이를 조절하면 스크롤이 생기지 않습니다. 아래 '우편번호 찾기' 버튼을 클릭해서 바로 확인해보세요.예제 코드보기
주소를 선택하면 지도도 함께 보여주기
다음 지도 API를 함께 활용하여 선택한 주소에 대한 좌표를 가져와서 지도에 표시하는 예제입니다. 아래 '주소 검색' 버튼을 클릭해서 바로 확인해보세요. 다음 지도 API를 이용하시려면https://developers.kakao.com에서 API Key를 발급받으셔야 합니다.예제 코드보기
2-3 골랏다면 적용 해보자!
나는 제일 깔끔한
사용자가 선택한 값 이용하기
을 사용하기로 했다
<input type="text" id="sample6_postcode" placeholder="우편번호">
<input type="button" onclick="sample6_execDaumPostcode()" value="우편번호 찾기"><br>
<input type="text" id="sample6_address" placeholder="주소"><br>
<input type="text" id="sample6_detailAddress" placeholder="상세주소">
<input type="text" id="sample6_extraAddress" placeholder="참고항목">
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function sample6_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var addr = ''; // 주소 변수
var extraAddr = ''; // 참고항목 변수
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
addr = data.jibunAddress;
}
// 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
if(data.userSelectedType === 'R'){
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
extraAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if(data.buildingName !== '' && data.apartment === 'Y'){
extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if(extraAddr !== ''){
extraAddr = ' (' + extraAddr + ')';
}
// 조합된 참고항목을 해당 필드에 넣는다.
document.getElementById("sample6_extraAddress").value = extraAddr;
} else {
document.getElementById("sample6_extraAddress").value = '';
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('sample6_postcode').value = data.zonecode;
document.getElementById("sample6_address").value = addr;
// 커서를 상세주소 필드로 이동한다.
document.getElementById("sample6_detailAddress").focus();
}
}).open();
}
</script>
