집 > 기사 > 웹 프론트엔드 > React(또는 해당 프레임워크)의 빌드 프로세스는 무엇입니까?

React(또는 해당 프레임워크)의 빌드 프로세스는 무엇입니까?

王林원래의: 2024-08-08 22:46:12938검색

What is a Build Process in React ( or in any framework for that matter? )

[ 기술 ]: ReactJS – 기사 #1

프레임워크는 엔지니어를 위한 개발을 단순화하며 이는 ReactJS의 비하인드 스토리 기능을 간단히 설명하려는 시도입니다.

이야기 시간

저는 ReactJS를 시작했습니다. 네, 정말 그랬어요. 데이터사이언스에 입문하기 전 UI/UX 디자인과 프론트엔드 개발에 열정을 쏟던 제가 2년씩 연기되는 게 꿈만 같습니다. (저는 아직도 2년 전과 마찬가지로 열정적입니다.)

저는 현재 회사(스스로를 스타트업이라고 부르는 회사의 문화가 회사보다 스타트업에 가깝기 때문에)에서 인턴으로 일하고 있습니다. 오늘 첫날부터 문자 그대로 할 일이 없었습니다. 내 TL(팀장)이 회의로 인해 사무실에 오지 않았습니다.

그가 내 손에서 타임슬립하도록 놔두었나요? 절대 아닙니다.
내 데이터 분석 기술을 테스트하기 위한 작업/프로젝트를 얻을 확률은 상당히 낮았습니다. 그래서 나는 개발 과정에서 손을 더럽히기로 결심했습니다. 지금이야말로 ReactJS를 시작하기 가장 좋은 시기라는 걸 느꼈습니다.

반응이란 무엇입니까?

React는 동사입니다(말장난 의도). 그러나 개발 기술의 맥락에서 "웹 및 기본 사용자 인터페이스용 라이브러리"는 ReactJS의 공식 웹사이트

를 주장합니다.

개발 생태계를 경험해 본 적이 있다면 다른 2개의 경쟁자, 오히려 ReactJS의 형제인 Angular와 VueJS에 대해 들어보셨을 것입니다.

다음은 가장 인기 있는 3가지 프런트엔드 기술을 간략하게 비교한 것입니다.

Core Concept	Library focused on UI	Full-fledged framework	Progressive framework
Data Binding	One-way data flow	Two-way data binding	Two-way data binding (optional)
Component Structure	Custom components	Directives and components	Components
Learning Curve	Moderate	Steep	Gentle
Performance	High (Virtual DOM)	Can be slower due to two-way data binding	High (Optimized rendering)
Scalability	Excellent, suitable for large-scale apps	Strong support for large-scale enterprise apps	Good scalability, but might require additional libraries for complex projects
Community and Ecosystem	Largest community, rich ecosystem	Large community, strong ecosystem	Growing community, good ecosystem
Flexibility	High, can be used with other libraries/frameworks	Less flexible due to rigid structure	Flexible, can be used incrementally

핵심 개념 UI 중심 라이브러리 완전한 프레임워크 프로그레시브 프레임워크 데이터 바인딩 단방향 데이터 흐름 양방향 데이터 바인딩 양방향 데이터 바인딩(선택사항) 구성요소 구조 맞춤 구성요소 지시어 및 구성 요소 구성요소 학습 곡선 보통 가파르다 부드럽다 성능 높음(가상 DOM) 양방향 데이터 바인딩으로 인해 속도가 느려질 수 있음 높음(최적화된 렌더링) 확장성 훌륭하며 대규모 앱에 적합 대규모 기업 앱에 대한 강력한 지원 확장성은 좋지만 복잡한 프로젝트에는 추가 라이브러리가 필요할 수 있습니다. 커뮤니티와 생태계 가장 큰 커뮤니티, 풍부한 생태계 대규모 커뮤니티, 강력한 생태계 커뮤니티 성장, 좋은 생태계 유연성 높음, 다른 라이브러리/프레임워크와 함께 사용할 수 있음 단단한 구조로 인해 유연성이 떨어짐 유연하며 점진적으로 사용할 수 있음

일반 HTML과 JS가 있는데 왜 ReactJS를 사용해야 합니까?

일반 HTML과 JS의 단점.

다음은 사용할 경우 직면하게 될 문제입니다.

대규모 애플리케이션 유지의 어려움:

일반 HTML과 JS에는 코드 구성에 대한 구조화된 접근 방식이 부족합니다.
복잡한 애플리케이션은 이벤트 리스너와 스크립트 파일 내에서 로직과 UI 조작이 복잡하게 뒤엉킬 수 있습니다.
이로 인해 애플리케이션이 성장함에 따라 코드를 이해하고 수정하고 디버그하기가 어려워집니다.

비효율적인 DOM 조작:

JS에서 DOM을 직접 조작하는 것은 비효율적일 수 있습니다.
사소한 UI 업데이트라도 상태가 변경될 때마다 HTML 구조가 완전히 다시 렌더링될 수 있습니다.
애플리케이션 복잡성이 증가함에 따라 성능 병목 현상이 발생할 수 있습니다.

재사용성 제한:

일반 HTML과 JS를 사용하여 재사용 가능한 UI 구성요소를 구축하는 것은 번거로울 수 있습니다.
애플리케이션의 여러 부분에 걸쳐 코드 조각을 복사하여 붙여넣게 될 수도 있습니다.
이로 인해 일관성을 유지하고 변경 사항을 효율적으로 구현하기가 어렵습니다.

복잡한 상태 관리:

일반 HTML과 JS에서는 애플리케이션 상태(UI 동작을 제어하는 데이터)를 관리하기가 어렵습니다.
데이터 변경 사항과 해당 UI 업데이트를 추적하는 것은 특히 복잡한 데이터 흐름의 경우 지저분하고 오류가 발생하기 쉽습니다.

ReactJS가 구출되는 방법.

ReactJS는 구성 요소 기반 아키텍처, 효율적인 업데이트를 위한 가상 DOM, 복잡한 UI 및 애플리케이션 상태 관리를 위한 풍부한 생태계를 제공하여 이러한 제한 사항을 해결합니다.

향상된 유지 관리성:

React의 컴포넌트 기반 아키텍처와 선언적 접근 방식은 특히 대규모 애플리케이션의 경우 더 깔끔하고 유지 관리하기 쉬운 코드베이스를 제공합니다.

향상된 성능:

React의 가상 DOM과 효율적인 렌더링 메커니즘은 복잡한 웹 애플리케이션에서도 더 부드럽고 빠른 사용자 경험을 제공합니다.

코드 재사용성:

React의 구성 요소 모델은 코드 재사용성을 촉진하여 애플리케이션 전체에서 쉽게 공유하고 결합할 수 있는 모듈식 UI 구성 요소를 구축할 수 있도록 해줍니다.

차이가 차이를 만듭니다.

첫 번째 구성 요소를 만들 때 "이게 정확히 무엇인가요?"라고 스스로에게 물었습니다. HTML인가요, JS인가요?