[html] IE에서 readonly 속성에 커서 생기는 문제 및 백스페이스 막기

문제 발생 크롬과 IE 두개의 브라우저에 서비스를 해야하는 프로젝트에서 readonly관련 이슈가 생겨났다 개발할때는 크롬이 편리해서 크롬 화면만 보고 개발을 했더니 오픈이 다가와서 IE화면에서 테스트를 해보니 readonly 속성을 준 input 태그에서는 커서가 생겨나는 문제가 발생 했다. (readonly에서는 포커스 커서가 없는게 정상이다.) 더 큰 문제는 커서가 생긴 readonly 태그에 사용자가 실수라도 백스페이스를 눌렀을경우 혹은 그냥 화면을 클릭하고(어느 태그에서도 커서가 없는 blur상태) 백스페이스를 눌렀을 경우 뒤로 가기 이벤트가 발생되서 기존에 입력했던 정보들이 다 없어져 다시 일일이 입력해야하는 불상사가 생겨났다. 입력해야하는 정보가 정말 적다면 무야무야 넘어갈순 있겠지만? ㅎㅎ..

[javascript] 이메일 인증번호 타이머(유효시간 연장기능)

이메일을 보냄과 동시에 타이머를 작동시켜 일정 시간이 지나면 인증번호를 입력하지 못하도록 막는 기능을 구현중에 유효시간 연장이라는 기능도 같이 만들어야 했다. 어영부영 만들어 놓고 보니 시간 연장을 클릭하면 타이머가 하나 더 생기며 동시에 두 개, 세 개, 네 개의 타이머가 동시에 돌기 시작했다. 오류는 isRunning이라는 플래그 변수를 만들어 해결했다. Script 인증번호 6자리 난수 생성을 위한 코드는 아래 2020/09/22 - [spring boot] - [springboot] 문자+숫자, 숫자 6자리 난수 만들기 [springboot] 문자+숫자, 숫자 6자리 난수 만들기 import java.util.Random; public class HelloWorld{ public static vo..

[javascript] SQL 계층형 쿼리를 JSONTree로 만들기

ORDER SIBLINGS BY : 특정 컬럼에 대한 Order by를 실행(조회된 데이터에 대해) CONNECT BY : 상위 코드와 하위 코드를 이용하여 Tree 형태로 보여줄수 있는 것 SELECT department_id AS ID, department_name AS TEXT, parent_id AS PARENT_ID, LEVEL AS LVL FROM departments START WITH parent_id IS NULL CONNECT BY PRIOR department_id = parent_id ORDER SIBLINGS BY department_name 출처 : thebook.io/006696/part01/ch07/01/03/ 위와같은 형식으로 쿼리결과를 만들어 json List형태로 vie..

[개념 정리] 페이지소스보기, 프레임소스보기 차이

글 작성 이유 현재 dhtmlx를 이용해서 프런트를 구성하는 프로젝트를 하고 있다. 작업 중 페이지 소스를 보려고 오른쪽 클릭을 하니 평소에는 보이지 않던 프레임 소스보기와 프레임 새로고침이 생겼다. 이게 뭔가 싶어서 차이점을 찾아보니 제대로 설명되어있는 블로그 글이 하나도 없어 나름 혼자 조사해보면서 정리된 내용으로 간단하게 결론을 내려보려고 한다. 프레임 이란 무엇일까? 간단히 말하면 복수의 웹 페이지가 구획별로 나뉘어서 동시에 표시되게 하는 태그이다. 그럼 사진으로 좀 더 명확히 보자. HTML 구조 평소 우리가 보는 웹페이지는 위와 같이 하나의 html에 여러가지 태그로 짜여져있다. 하지만 우리가 궁금해하는 프레임은 위와 같은 하나의 html이 아니라 프레임 구조 위와 같이 태그의 공간이 html..

[Thymeleaf] Controller 값 받아와서 javascript에서 사용하기

[javascript] ajax object담긴 Array 보내고 Controller에서 받기

평소처럼 ajax로 controller에 데이터를 보내야 하는데 이번에는 데이터를 하나 두 개 정도가 아니고 내가 선택한 Row에 데이터를 삭제하기 위해 선택한 만큼의 id를 모아서 JSON Array형태로 만들어 보내야 했다. 여러 가지를 이번에 시도하면서 ajax에서 controller로 데이터를 보내는 형식을 내가 너무 몰랐구나 싶었던 생각이 들었다. 1차 시도 원래 하던 식으로 var list = []에 내가 원하는 형식 data = { "exampleKey1" : value1, "exampleKey2" : value2 }를 만들어 list에 넣어주고 보내줄 생각이었다. 실패 controller에서 받을 수 조차 없었다. 이유는 back에서 data를 String []로 받았는데 이상하게 null..