{
  test: /\.css$/,
  use: [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
      },
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebookincubator/create-react-app/issues/2677
        ident: 'postcss',
        plugins: () => [
          require('precss'), // 추가
          require('postcss-nested'), //추가
          require('postcss-flexbugs-fixes'),
          autoprefixer({
            browsers: [
              '>1%',
              'last 4 versions',
              'Firefox ESR',
              'not ie < 9', // React doesn't support IE8 anyway
            ],
            flexbox: 'no-2009',
          }),
        ],
      },
    },
  ],
},

incrementCount() {
	// 아래 코드는 의도한 대로 동작하지 않습니다.
  this.setState({count: this.state.count + 1});
}

handleSomething() {
  // `this.state.count`는 0부터 시작합니다.
  this.incrementCount();
  this.incrementCount();
  this.incrementCount();
  // 리엑트가 컴포넌트를 다시 렌더링할때 this.state.count는 1이고 3이 아닙니다.

  // incrementCount()함수는 this.state.count의 값을 사용하지만 
  // 리엑트가 다시 렌더링 되기 전까지 this.state.count값을 업데이트 하지 않습니다.
  // 그래서 incrementCount()는 this.state.count를 매번 0으로 읽고 1로 할당합니다.

}

incrementCount() {
  this.setState((prevState) => {
  	// 업데이트를 할 때 this.state대신 prevState 값을 읽어야 합니다.
   
    return {count: prevState.count + 1}
  });
}

handleSomething() {
  // `this.state.count`는 0부터 시작합니다.
  this.incrementCount();
  this.incrementCount();
  this.incrementCount();

  // 현재 `this.state.count` 값은 0이고 리엑트가 컴포넌트를 다시 렌더링하면 3이 됩니다.
 
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      items: []
    };
  }

  componentDidMount() {
    fetch("https://api.example.com/items")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result.items
          });
        },
        // Note: it's important to handle errors here
        // instead of a catch() block so that we don't swallow
        // exceptions from actual bugs in components.
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  render() {
    const { error, isLoaded, items } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <ul>
          {items.map(item => (
            <li key={item.name}>
              {item.name} {item.price}
            </li>
          ))}
        </ul>
      );
    }
  }
}

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
        <Text>React Native Test</Text>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export const toggleTodo = id => ({
	type: 'TOGGLE_TODO',
	id
})

export const VisibilityFilters = {
	SHOW_ALL: 'SHOW_ALL',
	SHOW_COMPLETED: 'SHOW_COMPLETED',
	SHOW_ACTIVE: 'SHOWD_ACTIVE'
}

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true);
xhr.withCredentials = true;
xhr.send(null);

process.env.REACT_APP_SERVICE_URL = serviceUrl

class BuildConfig {

	constructor () {
		let processEnv, serviceUrl

		const processArgv = process.argv
		this.currentEnv  = processArgv[2] // dev | qa | prd Argument 담는 변수 

		switch (this.currentEnv) {
			case 'dev':
				processEnv = 'development'
				serviceUrl = 'https://dev.service.com'
				break
			case 'qa':
				processEnv = 'production'
				serviceUrl = 'https://qa.service.com'
				break
			default:
				processEnv = 'production'
				serviceUrl = 'https://www.service.com'
		}

		process.env.REACT_APP_SERVICE_URL = serviceUrl
		process.env.BABEL_ENV   = processEnv
		process.env.NODE_ENV    = processEnv
	}

	getConfigData () {

		const data = {
			config: this.getConfig()
		}

		return data

	}

	getConfig () {
		let config

		switch (this.currentEnv) {
			case 'dev':
				config     = require('../configs/webpack.config.dev')
				break
			case 'qa':
				config     = require('../configs/webpack.config.prod')
				break
			default:
				config     = require('../configs/webpack.config.prod')
		}

		return config
	}
}

const buildConfig = new BuildConfig()
const data   = buildConfig.getConfigData()

module.exports = data

const { config, timestamp } = require('./buildConfig')

// Do this as the first thing so that any code reading it knows the right env.
//process.env.BABEL_ENV = 'production'; // 주석처리
//process.env.NODE_ENV = 'production';  // 주석처리

// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
  throw err;
});

// Ensure environment variables are read.
require('../configs/env');

const path = require('path');
const chalk = require('chalk');
const fs = require('fs-extra');
const webpack = require('webpack');
//const config = require('../configs/webpack.config.prod'); // 주석처리
const paths = require('../configs/paths');
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
const printBuildError = require('react-dev-utils/printBuildError');

  ...

import axios from 'axios'

axios.defaults.baseURL = process.env.REACT_APP_SERVICE_URL

export default axios

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

Vue.filter('addText', function (value) {
  return `${value} Add Text Global Filters`;
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
})

Vue.filter('addText', function (value, second, third) {
  return `${value} Add Text Global Filters ${second} ${third}`;
});