Front-end에서 사용하는 언어 및 프레임워크는 무엇일까?

저는 현재 프론트엔드 개발자를 준비하면서 여러 프로젝트를 해봤는데, 그 때마다 어떤 언어와 프레임워크를 써야 하는지 제대로 생각하지 않고 썼던 기억이 납니다.

그래서 오늘은 프론트엔드에서 주로 쓰이는 언어와 프레임워크들을 비교해서 정리해보려고 합니다.

 

주로 사용하는 언어

HTML, CSS, JavaScript는 웹 개발을 배우기 시작할 때 프론트엔드에서 기초로 배우기도 하고 빠질 수 없는 대표적인 언어 3대장 입니다.

하지만 요즘 채용공고를 보면 JavaScript 뿐만 아니라 TypeScript를 사용해본 경험이 있는 사람을 뽑는 동향이 보입니다.

그렇다면 두 언어의 차이는 과연 무엇일까요?

 

JavaScript vs TypeScript

JavaScript는 동적 타입 언어로 타입을 명시적으로 선언하지 않고 변수를 선언할 수 있습니다.

TypeScript는 정적 타입 언어로, 변수의 타입을 명시적으로 선언하고 컴파일 시에 타입 검사를 수행합니다.

 

이 둘의 핵심적인 차이는 type의 여부 입니다.

// JavaScript 변수 할당
let number = 10;
number = "Hello";
console.log(number);

JavaScript는 숫자를 할당하고 있지만 타입을 명시적으로 선언하지 않았습니다.

number에 문자열을 할당하여도 오류는 발생하지 않으며 콘솔에 “Hello”가 출력되는 걸 알 수 있습니다.

// TypeScript 변수 할당
let number: number = 10;
number = "Hello";
console.log(number);

TypeScript에서는 변수 number의 타입을 명시적으로 숫자로 선언했습니다.

하지만 두번째 줄에서 숫자 타입에 문자열을 할당하려 할 때 컴파일 에러가 발생하게 됩니다.

JavaScript와 달리 컴파일 에러가 발생하여 실행되지 않습니다.

이처럼 정적 타입 검사를 통해 코드 안정성을 향상시키고 에러를 사전에 방지할 수 있습니다.

 

그 다음 인터페이스와 클래스 활용의 차이입니다.

// JavaScript에서의 객체 활용
const user = {
    name: "John",
    age: 30,
    isAdmin: true
};

// TypeScript에서의 객체 활용
interface User {
    name: string;
    age: number;
    isAdmin: boolean;
}

const user: User = {
    name: "John",
    age: 30,
    isAdmin: true
};

TypeScript는 JavaScript의 상위 집합으로 JS 코드를 그대로 변환할 수도 있습니다.

두 언어 중에 무엇을 사용할지는 프로젝트의 규모에 따라 자유롭게 선택해도 되나 주관적인 의견으로는 처음 개발을 배우는 사람에게는 러닝커브가 비교적 낮은 JavaScript를 추천합니다.

어느 정도 개발을 해본 분들은 코드 안정성이 더 나은 TypeScript 사용을 추천하고 싶습니다.

저도 아직 TypeScript에 대해서는 익숙하지 않은 편인데 좀 더 열심히 공부해보려고 합니다…ㅎㅎ

 

주로 사용하는 프레임워크

검색을 했을 때 제일 먼저 보이는 프레임워크 3대장은 React, Vue, Angular 입니다.

이들의 차이에 대해 간단하게 비교해보고자 합니다.

 

React

Facebook에서 개발했으며 SSR을 지원하고 검색 엔진 최적화(SEO)에 이점을 제공합니다.

React는 컴포넌트 기반으로 구조화 되어 있으며 독립적이고 재사용 가능한 코드를 작성할 수 있어 유지 보수가 편리한 편입니다.

또한, 가상 DOM을 통해 효율적으로 렌더링 됩니다.

크고 활동적인 커뮤니티를 가지고 있는데, 이는 저희를 도와줄 정보들이 많다는 것을 의미합니다.

그래서 비교적 낮은 러닝 커브를 가지고 있다고 생각합니다.

 

Vue

Evan You가 개발한 프로그레시브 자바스크립트 프레임워크로, 가볍고 유연한 프레임워크입니다.

빠른 페이지 로딩이 가능하며, 단일 파일 컴포넌트와 반응형 데이터 바인딩이 강력한 기능입니다.

Vue의 파일은 HTML 마크업 부분과 CSS 부분, 자바스크립트 부분이 나뉘어 있어서 웹 디자이너와의 협업에 용이합니다.

학습 곡선이 낮아 초심자가 접하기에 편한 프레임워크라는 평가도 받고 있습니다.

 

Angular

Google에서 개발한 프론트엔드 프레임워크로, 대규모 응용 프로그램을 구축하는 데 사용됩니다.

필요한 기능을 모두 내장한 프레임워크로 대규모 애플리케이션을 효과적으로 관리할 수 있습니다.

TypeScript를 기본 언어로 사용하여 타입 안정성을 보장합니다.

학습 곡선이 다소 가팔라서 초기 설정 및 배우기가 어려울 수 있습니다.

 

---

여기까지 프레임워크들을 간단하게 비교해보았습니다.

취준생의 입장에서 자주 보이는 빈도를 비교하자면 React 7 : Vue 2 : Angular 1 정도의 비율이었던 거 같습니다.

 

이번에 정리를 하면서 여러 자료들을 참고하게 되었는데 회사에서는 왜 React를 많이 쓰는지 조금이나마 알게 되었습니다.

프로젝트를 시작하는 프론트엔드 분들이라면 꼭 자신이 쓸 언어와 프레임워크에 대해서 알아보는 시간을 가져보면 좋을 거 같습니다!

 

 

 

• 언어 참고자료

[typescript vs javascript] 어떤 언어를 써야할까? 이 글로 종결하자!

 

TypeScript와 JavaScript – 차이점

• 프레임워크 참고자료

웹 프론트 프레임워크 비교하기 | 요즘IT

 

 

React, Vue, Angular