아무래도 실전 SW 프로젝트 학부 때의 웹 프론트 벡터 에디터 만드는 작업을 제외하고는 웹 개발의 지식을 많이 알지 못했다 보니 JS를 심층적으로 공부하게 되는 건 이번이 처음인 것 같다.
한 가지 JS의 매력이자 골치아픈 점은
너무나도 많은 최신 상용 라이브러리와 프레임워크가 존재한다는 점이다.
다음은 자주 사용할 그리고 앞으로 더 공부해볼 js 라이브러리들의 목록이다.
(1) React.js
-
정의 : Facebook에서 개발한 UI를 위한 JS 라이브러리.
-
component 기반 구조
-
JSX: JS안에 XML 작성 (마크업)
-
Virtual DOM 이용 : 실제 dom 조작의 최소화
장점
- component 기반 구조 : 높은 재사용성
- Virtul DOM을 통한 성능 최적화
사용 사례
- Facebook, Instagram, Airbnb, etc.
(2) Vue.js
- 정의: UI를 만들기 위한 Progressive 프레임워크. SPA(Single Page Application) 을 쉽게 만들 수 있도록 설계.
<!-- 개발버전, 도움되는 콘솔 경고를 포함. 공식 페이지 공식문서 참고 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
장점
- 반응형 데이터 바인딩
- component 기반 구조 : 높은 재사용성
- 경량 프레임워크 : 빠른 로딩 시간과 높은 성능
- 높은 사용성 : 직관적인 api 제공으로 학습이 편함
사용 사례
- Alibaba, Xiaomi, GitLab, etc.
cf. React vs Vue
일반적으로 해당 라이브러리와 프레임워크를 함께 사용하지 않는다.
보통은 상대적으로 작은 규모의 프로젝트나 빠른 프로토타이핑을 위해 Vue를 사용하고,
React는 상대적으로 더 큰 규모의 애플리케이션에서 선호된다.
(3) Express.js
- 정의: Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크
장점
-
경량: Express.js는 매우 경량 프레임워크로, 필요한 기능을 플러그인 방식으로 확장할 수 있습니다.
-
유연성: 자유롭게 활용할 수 있는 수많은 HTTP 유틸리티 메소드 및 미들웨어를 통해 쉽고 빠르게 강력한 API를 작성할 수 있습니다.
-
성능: 최소한의 오버헤드로 고성능 웹 애플리케이션을 구축할 수 있습니다.
-
확장성: 미들웨어를 사용하여 다양한 기능을 쉽게 추가하고 확장할 수 있습니다.
cf. 대체 가능한 라이브러리
높은 확장성과 테스트 가능성 ..> Nest.js
경량 프레임워크 ..> Fastify
(4) Next.js
- 정의: Vercel이 개발한 SSR과 SSG를 지원하는 React 프레임워크. 요약하자면 검색 엔진 최적화에 유리한 웹 애플리케이션을 구축하게 도와주는 React 프레임워크이다.
SSR (Server Side Rendering)
서버 사이드에서 react 컴포넌트로 렌더링하여 클라이언트에 HTML 전달하는 방식을 통해,
초기 로딩 시간을 단축하고 SEO (Search Engine Optimization) 검색엔진 최적화를 개선한다.
SSG (Static Site Generation)
Next.js가 정적 사이트를 생성함으로 빠른 페이지 로딩 속도를 제공한다.
