240701 TIL_개인 프로젝트6 (나만의 포켓몬 도감 웹사이트 제작), Next.js 강의 ()

벌써 07월! 시간 빠르다
이번 과제는 조금 귀엽다. 귀여우니까 할 수 있을지 없을지는 몰라도 귀엽다.

포켓몬 도감 만들기~~

제네릭

// 제네릭 T에 들어올 수 있는 타입에 제약 조건이 없을 때
type UserData<T> = {
    name: string;
    userKey: T;
};

// 제네릭 T 에는 문자열이나 숫자만 들어올 수 있다는 제약조건을 줬을 때
type UserData<T extends string | number> = {
    name: string;
    userKey: T;
}


type HasLength = {
  length: number;
}

// 제네릭 T는 length: number를 속성으로 갖는 객체 타입만 들어올 수 있다는 제약조건 부여
function logLength<T extends HasLength>(item: T): void {
  console.log(item.length);
}

logLength("Hello, world!"); // 문자열은 length 속성을 가짐
logLength([1, 2, 3, 4, 5]); // 배열은 length 속성을 가짐
logLength({ length: 10, name: "Alice" }); // 객체는 length 속성을 가짐

// logLength(123); // 오류: number 타입은 length 속성을 가지지 않음

개인 프로젝트

var xhr = new XMLHttpRequest();
var url = 'http://apis.data.go.kr/1543061/abandonmentPublicSrvc/sido'; /*URL*/
var queryParams = '?' + encodeURIComponent('serviceKey') + '='+'서비스키'; /*Service Key*/
queryParams += '&' + encodeURIComponent('numOfRows') + '=' + encodeURIComponent('3'); /**/
queryParams += '&' + encodeURIComponent('pageNo') + '=' + encodeURIComponent('1'); /**/
queryParams += '&' + encodeURIComponent('_type') + '=' + encodeURIComponent(''); /**/
xhr.open('GET', url + queryParams);
xhr.onreadystatechange = function () {
    if (this.readyState == 4) {
        alert('Status: '+this.status+'nHeaders: '+JSON.stringify(this.getAllResponseHeaders())+'nBody: '+this.responseText);
    }
};

xhr.send('');

음... 해석 중....^^