#에디터

자바스크립트의 이벤트 처리 질문

리액트로 이미지 inpainting 컴포넌트를 만들고 있습니다. 사용자가 이미지 업로드를 하면 canvas 영역에 그 이미지가 채워지고 그 이미지에 mask 영역을 칠할 수 있는 이미지 에디터 컴포넌트인데요, 궁금한게 생겨 질문드립니다. 첨부한 코드는 컴포넌트의 코드중 이미지 업로드 시 onChange 이벤트의 처리기인 handleImageUpload 함수와, handleImageUpload 함수에서 호출되는 loadImage 함수의 코드입니다. 사용자가 input 요소에 이미지를 업로드하면 onChange 이벤트가 발생해 handleImageUpload 함수가 실행되고 loadImage 함수가 실행됩니다. loadImage 함수가 실행되면 img 객체가 생성되고 img 객체의 src를 지정하죠. 그러면 브라우저는 이미지 로딩을 시작하고 이미지 로딩이 완료되면 onload 콜백함수가 실행됩니다. 저는 이 과정을 자바스크립트의 콜스택, 이벤트 루프, 태스크큐 구조에서 나타내보자면 다음과 같다고 생각했습니다. 1. 초기상태 콜스택 : [ ] 태스크큐 : [ ] 2. 사용자가 파일을 업로드 -> onChange 이벤트 발생 콜스택 : [handleImageUpload] 태스크큐 : [ ] 3. handleImageUpload 내부에서 loadImage 함수 호출 콜스택 : [handleImageUpload, loadImage] 태스크큐 : [ ] 4. loadImage 내부에서 img 객체 생성 및 src 할당 콜스택 : [handleImageUpload, loadImage] 태스크큐 : [ ] Web API : 이미지 로딩 시작 5. loadImage 함수 종료, handleImageUpload 함수 종료 콜스택 : [ ] 태스크큐 : [ ] Web API : 이미지 로딩 진행중 6. 이미지 로딩이 완료되면 Web API가 onload 콜백을 태스크큐에 추가 콜스택 : [ ] 태스크큐 : [onload] Web API : 이미지 로딩 완료 7. 이벤트 루프가 콜스택이 비어있음을 확인하고 태스크큐에서 onload 콜백을 콜스택으로 이동 콜스택 : [onload] 태스크큐 : [ ] 8. onload 콜백 실행 (캔버스에 이미지 그리기 등) 콜 스택 : [onload, drawImage, ...] 태스크큐 : [ ] 일단 이 과정이 맞나요? 만약 이게 맞다면 생기는 궁금증이 있습니다. Web API에서 이미지 로딩이 진행되는동안 loadImage 함수 및 handleImageUpload 함수가 종료되면 loadImage 함수 내에서 생성된 img 객체는 가비지 컬렉터에 의해 지워져야 하지 않나? 그렇게 img 객체가 GC에 의해 사라지면 이미지 로딩이 완료되었을 시점엔 img 객체의 onload 함수도 없어진것이니 onload 함수의 로직은 실행이 되지 않아야 하는 거 아닌가? 하는 생각이 들어 질문드립니다

Flutter VSC 시뮬레이터 실행 에러

Flutter 스터디 중 VSC에서 에러가 발생하여 앱이 실행되지 않습니다. 현재 환경은 MacOS에서 사용하며 flutter, dart는 homebrew로 설치하였습니다. 그리고 Visual Studio Code에서 flutter 에디터를 사용하며 확장도구로 Dart, Flutter를 모두 설치하였습니다. 이후 VSC에서 flutter 실행 시 해당 에러가 발생하며 실행되지 않습니다. 매번 그런 것은 아니며 flutter, dart를 모두 삭제 후 재설치하면 잠시 재대로 동작하다가 컴퓨터를 재실행하면 다시 발생하고 있습니다. flutter doctor -v 했을 때 아무런 문제가 없고 flutter run하였을때도 잘 실행되고 있습니다. 아마 vsc와 충돌이 있는 것 같은데 도저히 해결이 되지 않습니다. 에러 1. the flutter daemon has terminated. - Dart extension 에러 2. Oops; flutter has exited unexpectedly: "FormatException: Missing extension byte (at offset 51)". 혹시 이유를 아신다면 알려주시면 감사하겠습니다.

프론트엔드 개발 관련 서버와 동기화 문제로 인해 질문 남깁니다!

안녕하세요! 초기 스타트업에서 현재 notion과 같은 블록 에디터 기반 기능을 가진 보고서 서비스를 만들고 있습니다. 먼저 문제가 발생하기 전까지의 과정을 말씀드리면 1. 작성되어 있는 글 사이에 새로운 글을 작성하기 위해 글 사이룰 개행하여 새로운 블록을 만든다. 2. 만들어진 블록에 글을 작성하고 Enter를 누른다. 3. 변화된 블록들의 객체를 서버에 전송한다. 4. 서버에서 현재 상태에 대해 DB를 최신화하고 프론트에 전송한다. 여기서 문제가 발생하는데 3~4번의 과정 중에 유저가 빠르게 새로운 블록을 재생산하거나 기존의 에디터 상태와 DB에서 최신화된 에디터 상태가 다른 경우 새로운 블록을 재생산한 화면에서 DB를 최신화한 블록 상태로 변경되는 이슈가 있습니다. 해결하기 위해 떠오르는 여러 가지 방법들 (ex. 캐싱과 webworker )을 적용하기 전에 이런 상황들을 경험했을 선배 개발자분들께 먼저 고견을 여쭙고 진행하는 것이 현명하다고 생각하여 질문을 먼저 올렸습니다! ( 사수가 없는 상황입니다..! ) 이런 비슷한 경험을 어떻게 해결했는지 경험이라도 공유해주시면 너무너무 감사하겠습니다! :) 좋은 하루 보내세요! ( 메일 : reblackraven@gmail.com )

텍스트 에디터 관련해서 질문입니다

React - quill 사용해서 텍스트 에디터 만드는 중인데 이미지 업로드시 base 64로 너무 긴데 db에 넣으려면 어떻게 해야하는지 아시는 분 계신가요 ? 그리고 프론트 처리인가요 백엔드 처리인가요..?

자동완성 기능 없이 코딩연습 방법

안녕하세요. 이번에 기업 코테 준비 중인 신입 백엔드 지망생입니다. 평소에 프로젝트를 개발하거나 코딩테스트를 풀 때 IDE 자동완성 기능과 구글링을 적극 활용하여 진행해왔습니다. 그런데 최근 코딩테스트를 보니까 다른 IDE 사용이나 구글링을 금지하고 해당 언어의 공식 문서만 참고해서 프로그래머스 에디터에서 일일이 작성을 해야하더라구요.. 자바를 쓰고 있는데 막상 일일이 치려고 하니 import부터 메소드 대소문자 구분, 괄호 여부 등 헷갈리는 것이 많고, 공식문서에 검색해도 어떻게 코드를 써야하는지 잘 모르겠어서 평소에 자동완성 기능에 매우 의존하고 있었다는 걸 뼈저리게 느꼈습니다. 1. 코드 사용법을 알고 싶을 때 공식문서에서 사용 예시를 보는 방법이 있나요? 2. 이런 경우를 대비하여 추천하시는 공부 방법이 있을까요? 3. 혹시 현업에서도 자동완성 기능을 쓰지 않고 업무를 하는지 궁금합니다..!

디자인 에디터 개발 기술 장단점 질문

figma나 미리캔버스 같은 디자인 에디터를 개발하려고 하는데 디자인 요소들을 canvas에 그리는것과 div로 그리는것의 어떤 장단점이 있나요?

react + node + mongodb 웹사이트 게시판

만들고 있는 웹사이트에 게시판 기능을 추가 하려고 하는데 게시판 에디터를 간단히 인풋과 파일 업로드 기능 정도만 해서 만드는게 나을까요 ? 아니면 어렵더라도 에디터를 설치해서 쓰는게 나을까요 ㅠㅠ

리액트 퀼과 자바를 이어주고싶어요

리액트퀼 게시판에디터를 쓰면서 자바와 연결하여 사진다중 업로드와 글게시판 작성을 하고싶은데 자료가 안보이네요 연결해보신 고수님들은 어떻게 하셨나요? 자바쪽 코드가 궁금합니다

에디터 라이브러리 사용 시, 업로드된 이미지 삭제 어떻게 하시나요?

안녕하세요. 현재 summernote 에디터를 사용하고 있습니다. summernote 의 경우 이미지를 에디터에 업로드 하는 순간 서버에 이미지가 저장됩니다. 하지만 사용자가 에디터 작성 시, 이미지를 올렸다가 삭제 후, 최종적으로 저장 버튼을 클릭하면 이미 업로드 된 이미지 파일 중 최종적으로 저장하지 않는 이미지는 삭제하고 싶습니다. 다른 에디터들을 보니 업로드 된 이미지를 최종적으로 저장할 때 처리하는 방법을 제공하지 않는 것 같습니다. 만약 사용자가 에디터 작성 중에 창을 닫아버리는 문제는 임시폴더로 해결이 가능한데, 위의 문제는 다들 어떻게 해결하시는지 궁금합니다. 실제 저장 버튼을 눌렀을 때의 데이터와 업로드된 데이터를 비교해서 저장하는 방법밖에 없을까요? 혹시 다른 분들은 이 방법을 어떻게 처리하시나요?

에디터에서 돌아가던 기능이 웹에서는 동작하지 않는 문제가 있습니다.

지금 개발중인데 에디터 상에서는 충돌 처리가 잘 먹히는데 웹으로 올리면 안 먹는 것 같아요 ㅠㅠ 왜 에디터 환경과 실제 웹에서 차이가 발생하는 걸까요? 추가로, 크롬이나 파이어폭스로 돌리면 잘 되던 게 사파리에서는 안되는 경우도 있더라고요..?

유니티허브에서 프로젝트가 안들어가져요

프로젝트 열려고 시도를하면 로딩만되는척 하다가 안돼요 라이선스 만료도 아니고 프로젝트 문제도 아니고 친구 계정으로 해봐도 안됩니다. 유니티 허브, 유니티 에디터 전부 삭제했다 깔아도 안돼요 구글에 나오는 방법 전부 다해봤는데도 해결이 안됩니다… 해결 방법 아시는분 계신가요…?

리액트에서 ckeditor 사라짐 ㅠㅠ

리액트에서 ckeditor 5 사용중인데 웹에서 새로고침 하면 에디터가 사라집니다 ㅠㅠ npm 설치도 했고 import도 작성했는데 뭐가 문제일까요..? 선배님들의 의견을 구해 봅니다.

마크다운 에디터에 클립보드 이미지 붙여넣기 기능을 구현하려면 어떻게 해야 하나요?

제목 그대로 마크다운 에디터에 클립보드 이미지 붙여넣기 기능을 구현해야 하는데요. 어떤 식으로 접근해야 하는지 조언을 구하고자 합니다. clipboard API로 검색하니 관련 정보가 좀 나오긴 하는데요.. 내용을 봐도 어떤 흐름으로 동작시켜야 하는지 감이 잘 안 와서 질문 드립니다ㅠㅠ 리액트를 사용하고 있고, 업로드하는 이미지는 사내 CDN url로 바꾸고 있어요! 추가로 라이브러리를 사용해야 하는 건지 직접 구현해야 하는 건지도 의견 주시면 감사하겠습니다.

텍스트에디터 제작시 수정에 관한 부분

자바스크립트로 텍스트에디터 만들고 있는데, 정작 글을 수정하려고 하면 텍스트에디터가 실행이 안되어요. 예를 들어 볼드체 버튼을 만들었고, 글을 수정하는 페이지에서 볼드체 버튼을 눌렀는데, 누르는 것이 안되는.. html 데이터 전체를 다른 파일에 옮겨서 저장하는 방식이고 수정할 때에는 그 파일을 조회해서 가져오는 형식인데, 그래서 텍스트 에디터는 아예 끼지도 않았거든요.. 썸머노트 등 텍스트 에디터를 꼈을 때에는 수정하고 저장하기 누를 때마다 에디터가 한 개씩 더 생기는 상황입니다. 질문이 좀 추상적이긴 한데 어느 부분에 문제가 있을까요?

텍스트 에디터 내용 저장 후 수정 관련

말그대로 텍스트 에디터를 삽입하고 저장 후 수정하기 버튼을 통해 수정을 하려고 하는데, 텍스트의 모든 기능이 다 막혔네요.. 이건 왜 그런거죠 ㅠㅠ

HTML div contenteditable=true로 에디터 만드는데

div 태그에서 contenteditable=true를 적용하여 에디터를 만드는데 볼드체와 글꼴색상만 필요합니다~ 근데 볼드체 적용하면 글꼴색상(빨간색)은 적용안되고, 글꼴색상(빨간색)을 적용하면 볼드체는 또 적용안되고.. 즉, 빨간색+볼드체가 동시에 적용이 안되는데, 어떻게 코드를 작성해야 좋을까요 ㅠㅠ 고수님들 답변 부탁드립니다! const btnBold = document.getElementById('btn-bold'); btnBold.addEventListener('click', function () { setStyle('bold'); }); function setStyle(style) { document.execCommand(style); focusEditor(); } function focusEditor() { editor.focus({preventScroll: true}); } const selectFontColor = document.getElementById('select-font-color'); selectFontColor.addEventListener('change', function () { setFontColor(this.value); }); function setFontColor(color) { document.execCommand('foreColor', false, color); focusEditor(); }

썸머노트(텍스트에디터) 다중구현

제목 그대로, jsp 파일 한 페이지에서 썸머노트 여러개 구현할 수 있나요? 현재 썸머노트를 구현하는 코드는 아래와 같습니다! <script type="text/javascript"> $(document).ready(function() { //여기 아래 부분 $('#summernote').summernote({ height:100 }); }); </script>

CKEditor5 사용 중 중간저장 문의

CKEditor5를 저장하고 중간저장을 했는데, 수정페이지에서 textarea가 2개가 생기면서 하나는 입력했던 내용을 불러오는데 하나는 또 새롭게 에디터가 형성되는 현상이 발생하고 있는데요ㅠ 혹시 입력한 내용만 출력되는 에디터 하나만 표출될 수 있게끔 할 수 있는 방법은 없을까요? 이게 왜 2개가 나오는지 궁금합니다! 아 그리고 CKEditor를 한 페이지 내에서 다중으로 구현할 수 있는 방법은 없을까요?

div 태그 contenteditable=true에서 텍스트 에디터

제목 그대로 텍스트 에디터를 만들고 있는데요! 기존 스마트 에디터는 한 페이지에 여러 개를 삽입하다보니 속도가 현저히 느려지는 게 느껴지고 데이터 반환하는 것도 어려워서요! 그래서 자바스크립트로 글꼴 굵게, 색상 선택 등은 구현했는데 표 만들기도 구현할 수 있을까요??

파워포인트에서 에디터로 복사할때 줄간격이 안먹습니다. 해결방법있을까요

파워포인트에서 글머리기호가 포함된 텍스트를 에디터로 복사할 때 서식이 적용되긴 하지만 줄간격은 적용되지 않습니다. 파워포인트 버전에 따라 복사되는 html이 다른데, office365? 경우 기본 마진이 넣어져서 줄간격이 먹은것 처럼 보이지만 실제로 확인해보면 먹지 않은 상태이고, 2010버전에 경우 기본 마진이 없어서 글자가 다닥다닥 붙어보이는 현상이 일어납니다. 파워포인트에서 줄간격을 1.5로 설정하고 에디터에 붙인다음 html 확인해보면 둘다 line_height가 150%으로 나오긴 합니다. 하지만 배수표현이 아닌 퍼센트표현으로 나와서 자식크기를 인식하지 못해 결과적으로는 줄간격이 안먹은것처럼 보입니다. 에디터에서 다시 줄간격 옵션을 다시 주면 정상적으로 나오지만, 파워포인트에서 바로 복사할 때 바로 설정되게끔 하는방법이 없을까요

백엔드 포폴 고민

산업체에서 보충역으로 근무하고자 하는 학생입니다! 현재 백엔드로써 산업체로 취직을 위해 포트폴리오를 준비하고 있습니다. 다만, 어느정도 수준까지 만들어야하는지 감이 잡히지 않습니다. 지금은 스프링,mybatis,thymeleaf를 사용한 게시판을 만들고 있는데요. 제가 들어가야하는 산업체의 대부분이 JSP를 사용해 View를 렌더링하고있어서 타임리프로 해도 되는건가 하는 고민도 있고 단순한 CRUD에 계층형 게시판(Q&A,대댓글), 스프링 시큐리티를 활용한 권한관리, 페이징, 검색기능, Remember Me 기능, 썸머노트api 활용한 에디터 같은 기능들을 구현하여 적용중에 있습니다. 여기에 더 얹어야할지 충분할지 감이 잡히지않습니다..