CRA 없이 개발환경 세팅하기 / Webpack
1. 원하는 경로에 프로젝트 디렉토리를 생성하고 명령어를 입력
CRA (Create React App)으로 프로젝트를 만들지 않으면 직접 package.json을 만들어 줘야 한다.
npm init // 하나씩 직접 입력 하면서 생성하는 방법npm init -y // 저절로 아래와 같이 생성된다.
{
"name": "code",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}2. root 폴더에 index.html 파일 생성 / script에 번들 코드 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
<!-- Dependencies -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- Main -->
<script src="./bundle.js"></script>
</body>
</html>3. 웹팩설치 및 설정
npm install --save-dev webpack
npm install --save-dev webpack-cli
npm install --save-dev webpack-dev-server packege.json script - start 명령어 코드 설정
"start": "webpack-dev-server --config ./webpack.config.js --mode development"root폴더 - webpack.config.js 파일 생성
module.exports = {
entry: [
'./src/index.js'
],
output: {
filename: "bundle.js",
path: __dirname + "/dist"
}
};root폴더 - src폴더 생성 - index.js 파일 생성 - index.js에
console.log("hello world") 입력후-> npm start 후 console.log 확인!
CRA 없이 개발환경 세팅하기 / Babel
1. babel 설치
npm install --save-dev babel-loader
npm install --save-dev @babel/core
npm install --save-dev @babel/preset-env
npm install --save-dev @babel/preset-react
npm install --save-dev babel-preset-es20152. webpack.config.js output 다음 코드 추가
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},3. root폴더 - .babelrc 파일 생성 후 코드 추가
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}CRA 없이 개발환경 세팅하기 / CRA
1. react, react-dom 설치
npm install --save react
npm install --save react-domrouter 추가 설치
npm install --save react-router-dom2. src/index.js에 코드 추가
import React from 'react';
import ReactDOM from 'react-dom';
const title = 'Hello world!!';
ReactDOM.render(
<div>{title}</div>,
document.getElementById('example')
);-> npm start 후 Hello world!! 확인!
CRA 없이 개발환경 세팅하기 / Typescript 설치 및 설정
1. src 폴더에 components 폴더 생성
2. typescript 설치
npm install --save @types/react
npm install --save @types/react-dom
npm install --save-dev typescript3. typescript 설정 파일 추가 / root 폴더에 tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"include": [
"./src/**/*"
]
}4. componenets 폴더 - Hello.tsx
import * as React from "react";
export interface HelloProps { compiler: string; framework: string; }
// 'HelloProps'는 props의 형태을 만듭니다.
// State가 설정되어 있지 않아 '{}'타입을 사용합니다.
export class Hello extends React.Component<HelloProps, {}> {
render() {
return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;
}
}5. src 폴더 - index.js 확장자를 .tsx로 변경 / 변경 후 아래 코드, Hello 컴포넌트 추가
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Hello } from "./components/Hello";
ReactDOM.render(
<Hello compiler="TypeScript" framework="React" />,
document.getElementById("example")
);6. babel 추가 설치 및 설정
npm install --save @babel/preset-typescript.babelrc 파일에 코드 추가
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript" // <-추가
]
}
7. webpack.config.js 설정 변경
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx','.ts','.tsx']
},