본문 바로가기

반응형

Web Dev

(109)
Ubutu 22.04 LTS에 Docker Desktop 설치하는 방법 [ERROR 해결] 우선 우분투 버전을 확인해 줍니다. 22.04.1 LTS 버전이네요 https://docs.docker.com/desktop/install/ubuntu/ Install Docker Desktop on Ubuntu docs.docker.com 도커 홈페이지에 들어가 줍니다. 들어가면 deb pkg 를 다운 받을 수 있는 버튼이 있네요 Prerequisites : 사전에 준비해야하는 것들 -> 우분투에 패키지 설치하기 전에 준비해야하는게 있나 봅니다. Meet the system requirements 일단 시스템 요구사항을 확인 하랍니다. 최신 pc가 아니면 한번 확인 해보세요 Have a 64-bit version of either Ubuntu Jammy Jellyfish 22.04 (LTS) or Ub..
JavaScript 브라우저 인쇄 기능 사용 시 Print 페이지 범위 설정 방법 인쇄 버튼을 만들고 printpage() 함수를 이벤트 함수로 지정해준다. function printpage(){ window.print(); } 함수는 간단하게 위와 같이 작성해준다. 여기서 그러면 인쇄 범위는 어떻게 설정해주는가 ? 스타일로 지정해주면된다. 흔히 css 파일을 사용하는데 @media print { #header, .sVisual, .form-actions, .ftCopy, .location, .receipt_title { display:none } html, body {width: 210mm; height: 367mm;} .print_layout {margin: 0; border: initial; width: initial; min-height: initial; box-shadow: ..
블로그 맞춤 html-react-parser 라이브러리 사용법 ! 예시 포함 Quill Editor를 사용했는데 입력한 내용을 출력하면 이와 같이 HTML 형식 그대로 나온다. 이를 해결하는 아주 좋은 라이브러리가 있다 https://www.npmjs.com/package/html-react-parser html-react-parser HTML to React parser.. Latest version: 4.2.1, last published: 7 days ago. Start using html-react-parser in your project by running `npm i html-react-parser`. There are 989 other projects in the npm registry using html-react-parser. www.npmjs.com react ..
useOncCickOutside , useClickAway 실전에서 사용하기 https://usehooks.com/ useHooks – The React Hooks Library A collection of modern, server-safe React hooks – from the ui.dev team usehooks.com https://usehooks-ts.com/react-hook/use-on-click-outside useOnClickOutside Discover how to use useOnClickOutside from usehooks-ts usehooks-ts.com useOnClickOutside는 클릭 이벤트가 특정 요소 외부에서 발생했을 때 특정 작업을 수행하는 React 커스텀 훅입니다. 이를 사용하여 모달이나 드롭다운과 같은 요소를 닫을 때 유용하게 활용할..
Java Backend 개발 : WEB-ZIN 웹진 관리자 zip 파일 업로드 시스템 구축 방법 - 업로드 시 자동으로 파일 압축 풀기 및 업로드 우선 이와 같은 폴더를 생성해줍니다. 각 버전에 맞는 폴더가 구성 되어 있어야하고 또 추후에 새로운 웹진을 등록할 수 있어야 합니다. 해당 웹진을 서버에 올릴려면 링크에 따라 해당 버전 웹진을 띄워 줄 수 있는 Url이 필요합니다. 웹진Contorller package joonho.controller.user; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import koddi.controller.CommonController; @Contro..
<% out.println(readonly); %> 해당 코드는 서버단에서 데이터를 전송했을 경우에 readonly 값이 설정 되는 것인가 ? 예, 맞습니다. 코드는 서버 단에서 데이터를 전송하여 readonly 값이 설정되는 것입니다. 서버 측 코드()는 JSP에서 사용되는 Java 코드로, 클라이언트의 요청을 처리하고 해당 요청에 따른 동적인 데이터를 생성하여 웹 페이지에 출력하는 데 사용됩니다. 이 코드는 서버에서 실행되며, 그 결과가 클라이언트(웹 브라우저)로 전송되어 렌더링됩니다. 따라서 코드는 서버에서 readonly 변수의 값을 출력하여 클라이언트로 전송합니다. 이 값은 클라이언트 측에서는 JavaScript 등으로 해당 값을 읽어서 웹 페이지의 동작에 영향을 줄 수 있습니다. 서버에서 readonly 변수에 어떤 값을 할당하느냐에 따라 입력 필드가 읽기 전용으로 설정되는지 여부가 결정됩니다. 예를 들어, 서버에서 readonly ..
React.js 네이버 클라우드 외부 저장소에 파일 저장하기 https://www.ncloud.com/ NAVER CLOUD PLATFORM cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification www.ncloud.com 일단 공부하는 용도로는 비용이 얼마 발생 안 할 것 같습니다. 그리고 결제 방법을 등록하면 1000 크레딧도 공짜로 신청하는 방법도 있다고 합니다. 이용 신청하기 버튼을 클릭해서 콘솔 창으로 이동을 해줍니다. https://guide.ncloud-docs.com/docs/ko/storage-storage-6-1 Object Storage 개요 guide.ncloud-docs.com 사용자 가..
Javascript - 업로드 파일 용량 제한 하여 값 반환하는 코드 한 페이지에서 2개의 파일을 올리는 경우 2개의 파일의 총합이 20MB를 넘지 않도록 한다. HTML 업로드 이미지 설명서 파일의 용량 합이 20971520 바이트를 초과하지 않도록 코드를 작성해야한다 대략 20mb이다 자바스크립트 코드에서는 두 개의 파일 입력란(작품 이미지와 작품 설명서)에 각각 name 속성을 지정해주었습니다. 이렇게 하면 checkTotalFileSize() 함수가 호출될 때 두 파일의 용량을 각각 확인할 수 있습니다. 함수 checkTotalFileSize()는 두 파일의 용량 합계를 계산하고, 합계가 최대 크기인 20971520 바이트를 초과하면 경고를 띄우고 파일 선택을 취소합니다. 경고 메시지에는 최대 허용 크기 합계인 20MB가 표시됩니다. 모든 파일 입력란에 대해 용량 ..

반응형