배운내용 열심히 정리하기

const obj = {
  a: 1,
  b: 2,
  c: 3
};

localStorage.setItem('obj',obj);
...
localStorage.getItem('obj')
// {"a":1, "b": 2, "c":3}

const obj = {
  a: 1,
  b: 2,
  c: 3
};

localStorage.setItem('obj',obj);
...

JSON.parse(localStorage.getItem('obj'))
// { a: 1, b: 2, c:3}
JSON.parse(localStorage.getItem('obj')).a
// 1

arr.find(callback, thisArg)

const arr = [1, 2, 3, 4, 5]

const result = arr.find(el => el > 3)

console.log(result)
//4

// 모달 컴포넌트에서
useEffect(() => {
  document.body.style.cssText = `position: fixed; top: -${window.scrollY}px`
  return () => {
    const scrollY = document.body.style.top
    document.body.style.cssText = `position: ""; top: "";`
    window.scrollTo(0, parseInt(scrollY || '0') * -1)
  }
}, [])

const [state, setState] = useState([])

useEffect(
... api 요청
)

const refs = useRef(state.map(createRef))

useEffect(
... refs 관찰자 등록
, [refs])

const [state, setState] = useState(null)

useEffect(
... api 요청
)


if (state)
const refs = useRef(state.map(createRef))

useEffect(
... refs 관찰자 등록
, [refs])

// const refs: any = React.useRef((list as any[]).map(React.createRef));
const refs: any = useRef([]);
// const refs: any = [];

useEffect(() => {
  console.log(refs);
}, [refs]);

useEffect(() => {
  console.log(list);
//  refs.current = refs.current.slice(0, list.length);
  registerObserver(refs);
}, [list]);


return (
...
          {(list as any[]).slice(0, 10).map((el, index) => {
            return (
              <li
                // ref={(els) => (refs[index] = els)}
                ref={(el) => (refs.current[index] = el)}
                /*

...
const inputRef = useRef(null)
...
  <form
    onSubmit={(e) => {
        e.preventDefault();
        ... 제출함수
        inputRef.current.remove();
      }
    }}
  >
  ...
      <input
        type="search"
        ref={(el) => (inputRef.current = el)}
        onChange={(e) => {
          setValue(e.target.value);
        }}
      />

      ...

...
const inputRef = useRef(null)
...
  <form
    onSubmit={(e) => {
        e.preventDefault();
        ... 제출함수
        inputRef.current.blur();
      }
    }}
  >
  ...
      <input
        type="search"
        ref={(el) => (inputRef.current = el)}
        onChange={(e) => {
          setValue(e.target.value);
        }}
      />

      ...

const arr = [1, 2, 3, 4, 5]

arr.includes(1) // true

arr.includes(2) // true

arr.includes(6) // false

const arr = ['ho', 'hi', 'kiki']

arr.includes('ho') // true

arr.includes('kiki') // true

arr.includes('ayo') // false

const stringArr = 'abc'

stringArr.includes('a') // true

stringArr.includes('b') // true

stringArr.includes('') // true

stringArr.includes('f') // false

//.env
MY_VAR = 1234
YOUR_VAR = 5678

...

// .js
console.log(process.env) // {}

//.env
MY_VAR = 1234
YOUR_VAR = 5678

...

// .js
console.log(process.env.MY_VAR) // 1234
console.log(process.env.YOUR_VAR) // 5678

...
const [list, setList] = useState([])
const [loading, setLoading] = useState(false)

useEffect(() => {

const setData = async () => {

setLoadnig(true)

try {
...
} catch(e) {
...
}

setLoadnig(false)

}

},[])

const [list, setList] = useState([])
const [firstLoading, setFirstLoading] = useState(false)

...
return {
...
<img src={img} onload={() => setFirstLoading(true)} />
...
}

...

return(
{!firstMount && <div style={이미지와 같은 사이즈의 빈 div} />}
<img src={img} onload={() => setFirstLoading(true)} />
)

...

return(
{!firstMount && <div style={이미지와 같은 사이즈의 빈 div} />}
<img src={img} onload={() => setFirstLoading(true)}
style={{
display : `${firstMount} ? '' : none`
}}
/>
)

const split = lodable(() => import('../pages/Search/Search'))

const Routes = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Main} />
        <Route exact path="/split" component={split} />
      </Switch>
    </Router>
  )
}

export default Routes

output: {
  filename: 'js/[name].bundle.js',
  path: path.resolve(__dirname, 'dist'),
  publicPath: '/app/dist/',
  chunkFilename: 'js/[name].[hash].bundle.js',
},

// .babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["syntax-dynamic-import"]
}

{
         test: /\.(tsx|ts|js)?$/,
         exclude: [/node_modules/],
         // use: ['babel-loader'],
         use: [
           {
             loader: 'babel-loader',
             options: {
               plugins: ['@babel/plugin-syntax-dynamic-import'],
             },
           },
         ],
       },

const itemReturnFunc = (list) => {
  return list.map((el, index) => (
  ...each item
  )

<Container>
  <div className={cx('wrapper')}>{itemReturnFunc(list.slice(0, 10))}</div>
  {props.rows > 1 &&
    secondList.reduce((acc, current, idx) => {
      if (!((idx + 1) % 10)) {
        return acc.concat(
          <div key={idx} className={cx('other_wrapper')}>
            {itemReturnFunc(secondList.slice(idx - 9, idx + 1))}
          </div>
        )
      }
      return acc
    }, [])}
</Container>

...
const [list ,setList] = useState([])
const isMounted = useRef(true) // ref로 변수관리

const setList = useCallback(async () => {
  try {
    const data = await axios.get(``);

    if (isMounted.current) { // 여기에 상태 를 바꿀 때 조건을 넣어준다
      setList(data);
    }
  } catch (e) {
    console.log(e);
  }
}, []);
...

useEffect(() => {
  setList()

  return () => {
    isMounted.current = false
  }
}, [])

npm i fs
npm i on-build-webpack

const WebpackOnBuildPlugin = require('on-build-webpack');
const buldDir = './dist';
const fs = require('fs');


... plugin [
new WebpackOnBuildPlugin(function (stats) {
        const newlyCreatedAssets = stats.compilation.assets;

        const unlinked = [];
        fs.readdir(path.resolve(buildDir), (err, files) => {
          files.forEach((file) => {
            if (!newlyCreatedAssets[file]) {
              fs.unlink(path.resolve(buildDir + file));
              unlinked.push(file);
            }
          });
          if (unlinked.length > 0) {
            console.log('Removed old assets: ', unlinked);
          }
        });
      }),
      ]
      ...