모던 자스로 배우는 리액트 입문2 - 1장 마무리

1.5 모듈 핸들러, 트랜스파일러

리액트의 'create-react-app'을 사용하면 모듈 핸들러, 트랜스파일러 의식하지 않고도 개발할 수 있다. 하지만 복잡한 프로젝트인 경우 설정 파일을 조작할 필요가 있기에 내부 구조와 개념을 아는 것이 매우 중요하다.

모듈핸들러

자바스크립트는 기본적으로 '세세하게 나누어' 개발하는 것이 효율적이다. 이렇게 개발할 때 프로덕션 환경에서 로딩 횟수가 늘어나 성능이 저하되기도 한다. 그래서 개발할 때는 파일을 나누고, 프로덕션 용으로 빌드할 때는 파일 하나에 모으기 위해 js 파일이나 css 파일 등을 한데 합쳐주는 '모듈 핸들러'가 만들어졌다(세세하게 나뉘어 개발된 것을 '모듈', 이 모듈을 다뤄주는 게 '핸들러'라고 생각).

트랜스파일러

자바스크립트 표기법을 브라우저에서 실행할 수 있는 형태로 변환하는 역할을 한다. 이를 사용하면 새로운 표기법으로 작성된 자바스크립트를 구버전의 표기법(여러 브라우저에서 실행 가능한 표기)으로 변환할 수 있다. 유의할 점은 컴파일러 처럼 기계어로 번역되는 것이 아니라 구버전의 표기법으로 표기가 바뀐다는 것이다. 이외에도 리액트는 js 파일에 'JSX 표기법'이라 부르는 특수한 규칙을 따르는 작성 방법으로 코드를 기술하는데, 이런 코드 또한 브라우저가 인식 가능한 형태로 자동 변환된다. 현재는 'babel(바벨)'이라 불리는 트랜스파일러가 주류이다. * 바벨 사용법(블로그)

개발 경험을 한층 높인 '비트vite'

'웹팩'을 사용해 프론트엔드 개발을 할 때, 코드에 무언가 변경이 발생하면 서버를 다시 기동하지 않아도 다시 번들이 실행되고 업데이트 내용이 브라우저에 반영된다. 이는 개발 경험을 높이지만, 프로젝트 규모가 커짐에 따라 번들로 묶는 시간이 늘어나는 문제가 발생 가능하다.

반면에 '비트'는 개발 환경에 따라 소스 코드를 번들하지 않고 빠르게 실행해준다. 개발 서버를 기동하는 속도도 매우 빠르다. * 비트 사용법(영상)

1.6 SPA와 기존 웹 시스템의 차이

기존 웹 시스템

1. 사용자가 '이 페이지를 보여주세요'라고 TOP 페이지에 접근하면 -> 서버 측은 요청을 받아서 일치하는 페이지의 HTML 파일을 반환함
2. 이후 HTML의 링크를 클릭해서 어떤 페이지(예: 마이페이지)를 열람할 때는 1번과 같이 서버 측에 '이 페이지를 보여주세요'라고 요청을 전송하고, 서버 측에서는 요청과 일치하는 HTML 파일을 반환함

💡 기존 웹 시스템에서는 페이지를 이동할 때마다 서버에 요청을 전송하고 서버 측에서 HTML 파일을 반환하기 때문에 페이지 이동시 화면이 잠깐 하얗게 보이는 것이 특징이다.

SPA(Single Page Allocation)

1. 기존 웹 시스템 처럼 '이페이지를 보여주세요'라고 TOP 페이지에 접근하면 서버 측이 요청을 받아 일치하는 페이지의 HTML 파일을 반환함
2. 이후 HTML의 링크를 클릭해서 어떤 페이지(예: 마이페이지)를 열랗말 때, 필요한 데이터가 있을 경우 '필요한 데이터를 주세요'라는 요청을 서버에 전송함
3. HTML 전체를 변경하는 게 아닌 index.html 파일을 자바스크립트로 DOM을 바꾸는 방식으로 업데이트 함

💡 HTML 파일 요청과 달리 비동기적 실행을 통해 데이터를 얻을 수 있다. 화면이 잠깐 하얗게 변하지 않아 쾌적하다는 장점이 있다. 'SPA'에서는 HTML 파일이 하나이며 자바스크립트를 사용해 DOM을 바꿔 써서 화면 이동을 구현하는 게 기본!

 

---

아래 서적으로 학습하며 정리한 글입니다.

모던 자바스크립트로 배우는 리액트 입문