📖 진행한 공부 📖

• 개인과제 선택 구현 사항
• TypeScript

개인과제 선택 구현 사항

개인과제를 vercel로 배포까지 마치며, 선택 구현 사항에
sort()를 사용해 나라를 나열하는 걸 구현해보라길래 한 번 구현을 해보려고 과제를 다시 열었다.

처음에는 CountryCard.tsx를 건드려야 하나 생각했지만
생각해 보니 화면에 나라에 대한 정보를 렌더링 시켜주는 곳은 CountryList.tsx에서 useEffect를 사용해서 해주고 있었기에 해당 부분을 건드리면 되는 거 같음

setCountries(data); 로 해당 데이터들을 불러오기 전에 정렬을 해준 후에 불러오면 되지 않을까? 싶어서 코드를 수정해봤음

sort(), localeCompare()로 나라 이름을 알파벳순으로 정렬해줬음. 코드를 수정할 땐 localeCompare()를 사용했는데 이 메서드에 대해서 간략하게나마 설명을 적어보자면

localeCompare 메서드는 참조 문자열이 정렬 순서에서 앞 또는 뒤에 오는지 또는 주어진 문자열과 같은지를 숫자로 반환시킴

TypeScript

📚 never 타입

• 함수가 절대 return 하지 않을 때 사용
  예를 들어 함수에서 exception(예외)이 발생할 때

function hello(): never {
	throw new Error("aaa");
}

이렇게 return 시키지 않고 오류를 발생시키는 함수를 작성하거나, 타입이 두 가지 일 수도 있는 상황에 발생할 수 있음

function hello(name: string | number) {
	if(typeof name === "string") {
    	name // 여기에서의 name은 string 타입
    } else if (typeof name === "number") {
    	name // 여기에서의 name은 number 타입
    } else {
    	name // 여기에서의 name은 뭘 쓰든 never 타입
    }
}

위 코드에서 볼 수 있듯이 마지막 else에서의 name은 never 타입이기 때문에 만약 타입이 올바르게 들어온다면 저 코드는 작동하지 않음

그 위에 typeof name === "string" 혹은
typeof name === "number" 에서의 코드는 잘 작동함

📚 call signatures

함수 위에 마우스를 올렸을 시 보게 되는 것들을 말함

내가 함수를 어떻게 호출해야 하는지 알려주고, 함수의 반환 타입도 알려줌. 이게 signature 라는 것만 기억하면 됨

이제 나만의 call signatures를 어떻게 선언할지 알아보겠음

type Add = (a: number, b: number) => number; 

const add: Add = (a, b) => a + b

이렇게 하면 TypeScript한테 일일이 타입이 number라고 말해줄 필요가 없음 TypeScript는 add의 타입을 알기 때문.

즉, TypeScript가 유추할 수 있게 된 것이고 내가 함수를 구현하기도 전에 타입을 만들고 함수가 어떻게 작동하는지 서술해둘 수 있다는 말이 됨

이 call signatures 방식을 많이 사용하게 될 것임

현재 나는 React.js로 코드를 작성하고 있는데
props로 함수를 보내게 되면, 어떻게 함수가 작동하는지, 함수의 return 값이 무엇인지 TypeScript한테 설명을 해줘야 함

📚 오버로딩(overloading)

• 동일한 이름에 매개 변수만 다른 여러 버전의 함수를 만드는 것을 함수의 오버로딩이라고 한다.
• 파라미터의 형태가 다양한 여러 케이스에 대응하는 같은 이름을 가진 함수를 만드는 것
• 함수의 다형성(다양한 형태)을 지원하는 것
• function 키워드로만 함수 오버로딩을 할 수 있으며 arrow function으로는 오버로딩을 할 수 없다.

function overloading, method overloading 라고도 불림

다른 사람이 만들어 놓은 외부 라이브러리 및 패키지 같은 건 대부분 overloading을 엄청 많이 사용함

📖 함수 오버로딩을 위해 해야할 것 2가지

• 선언: 함수가 어떤 파라미터 타입들을 다룰 것인지 선언
• 구현: 각 파라미터 타입에 대응하는 구체적인 코드 작성
  ex) string일 때는 ~~, number일 때 ~~