분류 전체보기 233

form.submit / spring 전송 에러

form submit으로 spring controller에 요청을 보낼때 400에러가 발생함. "There was an unexpected error (type=Bad Request, status=400). Required String parameter 'parameter' is not present" 파라미터나 url을 잘 못 입력했을 때 나는 에러인데 동일한 코드로 요청을 보내는데 특정 데이터를 보낼 때 만 400에러가 났음. 데이터가 너무 길 경우 (data too long)에 400에러가 나는걸 발견함 해당 데이터(param1)를 controller에서 required = false로 주고 form으로 전송하면 다음 데이터(param2)가 없다는 에러가 남. 아예 form에서 전송을 안해야 con..

error 2022.12.13

jqgird sort, filter (colmodel name/index, colName)

1. name과 index jqGrid의 colmodel에서 -name : 서버로 부터 넘어오는 data와 변수명을 맞춰야함. colName을 지정하지 않으면 name으로 생성됨. -index : jqGrid에서 접근할 이름(sort, filter에 기본적으로 사용). 미지정시 name을 따라간다. var colModel = [ {colName : 'col1', name:'col1', index:'col1', align:'center', sortable: true}, {colName : 'col2', name:'col2', index:'col2', align:'left', sortable: true}, ]; *colName 눈에 보이는 필드네임으로 지정하지 않으면 name을 따라가는데 colmodel에 ..

gridLib/jqGrid 2022.10.23

jqGrid 가로 스크롤 (데이터/row 없을 때)

기본적으로 그리드는 헤더를 제외한 데이터row 영역에 scroll이 생기기 때문에 row(데이터) 추가전에는 scroll이 생기지 않아 컬럼헤더가 잘린다. css를 아래와 같이 변경해주면 row추가 전에도 가로스크롤이 생기며 row추가시 세로스크롤과 가로스크롤이 자연스럽게 보이도록 할 수 있다. .ui-jqgrid .ui-jqgrid-bdiv { position: relative; margin: 0em; padding: 0em; overflow-x: auto; overflow-y: auto; border-left: 0px none !important; border-top : 0px none !important; } .ui-jqgrid .ui-jqgrid-bdiv > div { width: fit-cont..

gridLib/jqGrid 2022.10.23

chrome 106 drag and drop error

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 속성만 추가..

error 2022.10.13

element 비활성화 (readonly, disabled, pointer-events)

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.

Frontend/jquery 2022.10.10

@RequestMapping @PostMapping @GetMapping 차이

@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") 구글링해봤을 때 아래 ..

Backend/spring 2022.10.09

jqGrid filter (filter 할 때 multiselect유지)

그리드를 생성한 후 아래 처럼 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 ..

gridLib/jqGrid 2022.09.25

login 기능(front)

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..

Frontend/react 2022.09.04

react Component

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..

Frontend/react 2022.08.07

redux다운로드/ createStore/ Reducer/ extention

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..

Frontend/react 2022.08.07