크로미움 브라우저에서 p 내부 span을 삭제할 때 span이 날아간다면 ?

오랜만에 사내에서 제품으로 관리하고 있는 웹 에디터 유지보수 이슈를 진행하면서 겪은 일을 공유해보자 한다. 문제아래와 같은 HTML을 사용자는 웹 에디터에서 편집하고자 한다.안녕하세요요즘 날씨가 많이 덥네요건강관리 잘 하세요~ 이 HTML은 아래와 같이 사용자에게 보일 것이다.만약 사용자가 빈 span 태그에 캐럿( 마우스를 클릭하면 깜빡이는 것 )을 위치한 채삭제(backspace/delete)를 눌렀다면 사용자가 기대하는 경험은 무엇일까 ?사용자는 빈 문단이 삭제되면서 아래에 있는 문단이 한 줄 올라오는 것을 기대할 것이다.하지만 여기서 사용자가 delete 키를 눌러 뒤의 문단을 계속적으로 삭제할 경우 어떻게 될까? 현재 Edge 브라우저 기준 about:blank에서 body에 contentedi..

• format_list_bulleted 개발/ETC
• · 2024. 8. 17.
• textsms

Docker 시작하기

개요이전 글에서 자바스크립트로 개발된 프로젝트를 리액트 환경으로 지원될 수 있도록 진행한 프로젝트를 끝 마쳤다고 했다. 이번에는 리액트 환경도 지원을 하면서 도커 환경에서도 실행해야 하는 임무를 맡게 되었다..도커의 ㄷ과 docker의 d을 모르는 나에겐 걱정스럽기만한 임무여서 스프린트 일정을 짜는 것 자체가 너무 어려웠다. 뭘 알아야 스프린트 일정을 짜겠는데 모르겠어서 옆 팀의 백엔드 개발자 분들의 바짓가랑이를 붙잡고 물어봤고 겨우 계획을 세웠다. 도와주신 분들에게 감사.. 압도적 감사다.도커(docker)란 ?도커의 개요도커란 애플리케이션을 신속하게 구축, 테스트 및 배포할 수 있는 소프트웨어 플랫폼이다.도커는 소프트웨어 컨테이너라는 표준화된 유닛으로 패키징 하며, 이 컨테이너에는 라이브러리, 시스템..

• format_list_bulleted 개발/ETC
• · 2024. 7. 8.
• textsms

[CSS] border Trick, Customized Dashed Border

이번년도부터 자사에서 업로더를 개발 및 유지보수를 하게 됐는데 Dropzone 기능을 개발하면서 border를 커스터마이징 하고 싶어 알아보다 알게된 페이지이다. 내가 원하는 모습으로 dashed border를 설정할 수 있어서 좋은것 같다. 아래와 같이 border style이 나오고 내가 원하는 dashed border로 조정할 수 있게 도와주고 있다. 필요로 하는 dashed border가 완성되면 background-image 형태로 제공된다. 필요하는 사람은 아래 링크를 들어가서 사용하고 싶은 dashed border 를 만들면 될 것 같다 ! CSS Trick – Customized Dashed or Dotted Border (kovart.github.io) Dashed Border Gener..

• format_list_bulleted 개발/ETC
• · 2024. 1. 3.
• textsms

[Classic ASP] Url parser EUC-KR 한글 깨짐 해결

지금 만들고 있는 링크 미리보기에서 서버 모듈을 개발하고 있는데 Classic ASP에서 euc-kr이 자꾸 깨지는 현상이 발생했다. 다른 서버 모듈(JSP,PHP,ASP.NET) 들은 해결했는데 Classic ASP는 해결하지 못해서 계속 찾아보던중 기존에 url을 parsing하여 html을 가져오는 responseText는 항상 유니코드로 디코딩을 하기 때문에 한글이 깨졌다는 것을 알게 됐다. 정보를 찾던 중에 ADOStream을 알게 돼어서 binary쪽으로 접근을 해 euc-kr로 변환하려고 했었는데 찾다보니 오래됐지만 더 좋은 코드가 있어 기록한다. 나중에 최신 코드로 리팩토링을 할 수 있으면 해야겠다.. 일단 주어진 업무가 바쁘기 때문에 .. ' =========================..

• format_list_bulleted 개발/ETC
• · 2021. 12. 27.
• textsms

[JSP] setCharacterEncoding , setContentType

오랜만에 블로그에 글을 쓴다.. 간단한 정리 글 이긴하지만 다시 천천히 블로그에 글을 올려야겠다. 회사에서 jsp로 구성된 proxy를 통해서 ajax 통신을 해야하는 일이 있다. 지금 업무 가운데 하나가 링크 미리보기를 만들고 있는데 그 과정에서 jsp에 proxy 서버를 만들어서 통신해야하는데 분석을 진행하면서 정리할겸 글을 작성한다. requset.setCharacterEncoding("utf-8") GET,POST 방식을 사용할때 requset.setCharacterEncoding("utf-8")은 꼭 필요하다. GET 방식으로 보내진 한글은 톰캣이 기본적으로 UTF-8 문자코드가 적용이 되어 있어서 자동으로 한글처리를 해주기 때문에 한글이 깨지지 않는다. POST 방식으로 보내는 값이 한글일 경..

• format_list_bulleted 개발/ETC
• · 2021. 11. 10.
• textsms

CSS,HTML 과 CSS3 HTML5

이전 핀테크 기업 면접에서 HTML과 HTML5의 차이에 대해서 질문이 들어왔는데 제대로 된 답을 못해서 공부하고자 한다. 그리고 공부하는 김에 CSS와 CSS3의 차이에 대해서도 알아보자. CSS2와 CSS3의 대표적인 차이는 이미지를 사용하지 않고 그라이데션 등의 표현을 할 수 있게 된 점이다. CSS2에서는 모서리를 둥글게 표현하려면 모서리가 둥글게 처리된 이미지를 준비해야 했다. CSS3에서는 그런것이 필요하지 않다. 그 외 그림자나 그러데이션을 추가할 수 있다. HTML과 HTML5의 대표적인 차이는 많은 브라우저들이 HTML5를 지원하기 시작했다는 것이다. 기능 내용 표준 코덱 및 영상 플레이어 내장 브라우저 내부에서 영상 플레이어가 내장되어 별도의 플에이어 설치 없이도 영상 재싱 가능. 캔버..

• format_list_bulleted 개발/ETC
• · 2021. 1. 6.
• textsms

<