Javascript 톺아보기

자바스크립트란?

'웹페이지에 생동감을 불어넣기 위해' 만들어진 프로그래밍 언어로, 스크립트 언어에 해당된다.

특수한 목적인 아닌 이상 모든 웹 브라우저가 인터프리터가 내장되어있으며 클라이언트단서 웹 페이지가 동작하는 것을 담당한다.

 

자바스크립트 만의 강점

• HTML/CSS와 완전히 통합할 수 있음
• 간단한 일은 간단하게 처리할 수 있게 해줌
• 모든 주요 브러우저에서 지원하고, 기본 언어로 사용됨

Javascript 프레임워크 / 라이브러리 알아보기

React

필요한 사전 지식 : HTML, CSS, JavaScript

React 특징

1. 컴포넌트 기반 구조
   • UI를 작은 독립적인 컴포넌트로 나누어 개발할수 있다
   • 컴포넌트는 자신의 상태 (State) 와 속성(Props)를 가지고 있으며, 재사용성이 높다.
2. 가상 DOM
   • 실제DOM을 수정하는 대신 가상DOM을 사용하여 성능을 최적화 한다.
   • 상태가 변경되면 가상DOM에 먼저 변화가 일어나고, 변경된 부분만 실제 DOM에 반영된다.
3.  단방향 데이터 흐름
   • 데이터흐름은 부모 컴포넌트에서 자식 컴포넌트로 전달된다.
   • 애플리케이션 상태 관리가 명확하게 이루어 지도록 한다.
4. JSX
   • HTML을JavaScript코드처럼 작성할 수 있게 함

React 장점

1. 재사용성
   • 컴포넌트 기반 구조로, 재사용이 높아 코드의 중복을 줄이고 유지보수를 용이하게 해줌.
2. 성능 최적화
   • 가상DOM을 사용해 변경을 최소화 함으로 대규모 애플리케이션에서 성능 향상을 잘 구현할 수 있다.
3. 커뮤니티와 생태계
   • 다양한 라이브러리, 도구, 프레임워크가 React와 함께 사용될 수 있다.
   • React Router, Redux등
4. 단일페이지 애플리케이션 개발에 적합
   • SPA (Single Page APplication) 
   • 페이지간 전환이 부드럽고 전체 페이지를 새로고침 하지 않고도 동적 업데이트가 가능하다.
5. React Native
   • 웹 뿐만아니라 모바일 앱 개발에도 활용할수 있는 ReactNative 프레임워크 제공

React 단점

1. 빠르게 변화하는 생태계
   • 새로운 기능이나 API가 자주 추가되거나 변경되기 때문에 따라가기 어렵다.
2. JSX문법
   • HTML + JavaScript 결합된 형태로, 초보자에게 익숙하지 않다.
   • 코드가 직관적이지 않게 느껴질 수 있다.
3. SEO(검색 엔진 최적화)
   • 클라이언트 측에서 렌더링 되기 때문에 서버측 구현이 되지 않으면 SEO 문제가 발생할수 있다.
   • 이를 해결하기 위해 Next.js 와 같은 프레임워크가 사용된다.

Vue

필요한 사전 지식 : HTML, CSS, JavaScript 

Vue는 최신의 JavaScript 프레임 워크로 점진적 향상을 위한 유용한 기능을 제공한다. 다른 많은 프레임워크와 달리 Vue를 사용하면 기존의 HTML 코드를 향상 시킬수 있다. 이를 통해 아주 쉽게 JQuery 등의 라이브러리를 Vue로 대체할 수 있다.

 

Vue장점

1. 간단하고 직관적
   • 유연하고 직관적인 API를 제공하므로 학습이 비교적 쉽다.
2. 경력화된 프레임워크
   • 상대적으로 다른 프레임워크들보다 파일 크기가 작고 로딩속도가 빠르며, 초기 설정이 간단하다.
3. 반응형 시스템
   • 상태변경을 자동으로 추적하고 DOM을 효율적으로 업데이트 한다
   • 이 덕분에 개발자는 UI상태와 데이터를 쉽게 동기화 할 수 있다.

Vue단점

1. 대형프로젝트에서의 성능 문제
   • 대형 애플리케이션에서 상태관리와 성능 최적화가 어렵다.
2. 짧은 역사와 생태계
   • Facebook의 React, Google의 Angular와 달리 대기업에서의 지원이 부족하다
   • 역사와 생태계가 짧기 때문에 사용자 기반이 상대적으로 적다.
   • 사용자와 커뮤니티의 규모가 적어 해결책을 찾는데 어려움이 있을수 있다.
3. 기존 프로젝트와의 통합
   • 기존 JavaScript 애플리케이션에 Vue를 통합하는 과정에서 종속성 문제나 코드 충돌 등이 발생할 수 있다.

Next.js

React 기반으로 서버 사이드 렌더링 및 정적 사이트 생성을 지원하는 프레임워크이다.

왜 React 와 함께 사용하나요?

1. 서버 사이드 렌더링
   • React에서 동적으로 생성되는 HTML 컨텐츠를 서버에 렌더링 하여 클라이언트에 보낸다.
   • SEO와 초기 로딩속도가 개선된다.
2. 정적 사이트 생성
   • 페이지 빌드 시 미리 생성되어 클라이언트에 빠르게 제공된다.
3. Api 라우트
   • API라우트를 지원하여 서버에서 API를 쉽게 구성하고 관리할수 있다.
   • 이는 백엔드 없이도 전체 애플리케이션을 구축할 수있게 도와준다.
4. 리액트 생테계 통합
   • React 와 React의 모든 기능(상태관리, 훅, 컴포넌트 등)을 그대로 사용할 수 있다.
   • React와 호환 가능
5. 파일 기반 라우팅
   • 페이지가 자동으로 라우팅 되므로 개발자가 명시적으로 라우터 설정을 하지 않아도 된다.
   • pages 디렉터리에 파일을 생성하는 것만으로 자동을 해당 페이지가 라우팅 된다.