[패스트캠퍼스 서포터즈 3기 - Node.js 강의 후기] 4주차 : 바벨과 JSX, 웹팩 (풀스택개발자)

본 게시글은 PC버전에 최적화 되어있으며 패스트캠퍼스 서포터즈 3기로 활동하며

"한 번에 끝내는 Node.js 웹 프로그래밍 초격차 패키지 Online"을 무료로 협찬받아 작성한 게시글입니다.

 

풀스택개발자 풀스택개발자 풀스택개발자 풀스택개발자 풀스택개발자

 

벌써 4주차다. 이제 한 주만 더하면 서포터즈 활동은 끝... 이번 주에 하나 쓰고 다음 주에 마지막 5주차를 쓸라했는데 이번주 수요일까지 5주차를 마무리하라고 하셔서 오늘 하나... 내일 하나... 이렇게 써야된다😂😂

 

오늘은 지난 주 리액트 맛보기에 이은 바벨과 JSX, 웹팩에 대해서 학습했다.

 

일단 JSX가 뭐냐고?

HTML처럼 생긴 문법이다.

const element = <h1>Hello, world!</h1>;

뭔가 짬뽕됐다. HTML 태그인데 const형 변수 element에 들어가 있다니...

이러한 문법은 JSX라고 부르며, 자바스크립트의 문법 확장이다... HTML과 유사한 구조를 갖고 있어서 이해하기도 쉽다.

하지만 해당 문법을 사용하기 위해서 몇 가지 규칙이 존재한다.

 

1. 속성은 항상 쌍따옴표로 감싸준다.

2. 태그는 항상 닫혀있어야한다.

3. 형제 노드를 작성할 수 없다.

 

이런 규칙 말고도 몇가지가 더 존재하는데 리액트 공식 문서에서 확인 가능하다.

 

https://ko.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

 

바벨은 JSX 문법을 다양한 브라우저 환경에서 동작 가능하도록 변환해주는 기능을 한다.

사실 바벨은 원래 '6TO5'라는 이름을 갖고 있었는데 ES6에서 ES5로 바꿔주는다는 의미였다.

최신 문법인 JSX를 바벨을 통해 모든 브라우저가 읽기 쉬운 ES5코드로 변환해주고 개발자 입장에서는 JSX 같은 최신 문법을 사용하면서도 다양한 브라우저에서 호환이 가능하도록 구현할 수 있게 해준다.

 

바벨 공식 사이트에서도 이러한 내용이 확인 가능하다.

 

https://babeljs.io/

Babel · The compiler for next generation JavaScript

 

그렇다면 웹팩은?

웹팩은 의존성을 분석하여 모듈을 번들, 즉 하나로 묶어주는 역할을 수행한다. 프로젝트를 개발하다보면 다양한 라이브러리들을 사용하게 되는데 이를 빌드라는 과정을 통해 하나로 묶어준다. 하나로 묶어서 유지보수성을 높일 수 있다는 장접이 있다. 역시 공식사이트에서 확인할 수 있다.

 

https://webpack.js.org/

webpack

 

그렇다면 리액트를 사용하기 위해 매번 웹팩과 바벨을 일일히 설정해야할까?

역시 똑똑한 개발자들이 이를 하나의 명령어로 손쉽게 설정할 수 있게 만들어놨는데 그것은 바로

create-react-app.

 

코드는 아래와 같다.

npx create-react-app my-app
cd my-app
npm start

 

딱 이 한 줄만 있으면 귀찮게 하나 하나 설정할 필요없이 손쉽게 짠! 하고 만들어진다.

하지만 강사님께서도 리액트 개발에 있어서 위 명령어만 안다고 해서 웹팩과 바벨에 대해 자세히 알 필요가 없다? 이건 전혀 아니라고 하셨다. 리액트 개발자가 되려면 웹팩과 바벨에 대해서 정확하게 이해하고 사용할 줄 알아야 된다고 정말 강조하셨다. 나는 리액트쪽으로는 관심이 많은 편은 아니지만 그래도 개인적으로 흥미가 있는 편이라서 좀 알아보고 싶긴 하다.  주말에 시간이 된다면 조금씩 공부해보고싶은 욕심은 있다. 확실히 리액트를 들어오니까 훨씬 재밌는 거 같다. 리뷰를 써야해서 급하게 시청한 감이 있지만...

 

노드JS 노드JS 노드JS 노드JS 노드JS

 

"한 번에 끝내는 Node.js 웹 프로그래밍 초격차 패키지 Online"을 무료로 협찬받아 작성한 게시글입니다.

 

https://bit.ly/3pdy7Wq

한 번에 끝내는 Node.js 웹 프로그래밍 초격차 패키지 Online | 패스트캠퍼스