ZeroBin`s 개발일지

"The type cohttp://m.fasterxml.jackson.core.JsonProcessingException cannot be resolved. It is indirectly referenced from required .class files" 오류는"new ObjectMapper().writeValueAsString(obj)" 소스 작성 시, jackson-databind 와 jackson-core 가 classpath 에 잘 등록되어 있는지 확인하면 됩니다.최신 버전은 Maven Repository 사이트에서 다운로드 가능합니다.- jackson-databind - jackson-core감사합니다.

터치 이벤트를 통해서 이미지를 슬라이드 기능 구현하는 방법에 대해 간략하게 알아보겠습니다. 1. HTML 작성img 태그에 touch 이벤트를 연결합니다. 2. script 작성let isDragging = false;let startPosX = 0; // 시작지점let endPosX = 0; // 끝지점let startLeft = 0;let maxMove = 50; // 최대 이동 거리 설정// 드래그 시작function startDrag(event) { isDragging = true; startPosX = event.touches[0].clientX; const myImg = document.getElementById('myImg'); startLeft = parseInt(wi..

Javascript로 img 태그의 파일 확장자를 변경하는 방법에 대해 간략히 알아보겠습니다. 예제는 BMP -> PNG로 변환하는 과정입니다.함수작성async function handleImageModalClick(bmpUrl) { try { var modalImg = document.getElementById("modalImage"); var bmpUrl = modalImg.src; // Fetch the BMP image as an ArrayBuffer const response = await fetch(bmpUrl); const arrayBuffer = await response.arrayBuffer(); // Create a Blob from the ArrayB..

Thymeleaf에서 태그에 속성값을 입력하고 함수로 Element 넘기는 방법에 대해 간략히 알아보겠습니다. 1. 속성 선언th:data-url 이라는 속성에 변수 imgUrl 값을 맵핑하고 zoomIn 함수에 this을 파라미터로 넘깁니다.2. 함수 구현function zoomIn(element){ var imgUrl = element.getAttribute('data-url'); // 모달창을 여는 로직 var modal = document.getElementById("imageModal"); var modalImg = document.getElementById("modalImage"); modal.style.display = "flex"; modalImg.src = imgUrl;}g..

Next.js 를 이용하여 매~~우 간단한 게시판을 만들어 보겠습니다. 혹시 Next.js 가 설치가 안되셨다면 [Next.js] Next.js 설치하는 방법 을 참고해주세요.1. 프로젝트 구조my-board/├── node_modules/├── public/│ └── favicon.ico├── src/│ ├── components/│ │ ├── Post.js│ │ └── PostList.js│ ├── pages/│ │ └── index.js│ ├── styles/│ │ └── globals.css│ └── utils/│ └── api.js├── .gitignore├── next.config.js├── package.json└── README.md..

Next.js를 이용하여 게시판을 만드는 방법에 대해 간략히 알아보겠습니다. Next.js 설치하기 위해선 nodejs를 먼저 설치하셔야 합니다. 1. nextjs 설치npx create-next-app@latest --typescriptworkspace 경로에 npx 명령어를 입력하여 nextjs를 설치합니다.2. 프로젝트생성3. vscode 실행npm run dev 명령어를 통해 앱을 실행시킵니다.4. 실행화면localhost:3000 접속위 페이지가 뜬다면 정상적으로 설치된 것 입니다.감사합니다.

부모창에서 iframe을 이용해 자식 Modal 창을 띄우고, 자식 Modal 창에서 닫기 요청을 하는 방법에 대해 간략하게 알아보겠습니다.1. 부모창부모창 소스 작성(parent.html) Parent Window Open Modal openModal() 함수를 통해 iframe의 경로를 지정하고 modal 창을 활성화합니다.closeModal() 함수를 통해 modal 창을 비활성화합니다.message 이벤트 리스너를 통해 자식창으로 "closeModal"이라는 메시지를 받게 되면 closeModal() 함수를 호출합니다. 2. 자식창자식창 소스 작성(child.html) Child Window Close Mo..

오늘은 JSch 를 이용하여 특정 사이트에서 이미지를 다운받아 SFTP 로 이미지 전송하는 간단한 소스를 작성해보겠습니다.1. 라이브러리 추가implementation 'com.jcraft:jsch:0.1.55'implementation 'commons-net:commons-net:3.10.0' 2. 이미지 파일 체크특정 사이트에 이미지 파일이 있는지 체크합니다.public boolean existFile(String checkUrl) { HttpURLConnection connection = null; try { URL url = new URL(checkUrl); connection = (HttpURLConnection) url.openConnection(); co..

zip 파일을 압축해제 전, 압축 파일 내부 파일의 정보를 확인 할 수 있습니다. 간단하게 파일명과 최종수정일을 조회하는 소스를 작성해볼게요.1. 라이브러리 추가implementation 'org.apache.commons:commons-compress:1.26.1'implementation 'commons-io:commons-io:2.15.1'Maven Repository 에서 각각 최신 버전을 다운로드 또는 빌드도구를 통해 설치하면 됩니다. 2. 소스작성import org.apache.commons.compress.archivers.zip.ZipArchiveEntry;import org.apache.commons.compress.archivers.zip.ZipArchiveInputStream;impo..

CDN 서버를 통해 이미지를 가져오던 중 해당 서버에 요청한 이미지가 없을 경우 기본 이미지를 지정하기 위해 onerror 속성을 사용합니다. 이번 포스팅에서는 onerror 이벤트를 javascript 에서 핸들링 하는 방법에 대해 가볍게 작성하였습니다1. img 태그 작성th:onerror 에 함수를 지정하고 파라미터 값으로 속성(th:baseCd)을 넘깁니다. 2. 스크립트 작성함수 내부에서 추가적인 작업을 진행하고 img 의 src를 지정할 수 있습니다.감사합니다.