[개발] JavaScript or TypeScript?

드디어, 취업했다!

이번 글을 작성하기에 앞서 간단한 근황을 공유해보고 싶다.

 

[후기] 글또를 마무리하며: 1편

 

[후기] 글또를 마무리하며: 2편

 

사실 이 블로그는 졸업 후에 글또라는 개발자 글쓰기 소모임에 가입하여 운영하기 시작한 블로그인데, 난 지금까지 Java와 Spring Boot로 웹 개발을 해왔기 때문에 이 둘에 대한 글이 많았다.

 

처음에는 내 수준으로 꾸준히 개발에 대한 글을, 주기적으로 작성하는 것이 가능할까 싶었다. 하지만 실제로 그동안 면접을 진행했던 곳을 기준으로, 감사하게도 블로그 운영 자체를 긍정적으로 바라보시는 분들이 더 많았다.

드디어!!!

 

그리고, 마침내 10일 전에 한 스타트업에 취업했다!

 

하지만 한 가지 고민이 있었는데, 바로 이곳에서는 (아마도) JavaScript와 TypeScript로 개발할 것 같다는 것이었다. 즉, 기술 스택이 달라질 것이기 때문에 당분간 험난한 여정이 예상되지만, 그래도 가고 싶었던 곳이었고 관심 있었던 비즈니스 도메인인 데다가, 서비스도 운영하고 있었기 때문에 이곳으로 출근하기로 결심했다!

 

'어디서부터 시작하지?'

입사가 확정된 후, 스스로에게 던진 첫 질문이었다.

 

막막했다. JavaScript로 개발한 경험은 무려 4년 전에 소프트웨어 공학 강의에서 팀 프로젝트로 진행했던 온라인 쇼핑몰 만들기 프로젝트가 전부였기 때문이다. 다행히 좋은 결과로 마무리할 수 있었지만, 너무 오래된 이야기였다. 그래도 이건 좀 나았다.

 

왜냐하면 TypeScript로는 개발한 경험은 고사하고, 이 언어가 뭔지도 잘 모르기 때문이다.

 

그래서 더 늦기 전에 JavaScript와 TypeScript에 대한 글을 작성해 보자고 결심했다. 하지만 어느 정도로 깊게 작성할지는 쉽게 결론이 나지 않았다. 고민 끝에 일단 이번 글은, 여러 자료를 조사한 결과를 개요처럼 구성해 둘의 특징을 비교하며 정리하기로 하고, 중요한 특징에 대한 자세한 내용을 다음 글의 주제로 정하기로 했다.

 

JavaScript

1. Script 언어다.

가장 큰 특징은 역시 이름에서 알 수 있듯 인터프리터 기반의 'Script 언어'라는 것이다. 따라서 별도의 컴파일 과정을 거치지 않고 브라우저에서 직접 실행된다.

 

이 부분은 쉽게 이해가 됐다. 왜냐하면 예전에 온라인 쇼핑몰을 개발할 때 VS Code에서 명령어를 실행해 가며 브라우저로 결과를 확인했던 기억이 있기 때문이다. 그때는 그냥 그런가 보다 하고 지나갔는데, 이 내용을 알고 나니 이해가 되었다.

 

2. Dynamic Typing이 가능하다.

다소 낯선 말이었다. 왜냐하면 프로그래밍의 세계로 처음 들어온 후, C, C++, Java를 중심으로 공부했기 때문에 어떤 변수의 자료형을 설정하는 것이 더 자연스러웠기 때문이다. 그래서 간단한 예제 코드를 만들어 봤다.

아래 코드의 실행 결과는?

let message = "Hello, World!";
console.log(typeof message);

message = 12345;
console.log(typeof message);

message = true;
console.log(typeof message);

 

이 코드를 실행하면 string, number, boolean이라는 결과가 한 줄씩 콘솔에 출력된다. 코드를 보면 message라는 변수의 타입을 명시하지 않았음에도, 변수에 저장된 값에 따라 서로 다른 자료형을 반환하는 것을 알 수 있다. 이것을 'Dynamic Typing(동적 타이핑)'이라고 한다.

 

3. 비동기(Async) 처리에 유리하다.

예전에 Spring Boot로 사이드 프로젝트를 진행하며 API 테스트를 할 때, 동시에 2개의 동일한 데이터가 DB에 저장되어 에러가 발생한 적이 있는데, 원인을 분석해 보니 동시성에 대해 처리하지 않아 발생한 에러였다.

 

다행히, JavaScript는 이 문제를 방지할 수 있는 다양한 처리 방식을 제공하는데, 크게 아래 3가지 종류가 있다.

 

(1) 콜백 기반

function fetchData(callback) {
  setTimeout(() => {
    callback("데이터 받아옴!");
  }, 1000);
}

fetchData((data) => {
  console.log("콜백:", data);
});

 

(2) Promise 기반

function fetchDataPromise() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("데이터 받아옴!");
    }, 1000);
  });
}

fetchDataPromise().then((data) => {
  console.log("Promise:", data);
});

 

(3) async/await 기반

async function getData() {
  const data = await fetchDataPromise();
  console.log("async/await:", data);
}

getData();

 

 

코드를 비교하면서 3가지 방법이 정확히 어떤 차이가 있는지까지는 파악하지 못했기 때문에, 이에 대한 내용을 다음 글의 주제로 결정했다!

 

TypeScript

1. JavaScript의 상위 집합(Superset)이다.

JavaScript에 Static Typing을 추가한 언어로, TypeScript로 작성한 코드는 컴파일 후 JavaScript로 변환되어 실행된다.

 

아마 이 글에서 가장 중요한 문장이 아닐까 싶다. 즉, TypeScript는 컴파일 언어이다.

 

2. Static Typing이 가능하다.

변수나 함수 등의 타입을 명시할 수 있어 컴파일 단계에서 에러를 미리 잡을 수 있다. 즉, 아래 코드를 실행하면 에러가 발생한다. message라는 변수는 string인데, 12345라는 number 값을 string 변수에 할당하려고 하니 에러가 발생하는 것이다.

let message: string = "Hello, World!";
// message = 12345; // 오류 발생

 

3. 객체지향 언어에서 쓰이는 명령어들을 지원한다.

TypeScript에서는 무려 Java에서 쓰이는 클래스, 접근 제어자, 인터페이스 등을 사용할 수 있다!

interface Person { // 인터페이스
  name: string;
  age: number;
}

class Student implements Person { // 구현체
  public name: string; // public
  private age: number; // private

  constructor(name: string, age: number) { // 생성자
    this.name = name;
    this.age = age;
  }

  public introduce(): string { // 멤버 함수
    return `안녕하세요, 저는 ${this.name}이고 ${this.age}살입니다.`;
  }
}

const student = new Student("철수", 20);
console.log(student.introduce());
// console.log(student.age); // 'age'는 private이기 때문에 외부에서 접근 불가하여 오류 발생

 

그동안 수없이 작성했던 코드와 너무 익숙한 모양과 기능의 코드다. 인터페이스도 쓸 수 있고, 접근 제어자도 있고, 생성자도 있고... 확실히 자료형이 있는 언어라 그런가 JavaScript에 비해 Java와 비슷한 점이 더 많은 것을 알 수 있었는데, 바로 이 이유 때문에 조사하면서 살짝 놀랐다!

 

JavaScript vs TypeScript? 내 생각은...

둘 중에 어느 언어를 쓸 것인지를 묻는다면 나는 TypeScript를 고를 것 같다. 처음에 주변에 이 두 언어에 대한 의견을 물어봤을 때 만장일치로 'TypeScript를 쓰는 것이 좋다'고 하셨는데, 간단한 조사만으로 이유를 알 수 있었다.

 

TypeScript가 그동안 내가 주로 사용했던 Java와 비슷하고, JavaScript의 Superset 이니까 당연히 지원되는 것이 더 많을 것으로 예상되는 것도 이유였지만, 더 크고 무서운 이유는 따로 있었다. (조사해 보니 많은 곳에서 TypeScript가 IDE를 사용할 때 훨씬 유리하다고 하는데, 이는 직접 개발해 봐야 알 것 같다.)

 

[Java] Exception 1편: Throwable 클래스

 

마침 지난 글이 Java의 Exception에 대한 글이었는데, Exception 2편의 주제가 바로 'Runtime Exception'이었다.

"Runtime Exception"

 

바로 이것 때문이다. JavaScript는 Dynamic Typing이 가능하기 때문에 Runtime Error 발생 가능성이 매우 높고, 무엇보다 디버깅도 매우 어렵기 때문에 정확히 어느 지점에서 에러가 발생하는지 파악하기도 어렵다.

 

따라서 이 3가지 이유 때문에 TypeScript가 더 좋은 언어이며, 나도 이것을 쓰는 것이 더 좋을 것 같다!