기록

html draggalbe 속성을 가진 element를 drag and drop했을 때 다른 요소들이 사라지고 흰화면으로 보이는 에러발생했는데 chorme을 106으로 업데이트 한 후 발생했다는 걸 발견(105버전 이용시 에러발생x) When using Drag & Drop elements most other elements contained in absolute positioned elements disappear from screen. If I resize the window these elements reappear but will again disappear when begining to drag. 아래의 css 속성을 draggable 요소에 추가하여 해결함. 저는 transform 속성만 추가..

1. readonly 태그의 속성 $("#targetInput").prop("readonly", ture); 2. disabled 태그의 속성 기본적으로 inputbox의 css가 회색으로 변함 form을 제출할 때 disabled속성을 가진 태그 값은 전송되지 않는다 $("#targetInput").prop("disabled", ture); 3. pointer-events 태그가 아닌 요소의 mouse이벤트를 막을 때 사용. $("#divId").css("pointer-events", "auto"); $("#divId").css("pointer-events", "none"); 테스트 코드 See the Pen Untitled by shumm-ni (@shumm-ni) on CodePen.

@GetMapping, @PostMapping, @PutMapping, @DeleteMapping, @PatchMapping 어노테이션은 스프링 4.3부터 등장 기존의 RequetMapping과의 차이는? 1. 코드의 간소화 method부분 생략가능. requestMapping도 method를 생략하여 쓸 수 있고 생략하면 get, post방식을 둘다 처리해줌 2. url의 중복사용 url로 (방식이 다른)여러개 매핑이 가능 @RequestMapping 방식 @RequestMapping(value = "/url}", method = RequestMethod.GET) @PostMapping @GetMapping @getMapping("/url") @PostMapping("/url") 구글링해봤을 때 아래 ..

그리드를 생성한 후 아래 처럼 filter 옵션을 추가 할 수 있다 $("#gridId").jqGrid("filterToolbar",{ //options }) 근데 multiselect 옵션을 사용 중 일때 체크한 것이 유지되지 않는다 그래서 검색전에 체크된 row를 저장하고 검색후에 저장된 row를 체크하게 구현함 var tempSelectedTarget = []; let gridId = "GridID"; $("#"+gridId).jqGrid('filterToolbar',{ autosearch: true, stringResult: true, searchOnEnter: true, defaultSearch: "cn", beforeSearch: function (){ //체크된 데이터 임시저장 // var ..

1. 페이지 생성 1. LoginPage.js 의 return()안에 html코드부터 작성 2. input tag에 타이핑 하기위해서는 state를 변경해줘야함 LoginPage.js (일부) //서버로 보낼 값들을 state로 갖고 있음 const [Email, setEmail] = useState("");//괄호 속에는 초기값, "": 빈칸으로 설정 //state set하는 함수 등록 const onEmailHandler = (event) => { setEmail(event.currentTarget.value) } //value와 onChange 추가 3번 코드 참고 3. login 버튼을 submit 타입으로, form에 onSubmit함수 등록 LoginPage.js (일부) Email Login..

React Component 비교 Class Component 많은 기능제공, 대신 코드길고복잡, 성능느림 - provide more features - longer code - more complex code - slower performance Functional Component 적은 기능제공, 코드 간단, 성능빠름 - provide less features - short code - simpler code - faster performance React Hooks이 발표된 이후로 기존에 functional compoent에서는 사용할 수 없던 lifecycle, state 부여 등의 기능을 functional compoent에서도 사용할 수 있게 됨. https://www.spec-india.co..

1. redux dependencies 다운로드 redux react-redux redux-promise, redux-thunk : store에서 객체형식의 action만 받는데 promise, function 형식으로 오면 받을 수가 없는데 각각 이를 받는 방법을 알려주는 역할 2. app에 redux를 연결 (밑에 설명 및 reducer코드 있음.) client > index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { Provider..

1. 개념 Redux : 상태관리 라이브러리, state를 이용해 웹 사이트 혹은 애플리케이션의 상태 관리를 해줄 목적으로 사용. Props 1. porperties의 줄임말 2. 부모 컴포넌트에서 자식 컴포넌트한테 보낼 수 있음. 3. immutable 변할수 x (바뀌려면 다시 부모에서 자식에게 props를 덮어씌워야함) State 1. 컴포넌트안에서 데이터를 전달 2. mutable 3. state가 변하면 re-render 된다. 2. 사용 이유 리액트 프로젝트에서는 대부분의 작업을 할 때 부모 컴포넌트가 중간자 역할을 한다. (ref 를 사용해서 포넌트 끼리 직접 소통 하는 방법은 있긴 하지만, 그렇게 하면 코드가 굉장히 많이 꼬여버리기 때문에 권장하지 않는 방식임.) Redux를 사용하면 상태..

react js를 위한 css framwork 1. MaterialUI 2. React Bootstrap 3. Semanitic UI 4. Ant Design 5. Materialize 등.. 그중 Ant Design을 이용! 1. 설치 npm install antd --save 2. import stylesheets https://ant.design/ Ant Design - The world's second most popular React UI framework ant.design

unable to get property'_focusTabbable'of undefined or null reference dialog popup을 이용할 때 나는 에러 1. $(this).dialog("close");로 닫을 때 알람창이나 다른 팝업이 떠있으면 this가 달라지기 때문에 직접 dialog창의 ID를 넣어줌 $("dialog").dialog("close") 2. close로 닫았을 때 에러가 나면 $("dialog").dialog("destroy")로 팝업자체를 삭제 이건 html에서 요소 자체를 지워주기 때문에 dialog를 오픈할 때 html에 자리만 만들어두고 append해줘야함 3. 일반적으로 팝업창의 버튼(Ok, Cancel)을 눌러 close할 때는 버튼 click 함수안서 d..