WEB 31

본인이 아닌 경우 일회성 alert 띄우기

- 상황 요약 공개/비공개 게시글 리스트가 있고 게시글 제목을 클릭하면 로그인 페이지가 뜨는데 로그인 후 본인이 아닌경우 리스트 페이지로 이동후에 alert메시지를 띄워야 함. 하지만 인증 페이지(jsp)를 거쳐야 하기 때문에 RedirectAttributes를 사용할 수 없음 - 해결방법 ModelAndView 객체에 addObject로 객체 추가 ... 후에 본인 아닌 경우의 메시지 추가한 후 var msg = ''; 페이지 로딩시 메시지 확인해준 뒤 새로고침해주면 된다 ^^.. 이것때문에 몇시간을 삽질했던가.. $(document).ready(function(){ if ("NOTEQUAL".equals(msg)) { let text = "본인 글이 아님니다"; if(confirm(text)){ lo..

WEB/html, jsp, jstl 2022.09.21

[ javaScript / ES6 ] Array Destructing

ES6 부터 새롭게 생겨난 배열 destructing에 대해 알아보자. - 배열에 변수 할당하기 배열에 있는 값을 새로운 변수에 할당하고 싶을 때 배열처럼 선언하면 간단해진다. let kors = [10, 20, 30]; let [eng,math] = kors; //eng:10, math:20 let [,eng, math] = kors; // eng:20, math:30 - 순서 재배열 변수에 선언된 값의 서로 바꾸고 싶다? 그렇다면 배열을 이용하면 쉬워진다! let x = 10; let y = 20; let z = 30; [y, z, x] = [x, y, z]; //y : 10, z : 20, x: 30 - 기본값 주기 할당할 변수 이외에도 추가 선언할 변수가 있다면 기본값을 주면 된다! let exa..

WEB/ES6 2022.07.01

1. 리액트의 이해

리액트는 어떤 데이터가 변할 때마다 어떤 변화를 줄 지 고민하는 것이 아닌 그냥 기존 뷰를 날려버리고 처음부터 새로 렌더링하는 방식을 사용한다. 하지만 DOM은 느릴뿐더러 CPU 점유율도 늘어날 것이다. 리액트는 어떤 방식으로 이 과정을 빠르게 수행할 수 있을까? - 리액트의 이해 리액트는 오직 V (view)만 신경쓰는 라이브러리 입니다. 리액트 내에서 특정 부분이 어떻게 생길지 정하는 선언체를 컴포넌트라고 합니다. ( 컴포넌트 : 재사용이 가능한 API로 수많은 기능들을 내장, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의함 ) - 초기 렌더링과 리렌더링 리액트는 컴포넌트가 최초로 실행한 초기 렌더링과 컴포넌트의 데이터 변경으로 다시 실행되는 리렌더링 이 존재합니다. 초기 렌더링 초기 ..

WEB/react 2022.06.23

modal close 모달창 닫는 이벤트 만들기

closeBtn.addEventListener("click", e => { detail_marker_modal.style.display = "none" });​ X ..내용채워넣기 모달창을 만들어준다. 우선 모달창은 style display:hidden으로 설정해준다. 그리고 이벤트가 생겼을 때에 style속성을 없애주거나 display:bolck 처리하면 모달이 생겨난다. 모달창 닫는 공간을 div로 만들어 준후 const closeBtn = modal.querySelector(".close-area") querySelector를 이용해서 닫기 버튼을 const변수에 지정해준후 closeBtn.addEventListener("click", e => { modal.style.display = "none"..

[mybatis/mariaDB] auto increment값 가져오기

데이터 베이스에 insert를 하다보면 PK를 시퀀스처럼 자동증가하는 값으로 설정하는 경우가 있을 것이다. 그럴때 PK를 가져오고 싶은데 insert할때 값으로 넣지 않는 경우 가져올 수가 없다. 그럴때 mybatis기능을 사용하면 된다. sql문에 다음과 같은 속성을 넣어준다 . useGeneratedKeys="true" keyProperty="seq" INSERT INTO sample(test) VALUES (#{test}); test = "me"; Map map = new HashMap(); map.put("test", test); int result = sampleService.Sample(map); String seq = map.get("seq").toString(); 이렇게 하면 String ..

WEB/Mybatis 2022.03.03

[javascript/ajax] ajax의 구성 및 기능

ajax는 비동기 JavaScript and XML의 약어라는데 간단히 말하자면 페이지가 빨리 로딩되는 함수?기능?이다. ajax는 아래처럼 생겼다. $.ajax({ method: "GET", dataType: "json", data: { "test": test, "test2": test2 }, url: "/sample", success: function(data) { },error:function(error){ } }); 속성이 여러개 있지만 이정도만 사용하면 왠만한건 다 구현할 수 있었다. method get타입으로 보낼건지, post방식으로 보낼건지 정하는 옵션이다. get은 보안이 좀 약하고 post는 보안이 좀 가미된 느낌 ajax에서 보낸 데이터를 spring에서 controller단에서 받을..

[javascript] kakaomap api 도형 event listener 배열 객체 등록 꿀팁

카카오맵에 도형을 나타내고자 할때 전역배열로 도형을 넣는다면 삭제(초기화)도 쉽게 할 수 있다. 하지만 전역배열로 도형을 넣을 때의 단점도 있는데 도형을 클릭했을때 실행되는 이벤트 리스너에 배열을 객체로 등록하면 도형의 메서드를 사용하지 못한다는 점이다 ( 예를 들면 getBounds나 getPosition 같은 메서드들 ) 해결 방법은 이벤트리스너를 새로운 함수 안에 넣어 배열을 매개변수로 해서 매개변수의 메서드를 사용하게 만드는 것이다. 말이 좀 이해가 안되는 것 같아 코드를 첨부한다. 아래처럼 배열을 객체로 등록하지 않고 kakao.maps.event.addListener(circle[i], 'click', function(mouseEvent) { ... } 이런식으로 함수로 한번 감싸서 사용해야한..