CodePrep

🔧 1. “테스트 결제인데 왜 실패하지?”→ 화면 공유/녹화, 실제로 결제 실패 유발함 ❓ 현상테스트 환경에서 카카오페이 결제 테스트 중브라우저에서 결제하기 클릭 → 바로 “결제 실패” 발생결제 API 요청은 정상인데, 창이 뜨자마자 실패❗ 핵심 논점단순 오류 아님카카오페이는 화면 녹화·공유·미러링 감지 시, 결제를 보안상 차단함실결제든 테스트 API든 예외 없음✅ 감지 조건 1️⃣ Google Meet, Zoom 등 화면 공유 중2️⃣ OBS, macOS 녹화 도구 등 화면 녹화 중3️⃣ 스마트뷰, 크롬캐스트 등 화면 미러링 중 모두 보안 위협으로 인식되어결제창(WebView or 앱) 진입 시 즉시 실패 처리🔍 어떻게 감지하나? 1️⃣ Android: FLAG_SECURE로 캡처 차단2️⃣ iOS..

🛠️ 1. InfoWindow는 떴는데, 편의점 정보는 안 보임 ❓ 현상마커 클릭 시 InfoWindow는 열리지만, 편의점 이름과 주소가 비어 있거나 undefined로 표시됨⁉️ 원인카카오 장소 검색 결과에서 road_address_name이 없는 경우가 있어, undefined로 표시됨또한 place.y, place.x의 좌표 값을 kakao.maps.LatLng에 넘기지 않고 바로 출력하는 실수도 있었음✅ 해결주소 출력 시 road_address_name || address_name 방식으로 처리좌표 변환 시 new kakao.maps.LatLng(place.y, place.x)로 명확히 객체 생성 후 사용🛠️ 2. 가장 가까운 편의점이 아닌, 배열 첫 번째만 표시됨 ❓ 현상검색된 편의점 중 ..

🛠️ 1. 에디터 미출력 이슈 ❓ 현상등록 페이지 진입 시 CKEditor가 화면에 보이지 않음⁉️ 원인JS에서 초기화한 textarea ID와 JSP 상 ID 불일치✅ 해결ID를 정확히 일치시키자 에디터 정상 출력🛠️ 2. 이미지 미리보기 불가 ❓ 현상이미지 삽입 시 CKEditor에 미리보기가 보이지 않음⁉️ 원인CKEditor는 단순 경로가 아니라 업로드 후 반환된 URL을 로 삽입해야 함✅ 해결이미지를 서버에 업로드 후 JSON 형태로 URL 반환 → 에디터에서 삽입되도록 구현🛠️ 3. 이미지 업로드 프로세스 오해 🧠 초기 생각클라이언트에서 로컬 경로로 미리보기를 띄우는 줄 착각 🔁 실제 동작📤 폼데이터로 서버에 업로드 → 📨 URL 응답 → 🖼️ 자동 삽입🛠️ 4. 한글 파일명..

🔹 1. 에디터 커스터마이징 목적 1️⃣ 게시글 작성 중 이미지 직접 업로드 기능 제공2️⃣ 에디터에서 태그 삽입까지 실시간 자동 처리3️⃣ 사용자 UX 중심 작성 환경 구현🔹 2. 업로드 서버 구조 (Java/Spring) 📌 컨트롤러 경로• POST /boardCombo/CKEditor5/uploadImage• GET /boardCombo/CKEditor5/loadImage 📌 업로드 처리 흐름 ✅ MultipartFile 수신✅ UUID 기반 고유 파일명 생성✅ upload.path 경로에 저장✅ 이미지 URL 반환 (/loadImage?name=...) 📌 이미지 불러오기 처리 ✅ 저장된 경로에서 파일 조회✅ Files.probeContentType() → MIME 타입 설정✅ byte..

🛠️ 문제 발생CKEditor 같은 웹 에디터에서 긴 글이나 이미지가 포함된 HTML 콘텐츠를 저장하려고 할 때, 에러 메시지도 없이 저장이 실패하거나 콘솔에 content too long 이라는 메시지만 출력심지어 DB 컬럼 타입은 CLOB이라 이론상 길이에 제한이 없어야 하는데도 문제가 발생 🔍 문제 확인처음엔 DB 문제인 줄 알았으나, 스프링 서버 자체에서 multipart 요청의 크기를 제한하고 있어서 발생한 문제즉, HTTP 요청이 DB까지 도달하지도 못하고 Spring 레벨에서 막힌 것특히 에디터에서 이미지가 base64 형태로 포함되거나 HTML 내용이 길어지면 요청 크기가 수 MB를 쉽게 초과함 ✅ 문제 해결application.properties 또는 application.yml에서 ..

✅ 현재 위치가 부정확하게 찍히는 문제 해결• navigator.geolocation.getCurrentPosition() 사용 시 enableHighAccuracy: true 옵션을 추가하여 고정밀 위치 정보를 요청• 사용자의 실제 위치와 더 가까운 좌표를 얻어 사용자 경험을 향상 시킴navigator.geolocation.getCurrentPosition(successCallback, errorCallback, { enableHighAccuracy: true}); ✅ 브랜드별 장소 검색 결과 필터링 처리• GS, CU 등의 편의점 브랜드별 판매 페이지에서 다른 브랜드의 편의점이 검색되지 않도록 필터링 로직을 적용• kakao.maps.services.Places().keywordSearch() 결과..

✨ 기능 개요웹/모바일 앱에서 현재 위치 기준 가장 가까운 편의점을 찾는 기능은 매우 실용적이를 구현할 때 핵심은 위도/경도 좌표 두 개 사이의 거리 계산인데, 이때 사용되는 대표적인 공식이 바로 하버사인(Haversine) 공식 📐 하버사인(Haversine) 공식이란?구의 두 점 사이의 최단 거리를 구하는 공식위도/경도를 가진 두 지점 간 거리를 계산할 수 있음 • 공식:d = 2r * arcsin(√(sin²((Δlat)/2) + cos(lat1) * cos(lat2) * sin²((Δlon)/2))) • r: 지구 반지름 (6371km 사용)• lat, lon: 위도, 경도 (radian 단위로 변환 필요)• Δlat = lat2 - lat1• Δlon = lon2 - lon1 💻 JavaSc..

📌 CKEditor5에서 이미지 업로드 기능을 활성화하려면, 1. 서버에 이미지 저장2. 저장된 이미지 경로를 응답3. 사용자가 업로드한 이미지를 브라우저에서 미리보기 가능하게 해야 함 🧱 [1] 이미지 저장 기능 – SaveBoardServlet ✅ 역할 요약• CKEditor에서 업로드한 이미지를 서버에 저장• 저장된 파일 경로를 JSON으로 응답• UUID로 파일명 생성 → 파일명 중복 방지 ✅ 주요 포인트Part filePart = request.getPart("upload"); // 업로드된 파일 받기String originalFileName = Paths.get(filePart.getSubmittedFileName()).getFileName().toString();String newFile..

❗ 오류 상황CKEditor5에서 이미지를 업로드하려고 할 때 다음과 같은 오류가 발생SyntaxError: Unexpected token ' 또는 크롬 콘솔 오류POST http://localhost:8080/editor/uploadImage 200 (OK)Unexpected token ' 브라우저에는 이미지가 깨진 상태로 나타나고, 콘솔에는 JSON 파싱 실패 오류가 발생 🎯 원인CKEditor5는 이미지 업로드 시 fetch를 통해 서버에 이미지를 전송, 반드시 아래와 같은 JSON 형식의 응답을 기대{ "url": "/editor/image?name=파일명.png"}서버에서 다음과 같은 잘못된 응답을 반환하면 오류 발생• HTML 문서 전체 (예: JSP 페이지)• 문자열 "error" 또는 ..

✅ 사용자 위치 기준 가장 가까운 편의점 검색 기능 구현하기 (거리 계산 포함) 🗺️ 사용자 경험을 한층 끌어올리는 위치 기반 편의점 검색 기능사용자가 직접 입력한 편의점 이름(GS, CU 등) 중 현재 위치에서 가장 가까운 지점을 자동으로 찾아주는 기능을 구현해보기 ✅ 기존 방식 문제점// 기존 코드ps.keywordSearch(keyword, callback); • 단순히 검색 결과 중 첫 번째 장소만 가져옴• 실제 사용자 위치와 멀 수도 있음• 사용자는 "내 위치 기준으로 제일 가까운 지점"을 원할 가능성이 높음 ✅ 개선 포인트• 사용자 현재 위치를 가져옴• keywordSearch()에 위치 정보를 함께 넘겨 반경 검색• geometry 라이브러리를 이용해 실제 거리 계산• 가장 가까운 장소 ..