likeornament 님의 블로그
[REACT] Create React App 없이 REACT를 시작해보자 본문
해당 내용은 제로초님의 React 기본 강좌를 듣고 정리한 내용입니다.
https://youtu.be/aYwSrzeyUOk?si=9PrkwJyQyRiCFFfc
3년 전에 동아리에서 리액트로 프로젝트를 했을 당시
빨리 개발을 해야 한다는 부담감에 리액트 공부도 하지 않은 상태로 무작정 코딩을 했다.
그때 프로젝트는 next.js로 했었는데 리액트도 모르는 상태에서 당연히 제대로 했을 리가 없다.
그냥 '이런 식으로 하면 되겠지...?'라는 생각으로 코딩을 했었다.
그래서 전역을 한 후 리액트를 공부해야겠다는 생각을 하고 제로초님의 강의를 들으며 공부했다.
이 강의의 좋았던 점은 Create React App으로 빠르게 React 개발 환경을 만드는 것이 아닌
Create React App 없이 하나하나 라이브러리를 설치하면서 리액트 프로젝트를 시작한다는 점이다.
이로 인해 얻게 된 이점은 웹팩이 무엇이고, 어떤 방식으로 돌아가는지 알 수 있다는 점이다.
Create React App을 사용한다면 예를 들어 웹팩 코드 50줄이 한 꺼번에 들어와 코드의 의미를 모르겠지만
위의 강의에서 진행하는 방식대로 하나하나 웹팩 설정 코드를 따라 치면 어떤 기능을 하는 코드인지 알 수 있다.
이제 Create React App 없이 React 프로젝트를 만드는 방법을 설명하겠다.
1. Node.js 설치
Node.js — Run JavaScript Everywhere
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
위 사이트에서 최신 버전의 Node.js를 설치해 주면 된다.
※ Node.js를 백엔드 개발할 때만 사용한다고 아는 사람이 많은데, Node.js는 Javascript 코드를 브라우저 밖에서 실행할 수 있게 해주는 런타임 환경이다!
2. pakage.json 파일 생성
프로젝트 폴더에 들어가 터미널을 열어서 'npm init' 명령어를 입력하면 해당 폴더에 pakage.json 파일이 생성된다.
명령어를 입력하면 pakage name을 입력하라는 메시지가 나온다.
해당 프로젝트의 이름을 입력하자.
그 후 여러가지 설정들을 입력하라는 메시지가 나오는데 입력하지 않아도 지금은 무방하다.
마지막으로 확인 메시지가 나오는데 엔터를 누르자.
해당 프로젝트 폴더에 pakage.json 파일이 만들어졌다.
pakage.json은 Node.js의 프로젝트의 설정 파일로 프로젝트 이름, 버전, 설명 그리고 프로젝트에 필요한 라이브러리들이 적혀있다.
3. 각종 라이브러리 설치 및 설정
'npm i react react-dom'을 입력해서 리액트를 설치하고,
'npm i -D webpack webpack-cli'를 입력해서 웹팩을 개발의존성(devDependencies)에 추가해준다.
여기서 웹팩이란 자바스크립트의 가장 대표적인 빌드 도구이다.
웹팩은 프로젝트의 소스코드 파일들을 기본적인 자바스크립트 문법으로 트랜스파일하고,
트랜스파일 된 파일들을 묶어 배포 파일을 만들어 준다.
이렇게 많은 소스코드들을 묶어서 소수의 배포파일을 만드는 이 빌드 과정을 번들(bundle)이라고도 한다.
//webpack.config.js
module.exports = {
};프로젝트 폴더로 돌아와 webpack.config.js 파일을 생성해서 위 코드를 작성한다.
웹팩은 모두 이 webpack.config.js 파일에서 돌아가며 각종 설정들을 추가할 것이다.
//client.jsx
const React = require('react');
const ReactDOM = require('react-dom');client.jsx 파일을 생성해서 위 코드를 입력한다.
jsx는 Javascript XML의 약자로 react와 함께 사용되는 javascript의 확장 문법이다.
jsx를 사용하면 HTML과 유사한 구문을 javascript 코드 내에 사용할 수 있다.
<!--index.html-->
<html>
<head>
<meta charset="UTF-8"/>
<title>구구단</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/app.js"></script>
</body>
</html>index.html 파일에서는 위 코드처럼 div 태그의 id로 root를 적고 script 태크의 src에는 app.js를 적어야 한다.
//client.jsx
...
const GuGuDan = require('./GuGuDan');
ReactDOM.createRoot(document.querySelector('#root')).render(<GuGuDan />);client.jsx에 위의 코드를 추가한다.
그러면 GuGuDan 컴포넌트가 index.html의 root 태그에 그려지게 된다.
//webpack.config.js
const path = require('path'); //node에서 제공하는 경로 조작하는 툴
module.exports = {
name: 'wordrelay-setting',
mode: 'development', //실서비스: production
devtool: 'eval', //개발일땐 eval, 프로덕션일땐 hidden-source-map
entry: {
app: ['./client.jsx', './GuGudan.jsx'],
}, //입력
output: {
path: path.join(__dirname, 'dist'), //현재경로(__dirname = lecture) 안에 있는 dist 폴더
filename: 'app.js'
}, //출력
};webpack.config.js 파일에 해당 코드들을 추가한다.
위 코드는 client.jsx와 GuGuDan.jsx 파일을 dist 폴더 안의 app.js에 합친다는 내용 즉, 번들을 하는 코드다.
"scripts": {
"dev": "webpack"
},package.json 파일의 scripts에 해당 코드로 수정하게 되면 npm run dev를 입력해서 webpack을 실행시킬 수 있게 된다.
명령어를 실행하면 dist 폴더 아래에 app.js 파일이 생성된다.
그러나 오류가 발생하게 되는데 이유는 jsx 파일을 실행시키기 위해선 babel을 설치해줘야 하기 때문이다.
@babel/core: 바벨의 기본적인 것들이 들어있다.
@b abel/preset-env: 브라우저에 맞게 최신 문법을 옛날 문법으로 바꿔준다
@b abel/preset-react: 이것이 있어야 jsx를 지원할 수 있다
@babel/plugin-proposal-class-properties: 리액트의 특정 문법을 사용하려면 다운받아야함
babel-loader: 바벨과 웹팩을 연결해준다.
해당 라이브러리들을 npm i -D로 설치해준다.
//webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
mode: 'development',
devtool: 'inline-source-map', // hidden-source-map
resolve: {
extensions: ['.jsx', '.js'],
},
entry: {
app: './client',
},
module: {
rules: [{
test: /\.jsx?$/,
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
targets: {
browsers: ['> 5% in KR'], // browserslist
},
debug: true,
}],
'@babel/preset-react',
],
plugins: [],
},
}],
},
output: {
filename: 'app.js',
path: path.join(__dirname, 'dist'),
},
};그리고 webpack.config.js 코드를 수정해준다.
entry 안에 있는 파일을 불러와서 modules에 적힌 설정을 적용 후 output의 파일에 합친다는 코드다.
//webpack.config.js
...
module: {
rules: [{
test: /\.jsx?$/,
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
targets: {
browsers: ['> 5% in KR'], // browserslist
},
debug: true,
}],
'@babel/preset-react',
],
plugins: [],
},
}],
},
...위 코드는 js, jsx 파일에 babel-loader를 적용시킨다는 뜻이다.
그리고 한국의 5% 이상 비율을 차지하는 브라우저에서 적용한다는 코드도 추가했다.
이제 실행을 시켜보면 오류없이 제대로 실행이 된다.
전역 후 리액트 공부하면서 워드 파일에 적어놓았던 걸 옮겨 적었다.
현재는 Next.js로 프로젝트를 진행 중인데 따로 바벨 설정을 건드려야 하는 상황은 오지 않아서
위의 지식을 쓸 일이 없었다..... 좀 더 플젝을 진행하다보면 써야 할 상황이 올까 궁금하다.