김 양의 멋따라 개발따기

1. 문제 상황CKEDITOR을 사용하던 중 글자 크기 옵션 늘려달라는 요청을 받음그러나 라이브러리 자체에 글자 크기를 직접 입력 받는 방식은 없었음 2. 해결 방법옵션을 추가하여 글자 크기를 선택할 수 있도록 코드를 짬///ckeditor/plugins/fontSizeInput/plugin.jsCKEDITOR.plugins.add('fontSizeInput', { init: function(editor) { editor.ui.addRichCombo('FontSizeInput', { label: '글자 크기', title: '글자 크기', toolbar: 'styles', panel: { ..

1. html 코드  2. JavaScript 코드 function touchInit(targetElement) { zoomStatus = true; let startX = 0, startY = 0; let offsetX = 0, offsetY = 0; let scale = 1; // 초기 스케일 let isDragging = false; let initialDistance = 0; let touchCenterX = 0, touchCenterY = 0; // 터치 중심점 const maxScale = 2; // 최대 확대 배율 설정 // 기준값 설정 const baseTranslateX = 270; const baseT..

1. 문제 상황여러 문서 파일을 하나의 문서 파일로 병합해야 했습니다. 2. 문제 해결PHPWord 라이브러리를 사용했습니다.코드getSections(); // 섹션별로 문서에 추가 foreach ($sections as $section) { $newSection = $phpWord->addSection(); foreach ($section->getElements() as $element) { $newSection->addElement(clone $element); } } } catch (Exception $e) { echo "문서 처리 중 오류 발생: " . $e..

1. 문제상황docx 파일을 입력 받아 저장시키는 상황에서 화면에서 파일을 페이지로 띄워야 했습니다.PHPWord 라이브러리를 알게 되어 적용시켰습니다. 2. 문제 해결1. PHPWord 설치하기composer require phpoffice/phpword  2. 경로 받아와서 화면에 보이기save('php://output'); $htmlContent = ob_get_clean(); ?> PHPWord 변환 중 오류 발생: " . $e->getMessage() . ""; }} else { echo "파..

1. 문제 상황PHP 코드이그나이터를 사용 하는 중에 정보를 json 파일에도 저장해야 했음2. 코드1. JsonController.php 배열 if ($requestData === null) { // 잘못된 JSON 데이터 $this->output ->set_status_header(400) ->set_content_type('application/json') ->set_output(json_encode(['error' => 'Invalid JSON data'])); return; } // 기존 JSON 파일 읽기 ..

1. 문제 상황A 화면과 B화면을 연동해서 A화면 이벤트 발생할 경우를 감지해 B화면에서 이벤트를 발생시켜야 했습니다.처음에는 childWindow를 이용했으나 부모 윈도우에서 다른 페이지 이동시 소통이 끊어지는 이슈가 발생했습니다.2. 해결 방법Broadcast Channel API를 활용해서 연결하면 다른 페이지로 이동할 경우에도 상관없이 연결이 지속됩니다.const bc = new BroadcastChannel("test_channel"); //채널 연결bc.postMessage("This is a test message."); // 메시지 전송bc.postMessage({ // 딕셔너리 형태도 전송 가능 dog : "rive"});bc.onmessage = (event) => { /..

1. 문제 상황한글로 입력을 받아도 영문으로 변환해야 하는 상황이었습니다.글자 하나하나씩 치환해서 바꿔주는 방법으로 해결했습니다.더 좋은 방법이 있다면 공유 부탁드립니다! 2. 코드HTML 코드 변환 JavaScript 코드

1. html 코드  2. CSS 코드section{ position: absolute; top: 0; left: 0; width: 100vw; height:100vh; background-color: black; background-size: contain; background-position: center; background-repeat: no-repeat; overflow: hidden;}span{ position: absolute; top:50%; left:50%; width: ..

1. 문제상황24시간 동안 안 보이는 팝업창을 만들어야 했습니다.브라우저 쿠키에 만료시간을 넣어 구현했습니다. 2. 코드2-1. html 코드 Booth Tour Success! * Please collect your souvenir at the Gift Distribution Counter (6F). Do not open this window for 24 hours. 2-2. 자바스크립트 코드function showModal(){ const cookiedata = document.cookie; if(cookiedata.indexOf("close=Y")

1. 타겟 요소에 위치에 맞춰 스크롤이 내려가도록 구현해야 했습니다.2. getBoundingClientRect()를 이용해 뷰포트 내 위치를 가져온 뒤 중간에 위치하도록 위치를 조절했습니다. const rect = target.getBoundingClientRect(); //target에 값을 구하고자 하는 요소를 넣습니다. const absoluteElementTop = rect.top + window.pageYOffset; const offset = window.innerHeight / 2 - rect.height / 2; // 중간에 위치하도록 조정된 절대 위치를 계산합니다. const scrollToPosition = absoluteElementTop - offset; // 조정된 위..