react-hot-loader 적용하기 원문 : https://react-etc.vlpt.us/05.hot-loader.html React-hot-loader · GitBook react-hot-loader 적용하기 react-hot-loader 는 코드가 변경되었을 때 페이지를 새로고침하지 않고 바뀐부분만 빠르게 교체해주는 라이브러리입니다. 비록, 리액트 어플리케이션을 개발 할 때 필수적인 react-etc.vlpt.us react-hot-loader 는 코드가 변경되었을 때 페이지를 새로고침하지 않고 바뀐부분만 빠르게 교체해주는 라이브러리입니다. 비록, 리액트 어플리케이션을 개발 할 때 필수적인 개발도구는 아니지만, 앱의 규모가 커지면 개발서버가 수정될때마다 새로고침이 된다면 딜레이가 발생되어 개발의 흐름이 중간중간 1~6초씩 끊길 수도 .. 더보기 Render Prop 원문 : https://react-etc.vlpt.us/04.render-prop.html Render Prop · GitBook 우리가 일전에 HoC 를 통하여 반복되는 로직을 효율적으로 재사용 하는 방법을 알아봤었습니다. 이번 강좌에서 알아볼 render props 는, HoC 에서 처럼 반복되는 로직을 쉽게 재사용 할 수 있게 해주 react-etc.vlpt.us 우리가 일전에 HoC 를 통하여 반복되는 로직을 효율적으로 재사용 하는 방법을 알아봤었습니다. 이번 강좌에서 알아볼 render props 는, HoC 에서 처럼 반복되는 로직을 쉽게 재사용 할 수 있게 해주고, 컴포넌트 코드를 작성하는 과정에서 컴포넌트를 함수로 감싸는 것이 아니라, JSX 에서 렌더링 하는 방식으로 사용 할 수 있게 해.. 더보기 create-react-app 에 ESLint 와 Prettier 적용하기 원문 : https://react-etc.vlpt.us/03.prettier-eslint.html create-react-app 에 ESLint 와 Prettier 적용하기 · GitBook create-react-app 에 ESLint 와 Prettier 적용하기 우리가 리액트 프로젝트, 혹은 다른 자바스크립트 프로젝트를 진행하게 될 때, 우리는 문법 검사 및 더 나은 자바스크립트 코딩 스타일을 위하여 ESLint react-etc.vlpt.us create-react-app 에 ESLint 와 Prettier 적용하기 우리가 리액트 프로젝트, 혹은 다른 자바스크립트 프로젝트를 진행하게 될 때, 우리는 문법 검사 및 더 나은 자바스크립트 코딩 스타일을 위하여 ESLint 라는 도구를 사용하곤 합니다. .. 더보기 immer.js 라이브러리 불변성관련 정리 원문 : https://react-etc.vlpt.us/02.immer.html immer.js 를 통한 넘나리 쉬운 불변성 관리 · GitBook 처음 사용하는 사람은, Immutable.js 의 내장함수에 익숙해지는데 시간이 꽤 걸립니다. Immutable.js 의 데이터를 다룰 땐 일반 객체를 다루듯이 사용하는것이 아니라, 값을 읽을땐 .get, .getIn, 그리고 값 react-etc.vlpt.us React Immutable.js – 리액트의 불변함, 그리고 컴포넌트에서 Immutable.js 사용하기 에서는, 리액트에서 왜 불변성을 유지하는것이 중요한지 알아보았고, Immutable.js 라이브러리를 사용하여 불변성을 조금 더 쉽게 관리하는 방법을 알아보았었습니다. Immutable.js 는.. 더보기 리액트에서 DOM 에 직접적인 접근을 할 때, ref 원문 : https://react-etc.vlpt.us/01.ref.html 리액트에서 DOM 에 직접적인 접근을 할 때, ref · GitBook 리액트에서 DOM 에 직접적인 접근을 할 때, ref ref 알아보기 리액트 개발을 하다보면 DOM 에 직접적인 접근을 해야 할 때가 있습니다. 그럴 때는 ref 라는것을 사용합니다. 그런데 정확히 어떠한 상 react-etc.vlpt.us ref 알아보기 리액트 개발을 하다보면 DOM 에 직접적인 접근을 해야 할 때가 있습니다. 그럴 때는 ref 라는것을 사용합니다. 그런데 정확히 어떠한 상황에 DOM 에 직접적인 접근이 필요할까요? 필요한 상황은 다음과 같습니다. input / textarea 등에 포커스를 해야 할때 특정 DOM 의 크기를 가져와야 할 .. 더보기 React에 TypeScript 적용방법 useEffect npm install --save-dev @typed/패키지_이름 TypeScript로 프로젝트 생성하기 npx create-react-app . --template typescript 여기서 마침표(.)는 현재 폴더라는 의미 npx create-react-app 폴더명 --template typescript JavaScript 프로젝트를 TypeScript로 마이그레이션 하기 새롭게 생성한 프로젝트의 src 폴더에서 아래 파일들을 제외하고 모두 삭제 src/react-app-env.d.ts src/reportWebVitals.ts src/setupTests.ts 만약 성능 측정 기능(reportWebVitals.ts 파일) 그리고 테스트 기능(setupTests.ts 파일)을 사용하지.. 더보기 파이썬 기초 숫자형 # 덧셈 print(5+5) # 뺄셈 print(7-2) # 곱셈 print(7*9) # 나누기 print(6/3) # 나머지 print(7%3) # 거듭제곰 print(2 **4) # 덧셈(소수형) print(5.0+5.0) # floor division(버림 나눗셈) print(7 // 2) 3 # round print(round(3.14159265321)) 3 print(round(3.14159265321,2)) 3.14 형변환(Type Conversion) print(int(3.14)) print(float("1.2")) print(str(3)) print("예시 {},{},{} 입니다 .".format(Java","리액트","파이썬")) print("예시 {2},{1},{0} 입니다."... 더보기 React Onload 이벤트와 동일하게 처리하는 방법 로딩할때 한번만 실행하도록 아래와 같이 사용한다. useEffect(() => { openPopup(); }, []); 더보기 반응형 웹 가이드 h1 { font-size: 24px; } p { font-size: 16px; } @media (min-width: 768px) { h1 { font-size: 36px; } p { font-size: 24px; } } @media (min-width: 992px) { h1 { font-size: 48px; } p { font-size: 32px; } } Bootstrap https://getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projec.. 더보기 간단한 Ag Grid 샘플 예제 잘 정리된 블로그 간단한 Ag Grid 샘플 예제 잘 정리된 블로그 https://myung-ho.tistory.com/110 [React] ag grid Row Data Transaction 기존에 사용하던 Ant Design라이브러리 Table을 Ag grid로 변경하게 되었다. Ant D Table은 Row Data를 useState hook을 통해 직접 변경해야 했다면 Ag grid에서는 useState hook을 사용하지 않고, applyTransaction이라는 myung-ho.tistory.com 더보기 React Ag-Grid onCellValueChanged에서 어떤 Col이 변경됐는지 확인 하는 방법 React Ag-Grid onCellValueChanged에서 어떤 Col이 변경됐는지 확인 하는 방법 const onCellValueChanged = useCallback( ({node: rowNode, data, column } : CellValueChangedEvent) => { if(column.getColId() !== "poQty") return false; \ 더보기 React Ag-Grid onCellValueChanged로 특정 값 세팅 했을 때 Grid에 제대로 반영되지 않았을 경우 해결 방법 React Ag-Grid onCellValueChanged로 특정 값 세팅 했을 때 Grid에 제대로 반영되지 않았을 경우 해결 방법 node.data.qty = calQty; ==> 이전 값이 보임 node.data['qty'] = calQty; ==> 이전 값이 보임. node.setDataValue('qty', calQty); ==> 정상적으로 보여짐. 또는 enableCellChangeFlash={true} 옵션 추가 https://www.ag-grid.com/react-data-grid/view-refresh/ React Data Grid: View Refresh The grid has change detection. Download v30 of the best React Data Grid in.. 더보기 이전 1 2 3 4 5 6 7 8 ··· 184 다음
