React.JS 초기 설정
ReactJS 설정
1.작업 디렉토리 생성
-> mkdir test
-> cd test
-> mkdir source
-> mkdir build
-> cd source
-> touch app.js
작업 디렉토리 test를 생성하고
그 하위에 source, build 디렉토리를 생성한다.
source 디렉토리 하위에 app.js 라는 빈 파일을 생성한다. (test/source/app.js)
2.초기 설정 (이후 모든 작업은 test 디렉토리 안에서 실행한다)
-> 작업 디렉토리상에서 npm init 을 실행한다, 그러면 package.json 파일이 생성된다.
3.모듈 다운로드
-> npm install -g npm-check-updates
일단 npm 부터 업그레이드 한다.
npm 업그레이드를 안 덕에 모듈 버전이 안 맞아 꽤 고생했다.
왠만하면 npm 실행하기 전에 업그레이드부터 해주자
-> npm install --save-dev webpack
webpack은 클라이언트 측 자바스크립트 애플리케이션에서 Node.js 모듈들을 재사용할 수 있게 모든 의존 파일을 번들링하는데 사용하는 도구다.
--save-dev save는 의존성을 체크해서 설치라하라는 옵션이고, dev는 개발용을 의미한다.
다만 npm 상에서 의존성만 체크하기 때문에 npm은 업그레이드된 상태여야 문제가 없다.
-> npm install --save-dev babel-core babel-loader
React 구문을 JavaScript로 변환하는 로더를 설치한다.
이 로더가 필요로 하는 다른 라이브러리도 설치한다.
-> npm install --save-dev bebel-preset-latest babel-preset-react babel-plugin-transform-class-properties
이 글을 작성하고 있는 시점(2018년 12월 13일)에서의 방금 다운로드한 라이브러리 목록이다.
+ babel-loader@8.0.4
+ babel-core@6.26.3
+ babel-plugin-transform-class-properties@6.24.1
+ babel-preset-react@6.24.1
+ babel-preset-latest@6.24.1
그러나 babel-loader 8.0.4 버전이 babel-core 6.26.3과 충돌이 일어났다.
그래서 babel-loader를 다운그레이드 했다.
-> npm install --save-dev babel-loader@7
4.웹 환경설정
스크립트를 생성 할 webpack.coinfig.js 만든다.
이 스크립트는 html 내에 포함될 구동 스크립트를 생성할 컴파일 환경설정 파일이다.
module.exports = {
entry: './source/app.js', // 웹앱의 진입점
output: {
path: path.resolve(__dirname, 'build'), // 결과물이 저장될 폴더
filename: 'test.js' // 결과물로 나올 파일명
},
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['react', 'latest'],
plugins: ['transform-class-properties']
}
}
],
exclude: path.resolve(__dirname, 'node_modules')
}
]
}
};
5.웹 시작
-> npm start 를 실행하면, ,/build/test.js 가 생성된다.
-> 이를 html 파일내에 스크립트로 포함시킨다. (header 말고 body의 맨 마지막에 추가한다)
<script src="./build/test.js"></script>
6.React 시작
-> npm install --save-dev react react-dom
React 모듈 다운로드
(현재 다운로드 버전)
+ react@16.6.3
+ react-dom@16.6.3