리액트는 javascript? typescript? 뭘 써야할까...!
Typescript Javascript 뭘 사용해야 할까!
우리는 리액트를 개발하면서 두 가지 갈림길에 서게 됩니다. (편의상 JS TS로 나눠서 말하겠습니다!)
프로젝트를 시작할 때
JS -> npx create-react-app {projectname}
TS -> npx create-react-app {projectname} --template typescript
이런 식으로 나뉘게 됩니다. (저는 후자에 속합니다.)
js는 먼저 설명을 드렸으니 ts에 대해서 설명을 드리도록 하겠습니다~
ts는 js기반의 언어입니다. 쓰는 방법은 차이가 있지만 기본적인 것들은 똑같습니다.
Ts (Typescript)의 특징
js의 상위 집합으로 js의 모든 기능이 있음
ts 컴파일러를 사용하여 ts 파일을 js로 변환
정적 타입을 지원
클래스 기반 객체를 생성할 수 있음
클래스 기반이므로 객체 지향 프로그래밍 언어에 상속, 캡슐화 및 생성자 지원
js와 ts의 코드 차이
Javascript
function sum(a, b) {
return a + b;
//타입이 명확하지 않음
}
Typescript
function sum(a: number, b: number) {
return a + b;
//타입이 명확함
}
자스와 타스의 차이는 type의 차이인데 이 차이점은 코드의 가독성을 높여줍니다.
ts의 장점
1. 런타임 에러 vs 컴파일에러
js 같은 경우 프로그램이 잘 돌다가 이유 없이 에러가 나는 경우가 많지만 ts는 프로그램이 돌다가 에러가 나는 것을 방지할 수 있습니다. 이유는 type을 명시함으로 써 컴파일 단에서 미리 선언될 수 없는 변수를 미리 차단하기 때문
2. IDE 결합성
둘 다 IDE 기능을 제공하지만, ts는 js보다 IDE 결합성이 좋습니다. class function의 역추적이 쉽습니다. 그렇기에 에러가 난 부분을 쉽게 파악하여 코드를 수정하는 것에 있어서 용이합니다.
3. 높은 가독성
앞선 내용에 따르면 타입을 명시함에 따라서 어떤 형의 데이터가 들어가고 return 되는지 쉽게 알 수 있습니다.
js의 경우 따로 설명이 되어있지 않거나 네임이 이상할 경우, 직접 들어가서 코드를 수정하는 방법 외에는 없고, js의 input이나 return 값이 object 인 경우에는 코드를 더 읽기 힘들어집니다. 하지만 ts는 type을 선언함에 따라서 어떤 데이터가 들어가고 어떤 데이터가 return 되는지 쉽게 파악이 가능합니다.
(물론 네이밍은 어떻게 하냐에 따라서 가독성이 좋지만 모든 프로그래머들은 네이밍을 잘하진 않습니다.)
js의 장점
1. 유연성
js는 ts와 다르게 변수를 어떤 형이든 바꿔서 사용하는 게 가능합니다. 기본 자료형이 아닌 object같이 복합 자료형 일 경우는 ts는 선언해줘야 할 것이 많습니다. 그래서 코드 작성이 유연하지 못할 때가 많습니다.
2. 생산성
유연하지 못함 -> 생산과 연결이 됩니다. js에서는 5 줄이면 되는 코드를 ts에서는 10줄 이상으로 적어야 할 때가 있습니다.
이 부분은 뼈아픈 부분이긴 합니다 왜냐하면 코드 작성에 오래 걸린다는 건데 시간이 생명이고 돈인 개발자한테는 생상성에 대한 문제는 늘 중요시되고 있습니다.
그렇다면 우린... Typescript Javascript 뭘 사용해야 할까!
저는 ts를 사용하고 있어 ts를 추천합니다 생산성의 문제가 중요하다고 했지만 ts도 그 부분은 해결 가능한 부분이라고 생각합니다. 그리고 ts도 any라는 자료형을 사용해서 js의 유연성을 가질 수 있습니다. 그래서 저는 어떤 에러든 빨리 해결할 수 있는 역 추적이 가능한 ts가 개발하는데 더 효율적이라고 생각합니다.
가독성, 에러의 역추적, 컴파일 에러 예방이 좋기에 ts를 추천합니다.
물론 js도 좋은 언어이지만 팀단위에서는 중간에 팀원들의 합류가 있을 수 있기에 ts를 사용하는 것이 가독성이 높아 빠르게 합류할 수 있고, 테스트 코드를 통해서 미리 에러를 예방할 수 있습니다.
하지만..!
이것은 독자의 생각..!
팀원들이 더 중요하다고 생각하기에 js와 ts는 도구 일뿐! 종이를 자르는데 가위냐 칼이냐 차이이기에
팀원이 더 중요하다고 생각해요~
여담으로 제가 대학 프로젝트 때 js 못 읽겠다고 ts로 하자고 했던 형님이 있던데 ts로 해도 못 읽으심^^
한 동안 글을 못썼는데 다시 집중하도록 하겠습니다!