본문 바로가기

Rust6

[트러블슈팅]next.js16과 tailwindcss v4 반응형 웹 오류 next.js16에서 tawilwindcss v4를 사용하였다.반응형 휍을 만들기 위해sm, md, lg 등의 처리를 하였다.하지만, 반응형에 답하지 않았다. 잘못된 곳을 계속 찾다가 next.js16과 tailwindcss v4의 호환성 문제라는 글을 봤다.글을 읽고 나도 v4의 문제라고 판단했다. 그래서 v4를 v3로 다운그레이드 하였다.tailwind.config.js 설정을 다음과 같이 했다.module.exports = { content: [ "./src/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/editor.. 2025. 11. 22.
트러블 슈팅 특정 이미지에서 필터 스크롤 설정을 할 때 캔버스가 버벅이거나 끊기는 이유가 발생한다.이유를 찾아보니 만든 에디터 구조에서 발생할 수 있는 문제였다. 원인 1 - 초고해상도 이미지 + 큰 캔버스 사이즈 -> 고해상도 이미지를 그대로 캔버스 크기로 렌더링하면 비용이 많이 들 수 있다. 원인 2 - 스크롤 시 캔버스가 계속 Repaint됨-> 캔버스는 React DOM과 다르게 GPU에 직접 렌더링 된다.스크롤이 발생하면 브라우저는 Repaint 영역을 계산하여 캔버스를 GPU에서 다시 조합한다.큰 캔버스일수록 시간이 오래 걸리게 된다. 원인 3 - 필터 적용 시 WASM를 매번 호출 -> CPU 부하-> 나의 필터 로직은 slider value 변경 -> WASM에 다시 전달 -> 새 픽셀 계산 -> ca.. 2025. 11. 21.
이미지 다운로드하기 Canvas 이미지 다운로드하기 - Base64 방식export const downloadCanvasImage = (canvas: HTMLCanvasElement, filename = "edited-image.png") => { const link = document.createElement("a"); link.href = canvas.toDataURL("image/png"); link.download = filename; link.click();};Canvs에 그려진 이미지를 PNG 파일로 변환하고 브라우저에서 바로 다운로드하도록 함 태그(링크) 만들기const link = document.createElement("a");다운로드 기능을 만들려면 링크 클릭 이벤트 사용동적으로 a 태그를 만들어.. 2025. 11. 20.
대비 만들기 대비(Constrast) 필터 공식new = (old - 128) * contrast + 1281.0은 원본1.0보다 크면 대비 증가1.0보다 작으면 대비 감소UI에서는 보통 0~200 값을 slider로 주기 때문에 WASM에서는 다음과 같이 변환contrastFactor = contrastValue / 100 contrast.rs브라우저에서 전달된 이미지 픽셀 배열을 WASM로 가져옴각 픽셀의 대비를 조절조절은 RGB 값에 ((value - 128) * factor + 128)로 수행됨변경된 값을 다시 같은 메모리에 써 넣기 때문에 JS에서 바로 반영됨 #[no_mangle]pub extern "C" fn contrast(ptr: *mut u8, length: usize, contrast_value:.. 2025. 11. 18.