본문 바로가기

Local Oriented

 (251)
Axios post 시 파라미터 설정 (스프링 쪽 설정) https://sumni.tistory.com/152
팝업전 눌렸던 항목의 잔상이 팝업에 나타나는 현상 없애기.. 누군가 만든 팝업용 자바스크립트 라이브러리를 사용하는데, 팝업이 열리고 닫히는 기능은 정상 작동을 하지만.. 팝업이 열리기 전의 input/select/textarea 태그의 잔상이 팝업에 표시되는 현상 발생. 화면을 터치하거나 스크롤 하면 없어지는데, 잔상 자체가 나오지 않는 방법을 찾기 시작.. 결국 찾았네요. 팝업 열리기 전에 선택된 항목에 포커싱이 있기 때문에, 웹브라우저가 친절하게(?) 표시를 해 주었던 것. 그래서, 해결 방법은.. 아웃 포커싱, 즉.. blur() 처리 하면 됨. 코드는 간단하지만, 원리를 찾는 과정이.. ㅠ
input file accept 와 사진/동영상/안드로이드 input 태그에 type 이 file 인 경우, 찾아보기 대상을 조정할 수 있는데.. accept 속성이 이런 일을 함. 그런데, 짧게 기술한다고 accept="image/*" 라고 기술하면.. 애플의 경우 '사진 보관함', '사진 또는 동영상 찍기', '파일 선택', 안드로이드의 경우 '카메라', '카메라/캠코더', '파일' 등을 선택할 수 있게 된다. 여기서, '동영상' 이나 '캠코더' 기능을 없애려면.. 'image/*' 를 없애고, 필요한 이미지의 확장자를 기술하면 된다. accept=".jpg, .png" 애플의 경우 '사진 보관함', '사진 찍기', '파일 선택', 안드로이드의 경우 '카메라', '찾아보기' 등을 선택할 수 있게 된다. 물론, os 버전에 따라 상이할 수는 있다.. Andro..
sly.js 슬라이딩, 현재 몇 번째 슬라이드인지 숫자로 표시 원문 : https://darsa.in/sly/ 'sly' 는 PC 뿐만 아니라 모바일에서 (터치로도) 잘 작동한다.. 그런데... 슬라이딩 하단에 몇 번째인지 표시해 주는 것은 되는데, 숫자로 몇 번째인지 표시해 주려면.. 아무리 원문을 뒤져봐도, 구글링 해도 안 보여서.. 이리저리 해 보다가 결국 아래와 같이 해결. document 의 event 에 보면 'active' 이벤트에서 itemIndex 가 딱인듯 한데. 아니다, 항상 '0' 이라고 세팅된다. ㅎㅎ 찾아낸 답은, pos.dest 가 화면에 표시할 위치값 이고, 각 요소의 폭(rel.frameSize)이 일정할 때 이를 나눠 주면 몇 번째 인지 알 수 있는 것. 이를테면, 각 요소의 폭이 300pixel 이라면, pos.dest 는 0, 3..
table 상하좌우 스크롤(슬라이딩)시 특정 부분 위치 고정 원문 : https://www.codingfactory.net/13033 예전에는 자바스크립트로 프로그래밍 해 주던 영역인데, position:sticky 속성을 지원하는 CSS 에서는 간단하게 구현이 됩니다. 원문에서는 하나의 테이블에 대해서만 다루었는데, 위 아래로 여러 테이블이 있는 경우에는 id 가 아니라 class 방식으로 바꾸면 정상 작동합니다. 그러면, 이제 응용편을 하나 예로 들어 봅니다. 좌우 스크롤이 되는 table 인데.. (물론, table 을 감싸는 div 에 overflow-y:hidden 적용) 상단 칼럼은 colspan 으로 셀병합(엑셀 용어.. ㅋ)되어 있고, 칼럼이 많아서 좌우 스크롤 해야 하는데.. 상단 칼럼의 내용이 스크롤 할 때 계속 보여져야 한다면...? 간소하게 ..
(모바일)웹 화면에서 서명을 받아 서버에 업로드.. 일단, 미션이 떨어지고 서명받는 방법을 찾아 보았다. canvas 라는 html 태그를 사용하여 서명받는 방법은 쉽게 찾았다.. https://szimek.github.io/signature_pad/ 그런데, 서명 받은 이미지를 서버에 업로드 해야 하는데, 상기 url 은 로컬에 다운로드 받는 내용.. 로컬에 서명한 이미지를 저장하고, 이걸 다시 찾아서 input.type="file" 에 넣는 식이면 불편. 그래서, 이리저리 찾아 보다가 서버에 업로드 하는 방법도 찾았다. http://hacks.mozilla.or.kr/2011/01/html5-이미지-업로더-개발-방법 그런데, multipart/form-data 를 이용한 방법을 고집해서, form 태그의 input type="file" 에 넣으려고 하..
자바스크립트 최적화 (성능 개선) https://velog.io/@wishtree/Javascript-성능-최적화를-둘러싼-고민들 https://velog.io/@godori/JavaScript-프로그램-성능-향상
동일 사이트 내에서의 SameSite 문제 유감 동일 사이트 내부를 통해, https 에서 http 로 전환할 때는 쿠키와 세션 관계가 유지, http 에서 https 로 전환할 때는 쿠키와 세션 관계가 끊김(동일 사이트 내에서 이러고 있음). (2021.06.04 현재 기준. 향후 또 어떻게 바뀔지 누가 알랴..) 예를들어 http://abc.com/a.jsp 가 https://abc.com/b.jsp 호출시, a.jsp 에서 세팅한 세션 정보가 b.jsp 에서 참조되지 않음. 만약, https://abc.com/a.jsp 가 http://abc.com/b.jsp 호출시, a.jsp 에서 세팅한 세션 정보는 b.jsp 에서 참조할 수 있음. 동일 사이트 내에서의 http 와 https 전환임에도 이런 문제가 발생하는 것은, 크롬이나 동일 소스코드를 ..

티스토리툴바