CRA 없이 React 앱 설치 - #2_Babel

• 필요한 터미널(terminal) 명령어
  • pwd : 현재 작업 위치
  • ls : 현재 위치 안의 파일 출력
  • cd : 작업 디렉토리를 바꾸는 명령어
  • mkdir : 디렉토리(폴더)를 생성

---

React 앱을 만들기 위해 필수적인 개발 도구들

Babel, Webpack, HWR(hot-module-replacement) 등

• Babel

  • Babel은 JavaScript 컴파일러다.

  • es6 문법으로 작성된 javascript를 es5 문법의 javascript 코드로 변환

    // Babel Input: ES2015 arrow function
    [1, 2, 3].map(n => n + 1);
    // Babel Output: ES5 equivalent
    [1, 2, 3].map(function(n) {
    return n + 1;
    });

  • JSX 문법도 브라우저가 읽을 수 있도록 javascript 코드 변환
    (JSX(JavaScript XML) : React에서 사용되는 Javascript에 XML을 추가한 확장한 문법코드)

    // Javascript code
    return React.createElement(
    	'div',
    	{
    		onClick: () => setFollowing(!following),
    		style : following ? followBtnStyle : followingBtnStyle
    	},
    	following ? 'following' : 'Follow'
    );
    
    // JSX code
    return(
    	<div
    		onClick = {() => setFollowing(!following)}
    		style = {following ? followBtnStyle : followingBtnStyle}
    	>
    		{following ? 'following' : 'Follow'}
    	</div>
    );

---

Babel

Step.01 Babel 사용 시 필요한 패키지 설치

터미널에서 작업 디렉토리에 npm i -D @babel/core @babel/cli @babel/preset-react 입력한다.

• @babel/core : babel을 사용하기 위해 필수적으로 필요함
• @babel/cli : 터미널에서 명령을 통해 babel을 적용 시킬 수 있도록 함
• @babel/preset-react : react 관련된 코드를 컴파일

PS C:\WEB\front-end\React\'새로운폴더'> npm i -D @babel/core @babel/cli @babel/preset-react

package.json 파일을 열면 devDependencies에 잘 설치되어있다.
* -D 옵션을 주면 dependencies가 아닌 devDependencies에 추가된다.

"devDependencies": {
    "@babel/cli": "^7.17.10",
    "@babel/core": "^7.18.5",
    "@babel/preset-react": "^7.17.12"
}

Step.02 Babel 사용

터미널에서 작업 디렉토리에 npx babel 파일경로/파일명.js --presets=@babel/preset-react 입력한다.

PS C:\WEB\front-end\React\'새로운폴더'> npx babel 파일경로/파일명.js --presets=@babel/preset-react

ReactDOM.render(<FollowButton/>, domContainer);

↑ 위 코드가 터미널에서 ↓ 이렇게 나오면 성공

ReactDOM.render( /*#__PURE__*/React.createElement(FollowButton, null), domContainer);

++ babel preset 정의

@babel/preset의 종류는 다양하다.

• Preset
  • @babel/preset-env : es6를 es5 코드로 변환
  • @babel/preset-react : JSX을 javascript 코드 변환
  • @babel/preset-typescript
  • @babel/preset-flow

때문에 일반적으로 babel을 사용할 때마다 고정적으로 적용시킬 Preset을 정의해놓는다.

1. package.json있는 곳에 babel.config.js 파일을 생성한다.
2. babel.config.js 페이지로 가서 javascript 코드를 복사하여 babel.config.js 파일에 넣은 후 사용에 맞게 presets, plugins을 수정한다.

// Example code
module.exports = function (api) {
  api.cache(true);

  const presets = ['@babel/preset-env', '@babel/preset-react'];
  				  // 해당 preset을 꼭 'npm i -D @babel/preset-ㅇㅇㅇ' 명령어로 다운 후 적용
  const plugins = [];

  return {
    presets,
    plugins
  };
}

3. 설정을 해놓으면
   npx babel 파일경로/파일명.js --presets=@babel/preset-react
   이렇게 길었던 명령어를
   npx babel 파일경로/파일명.js
   파일명.js 까지만 적어줘도 실행되는 것을 볼 수 있다.