[포스코 x 코딩온] 웹개발 과정 8주차 - 1 | React

강민혁·2023년 4월 18일
0

frontend

목록 보기
9/11

8주차에는 프론트엔드 라이브러리인 React를 배우기 시작했습니다.

React,Anguler,Vue


React, Angular, Vue는 모두 JavaScript 기반의 프론트엔드 프레임워크나 라이브러리로서, 다양한 웹 애플리케이션 개발에 사용됩니다. 이들의 주요 특징과 차이점은 다음과 같습니다.

React

React는 Facebook에서 개발한 오픈소스 라이브러리입니다.
컴포넌트 기반으로 UI를 구성하며, 가상 DOM을 사용하여 성능을 최적화합니다.
React는 단순한 라이브러리로서 다른 라이브러리나 프레임워크와의 조합이 자유롭습니다.

Angular

Angular는 Google에서 개발한 프론트엔드 프레임워크입니다.
MVC 디자인 패턴을 사용하여 애플리케이션의 구조를 관리합니다.
Angular는 많은 기능과 강력한 보안 기능을 제공하며, TypeScript를 사용하여 정적 타이핑을 지원합니다.

Vue


Vue는 Evan You가 개발한 오픈소스 라이브러리입니다.
가상 DOM을 사용하여 성능을 최적화하며, 리액트와 유사한 컴포넌트 기반의 UI 구성 방식을 사용합니다.
Vue는 작고 가벼우며, 다른 라이브러리와의 조합이 용이합니다.
이들 프레임워크와 라이브러리들은 각자의 장단점이 있으며, 선택은 개발자의 우선순위와 프로젝트 요구사항에 따라 달라집니다. 개발자는 프레임워크 또는 라이브러리의 문서와 예제를 참고하여, 자신에게 가장 적합한 도구를 선택하는 것이 좋습니다.

🤔그런데 왜써요?

React, Angular, Vue와 같은 프론트엔드 프레임워크 및 라이브러리는 웹 개발에서 다양한 이유로 사용됩니다. 이 중 일부 이유는 다음과 같습니다:

  • 구성 요소 기반 설계: 이러한 프레임워크 및 라이브러리는 컴포넌트 기반 아키텍처를 사용하여 코드의 모듈화와 재사용성을 높이고 개발 생산성을 향상시킵니다.

  • 성능 최적화: 가상 DOM 기술을 사용하여 렌더링 성능을 최적화하고, 단방향 데이터 바인딩, 변화 감지 및 비동기 처리와 같은 기능을 제공하여 빠르고 반응적인 UI를 만들 수 있습니다.

  • 유지 보수 용이성: 이러한 프레임워크 및 라이브러리는 프로젝트 규모가 커지더라도 코드의 유지 보수 용이성을 높이고 디버깅을 용이하게 합니다.

  • 생산성 향상: 이러한 도구들은 개발 생산성을 향상시키기 위한 다양한 도구와 기능을 제공합니다. 예를 들어, Angular는 Angular CLI를 통해 프로젝트를 생성하고 관리하는 것이 용이하며, React는 다양한 개발자 도구 및 라이브러리를 제공합니다.

  • 크로스 플랫폼 지원: 이러한 프레임워크 및 라이브러리는 모바일 앱, 데스크톱 앱 및 웹 앱 개발을 모두 지원합니다.

이러한 이유로 React, Angular, Vue와 같은 프론트엔드 프레임워크 및 라이브러리가 웹 개발에서 매우 인기가 있습니다.

React를 쓰는 이유

  1. Virtual DOM 기술을 사용하여 불필요한 렌더링을 방지하고 최적화된 렌더링 방식을 적용하여 빠른 속도와 뛰어난 성능을 제공합니다.
  2. Facebook에서 개발되었으며, 많은 개발자 커뮤니티와 함께 발전해왔습니다. 이를 통해 React 개발자는 다양한 문제 해결 방법을 공유하고, 문제 발생 시 빠른 지원을 받을 수 있습니다.
  3. Flux 아키텍처를 지원하는 Redux, MobX 등과 같은 상태 관리 라이브러리와 함께 사용할 수 있습니다. 이를 통해 대규모 애플리케이션 개발에 용이하고 관리하기 쉬운 코드를 작성할 수 있습니다.

이러한 이유로 리액트가 가장 많이 사랑받고 가장많이 사용되는 것 같습니다..
고로 저도 이거쓸게요

React 프로젝트 생성

별게 없습니다
터미널에 다음과 같은 명령어하나만 입력하면 자동생성해줍니다.

npx create-react-app 앱이름

다음글에서는 React 프로젝트를 생성했으니 어떤식으로 랜더링되는지 Virtual DOM이 뭔지 자세하게 한번 알아보겠습니다 .

profile
화이팅

0개의 댓글