Merge pull request #7 from Wannabe-Woowa-Article/soi-ha

왜 react는 프레임워크가 아니고 라이브러리인가 (24.06.03)

June/article/Why-React-is-a-Library-and-not-a-framework.md

@@ -0,0 +1,80 @@
+## 🔗 [Why React is a Library, and not a framework.](https://medium.com/@Angie.O/why-react-is-a-library-and-not-a-framework-533d95692fe1)
+
+### 🗓️ 번역 날짜: 2024.06.03
+
+### 🧚 번역한 크루: 소하(최소연)
+
+---
+
+## 왜 React는 프레임워크가 아니고 라이브러리인가.
+
+React가 출시된 이후, 리액트는 기하급수적으로 성장해왔습니다. 가장 인기 있는 자바스크립트 라이브러리 중에서도 리액트의 인기는 효율적이고 유연하며 선언적인 기능 덕분에 빠르게 증가했습니다. 이러한 기능은 사용이 간편하고 코드를 적게 사용하여 효과적인 프론트엔드 앱을 더 빠르게 만들 수 있습니다. 이전에 리액트 기반 앱을 몇 번 보거나 사용해 본 적이 있을 것입니다. 페이스북과 인스타그램은 반응성과 속도로 유명한 두 가지 예입니다. 하지만 리액트가 인기를 얻으면서 리액트가 라이브러리인지 프레임워크인지에 대한 논의도 함께 증가하고 있습니다. 이 아티클에서는 라이브러리와 프레임워크의 차이점을 설명하고 리액트가 라이브러리인 이유를 설명합니다.
+
+**리액트란 무엇인가요?**
+
+리액트는 컴포넌트 기반의 동적 사용자 인터페이스를 만들기 위한 무료 오픈 소스 프론트엔드 자바스크립트 라이브러리입니다. 컴포넌트와 웹사이트 UI가 리액트에만 국한되지 않는다는 점을 이해하는 것이 중요합니다. 모든 웹사이트의 사용자 인터페이스는 컴포넌트와 컴포지션을 기반으로 구축됩니다. 리액트가 인기 있는 이유 중 하나는 컴포넌트 생성 및 컴포지션 과정을 간소화하기 때문입니다 (예, 복잡한 상태 관리는 리액트 개발자라면 누구나 쉽게 할 수 있는 것이 되었습니다). 리액트는 이를 빠르게 수행하며 브라우저 자원에 최소한의 영향을 미칩니다.
+
+## 라이브러리란 무엇인가요?
+
+> 라이브러리는 소프트웨어 개발에서 공통 작업을 간소화하는 미리 작성된 코드 모음입니다. 각각 특정한 목적을 가진 유용한 도구로 가득 찬 도구 상자라고 생각하세요. 라이브러리를 목수가 작업에 맞는 올바른 도구를 선택하는 것처럼 생각하면, 프로젝트에 필요한 컴포넌트를 선택하고 선택할 수 있는 전문화된 함수를 제공합니다. 리액트의 경우, 반응형 동적 사용자 인터페이스를 설계하는 데 필요한 모든 도구를 제공합니다.
+
+이 개념을 명확히 이해하는 데 도움이 되는 몇 가지 예시를 들어보겠습니다. React 애플리케이션에서 양식을 처리하고 검증과 같은 필수 기능을 추가하기 위해 React Hook Form 또는 Formik과 같은 패키지를 사용할지 선택할 수 있습니다. 하지만 프로젝트에 양식이 많지 않다면 양식 라이브러리가 전혀 필요하지 않을 수도 있습니다. 마찬가지로 데이터 검색을 처리할 때는 Fetch API 또는 Axios와 같은 선택지가 있습니다. 또한 React 애플리케이션을 테스트할 때는 React Testing Library, Jest 또는 둘 다 조합하여 사용할 수 있습니다. 이는 구축 중인 앱의 특정 요구 사항과 이러한 도구에 대한 숙련도에 따라 다릅니다. 소프트웨어 개발에 사용되는 라이브러리는 리액트를 넘어 다음과 같은 예를 들 수 있습니다:
+
+- **Lodash:** 일관성, 모듈성, 성능 및 추가 기능을 제공하는 JavaScript 유틸리티 라이브러리입니다.
+- **NumPy:** 배열과 행렬에 대한 지원과 수학 함수를 제공하는 수치 계산을 위한 Python 라이브러리입니다.
+- **Pandas:** CSV 파일과 데이터베이스와 같은 구조화된 데이터를 처리하는 데 특히 유용한 데이터 조작 및 분석을 위한 또 다른 Python 라이브러리입니다.
+
+## 프레임워크란 무엇인가요?
+
+> 반면에 프레임워크는 더 포괄적이고 주관적인 도구입니다. 미리 정의된 규칙이 적고 코드 구조와 애플리케이션 빌드 방법을 선택할 수 있는 더 많은 자유를 제공하는 라이브러리(유연한/주관적이지 않은)와는 달리, 프레임워크는 강력하고 미리 정의된 구조, 아키텍처 및 워크플로우를 가지고 있습니다. 이로 인해 프레임워크를 사용하는 개발자는 애플리케이션을 구축하는 특정 접근 방식으로 안내됩니다. 프레임워크는 특정 아키텍처 원칙과 디자인 패턴을 부과하여 애플리케이션을 구축하는 견고한 기반을 제공합니다. 프레임워크는 애플리케이션의 흐름을 제어하고 일반적으로 미리 정의된 구조를 따르도록 요구합니다. 프레임워크는 데이터 관리, 라우팅, 사용자 인터페이스와 같은 애플리케이션 개발의 더 넓은 범위를 다루는 경우가 많습니다. 예를 들어, Ruby on Rails는 데이터 저장 방식과 웹 페이지 표시 방식을 포함하여 모든 것을 다룹니다. 그러나 내장된 기능의 정도는 프레임워크마다 다를 수 있습니다. 예를 들어 Express.js와 같은 프레임워크는 더 기본적인 기반을 제공하고 인증 및 검증과 같은 주요 기능을 구현하는 데 타사 패키지와 미들웨어에 의존합니다. 다음은 몇 가지 예시입니다:
+
+- **Django:** 신속한 개발과 깔끔하고 실용적인 디자인을 장려하는 고수준의 Python 웹 프레임워크입니다.
+- **Angular:** 무료 오픈 소스 단일 페이지 웹 애플리케이션 프레임워크입니다.
+- **Express.js**: Node.js를 사용하여 RESTful API를 구축하는 백엔드 웹 애플리케이션 프레임워크입니다.
+- **Laravel:** 무료 오픈 소스 PHP 웹 프레임워크입니다.
+- **Spring Boot**: 자바 기반 오픈 소스 프레임워크입니다.
+
+프레임워크 선택은 프로젝트의 특정 요구 사항과 가장 익숙한 프로그래밍 언어에 따라 다릅니다.
+
+## 리액트가 라이브러리인 이유는 무엇인가요?
+
+> 리액트와 같은 라이브러리와 Ember.js, AngularJS와 같은 프레임워크의 중요한 차이점 중 하나는 리액트는 UI 렌더링에만 관여하며 많은 부분을 각 프로젝트에서 조합하도록 남겨 둔다는 것입니다. 리액트는 상호 작용하는 웹 애플리케이션을 만드는 데 필요한 도구와 유틸리티를 제공하지만, 프레임워크처럼 철저한 애플리케이션 구조를 강요하지는 않습니다. 리액트의 독특한 특징은 유연성과 적응성에 있으며, 이를 통해 프로젝트에 원활하게 통합할 수 있습니다. 이러한 고유한 특성으로 인해 리액트는 사용자 인터페이스를 만드는 데 이상적인 선택이며, 다른 라이브러리와 도구를 활용하여 추가 기능을 사용할 수 있는 자유를 제공합니다.  
+>  심지어 create-react-app(CRA) 설정을 제공하더라도 리액트는 여전히 라이브러리로 분류됩니다. 이러한 유연성은 라이브러리를 사용하는 동안 여러분에게 힘을 실어줄 뿐만 아니라 리액트 기반 프레임워크에도 적용되어 개발 과정 전반에 걸쳐 의사 결정 과정을 단순화하면서도 견고하고 기능이 풍부한 애플리케이션을 만들 수 있습니다.
+
+## 리액트 기반 프레임워크:
+
+이러한 프레임워크는 여러 타사 라이브러리에 과도하게 의존하지 않고도 프로젝트 개발 속도를 높일 수 있는 장점을 제공합니다. 점점 더 인기를 얻고 수요가 증가하고 있는 프레임워크인 Next.js가 좋은 예입니다. 프론트엔드와 서버 측 렌더링(SSR) 모두에 대한 강력한 지원을 제공하는 Next.js는 가장 잘 알려진 리액트 기반 프레임워크 중 하나로 꼽힙니다. SSR을 활용하는 풀 스택 애플리케이션을 구축하는 데 가장 적합한 옵션 중 하나입니다. 리액트 기반 프레임워크는 의도한 용도와 기능에 따라 다르며, Express.js와 같은 보다 주관적인 프레임워크 중 하나입니다. 모든 리액트 기반 프레임워크가 클라이언트 측과 서버 측 렌더링 모두를 수용하도록 만들어진 것은 아니라는 점을 기억하는 것이 중요합니다.
+
+- **Next.js:** 프론트엔드와 서버 측 렌더링 모두를 위해 설계된 리액트 기반 프레임워크입니다. 전통적인 클라이언트 측 렌더링뿐만 아니라 향상된 성능과 SEO를 위해 서버 측에서 리액트 컴포넌트를 렌더링하여 풀 스택 애플리케이션을 구축할 수 있습니다.
+- **React Native:** 반면에 React Native는 주로 iOS 및 Android용 모바일 애플리케이션을 개발하는 데 사용됩니다. Next.js와 달리 서버 측 렌더링을 처리하지 않습니다.
+- **RedwoodJS:** 리액트와 GraphQL을 기반으로 하는 풀 스택 서버리스 웹 애플리케이션 프레임워크입니다. 웹 애플리케이션을 구축하기 위해 설계되었지만 주요 기능으로 서버 측 렌더링에 특별히 중점을 두지 않을 수 있습니다.
+- **Gatsby:** Gatsby는 정적 웹사이트를 구축하는 데 사용되는 리액트를 사용하는 정적 사이트 생성기입니다. 빌드 시간에 페이지를 미리 빌드하며 동적 데이터에 대한 서버 측 렌더링을 일반적으로 처리하지 않습니다.
+
+이러한 리액트 기반 프레임워크는 동적 및 정적 리액트 애플리케이션을 만드는 과정을 간소화하며, 개발자가 개발 과정에서 내려야 하는 선택의 수를 줄이면서도 동등하게 기능이 풍부하고 기능이 풍부한 애플리케이션을 만들 수 있는 큰 이점을 제공합니다.
+
+## 라이브러리의 장점:
+
+- 컴포넌트 선택에 자유를 주어 필요한 것만 사용하거나 프로젝트에 필요한 여러 도구와 컴포넌트를 조합할 수 있습니다.
+- 현재 프로젝트에 빠르게 통합할 수 있어 프로그램 전체를 다시 작성할 필요 없이 개발 시간을 단축할 수 있습니다.
+- 프레임워크보다 학습 곡선이 낮아 더 넓은 범위의 개발자들이 접근할 수 있습니다.
+- 주어진 활동에 최적화된 도구와 컴포넌트를 제공하여 개발 프로세스를 가속화하고 시간과 노력을 절약할 수 있습니다.
+
+## 라이브러리의 한계:
+
+- 라이브러리를 사용하면 여러 컴포넌트를 복잡하고 시간이 많이 걸리는 통합이 필요한 경우가 많습니다.
+- 라이브러리는 전문화되어 있기 때문에 범위를 벗어나는 작업을 완료하려면 다른 도구를 사용하거나 자체 코드를 작성해야 할 수도 있습니다.
+- 대규모 프로젝트의 경우 라이브러리가 프로그램 구축 방법에 대한 지침을 덜 제공하기 때문에 프레임워크가 제공하는 확립된 구조가 없어 조직 및 디자인에 일관성이 부족할 수 있습니다.
+
+## 프레임워크의 장점:
+
+- 프레임워크는 관습과 코딩 표준을 강제하여 다양한 프로젝트에서 프로젝트 구조와 개발 관행이 일관되도록 보장합니다.
+- 철저한 프레임워크와 미리 결정된 디자인 패턴을 제공합니다.
+- 프레임워크는 종종 커뮤니티 자원, 플러그인, 확장의 견고한 생태계를 제공하여 상호 작용을 촉진하고 기능을 향상시킵니다.
+- 미리 구축된 도구와 검증된 프로세스를 제공하여 처음부터 시작할 필요 없이 개발 속도를 높입니다.
+
+## 프레임워크의 한계:
+
+- 포괄성 때문에 프레임워크는 학습 곡선이 높고 특정 가이드라인을 준수해야 할 수도 있습니다.
+- 컴포넌트와 아키텍처 선택에 대한 유연성이 프레임워크에 의해 제한될 수 있습니다.
+
+리액트가 무엇이고 리액트가 어떻게 박스를 체크했는지를 살펴보았으니, 리액트가 사용자 인터페이스 개발에 강력한 라이브러리이지 프레임워크가 아니라는 점에 동의하실 것입니다. 라이브러리와 프레임워크의 차이는 때때로 미묘할 수 있지만, 그 역할과 기능에 따라 올바르게 분류하는 것이 중요합니다. 이러한 차이점을 이해하는 것은 개발 프로젝트에 적합한 도구를 선택하는 데 중요합니다. 리액트와 같은 라이브러리는 통합의 유연성과 단순성을 제공하는 반면, 프레임워크는 보다 광범위한 애플리케이션을 위한 구조화된 기반을 제공합니다. 리액트의 기능을 라이브러리로 인식하면 정보에 입각한 선택을 하고 웹 개발에서 리액트의 기능을 효율적으로 활용할 수 있습니다.