리액트 기본 과정 정리 - 2 [리액트 프로젝트 시작하기]

이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다.

개요

리액트 강의를 듣고 기본 개념을 정리하고 기억하기 위해 작성하였습니다. 공부하시는 다른 분들께 도움이 되었으면 합니다.

참고로 이번 글은 Webpack과 Babel에 대해서만 정리하기 위해 작성하므로 리액트 프로젝트를 어떻게 준비하고 시작하는지에 대해서는 다루지 않습니다.

 

리액트 프로젝트 시작하기

리액트 프로젝트를 시작하기전 Webpack 과 Babel 에 대해서 알고 가는 것이 필요합니다.

리액트 프로젝트는 우리가 보통 예전에 jQuery 같은 것을 <script src=....></script> 의 형태로 불러와서 사용했던 것처럼 사용하진 않습니다. 그렇게 할 수는 있지만 기능이 굉장히 제한적입니다.

 

그 대신에 리액트 프로젝트를 제대로 작업하려면 여러분의 컴퓨터에 Node, yarn, Webpack, Babel 등의 도구를 설치하여 프로젝트를 설정해주어야 합니다.

 

페이스북에서는 사용자를 위해 쉽게 리액트 프로젝트를 시작할 수 있는 보일러 플레이트 (create-react-app) 을 제공해주어 작업을 간단히 진행할 수 있습니다. 

 

* 보일러 플레이트 관련해 다음 블로그 글을 참고하시기 바랍니다

https://brunch.co.kr/@kooslab/144

 

Webpack, Babel 은 무슨 용도인가요?

Webpack

 

Webpack은 코드들을 의존하는 순서대로 잘 합쳐서, 하나 또는 여러개의 파일들로 결과물을 만들어 냅니다.

 

위 사진처럼 여러 개의 파일들이 있을 때 html 문서에서 이들을 하나하나씩 전부 다 불러오지 않고 빌드(번들링 작업)를 할 때 특정 확장자들 마다 어떠한 처리 작업을 하도록 준비를 해줍니다.

 

예를 들어, js 파일에서 .png 파일을 사용하기 위해 import 를 한다면 빌드 과정 후에 .png 파일이 사용될 경로가 문자열로 들어가게 되고, 화면에서 보여지게 됩니다.

 

또 이미지들을 압축하여 결과물로 특정 경로에 특정 이름으로 따로 저장하게끔 해줄 수 있습니다.

 

그리고 여러 개의 js 파일들을 만들었을 때 이들을 모두 하나하나 합쳐서 하나의 파일로 만들어줍니다. 기본적으로는 하나의 파일로 만들어주지만 원한다면 규칙을 만들어서 분리할수도 있습니다.

또 Babel 을 통해 js를 변화시키고 빌드를 하고나면 여러 브라우저에서 실행될 수 있습니다. ( Babel 에 대해선 조금 뒤 바로 설명을 하겠습니다 )

 

또 스타일의 경우 .scss 또는 .less 같은 파일들을 사용한다면 이들을 Webpack과 연동을 하고 컴파일 과정을 거치면 하나 또는 여러개의 .css 파일로 변환을 해서 따로 저장을 해줍니다.

 

정리하면 다음과 같습니다.

 

• 특정 파일에서 다른 파일을 사용할 때, 그 사용되는 파일의 경로를 문자열로 받게 해줌
• 이미지들을 압축하여 결과물로 특정 경로에 특정 이름으로 따로 저장해줌
• 여러 개의 js 파일들을 만들었을 때 모두 합쳐서 하나의 파일로 만들어줌
• .scss 또는 .less 를 하나 또는 여러개의 css 파일로 변환하여 저장해줌

 

Webpack은 어떤 html 파일이 js, css, jpg, png 등의 파일들을 불러와서 사용할 수 있게끔 자동으로 처리해주는 도구입니다.

 

Babel

Babel은 자바스크립트 변환도구로서, 모던 자바스크립트(ES6+)를 사용할 때 구형 브라우저에선 일부 새로운 자바스크립트 문법들을 지원하지 않습니다. 그래서 이 새로운 문법들을 사용하기 위해 Babel을 활용합니다. 위 사진처럼 왼쪽에 ES6 해체할당으로 적힌 자바스크립트 코드를 오른쪽에 ES5 이하의 코드로 변환해줍니다.

 

자바스크립트는 계속해서 새로운 문법이 추가되고 좋아지고 있지만, node.js 나 브라우저의 자바스크립트 엔진이 그 모든 문법들을 지원하고 있진 않습니다. 예를 들면, 개발자들이 '이러한 문법이 있으면 편하겠다' 라고 새로운 문법을 제시하면 그 문법을 이전 자바스크립트로 작성해주는 있는 플러그인을 만듭니다. 그러나 나중에 그 문법이 실제 자바스크립트에 도입이 될 수도 있고 안 될수도 있기 때문에 이러한 문제가 생깁니다.

 

그리고 리액트에서 리액트 컴포넌트를 작성할 때 쓰이는 JSX 문법이 있는데, 이를 자바스크립트로 변환할 때에도 Babel이 사용됩니다.

 

정리하면 다음과 같습니다.

 

• 모던 자바스크립트를 ES5 이하의 자바스크립트로 변환해줌
• 리액트에서 리액트 컴포넌트를 작성할 때 쓰는 JSX 문법을 사용할 때 자바스크립트로 변환해줌

 

Babel은 자바스크립트 변환도구입니다.

 

여기까지 Webpack과 Babel에 대해서 간단히 살펴보았습니다. 이들에 대한 자세한 내용은 추후에 새로운 글을 작성하며 다시 다루겠습니다.