리액트, 뷰, 앵귤러, 넥스트

[ 리액트 (React) ]

Facebook에서 만든 JS UI 라이브러리로 컴포넌트 기반 아키텍처를 제공하여 코드의 재사용성과 유지 보수성을 높이는데 중점을 둔 라이브러리 유연성이 좋으며 react native를 통해 웹 뿐만 아니라 앱 개발로도 확장할 수 있음

create-react-app 등의 커맨드라인 인터페이스가 많아 접근성이 좋고 사용하기 편리하다는 강점이 있음

또한 커뮤니티가 방대하여 어려움이 있을 때 정보를 얻고 활용하고 쉬움

▶ 장점

1. 가상 DOM을 사용하여 성능을 최적화할 수 있음
2. 컴포넌트 기반 아키텍처를 제공하여 코드의 재사용성과 유지 보수성을 높일 수 있음
3. 커뮤니티가 활발하고 다양한 생태계가 형성되어 있음
4. JS와 JSX 문법을 사용하여 컴포넌트를 작성하므로 러닝 커브가 낮고 코드가 직관적이고 가독성이 좋음
5. 단방향 데이터 흐름을 갖고 있어 예측 가능한 상태 관리가 가능함

▶ 단점

1. 초기 로딩시간이 김
2. 러닝 커브가 낮은 편이지만, 일부 개념은 처음에 이해하기 어려울 수 있음
3. 상대적으로 초기 설정이 필요하며, 기본적인 도구 외에 추가적인 패키지나 설정이 필요할 수 있음

 

[ 뷰 (Vue) ]

Vue는 Evan You라는 개발자가 독립적으로 만든 UI를 위한 JS 프레임 워크

가상돔을 사용하여 컴포넌트 기반 아키텍처를 구현하함

다른 프레임워크와 비교하면 무엇보다도 가벼움고 유연한 특징이 있음

React에 비해선 상대적으로 마이너하여 정보량이 부족함

▶ 장점

1. 가볍고 빠르며 간단한 구조를 가지고 있어 빠르게 개발할 수 있음
2. 템플릿 기반의 문법을 사용하여 쉽게 컴포넌트를 작성할 수 있음
3. 리액트나 앵귤러에 비해 상대적으로 작은 러닝 커브를 가지고 있음
4. 가볍고 유연한 상태 관리를 제공하는 VueX 라이브러리를 사용할 수 있음

▶ 단점

1. 커뮤니티 규모와 생태계가 리액트나 앵귤러에 비해 상대적으로 작을 수 있음
2. 일부 기능이 리액트나 앵귤러에 비해 제공되지 않을 수 있음

 

[ 앵귤러 (Angular) ]

구글에서 만든 TS 기반의 웹 어플리케이션 오픈소스 웹 어플리케이션 프레임워크

초기 로딩 시간이 느리지만 페이지간 전환 속도가 빠름

▶ 장점

1. 프레임워크 자체에서 모든 것을 제공하여 개발에 필요한 기능을 쉽게 구현할 수 있음
   • 프로젝트의 생성부터 테스팅, 빌드와 배포까지 모든 단계를 지원함
2. TS를 기본적으로 지원하므로 코드의 안정성과 가독성을 높일 수 있음
3. 컴포넌트 기반 아키텍처와 의존성 주입(Dependency Injection)을 통한 모듈화와 재사용성을 강조함
4. 강력한 개발 도구와 라이브러리가 제공되며 개발자 경험이 풍부함
5. 대규모 애플리케이션 개발에 적합한 기능을 제공함

▶ 단점

1. 초기 설정이 복잡하고 러닝 커브가 높을 수 있음
2. 프레임워크의 규모가 크기 때문에 작은 규모의 프로젝트에는 비대해 보일 수 있음

 

[ 넥스트 (Next.js) ]

리액트를 기반으로 한 오픈소스 JS 웹 프레임워크 리액트에는 없는 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG) 등과 같은 다양한 기능 제공하여 성능과 SEO 개선에 용이함

넷플릭스, 트위치, 틱톡 등의 많은 유명 기업들에서도 채택하여 사용되고 있음

▶ 장점

1. 서버 사이드 렌더링(SSR)을 지원하여 초기 로딩 속도를 향상시킬 수 있음
2. 정적 사이트 생성(Static Site Generation)을 지원하여 성능과 SEO를 개선할 수 있음
3. 리액트 기반으로 구축되어 리액트의 장점을 모두 활용할 수 있음
4. 쉬운 라우팅과 코드 분할 등의 기능을 제공함
5. 높은 생산성과 개발자 경험을 제공하는 기능들이 많음

▶ 단점

1. SSR과 정적 사이트 생성을 위해 서버 측 렌더링을 사용하기 때문에 초기 설정이 다소 복잡할 수 있음
2. 커스텀 라우팅이나 복잡한 상태 관리에 대한 지원은 리액트와 추가 라이브러리를 함께 사용해야 할 수 있음