React로 카페 만들기 프로젝트 (3)

서론

이번 프로젝트의 핵심은 뭐니뭐니해도 Typescript라고 생각한다.

깃허브를 뒤지면서 다른 사람의 Typescript 코드를 본적이 있는데 확실히 Javascript랑은 확연히 달랐다.

근본적인건 똑같지만 좀 더 모듈화에 초점을 맞춘 느낌이 들었다고 해야하나?

들어오는 값의 타입과 나가는 값의 타입을 명시하는 것 때문에 정말 함수가 하나의 출입관리국처럼 보였기 때문일지도 모르겠다.

 

내가 지난번에 Typescript로 카카오톡 클론을 만들었지만 솔직히 그건 상당히 죽쑨 코드가 됐다고 생각하고..

그걸 반성해서 이번에는 Typescript의 Interface 기능을 좀 더 잘 살려보겠다는 마음가짐으로 개발에 임했다.

Interface란 Typescript에서 타입 체크를 위해 사용되는 기능이다.

"자바스크립트에서는 이딴 거 안했는데 굳이 해야돼?" 라고 생각할수도 있다.

싫으면 안해도 된다. 근데 Typescript가 그렇게 놔두진 않을거다.

 

Typescript로 개발을 진행하면서 정말 툭하면 오류를 만났다.

그중 가장 짜증났던 오류가 useState로 한 컴포넌트 안에서 변수를 관리하려고 할 때,

외부에서 특정 인터페이스를 가진 데이터 A를 가져와서 useState의 변수로 지정하려고 하면 오류가 발생한다.

이유는 타입 체크를 하지 않아서.

문제는 내가 useState로 관리되는 변수의 타입 체크 방법을 모른다는 거다.

useState로 관리되는 변수 B에 A와 동일한 인터페이스를 지정해주면 될 거 같은데 그 방법을 못찾았다.

이런 오류 외에도 엄청 자잘자잘하게 많았다.

 

Interface

쓸데없는 서론이 길었지만 결국 핵심은 Interface다.

초심자가 Typescript를 본다면 가장 눈에 띌 수 밖에 없는 부분.

 

인터페이스는 변수, 함수, 클래스에 사용될 수 있다.

인터페이스의 정의 방법은 상당히 간단하다.

interface A {
	name : string;
	age : number;
	rich : boolean;
}

짠. 이러면 인터페이스 생성 완료다.

이걸 변수에 적용한다면 변수의 형태는 이 인터페이스를 따라야만한다.

 

함수는 변수와는 다르게 데이터 오가는 출입구가 있다. 그래서 리턴 타입도 타입체크를 해줘야한다.

const Func:string = function (value:number) {
	return "A"
}

리턴 타입 체크는 생략해도 문제 없다.

그럼 아마도 알아서 any 타입으로 리턴 타입이 지정될 것이다.

any 타입이란 아무거나 와도 상관없다는 뜻이다.

 

클래스 타입 체크 방법이야 내가 클래스를 쓴적이 없으니 패쓰.

이번 프로젝트에선 안썼지만 지난번 프로젝트에선 Typescript도 자주 사용했었는데,

Class의 constructor에서 선언되는 변수는 모두 타입 체크 대상이다.

타입 체크를 하지 않으면 constructor에서 선언될 수 없고 클래스 내에서 사용될 수 없다.

 

그리고 덕 타이핑이라는게 있다.

거창한 개념은 아니고 Typescript의 타입 체크에 좀 더 유연성을 주는 개념이다.

예를 들어 어떤 객체 A가 있는데 이 객체는 인터페이스 없이 그냥 만들었다.

그리고 함수 B를 통해 객체 A를 입력받는데, 들어오는 변수의 타입 체크를 인터페이스 C로 설정한다.

그렇다면 객체 A는 인터페이스 없이 만들었으니까 당연히 타입 체크를 통과하지 못하겠지만

만약 인터페이스 C의 형태와 객체 A의 형태가 일치한다면 타입 체크를 통과시켜준다.

그냥 그런 개념이다.. 구태여 인터페이스를 통해 생성해줄 필요가 없다는..

그냥 나는 알게모르게 사용하던 개념인데 이름까지 별도로 있을 줄은 몰랐다.

 

타입 앨리어스

내가 볼 때 이건 타입 체크 기능의 연장선 같다.

타입스크립트는 {} 이렇게 객체를 만들고 나중에 이 안에 요소를 추가할 수 있다.

const leehan = {};
leehan.iq = 80;
leehan.tall = 160;
leehan.eye = 0.3;

뭐 이런 식으로.

하지만 여기에서도 타입 체크의 기능의 연장선상인 타입 앨리어스를 사용하면 다음과 같이 사용할 수 있다.

type L {
	iq : number;
	tall : number;
	eye: string;
}

const leehan = {} as L;
leehan.iq = 80;
leehan.tall = 160;
leehan.eye = "구림"

보다시피 type을 사용한 걸 볼 수 있다.

 

"아니 그러면 이게 interface랑 뭐가 다르냐?" 라고 묻는다면

이 타입 앨리어스는 리터럴 값이 사용하다는 게 다르다고 답할 수가 있다.

 

간단하게 보여주자면

type leehanIQ = 200 | 300 | 400;

이런 운용이 가능하다는 거다.

쉽게 말하자면 자유롭게 타입을 만들어낼 수 있는 툴인 것 같다.

 

결론

타입스크립트에 대해서 충분히 공부를 하고 프로젝트를 진행했어야 했는데 쩝.

아니, 그렇게 치면 자바스크립트도 책이 미친 1000p 가까이 되던데 그걸 죄다 공부하고 갔어야했는데~ 하는 아쉬움이랑 다를게 없는 소리인가

내가 개발을 하면서 부족함이나 불편함을 느꼈다면 거기에서부터 찾아보고 알아보는 것도 나쁘지는 않다고 생각한다.

근데 그런 태도로는 아무래도 지난번처럼 막무가내식 코딩이 될 수 있는 위험성이 크니까.

그래서 최근에는 조금 고민이다.

먼저 만들기 시작하면서, 시행착오 속에서 배우는 것이냐.

아니면 먼저 공부를 하고, 기초부터 차근차근 설계해나가는 것이냐.

 

그럼 오늘은 여기까지.

내일도 힘내자 나야. 파이팅~