본문 바로가기

전체 글33

next.js 미들웨어 감사합니다.app/[path1]/[path2]/[path3]/page.tsx 같은 동적 라우팅이 존재할 때 /images/favicon.png 접근 시 500 에러가 발생하는 이유는:⸻❗ 문제 원인 요약Next.js 13 이상 (특히 app/ 디렉토리 사용 시)에서는: • 모든 경로 요청은 우선적으로 라우트 매칭을 시도합니다. • /images/favicon.png 요청 시, app/[path1]/[path2]/[path3]/page.tsx에서 해당 경로 패턴이 일치한다고 판단하면, 페이지를 렌더링하려 하다가 params가 예상과 달라 500 에러가 발생합니다. • 정적 파일인데 페이지로 잘못 해석되어 발생하는 현상입니다.⸻✅ 해결 방법1. ✅ matcher를 이용해 middleware.ts에서 stat.. 2025. 6. 18.
react- img to webview 아래는 React Native에서 사진을 촬영하고 base64 이미지 데이터를 WebView로 전달,WebView에서는 색을 추출한 후 React Native로 다시 전달하는 전체 흐름을 구현한 코드입니다.⸻✅ 구조 1. React Native • 카메라 사용 (예: react-native-image-picker) • 촬영 후 base64 이미지 WebView에 전달 2. WebView • 전달받은 base64 이미지를 canvas에 그려서 색 추출 • 색 정보를 window.ReactNativeWebView.postMessage로 React Native에 전달⸻🔧 필요한 패키지npm install react-native-image-picker react-native-webview⸻📱 React Na.. 2025. 6. 16.
버튼 키보드 스타일 적용 Name 1 Success Fail Name 2 Success Fail Name 3 Success Fail 2025. 6. 2.
키보드 버튼 입력 Name 1 Success Fail Name 2 Success Fail Name 3 Success Fail 2025. 6. 2.