리액트 16~20강 정리

webpack.config.js 파일에서

 

plugin들의 모음이  preset이다.

 

preset-env내에서 어떤식으로 브라우저 지원하게 할지 문자열 알 수 있는 사이트

https://github.com/browserslist/browserslist

browserslist/browserslist

const path = require('path'); // node에서 경로 쉽게 조작하기 위함임 , 그냥 외우자!
const webpack = require('webpack');

module.exports = {
  mode: 'development', // 실서비스에서는 production 으로 바꾼다.
  devtool: 'eval',
  resolve: {
    extensions: ['.js', '.jsx'], // webpack이 알아서 확장자를 찾는다
  },  
  // 제일 중요한 부분
  // 입력
  entry: {
    app: ['./client'],  // client.jsx가 wordRelay를 불러오기때문에 써줄 필요가 없다. 확장자도 생략가능! 대신 resolve써줘야함 위처럼
  },

  module: {
    rules: [{
      test: /\.jsx?/, // 정규표현식 js파일과 jsx파일을 룰을 적용하겠다.
      loader: 'babel-loader',
      options: {
        presets: [
            ['@babel/preset-env', {
                targets: {
                    browsers: ['> 1% in KR'],
                },
                debug: true,
            }],
            '@babel/preset-react'
        ],
        plugins: [],
      }
    }],
  },
  
  // 추가적으로 하고 싶은 것.
  plugins: [
    new webpack.LoaderOptionsPlugin({debug: true}),
  ],

  // 출력
  output: {
    path: path.join(__dirname, 'dist'),  // 현재폴더에 안에 들어있는 dist라는 폴더가 된다. 
                                        // c:desktop/개발자....어디어디 이런거 안치게 해줌
    filename: 'app.js'
  },
}

 

 

 

react에서 form태그안에서는

value와 onChange는 세트로 속성에 넣어주어야한다. 만약 한가지만 넣을거면 defaultValue만 사용.

 

// 클래스형 wordrelay

const React = require('react');  // 쪼갠파일에서 필요한 패키지나 라이브러리 가져오는 부분
const { Component } = React;

class WordRelay extends Component {
  state = {
    word: '서니킴',
    value: '',
    result: '',
  };

  onSubmitForm = (e) => {
    e.preventDefault();
    if(this.state.word[this.state.word.length - 1] === this.state.value[0]) {
      this.setState({
        result: '딩동댕',
        word: this.state.value,
        value: '',
      })
      this.input.focus();
    } else {
      this.setState({
        result: '땡',
        value: '',
      });
      this.input.focus();
    }
  };

  onChangeInput = (e) => {
    this.setState({ value: e.target.value});
  };

  onRefInput = (c) => {
    this.input = c;
  };


  render() {
    return (
      <>
        <div>{this.state.word}</div>
        <form onSubmit={this.onSubmitForm}>
          <input ref={this.onRefInput} value={this.state.value} onChange={this.onChangeInput} />
          <button>입력!</button>
        </form>
        <div>{this.state.result}</div>
      </>
    )
  }
}

module.exports = WordRelay; // 쪼갠 파일을 밖에서도 사용하게 해줌.

 

// Hooks로 만들기

const React = require('react');  // 쪼갠파일에서 필요한 패키지나 라이브러리 가져오는 부분
const { useState, useRef } = React;

const WordRelay = () => {

  const [word, setWord] = useState('써니킴');
  const [value, setValue] = useState('');
  const [result, setResult] = useState('');
  const inputRef = useRef(null);

  const onSubmitForm = (e) => {
    e.preventDefault();
    if(word[word.length - 1] === value[0]) {
      setResult('딩동댕');
      setWord(value);
      setValue('');
      inputRef.current.focus();
    } else {
      setResult('땡');
      setValue('');
      inputRef.current.focus();
    }
  };

  const onChangeInput = (e) => {
    setValue(e.target.value);
  };

  return (
    <>
      <div>{word}</div>
      <form onSubmit={onSubmitForm}>
        <input ref={inputRef} value={value} onChange={onChangeInput} />
        <button>입력!</button>
      </form>
      <div>{result}</div>
    </>
  )
  
}

module.exports = WordRelay; // 쪼갠 파일을 밖에서도 사용하게 해줌.

 

werbapck-dev-server : 내 컴퓨터가 서버가 되어서 동작하게끔 만들어줌. locathost주소로 작동하게끔

react-hot-loader : 코드 수정하면 화면이 자동으로 바뀌게끔 만들어줌.

 

path는 실제의 경로 publicPath 는 가상의 경로