프론트엔드 아키텍처에 대해 알아보기

eunjeong·2024년 6월 10일

CS SW Architecture frontend

Node.js ?

JavaScript 런타임 환경 : 브라우저 외부에서도 JavaScript를 실행할 수 있게 해주는 환경
패키지 관리(NPM) : 기본적으로 Node.js에서 npm을 내장
빌드 도구 : Webpack, Gulp, Grunt와 같은 빌드 도구 실행 환경 제공
개발 서버 : Webpack Dev Server와 같이 간단한 개발 서버를 사용해 개발 중 변경 사항을 실시간으로 확인
프로젝트 초기 설정 : Create React App, Vue CLI, Angular CLI와 같이 프로젝트 초기 설정
테스트 및 Linting : 테스트 프레임워크나 ESLint와 같은 코드 문제 분석 도구 등을 실행

패키지 매니저 ?

프로젝트에서 필요한 라이브러리와 종속성을 관리하는 도구

쉽게 말하면, 이렇게 프론트엔드 프로젝트를 생성하면 node_modules라는 폴더가 생기는데, 개발하는 환경에서 필요한 수많은 라이브러리를 설치해주는 도구
리액트는 라이브러리이기 때문에, 프로젝트를 생성할때도 npx(npm) create-react-app / yarn create-react-app 과 같이 패키지 매니저를 이용해 리액트 라이브러리를 설치하는 것!

패키지 매니저 종류

NPM(Node Package Manager) : Node.js의 기본 패키지 매니저,
Yarn : Facebook에서 개발한 npm의 대안 패키지 매니저, 더 빠른 속도 및 안정성 (요즘은 NPM도 개선됨)
yarn 3.x 버전부터는 yarn berry라고 해서 node_modules가 사라진다
- 기존의 로컬 node_module 폴더 대신 패키지를 캐시 폴더에 저장하고, .pnp.cjs파일에 의존성을 찾을 수 있는 정보가 기록
- 기존의 NPM이나 Yarn(classic)에서는 모든 패키지를 설치하는데, yarn berry는 zip형태로 가지고있기 때문에, 의존성 모듈이 가볍다 ! (node module을 압축해서 저장한다고 생각)
- NPM에서는 의존성 파일을 스크립트 전체에서 순회하면서 찾는데, yarn berry는 .pnp.cjs파일 내에 패키지의 위치를 가지고있다 -> cjs파일만 읽으면 원하는 의존성 정보가 어디있는지 확인할 수 있다.

빌드 도구 ?

코드 번들링, 변환, 최적화를 통해 효율적인 개발 환경을 제공하는 도구
코드 번들링 (Code Bundling) : 여러 개의 소스 파일을 하나 또는 여러 개의 번들 파일로 묶는 과정
- 브라우저가 여러 파일을 개별적으로 요청하는 대신, 번들 파일을 한 번에 로드 -> 네트워크 요청 수를 줄이고 로딩 시간을 단축
- 예를 들어, 프로젝트에 100개의 JavaScript 파일이 있을 때, 브라우저는 이를 모두 개별적으로 요청해야 하는데, 번들링을 통해 하나의 큰 파일로 묶으면 브라우저는 단 한 번의 요청으로 필요한 모든 스크립트를 가져올 수 있다.
코드 변환 (Code Transformation) : 최신 JavaScript(ES6 이상) 코드나 TypeScript, JSX 등을 브라우저가 이해할 수 있는 구형 JavaScript 코드로 변환하는 과정 -> 더 많은 브라우저 호환성을 확보
- 예를 들어, async/await와 같은 최신 JavaScript 문법들을 Babel 같은 도구를 사용하여 구형 브라우저에서도 동작할 수 있도록 변환한다.
최적화 (Optimization) : 애플리케이션의 성능을 향상시키고 로딩 시간을 줄이기 위해 코드와 리소스를 효율적으로 관리하는 과정
- 코드 분할코드 분할 (Code Splitting) : 코드의 특정 부분만 필요할 때 로드되도록 분할
- 트리 쉐이킹 (Tree Shaking) : 사용되지 않는 코드를 제거
- 이미지 최적화 : 이미지 파일의 크기를 줄이고 포맷을 최적화하여 로딩 시간을 단축
- 캐싱 (Caching) : 자주 변경되지 않는 리소스를 저장
- 미니피케이션 (Minification) : 코드의 공백, 주석 등을 제거하고 변수명을 짧게 변경