Javascript란? (JS와 프레임워크/라이브러리 알아보기)

본격적으로 자바스크립트 공부를 시작하며 자바스크립트와 자주 사용하는 라이브러리, 프레임워크를 알아보았다.
아직은 감이 잡히지 않는 내용들도 있지만.. 공부하며 차근차근 보강해야겠다!

 

 

Javascript란?

웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어

자바스크립트로 작성한 프로그램을 스크립트(script)라고 부르며, HTML에 연결되어 웹페이지를 불러올 때 스크립트가 자동으로 실행됨

웹페이지의 동작뿐만 아니라 서버, 모바일 앱 등에도 활용할 수 있음

 

자바스크립트 엔진 (Javascript Engine)

자바스크립트의 동작을 위해 브라우저에 자바스크립트 가상머신이 내장되어 있음

엔진의 종류는 다양하고, 브라우저마다 다른 엔진을 사용하고 있음

V8	Chrome, Opera
SpiderMonkey	Firefox
Trident, Chakra	IE
ChakraCore	Microsoft Edge
SquirrelFish	Safari

즉, 자바스크립트의 특정 기능이 특정 엔진에서만 지원된다는 언급이 있다면 특정 브라우저에서만 해당 기능을 확인할 수 있다는 것

 

자바스크립트로 변환(transpile)할 수 있는 언어들

다른 언어로 작성한 코드를 브라우저 실행 전에 자바스크립트로 변환할 수 있는 기능을 지원

아래의 예시 외에도 다양한 언어가 있음

 

1) CoffeScript: 짧은 문법을 도입하여 명료하고 이해하기 쉬운 코드를 작성할 수 있음

2) TypeScript: 개발을 단순화하고 복잡한 시스템을 지원하려는 목적으로 MS에서 개발, 자료의 명시화(strict data typing)에 집중된 언어

3) Flow: TypeScript와는 다른 방식으로 자료형을 강제하는 언어, Facebook에서 개발

4) Dart: 모바일 앱 등 브라우저가 아닌 환경에서 동작하는 고유의 엔진을 가진 독자적 언어, Google에서 개발

 

 

Javascript의 프레임워크/라이브러리

React

효율적인 웹 UI 구축을 위해 Facebook에서 개발한 라이브러리

 

1. 특징

1) 단방향 데이터 바인딩

- 데이터가 부모 > 자식의 방향으로만 프름

2) Component 기반 구조

- 컴포넌트란 독립적인 단위의 소프트웨어 모듈을 말함

- React는 페이지의 각 부분을 독립된 컴포넌트로 만들고, 이를 조립해 화면을 구성함

- 전체 코드 파악이 쉽고 기능단위, UI 단위로 캡슐화시켜 코드를 관리하기에 재사용성이 높음

3) Virtual DOM
- 이벤트가 발생할 때마다 Virtual DOM을 만들고, 실제 DOM과 비교하여 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영하여 앱의 효율성과 속도를 개선

4) Props와 State

- Props: 부모 컴포넌트에서 자식 컴포넌트로 전달하는 데이터, props는 변경이 불가하고 최상위 부모 컴포넌트만 변경 가능

- State: 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있음, 동적인 데이터를 다룰 때 사용하며 사용자의 상효작용을 통해 데이터를 동적으로 변경할 때 사용

 

2. 장점

1) CSR(Client Side Rendering), SSR(Server Side Rendering) 모두 지원

2) React 공식 문서, 커뮤니티 등을 통해 자료를 쉽게 접할 수 있음

3) 성능이 뛰어난 가비지 컬렉터, 메모리 관리 기능을 지원

4) UI 수정과 재사용성이 좋고, 코드 가독성을 높일 수 있음

5) 다른 프레임워크나 라이브러리와 병행하여 사용할 수 있음

 

3. 단점

1) IE8 이하 버전을 지원하지 않음

2) view 이외의 기능은 직접 구현하거나 라이브러리를 사용해야하기에 javascript 배경지식이 필요

3) 데이터 모델링, 라우팅, Ajax 등 미지원 기능이 있음 =

4) 사이트에 필요한 모든 javascript를 아무것도 띄우지 않은채로 다운로드 함

- 이후에는 다시 리소스를 다운하지 않아도 되지만, 모든 것을 스트리밍하는 웹의 지향점과 차이가 있음

- 검색 엔진 최적화 측면에서 불리

 

Vue

1. 특징

1) UI 개발을 위한 프레임워크

2) 직관적인 사용법으로 배우기 쉬움

 

2. 장점

1) 컴포넌트 단위로 재사용성을 높임

2) 리액트의 Virtual DOM 과 앵귤러의 양방향 데이터바인딩 장점을 모두 갖고있음

3) 압축된 파일 크기가 작아 초기 로딩시간이 단축됨

 

3. 단점

1) 리액트, 앵귤러와 비교하여 비교적 작은 생태계

- 문제 해결이나 지원에 도움을 얻기 어려울 수 있음

- 리액트와 앵귤러에서 제공하는 특정 기능을 찾기 어려울 수 있음

 

 

Next.js

1. 특징 (장점)

1) React 라이브러리의 프레임워크

2) 사전 렌더링 및 서버사이드 렌더링

3) 타입스크립트 설정을 따로 할 필요 없이 사용할 수 있음

4) 코드분할 (Code Splitting)

- 웹 첫페이지 로딩 시 가장 필요한 js 번들 조각을 전송해 로딩 시간을 줄여줌

 

2. React와 함께 사용하는 이유

1) SEO(Search Engine Optimization, 검색엔진 최적화)를 위한 SSR(Server-Side Rendering)이 가능해짐

- 기본적으로 React는 CSRdmf gksmsep, 이는 웹사이트 요청시 빈 HTML을 로딩하기에 SEO에 취약함

- Next.js는 pre-rendering을 통해 미리 데이터가 렌더링된 페이지를 가져올 수 있게 해주므로 SEO에 좋으며 사용자 경험 또한 향상시킬 수 있음

 

추가로 읽어볼 자료

김채운, 2023.12.02, [Nextjs] Next.js란?

항해하는 개발자, 2022.09.28, Next.js를 사용하는 이유

 

참고자료/출처

모던 JavaScript 튜토리얼

자바스크립트란?

 

리액트 공식문서

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

 

 

Chil su min, 2020.09.27, 리액트 단점, 리액트를 사용하면 안되는 이유

리액트 단점, 리액트를 사용하면 안 되는 이유

 

재로미, 2021.08.24, React란? 특징과 장단점 파헤치기

React란? 특징과 장단점 파헤치기

 

김서영, 2024.02.28, React - React의 원리, 특징, 장단점

React - React의 원리, 특징, 장단점

 

프론트엔드 연구소, 2023.04.12, Vue.js란? 간단 정리 특징 장점

Vue.js란? 간단 정리 특징 장점