CRA없이 프로젝트 세팅하기

hoin_lee·2023년 4월 25일

TIL

목록 보기

178/236

이번 Next.js와 React등을 계속 배우다가 Next.js 초기 설정 문제로 엄청 많은 시간을 사용했다.
초기 설정을 자동으로 맞춰주는 것도 있는 반면 직접 세팅하는 부분도 있어서 db연결시 nodemodule이 없다고 에러가 나는데 얼마나 찾아 헤멨는지..
그러다보니 설치 때 자동적으로 해주는 게 얼마나 많을까 생각해보고 찾아보니 내가 주로 사용하던 CRA에서도 많은 안쓰는 모듈들 또한 설치 되고 있었다.
간단한 app을 만들어 사용한다면 부담이 없겠지만 만약 앞으로 더욱 큰 프로젝트들을 사용하고 쓰게되는 라이브러리들이 많아진다면 엄청 무거워지지 않을까란 생각에 CRA없이는 어떻게 세팅을 하지 고민했고 구글링을 통해 알아봤다.

React와 TypeScript를 활용한 세팅을 주로 찾아보았다

Reference

자료1
자료2
자료3

번들러란?

Bundling
웹 애플리케이션을 구성하는 여러개의 자원들을 하나로 병합 및 압축해주는 동작을 번들링(Bundling)이라하고
이 여러 파일들을 번들링 할 수 있게 합쳐주는 도구를 Bundler라 한다

여러 js파일들을 하나의 js파일로
여러 css 파일들을 하나의 css파일로

등 기능별로 무듈화 했떤 파일들을 하나로 묶어주는 작업을 해준다.

그럼 왜 필요했을까?

대규모 웹 서비스가 생겨나면서 수많은 js파일들을 다루었고 이는 문제를 가져오게 됐다.

1. 중복된 이름으로 인한 에러

js의 변수 유효 범위는 기본적으로 전역 범위를 갖는다. 그렇기 때문에 어디서든 접근 할 수 있다는 편리함이 있는데 이러한 장점이 실제로 웹 애플리 케이션을 개발할 때는 문제가 되기도 한다.

app.js에서 num이라는 변수를 20선언
main.js에서 num을 다시 선언하고 30을 선언

이후 index.js 에서 num을 출력할 때 app.js와main.js가 스크립트 파일로 들어온 위치에 따라 num이라는 변수가 계속해서 변하게 된다.
이처럼 대규모 프로젝트에선 이런 중복을 사전에 방지하기 굉장히 어렵기 때문에 파일 단위로 변수를 관리하기 위한 모듈이 필요케 됐다.

2. 파일 전송 문제

사용자가 URL을 통해 접속하면 해당 파일들을 서버로부터 가져오는데 파일의 양이 많다면 응답 시간이 길어진다.
한마디로 1개당 1초씩 100개면 100초가 걸리는 시간을 하나로 합쳐서 전송하게 될 경우 훨씬 원활한 전송이 가능하기에 여러개의 파일을 하나의 파일로 묶어주는 번들러(Bundler)가 등장하게 된 것이다

번들러의 기능

번들러는 앱에 필요한 모든 종류의 파일들을 모듈 단위로 나누어 최소한의 파일 묶음(번들)로 만든다.
js파일을 외부에서 알아보기 힘들게 코드 변환(Uglyfy:난독화)
최신 문법의 js를 모든 웹 브라우저에서 작동할 수 있게 ES5문법으로 변환(Transpile)하는 기능

등 다양한 기능들을 지원한다.
장점으로

네트워크 병목 현상 해결 - 여러 파일을 최적화 해서 하나의 파일로 묶기 때문에 주고 받는 파일의 크기를 줄임
모듈 단위 코딩 - 유지 보수가 유리해지고 코드의 가독성이 향상
다양한 서드 파티 기능 이용 - Webpack의 경우 Bable-loader와 같은 다양한 로더를 이용해서 모던 js나 SASS를 사용할 수 있다.

여기서 Webpack이란?

공부를 하면서 많이 들었는데 Webpack이란 무엇일까?
최신 프론트 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler) 이다
모듈 번들러란 웹 앱을 구성하는 자원(HTML,CSS,JS 등)을 모두 각각의 모듈로 보고 이를 조합해 병합된 하나의 결과물을 만드는 도구

Webpack에서의 모듈

Module(모듈)이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미. Webpack에서 지칭하는 Module이란 개념은 JS Module에서 국한되지 않고 웹 앱의 모든 자원을 의미한다.
예를들어 HTML,CSS,JS,Image,Font 의 파일 하나하나가 모두 모듈이 된다.

왜 등장했는지?

파일 단위의 JS 모듈 관리
웹 개발 작업 자동화
빠른 로딩 속도와 높은 성능

따라서

다양한 플러그인 시스템과 로더를 통해 많은 것과 강력한 기능들 사용
오랫동안 사용되고 개발 래퍼런스가 다양한 가장 안정적인 번들
수정된 사항을 실시간으로 반영해주는(새로고침 없이) HRM(Hot Module Replacement)이 적용된 Dev Server가 존재

Webpack Dev Server란?

Webpack에서는 변경된 모듈을 실시간으로 번들 파일에 적용하고 업데이트 해주는 것이다.
HRM 을 사용하면 파일을 수정할 때마다 새로고침 없이 변경된 부분의 모듈만 업데이트 되는 것. 이로인해 개발 생산성을 향상시킨다.

Dev Server를 실행하면 빌드한 결과물이 보이지 않는데 이유로 Dev Server는 디스크가 아닌 메모리에 저장되어 실행되기 때문이다. 파일 입출력보다 메모리의 입출력이 더 빠르기 때문에 컴파일 속도가 빨라지고 컴퓨터 자원이 덜 소모된다.
따라서 크롬에서 네트워크를 확인해 보면 번들링된 파일을 요청하고 있지만 눈으로 확인할 수 없다(메모리에 저장되어 전송되기 때문)