본문 바로가기

IT Note269

728x90
Safari issue #html2canvas dom-to-image-more React.js 개발을 진행하며 아래 요구사항에 부합하는 라이브러리를 찾고 적용한 히스토리를 남긴다. 요구사항Dom Element를 이미지로 변환하고자 한다.배경이 투명한 PNG로의 변환을 원한다.Chrome, Safari 등의 브라우저에서 호환이 되어야 한다.이미지 생성 속도가 빠르고 화질 저하가 없어야 한다. 시도 1. dom-to-image-more (v3.5.0) 라이브러리 사용결과는 실패였다. Chrome 브라우저에선 빠르고 정상적으로 작동되었으나, Safari, Firefox 브라우저에선 이미지가 정상적으로 생성되지 않음을 확인하였다. 확인해보니 Safari를 제대로 지원하고 있지 않더라. 시도 2. html2canvas 로 변경결과는 실패였다. 역시 Chrome 브라우저에선 빠르고 정상적으로.. 2025. 4. 23.
Adobe Express로 제작된 작업물은 상업적 이용이 가능할까? Adobe Express로 제작된 작업물은 상업적 이용이 가능할까?Adobe Express는 디자인 경험이 없는 사용자도 손쉽게 콘텐츠를 제작할 수 있는 도구로, 템플릿과 다양한 디자인 요소를 활용하여 포스터, 배너, 로고 등을 제작할 수 있습니다. 이러한 콘텐츠는 기본적으로 상업적 이용이 가능하며, Adobe Stock의 사진, 영상, 음악 등은 로열티 프리로 제공되어 출처 표기 없이도 상업적으로 사용할 수 있습니다. 그러나 일부 Adobe Stock 자산에는 "제한 라이선스 - Adobe Express"가 적용되어 있어, 상업적 이용에 제한이 있을 수 있습니다. 예를 들어, Adobe Express에서 제공되는 사진, 도형, 패턴 등의 소재를 가공 없이 그대로 다운로드하거나 배포하는 행위는 금지되어 .. 2025. 4. 23.
Add-on Error: Could not locate a valid SSL certificate to host the add-on Adobe Express Add-onError descriptionadd-on 을 실행 했을 때 아래와 같은 에러 문구가 나오는 경우가 있습니다.Could not locate a valid SSL certificate to host the add-on.If you had previously set it up, it may have been invalidated due to a version upgrade. 이는 시스템에 설치된 SSL이 유효하지 않았기 때문인데요, 기존에 개발하던 add-on의 `@adobe/ccweb-add-on-scripts` 버전이 달라졌거나 SSL이 정상적으로 설정되지 않았기 때문입니다. How to resolveadd-on의 SSL 설정을 초기화하고 재설정합니다. npx @ad.. 2025. 4. 23.
Kubernetes #쿠버네티스 시각화 자료 모음 쿠버네티스 내가 이해하려고 모아둔 쿠버네티스 시각화 그림들 쿠버네티스 클러스터의 파드 실행 구조 디플로이먼트, 레플리카셋, 파드의 관계 같은 포트를 가진 컨테이너가 하나의 노드에서 여러 파드로 실행되는 모습 파드가 서비스를 통해 다른 파드를 호출하는 방식 서비스가 셀렉터를 통해 파드를 선택하는 방식 인그레스 (Ingress) 를 통한 경로 기반 요청 분배 emptyDir을 이용한 파드 내부 임시 저장공간 공유 hostPath를 이용한 노드 저장소 사용 참고도서: 쿠버네티스 개발 전략 2023. 4. 23.
Error #self.processResponse is not a function Chrome의 WhatRuns extension 을 사용하는 중이라 충돌되어 생긴 에러였고, extention 삭제 후 해결되었다. 참고출처: https://github.com/vercel/next.js/discussions/33355#discussioncomment-2072168 2023. 2. 2.
css #왼쪽 오른쪽만 배경 이미지 블러처리 왼쪽 오른쪽만 아래처럼 이미지 투명 or 블러 처리를 box-shadow를 활용하여 구현한 코드를 기록해둔다. Side blur only creates left and right. I used CSS's box-shadow. html css .background { width: 100%; max-width: 1000px; position: relative; margin: auto; height: 100%; background-position: center bottom; background-repeat: no-repeat; background-color: #white; } .background:before, .background:after { content: " "; height: 100%; positio.. 2023. 1. 27.
Swagger2 #영어 깨짐 현상 해결 Kotlin Spring 환경에 세팅된 Swagger2 화면에서 영어 깨짐 현상이 발견되었다. URI: http://localhost:8080/swagger-ui api/events/... => ​/api​/events​/... UTF-8 인코딩 문제로 의심되어 열심히 찾던 중 의외의 방법으로 해결되었다. URI: http://localhost:8080/swagger-ui/index.html URI에 index.html 를 추가하니 제대로 출력되었다. 참고자료 https://github.com/springfox/springfox/issues/3544 2023. 1. 12.
Next.js #Image src - External CDN image is not visible Next.js src 에 외부 CDN(External) 정보를 넣으니 이미지 출력이 안되었다. 출력 방법은 간단하다. Image loader 를 사용하면 된다. import Image from 'next/image' const myLoader = ({ src, width, quality }) => { return `https://example.com/${src}?w=${width}&q=${quality || 75}` } const MyImage = (props) => { return ( ) } https://nextjs.org/docs/api-reference/next/image#loader next/image | Next.js Enable Image Optimization with the built-i.. 2022. 10. 6.
React #Redux What Is Cross-Component / App-Wide State? Local State State that belongs to a single component E.g. listening to user input in a input field; toggling a "show more" details field Should be managed component-internal with useState() / useReduce() Cross-Component State State that affects multiple components E.g. open/ closed state of a modal overlay Requires "props chains" / "prop drilling" App-Wi.. 2022. 9. 24.
React #Building Custom Hooks What are "Custom Hooks"? Outsource stateful logic into re-usable functions Unlike "regular functions", custom hooks can use other React hooks and React state The name must start with 'use' Sample Code src/hooks/use-http.js import { useState, useCallback } from 'react'; const useHttp = () => { const [isLoading, setIsLoading] useState(false); const [error, setError] useState(null); const sendReque.. 2022. 9. 24.
728x90
728x90

티스토리툴바