Refactor[1] - Typescript

올해 1월에 MVP로 만들었던 코드들 .. 몇 개월이 지나고 나니 이거저거 달라붙어서 이상한 코드가 되어있었다.
그리 대단한 페이지도 아닌데, 1000줄 가까이 되는 코드고 읽다보면 속이 울렁거린다.
약 1주 정도의 시간을 갖게 되어 9월에 리팩토링의 시간을 갖게 되었다.

처음 진행한 것은 타입스크립트 도입이다.

왜?

사실 누군가로부터 타입스크립트 좋다, 써봐라 이런 얘기를 들었을 때에 썩 와닿지 않았다.
학생 때 C와 Java를 조금 공부하다가 Javascript를 통해 동적 타입으로 작성해보니 너무 편했고
굳이 필요하다고 느낀 적이 잘 없었다.

도입의 필요성을 느낀 순간은 다음과 같았다.

1. 백엔드 통신

fetch(~~~).then((res) => { 
	const { price } = res.data; 

	if (price === 10000) console.log('만원입니다'); 
});

이 코드는 정상 작동할까?
만약 서버에서 price 를 string으로 주고 있다면 작동하지 않는다.

2. 트래킹

const name = 'minseo'; 
const job = someOption ? 'coder' : ['coder', 'soldier'];
tracker.track('새로운세상', { 이름: name, 직업: job });

프로덕트에서 Array[string] 형식으로 트래킹 데이터를 원했지만, 나는 단일 string 을 보내고 있었다.
휴먼에러로 undefined 값을 보낼 때도 있었다 😂
프로덕트 파트와 잘 조율하여 Type 을 미리 명시해두고, interface 를 작성하여 관리하면
유지보수 관점에서 크게 도움이 된다

3. 협업

function sum(a,b) { return a + b; } 
console.log(sum(1,2)) // 3 
console.log(sum('1','2')) // '12'

상상만해도 끔찍하다.. 저쪽이 결제 로직이었다면...?

나도 처음에 이 예시를 보고도
나: '엥? 누가 저따구로 짬? ㅋㅋ' 라고 생각을 했는데,
???: 'sum 함수를 너가 쓴게 아니라면' 이라는 말을 듣자마자
머리가 띵하고 .. 저런 실수를 할 수도 있겠구나, 디버깅하다가 울겠구나 생각을 하게 되었다.

4. Props

// ComponentC.jsx 
export default function ComponentC({ title, subTitle, imgSrc }) { 
    return ( 
    	<> 
        	<h1>{title}</h1> 
            <h2>{subTitle}</h2> 
            <img src={imgSrc} /> 
		</> 
	); 
} 

// index.jsx 
<ComponentC title='hello world' subTitle='hihi' />

React 의 props 문법에서 되게 유용하다는 생각을 많이 한다.
다음과 같은 상황에서 jsx 라면 에러 없이 통과시켜준다.

하지만 img 가 비어있는 채로 출력이 되어 의도한 것과 다를 것이라 생각한다.
또한 IDE 에서 필요한 Props를 안내해주는 기능을 더 효과적으로 쓸 수 있다.

이미 수많은 JSX 파일이 있지만, 시간 날 때 짬짬히 TSX 로 변경해주고
신규개발하는 파일에 대해서는 항상 TSX로 작성한다.

알겠고 그래서 뭐했는데

const, let strings : string
useRef: MutableRefObject
components: JSX.Element | JSX.Element[]
object 들에 interface 씌우기

그게 설마 끝임?

private, public 이나 OOP 스러운 무언가를 해야한다고들 하는데.. 뭔지 모르겠다
조만간 알아보도록 하자.