React로 만드는 Todo-list 개발환경설정
*creact-react-app을 통해 Todo-list를 만드는 포스트는 이미 벨로퍼트님이나 다른분들이 다루셨기때문에, 저는 좀 다르게 npm설치와 번들러 설정부터 시작하겠습니다. 또한, 입문자분들에게 Webpack이라는 번들러 자체가 진입장벽이 높기때문에,(사실 필자도 잘 다루지못함) webpack.json처럼 따로 번들러의 환결설정을 해주지 않고도 자동으로 처리해주는 Parcel이라는 번들러를 사용합니다.
1.폴더 생성 : react-todo
2.터미널로 해당폴더 이동 후 npm init -y입력 (npm init시에 모든 문항에 y로 대답한다는 명령어)
3. npm 설치
npm install --save react react-dom
npm install --save-dev babel-preset-react babel-preset-env parcel-bundler
4. .babelrc 파일 생성(.babelrc는 babel에 대한 설정파일입니다.)
폴더에 .babelrc라는 파일을 만들고
{
"presets": ["env", "react"]
}위와 같이 입력하고 저장합니다.
5. package.json 수정
package.json 파일을 열어 "scripts"부분을
"scripts": {
"start": "parcel src/index.html",
"build": "parcel build src/index.html --public-url=./",
"test": "echo \"Error: no test specified\" && exit 1"
},이렇게 수정합니다. (start는 parcel의 개발서버를 실행하는 구문이며, build는 src폴더에 index.html기준으로 번들링을 시작해 dist로 출력하게하는 명령어입니다. --publick-url='./'은 index.html을 기준으로 js나 css 경로를 설정하는것입니다. 따로 설정하지않을시 기본은 "/"가 됩니다.)
6.폴더 구조만들기
내 멋대로 만드는 Todo-list를 진행하면서 파일구조는 더욱 추가될것이니, 가장 기본이되는 "src"폴더부터 생성하고 src폴더 안에 app.js와 index.html파일을 생성합니다.
위와같은 폴더구조가 되면 됩니다.
7.테스트
그럼 일단 구동되는지 테스트를 해보도록하죠.
app.js를 아래와 같이 입력하고,
import React from "react";
import ReactDOM from "react-dom";
class HelloMessage extends React.Component {
render() {
return <div>Hi, my name is {this.props.name}</div>;
}
}
var app = document.getElementById("app");
ReactDOM.render(<HelloMessage name="Kimik" />, app);
index.html은 아래와 같이 입력합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>
그리고 터미널에서 react-todo폴더로 이동한 후에 package.json에서 입력한 명령어들을 실행해보겠습니다.
npm start를 입력하면 http://localhost:1234로 개발서버가 실행됩니다.
build하여 결과물을 보고싶다면 npm run build를 입력하면 dist 폴더가 생성되고 모든 소스가 압축되어 출력됩니다.
* 다음포스트에서는 어떤 Todo-list를 만들것인지와 기본틀 만들기를 진행하겠습니다. (업데이트 주기는 최소 1주(4월 25일)입니다.)
'Front-End > Javascript' 카테고리의 다른 글
| [React]내 멋대로 만드는 Todolist-3(feat.Parcel) (0) | 2019.05.03 |
|---|---|
| [React]내 멋대로 만드는 Todolist-2(feat.Parcel) (0) | 2019.04.25 |
| [mac] npm 설치시 권한 오류 해결방법 (0) | 2018.08.16 |
| 화살표 함수 (arrow function) (0) | 2018.05.25 |
| 템플릿 리터럴(Template literal) 요약정리 (0) | 2018.05.21 |
댓글