Programing_Java

📌 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 라이브러리를 이용해 실제 거리 계산• 가장 가까운 장소 ..

1️⃣ 카카오 지도 API Key 발급받기• 카카오 개발자 사이트에 접속하여 애플리케이션을 등록하고, 필요한 API 키를 발급받아야 함• 카카오 개발자 포털에서 애플리케이션을 새로 생성한 후,[내 애플리케이션] > [앱 설정] > [플랫폼] > [Web 플랫폼 추가]를 통해 사이트 도메인을 등록 2️⃣ HTML 파일에 지도 삽입• 기본 HTML 구조 내에 카카오 지도를 삽입• 태그를 사용하여 지도가 표시될 영역을 지정하고,  3️⃣ 지도에 편의점 위치 표시• 자바스크립트를 사용하여 지도에 편의점의 위치를 마커로 추가• 지도 객체를 먼저 생성하고, 편의점 데이터가 포함된 배열을 반복 처리하여 각 위치에 marker와 infowindow를 추가var mapContainer = document.getElem..

✅ CKEditor5 적용법 1️⃣ 기본 설정 (JSP File)→ 아래 코드(CDN)를 JSP 파일에 추가하여 CKEditor 5를 적용✔ 핵심 코드→ 저장  2️⃣ 데이터 저장을 위한 Servlet (Java)✔ 사용자가 입력한 내용을 파일로 저장하고 불러오는 Servlet 코드@WebServlet("/SaveContentServlet")public class SaveContentServlet extends HttpServlet { private static final String FILE_PATH = "/path/to/content.txt"; protected void doPost(HttpServletRequest reques..

✅ JSP에서 CKEditor 5의 파일 업로드 기능을 구현하는 방법✅ 이미지 업로드를 지원하면 사용자가 직접 이미지를 삽입하고 서버에 저장할 수 있어 더욱 강력한 에디터 환경을 구축✅ CKEditor 5에서 이미지 업로드 기능을 활성화하고, JSP를 활용해 서버에 이미지를 저장하는 방법 1️⃣ CKEditor 5에서 이미지 업로드 활성화하기✔️ CKEditor 5는 기본적으로 이미지 업로드 기능을 지원하지 않으므로, 직접 업로드 기능을 구현→ 업로드 기능을 활성화하려면 ckfinder.uploadUrl을 설정 📌 CKEditor 5에서 업로드 URL 설정: JSP 페이지에서 업로드할 파일을 처리할 서버 URL을 지정JSP 파일 (editor.jsp) CKEditor 5 파일 업로드 테스트 ..

✅ 웹 애플리케이션에서 텍스트 편집기는 필수적인 요소✅ CKEditor 5는 강력한 기능과 확장성을 제공하는 대표적인 WYSIWYG 에디터→ WYSIWYG = WHAT YOU SEE IS WHAT YOU GET 1️⃣ CKEditor 5• HTML 기반의 WYSIWYG(What You See Is What You Get) 에디터• 다양한 플러그인을 통해 맞춤 설정이 가능✔️ 모던 UI & 리치 텍스트 편집✔️ React, Vue, Angular와 호환✔️ 이미지 업로드, 테이블 삽입, 마크다운 변환 지원✔️ 커스터마이징 가능한 플러그인 시스템 2️⃣ CKEditor 5 설치• CDN으로 빠르게 적용하기✔️ CDN으로 적용시→ 장점 : 간단한 테스트 용도로 적합→ 단점 : 플러그인, 커스터마이징 어려움 3..

추후 프로젝트에 사용할 예정이기에 더 공부해야함...! 1. CKEditor 5 Demo 페이지 접속: 하단 Source Code 에서 코드 가져오기 2. Demo 페이지의 *개발자 도구*에서 HTML 및 JS 소스를 확인하고, 아래와 같이 구성 CKEditor 5 Demo  3. 코드 실행 방법위 HTML 파일을 저장하고 브라우저에서 실행하면 CKEditor 5 Demo 버전이 로드됨 ✅ 특징• 별도 설치 없이 CDN을 이용해 바로 사용 가능• 기본적인 툴바 기능 제공 (BOD, ITALIC, LINK, UNDO, REDO 등)• 개발자 도구에서 콘솔로 editor.getData()를 실행하면 입력된 데이터 확인 가능 4. 추가 기능 확장커스텀 툴바 옵션 설정 가능ClassicEdit..