커리까지

useDidMountEffect.tsx 생성하기 import { useRef, useEffect } from "react"; export const useDidMountEffect = (func: any, deps: any) => { const didMount = useRef(false); useEffect(() => { if (didMount.current) func(); else didMount.current = true; }, deps); }; 내가 만든 함수에 적용하기 const testValue = useRecoilValue(testvalue); const test = () => { const checkboxlist : NodeListOf = document.getElementsByName(&#..

root에 있는 지우기 const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( // -> 주석 처리 혹은 지우기 // ); StrictMode란? https://ko.reactjs.org/docs/strict-mode.html 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구 개발모드에서만 적용되고 서비스 환경에서는 적용 안 됨 - 안전하지 않은 생명주기를 사용하는 컴포넌트 발견 - 레거시 문자열 ref 사용에 대한 경고 - 권장되지 않는 findDOMNode 사용에 대한 경고 - 예상치 못한 부작용 검사 - 레거시 context API 검사

antd에서 css를 가져오려고 App.tsx 와 index.tsx 에 직접 import 'antd/dist/antd.css'; 를 했더니 아래와 같은 오류가 발생하였다. WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.css) Module Warning..

https://epsg.io/transform#s_srs=4326&t_srs=3857 왼쪽이 EPSG:4326 우리가 흔히 알고있는 위도 ,경도 37.923888797010704, 128.41693050107602 오른쪽이 EPSG:3857 x가 경도 y가 위도

handleValueChange = (e) => { let nextState = {}; nextState[e.target.name] = e.target.value; this.setState(nextState); } App.js에 다음과 같은 함수를 추가함 return에 있는 InputBase에는 다음과 같은 구문을 추가함 const filteredComponents = (data) => { data = data.filter((c) => { return c.name.indexOf(this.state.searchKeyword) > -1; }); return data.map((c) => { return }); } ---------------------- {this.state.customers ? filtere..

리액트 강의를 따라 하는데 자꾸 이러한 메시지가 뜨면서 값이 나오지 않았다. 그래서 다음과 같은 코드를 추가하니 잘 나왔다. callApi = async () => { const response = await fetch('/api/customers',{ headers: { 'Accept' : 'application / json' } }); const body = await response.json(); return body; } { headers: { 'Accept' : 'application / json' } } api 주소 다음에 이 부분을 추가하였다.

전체 웹사이트의 폰트와 appbar로 꾸민다. https://material-ui.com/components/app-bar/#app-bar cd client로 이동해서 설치 npm install --save @material-ui/icons appbar를 쓰기 위하여 라이브러리를 설치한다. 위 사이트에 있는 소스코드들을 복사해서 붙여넣는다. const cellList = ["번호", "프로필 이미지", "이름", "생년월일", "성별", "직업", "설정"]; ---------------- {cellList.map(c => { return {c} })} map함수로 한번에 만들어준다. const theme = createMuiTheme({ typography: { fontFamily: '"Noto..

다이얼로그 라이브러리를 사용하면 팝업으로 표현가능 import Dialog from '@material-ui/core/Dialog'; import DialogActions from '@material-ui/core/DialogActions'; import DialogTitle from '@material-ui/core/DialogTitle'; import DialogContent from '@material-ui/core/DialogContent'; import TextField from '@material-ui/core/TextField'; import Button from '@material-ui/core/Button&#3..

DB에서 삭제되었다는 표시를 주려고 테이블 업데이트를 수행 ALTER TABLE CUSTOMER ADD createDate DATETIME; ALTER TABLE CUSTOMER ADD isDeleted INT;xxxxxxxxxx UPALTER TABLE CUSTOMER ADD createDate DATETIME;ALTER TABLE CUSTOMER ADD isDeleted INT; UPDATE CUSTOMER SET createDate = NOW(); UPDATE CUSTOMER SET isDeleted = 0; 그러면 테이블이 업데이터되어서 값이 들어가있음 class CustomerDelete extends React.Component { deleteCustomer(id) { const url = &..

필요한 부분만 새로고침 하도록 해야함 부모컴포넌트에서 자식에게 전달 class App extends Component { constructor(props) { super(props); this.state = { customers: '', completed: 0, searchKeyword: '' } } stateRefresh = () => { this.setState({ customers: '', completed: 0, searchKeyword: '' }); this.callApi() .then(res => this.setState({customers: res})) .catch(err => console.log(err)); } state를 초기화 ..