Frontend (19) 썸네일형 리스트형 [총정리] useEffect(), useMemo(), useCallback() Hook 유의사항 Hook은 순서가 매우 중요 최상위 바깥에 선언해서 실행순서가 일정하게 하는 것이 중요 if문에 넣는것 금지 -> if(조건) useState(값) hook안에 hook을 쓰는것 금지 -> useState안에 useState를 쓰는 등 반복문은 상관없음 -> 비추천 hook과 라이플 사이클 // componentDidMount useEffect(() => { // 실행 할 로직 }, []); // componentDidUpdate const mounted = useRef(false); useEffect(() => { if(!mounted.current) mounted.current = true; // 실행 할 로직 }, [/*변경되는값*/]); // componentDidMount, c.. [webpack] webpack.config, react-hot-loader webpack.config 설정 자주 쓰는 모듈 path, webpack 상단 변수로 모듈 선언const path = require('path'); const webpack = require('webpack'); module options의 presets에 @babel/preset-env는 배열로 선언하면 babel이 컴파일 할 대상 브라우저도 지정 가능 표현식은 아래 사이트 참고 https://github.com/browserslist/browserslist#queries module.exports = { // ...entry module: { rules: [{ test: /\.jsx?/, loader: 'babel-loader', options: { pres.. [webpack] 기본 세팅 리액트를 하기 위한 webpack 세팅 CRA만 쓰지말고 직접 세팅해보자! npm 사용준비 프로젝트 폴더 열고 npm init 리액트 설치 npm i react react-dom 웹팩 설치(-D: 개발에만 쓰이는것) npm i -D webpack webpack-cli react문법을 위한 babel 설치 npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties babel-loader : 바벨과 웹팩을 연결 @babel/core : 바벨 기본적인 파일 @babel/preset-env : 브라우저에 맞게 최신문법을 예전문법으로 변환 @babel/preset-react.. 이전 1 2 3 다음
