jsx -> tsx 고민하기(TypeScript로의 이관)

항상 TypeScript 가 적용된 실무만 접했다.

온보딩 기간에 기존에 짜여진 코드를 분석하며 컨벤션, 아키텍처 등 개발 문화를 이해할 수 있다.

하지만 이 과정에서 누군가했던 고민을 내 것으로 만들기는 어렵다.

결론적으로, 이번 프로젝트를 하면서 꼭 하고 싶었던 부분이 jsx -> tsx 로 이관작업을 하는 것이었다.

(아직은 Type을 굳이 쓰지 않아도 되는 규모의 프로젝트이긴 하지만, 확장 가능성만 믿고 간다)

 

---

 

이관 작업을 하면서 내가 얻는 부분은

1. Type 정의할 때, 아키텍처를 고민할 수 있음.

- 예를 들어, Type을 쓸지 Interface를 쓸지, 둘 중 어떤 것을 쓰더라도 어떤 식으로 설계할 것인지

 

2. Type 으로 인해 기존 Component에 대한 설계가 부족함이 없었는지 고민할 수 있음.

- 예를 들어, 기존 jsx 컴포넌트가 새롭게 정의되는 Type으로 인해 분할/병합을 해야하지는 않는지

 

3. tsx로 확장자를 바꾸는 순간, 끝도 없는 에러를 발생시켜 다양한 케이스의 트러블 슈팅을 할 수 있음.

- 예를 들어, 기존 코드에서는 만나지 못했던 신박한(?) 에러를 경험한다던가

 

4. 트러블 슈팅 과정에서 테스트 코드를 사용해 TDD 를 고민할 수 있음.

- 예를 들어, 수동으로 테스트 했던 것을 jest나 Node 테스트 툴을 사용해 테스트 자동화를 한다던가(Unit Test, E2E 테스트 등)

 

 

---

 

하지만, 공짜로 얻을 수는 없다.

분명 TypeScript를 적용할 때는 몇가지 룰이 필요할 것이고, 그것을 지켜야 멋진 것을 적용시켰다고 할 수 있다.

구조적 타이핑에 익숙해지기
any 타입 지양하기
사용할 때는 너그럽게, 생성할 때는 엄격하게
유효한 상태만 표현하는 타입을 지향하기
...

이 밖에도 TypeScript를 적용할 때는 유의해야 하는 점들이 아주 많다.

미래의 내가 이런 것들을 지키고 숲을 헤치는 과정을 거쳐 바다를 발견하는 결과를 맞이하기를 바라는 마음이다.

느리고 서툴어도 화이팅이다. 엄청난 경험이 될 거니까 버텨라!