[React] 개발환경 세팅하기

Danbi Cho·2020년 5월 25일
1

TIL

목록 보기
14/20

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-es2015

2. 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-dom

router 추가 설치

npm install --save react-router-dom

2. 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 typescript

3. 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'] 
},
profile
룰루랄라! 개발자 되고 싶어요🙈

0개의 댓글