🔨 Create React App
npx create-react-app .초기에 react app을 실행하기 위해서는 webpack이나 babel과 같은 것을 설정하기 위해서 많은 시간이 걸렸지만, CRA가 나오면서 따로 설정을 하지 않아도 바로 시작이 가능한것이 create react app이다. 그렇다고 webpack이나 babel을 설정하는 것들을 몰라도 되냐고 한다면 사실 그렇지는 않은 것 같다. webpack이나 babel을 알아야 CRA가 어떻게 내부적으로 작동을 하는지 알기 때문에 따로 공부 할 필요는 있다.
babel이란?
babel은 자바스크립트 컴파일러로, 해마다 자바스크립트에서는 새로운 메서드들이나 문법들이 나오는데 추가된 최신 문법을 지원하지 않는 구형 브라우저에서도 페이지가 작동할 수 있도록 구형 문법으로의 변환을 도와준다. 일종의 번역기인 셈이다. 다양한 브라우저들과 여러가지 버전을 대응해야하는 개발자 입장에서 babel은 필수적인 컴파일러라고 생각된다.
webpack이란?
webpack은 사실 겉핥기 식으로 공부할 때도 느꼈지만 방대하고 어렵구나하는 생각이 들었다. 공식 홈페이지를 보니 옵션별로 장난이 아니다..
webpack의 정의를 간략하게 설명하자면 웹사이트를 만들 때 단순히 js, html, css 파일 등으로만 구성되는게 아니라 여러 라이브러리나 프레임 워크도 많이 사용하기 때문에 구조가 복잡해진다. 이렇게 복잡하게 된 구조들을 맞는 것 끼리 묶어서 번들로 만들어주는 역할을 하는게 webpack인데, 조금 더 쉽게 설명하면 많은 모듈들을 합해서 간단한 모듈을 만들어주는 역할을 한다고 보면 된다.
webpack setting - webpack의 간략한 세팅과 관해서 이전에 TIL에 적어둔 것들을 남겨둔다.
1을 공부하면 100 공부할게 나오고 100을 공부하면 1000 공부할게 나온다. 언제쯤 1공부하면 10만 더 공부하면 되는 개발자가 될까..?
➕ 참고
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 를 공부하며 작성한 글입니다.
