2021.11.21
71번째 포스팅
입사 71일차.
Create-React-App(이하 CRA)을 사용해도 된다. 오히려 좋은 방법일 가능성이 높다.
하지만 개발자가 자신이 작성하는 코드의 의미도 모른채 그냥 넘어가도 되는걸까?
오늘은 지난 포스팅에 이어 개발환경구성(2)를 이어서 작성해보려고 한다.
0. 출처
① ZeroCho님의 무료 인프런강좌 (링크)
② Do it! 리액트 프로그래밍 정석 (eBook)
③ 초보자를 위한 Node.js 200제 (오프라인 구매)
1. 프로젝트 기본구성파일
① 사용할 클래스명.jsx
② client.jsx
③ package-lock.json
④ package.json
⑤ webpack.config.js
⑥ index.html
1. ClassName.jsx
① 기본구조
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
// React Import
const React = require(`react`);
const { Component } = React;
class ClassName extends Component {
// class ClassName extends React.Component {
// Component라는 변수에 React import 코드를 넣어 React.Component 대신 Component로 바꿀 수
state = {
};
render() {
}
}
// 작성한 컴포넌트를 'ClassName' 이라는 이름으로 사용
module.exports = ClassName;
|
cs |
② 모든 jsx파일에는 반드시 React를 import 해주어야 한다.
③ 다른 jsx파일에서 모듈로 불러올 수 있도록 module.exports = 모듈명; 을 반드시 하단에 작성해주어야 한다.
2. client.jsx
① 기본구조
|
1
2
3
4
5
6
7
8
9
|
// 1. React, ReactDOM Import
const React = require('react');
const ReactDom = require('react-dom');
// 2. 상대경로에 있는 jsx파일
const ClassName = require('./ClassName');
// 3. 렌더링
ReactDom.render(<ClassName />, document.querySelector('#root'));
|
cs |
② 다른 모듈을 불러오는 jsx파일에도 반드시 React를 import 해주어야 한다.
③ 다른 모듈에서 불러올 필요가 없다면 module.export 코드를 작성해주지 않아도 된다.
3. index.html
① 기본구조
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html>
<head>
<meta charset="UTF-8">
<title>메인페이지</title>
</head>
<body>
<div id="root"></div>
<!-- html에서는 !하나의 스크립트!만 가져올 수 있다 -->
<!-- 2개 이상의 파일을 app.js로 만들어주어야 한다 -->
<script src="./dist/app.js"></script>
</body>
</html>
|
cs |
② html에는 하나의 스크립트만 불러올 수 있다.
해당 설정은 webpack.config.js에서 작성한다.
4. webpack.config.js
① 기본구조
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
// webpack.config.js가 들어있는 절대경로를 가져온다
const path = require('path');
//
// html에서 하나의 스크립트만 사용할 수 있는 문제점을 해결
module.exports = {
name: 'name-setting', // 설정이름 (개발자가 원하는대로 작성)
mode: 'development', // 운영시 'production'으로 교체
devtool: 'eval', // 소스맵을 제공하는 옵션
// 입력
entry: {
// 2개 이상의 jsx는 배열로 작성 (확장자 생략가능)
app: ['./client'],
},
// 출력
output: {
// webpack.config.js가 들어있는 경로 + /dist
path: path.join(__dirname, 'dist'),
// 파일이름 app.js
fileName: 'app.js',
}
};
|
cs |
5. webpack 빌드하기
webpack을 빌드하는 방법은 3가지가 있다.
① package.json 파일의 scripts 수정
② npx webpack
다음포스팅의 주제
'프론트엔드 > 리액트' 카테고리의 다른 글
| [React] ⑧ WebPack 설치 및 개발환경구성 (1) (0) | 2021.10.04 |
|---|---|
| [React] ⑦ HTML5 Attribute 비교 (0) | 2021.09.27 |
| [React] ⑥ HooksAPI (0) | 2021.09.22 |
| [React] ⑤ React.Fragment, this, ref (0) | 2021.09.15 |
| [React] ④ <input>태그에 값 입력하기 (1) | 2021.08.16 |
댓글