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

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

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

Zustand에 대해서 알아보기

개요요즘 관심있게 살펴보는 부분이 리액트의 상태관리인데 예전부터 공부해보고 싶다고 생각했던 Zustand를 공부할 일이 생겨서 공부 + 정리를 하고자 한다. Zustand란 ?- 간소화된 Flux 원칙을 사용하고 작고 빠르게 확장 가능한 barebone 상태 관리 솔루션barebone의 뜻더보기- Zustand란 독일어로 state룰 뜻한다- Zustand는 Jotai 및 React 스프링 개발자가 구축한 빠르고 확장 가능한 상태 관리 솔루션 Zustand의 특징- 상용구(boilerplate) 코드 감소- Zustand는 상태 값이 변경될 때만 구성 요소를 렌더링한다- 상태 관리는 중앙 집중식이며 단순하게 정의된 작업을 통해 업데이트된다- Hooks를 사용하여 상태를 사용한다- 컨텍스트 제공을 필요로 ..

• format_list_bulleted 개발/React
• · 2024. 7. 26.
• textsms

Docker 시작하기

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

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

NPM에 라이브러리 배포하기

개요이 글은 자바스크립트로 개발된 프로젝트를 리액트 환경으로 지원하기 위한 끝 맺음 같은 글이다.프로젝트를 수행하기 위해 공부해 온 내용은 아래와 같다.더보기2024.05.02 - [개발/Bundle] - [Webpack] Webpack 이해하기 - Concepts [Webpack] Webpack 이해하기 - Concepts아래 문서는 webpack의 가이드 문서를 참고하여 작성됨을 알려드립니다. Webpack ?webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러 입니다. webpack이 애플리케이션을 처리할 때, 내부chairking-95.tistory.com2024.05.09 - [개발/Bundle] - [Babel] Loader 사용하기 😎 [Babel] Loader 사..

• format_list_bulleted 개발/NPM
• · 2024. 7. 5.
• textsms

리액트 서버 사이드 렌더링에 대한 분석

ReactDomServer공식 사이트 : Server React DOM APIs – React Server React DOM APIs – ReactThe library for web and native user interfacesko.react.dev리액트에서는 서버 사이드 렌더링을 하기 위해서 react-dom/server.js를 활용할 수 있습니다.react-dom/server.js 에서는 총 6가지 함수를 지원하는데 아래와 같습니다.export{ renderToString, renderToStaticMarkup, renderToNodeStream, -> 이제 사용하지 않고 renderToPiptableStream을 사용하는 것을 권장한다. renderToStaticNodeStr..

• format_list_bulleted 개발/React
• · 2024. 6. 20.
• textsms

[rollup.js] 환경 설정하기(2) - 플러그인 정리하기

이 글은 이전에 삽질했던 기록을 바탕으로 많이 진행된 상태에서 작성하는 글이다.삽질 기록 ⬇더보기2024.05.13 - [개발/Bundle] - [rollup.js] 환경 설정하기 - 오류(1) [rollup.js] 환경 설정하기(1) - 오류 해결하기이 글에 대한 배경은2024.04.25 - [개발] - [Javascript] HTML 페이지에서 자바스크립트 태그를 어떻게 파싱할까 🤔? [Javascript] HTML 페이지에서 자바스크립트 태그를 어떻게 파싱할까 🤔?분석을 하게 된chairking-95.tistory.com개요ES5,ES6,제이쿼리로 만들어진 프로젝트를 리액트 환경에서 실행될 수 있도록 지원하는 프로젝트를 사내에서 진행하고 있는데 UMD 예제를 지원할 수 있어야 했다. UMD가 뭐..

• format_list_bulleted 개발/Bundle
• · 2024. 6. 12.
• textsms

<