[React] React 프로젝트 - 1. 개발환경, 모듈 및 개발 도구 (프레임워크, 라이브러리)

 

 

 

---

라이브러리

• 보조적인 모듈, 오브젝트, 클래스, 함수, 코드들의 집합
• 내가 가져다 사용해서 자유롭게 사용하는 방식
• 예)
• ReactjQuery
• Redux

 

프레임워크

• 다양한 api들 컴파일러, 애플리케이션 지원기능, 라이브러리 등이 모두 포함된 것
• 짜여진 패턴이나 틀 기반에서 내가 코딩을 하는 것
• 예)
• Ext JSExpress
• Spring
• Angular

 

라이브러리와 프레임워크 차이

	프레임워크	라이브러리
코드 작성 방식	일반적으로 프레임워크에서 정의한 규칙에 따라 코드를 작성해야 합니다. 개발자는 프레임워크가 제공하는 틀 안에서 작업하며, 특정 이벤트에 대한 콜백 함수를 정의하거나 상속을 통해 프레임워크의 기능을 확장할 수 있습니다.	라이브러리는 개발자가 직접 호출하여 사용하는 형태이므로, 코드의 흐름은 주로 사용자가 제어합니다. 라이브러리는 필요한 기능을 가져다 사용하는 데 중점이 있습니다.
제어 흐름	사용자 코드가 프레임워크에 의해 호출되는 형태로 동작합니다. 제어 흐름은 주로 프레임워크에 의해 결정되며, 사용자는 프레임워크가 정의한 규칙과 패턴을 따라가야 합니다.	사용자 코드가 라이브러리를 명시적으로 호출하고 사용합니다. 제어 흐름은 주로 사용자가 결정하며, 라이브러리는 필요에 따라 호출되어 사용됩니다.
추상화, 재사용, 확장면	보통은 높은 수준의 추상화를 제공하며, 특정한 목적을 위한 광범위한 기능을 제공합니다. 프레임워크를 기반으로 한 개발은 일반적으로 표준화된 구조를 따르며, 이로써 개발자는 일관성 있는 개발을 할 수 있습니다.	개발자는 필요에 따라 라이브러리를 선택하여 사용할 수 있습니다. 각 라이브러리는 특정 기능에 중점을 두고 있으며, 사용자는 필요한 라이브러리를 선택해 프로젝트에 추가하여 확장성을 높일 수 있습니다.
완성	프레임워크는 뼈대를 제공하고, 개발자는 그 안에 필요한 코드를 작성하여 완성	라이브러리는 개발자가 만든 클래스에서 호출하여 사용하는 도구들의 집합이기 때문에, 개발자는 라이브러리를 사용하여 필요한 기능을 추가하거나 확장
자유도	거의 없다.	높다.

 

 

개발환경 구성도

• 운영체재 : window10, WSL2(Ubuntu 20.0.0)
• IDE : vscode
• DB : mongoDB
• Frontend : Node.js, JavaScript, TypeScript
• Backend : Java, SpringBoot
• 형상관리 : Git, Github
• 빌드/배포 : Jenkins
• 협업 툴 : Confluens, Jira

 

Frontend 개발환경 상세

• 프레임워크 : React
• 상태관리도구 : redux
• 스타일도구 : sass, tailwind
• 정적 분석 : ESLint, Prettier
• 빌드 : babel, webpack
• 테스트 : Jest

 

개발 도구 체인

소스 코드 관리 도구 (Version Control System, VCS): 코드의 버전을 관리하고 협업을 용이하게 하는 도구

ex. Git

 

프로젝트 관리 도구: 프로젝트의 의존성 관리, 라이브러리 설치 등을 처리하는 도구

ex. npm(Node Package Manager), Yarn 

 

코드 스타일 및 정적 분석 도구: 코드의 일관성을 유지하고 오류를 미리 방지하기 위해 사용되는 도구

ex. ESLint, TSLint

 

테스트 도구: 코드의 품질을 보장하기 위한 자동화된 테스트 도구

ex. Jest, Mocha, Karma

 

모듈 번들러: 여러 모듈 및 리소스를 하나로 번들링하여 최적화된 자바스크립트 파일을 생성하는 도구

ex. Webpack, Parcel, Rollup

 

트랜스파일러 (Transpiler): 최신 버전의 자바스크립트 문법을 지원하지 않는 환경에서 사용할 수 있도록 코드를 변환하는 도구

ex. Babel

 

최적화 도구: 프로덕션 환경에서 성능을 최적화하기 위한 도구

ex. UglifyJS, Terser

 

배포 및 호스팅 도구: 빌드된 애플리케이션을 서버에 배포하고 호스팅하는 도구

ex. AWS, Netlify, Vercel 등이 사용됩니다.