인생을 살다보면 URLSearchParams 을 활용해 쿼리스트링값을 활용해야할 때가 있다.더 나아가, 쿼리스트링 오브젝트의 크기를 알고 싶을 때가 있다. 이때 자바스크립트는 좋은 api를 제공한다. 바로 URLSearchParams().size 이다.문제하지만 특정 브라우저에서는(내 경우에는 IPad OS 16의 Safari 16.5) URLSearchParams().size 를 찍으면 자꾸 null로 떴다. can i use를 들어가보면 URLSearchParams는 대부분의 브라우저에서 지원하고 있다. 도대체 뭐가 문제인걸까.원인can i use를 들여다보니 size 는 지원하는 범위가 남달랐다. 진짜 최신 브라우저는 지원하지만 2년 정도 전 버전의 브라우저에서는 지원하지 않는다고 되어있다! 나는 ..

React 프로젝트를 진행하던 중, 고객사에서 SPA 말고 MPA로 해달라는 요구가 들어왔다.하지만 당시 개발마감 일자까지 1달 밖에 남지 않은 촉박한 상황이었으며 이미 팀원들의 화면개발은 거의 다 완료된 상태였다. SPA를 MPA로 전환하기 위해서는 다른 프레임워크를 끼우는 방법이 있지만, 무언가를 새롭게 배워야하는 비용과 그때까지 작업하던 소스코드를 변경하는 비용은, 마감 일자가 1달 밖에 안남은 상황에서, 많은 부담이 되었다.팀원들이 작업한 소스코드를 최대한 유지하고 새롭게 무언가를 배우는 비용은 줄이되, SPA를 MPA로 전환하는 방법이 필요했다. 머리를 쥐어짜며 끙끙 앓고 있던 나에게 직장 선배가 아래 링크의 글을 보내주며 이 글을 참고하면 React를 MPA로 전환할 수 있겠다고 이야기 하였다..

리액트는 client side rendering, SPA 라이브러리이다. 그렇기 때문에 처음에 화면을 그릴 때에 public/index.html에 있는 자원들을 모두 읽어온다. javascript 파일들 역시 읽어오고 실행한다. 특히 애니메이션 효과를 담당하는 javascript 파일 내부에는 이미 렌더링 된 DOM 중 클래스명 등으로 지정된 특정한 DOM에 애니메이션 이벤트를 추가하거나(addEventListener(...)) 하는 코드가 포함되어 있다.  첫 화면 진입 이후 화면전환 시, 위에 적힌 종류의 자바스크립트 파일을 불러오는 방식에서 일반 html 파일과 리액트 app 차이가 발생한다. (mpa, spa, client side rendering, server side rendering ..

https://www.easy-me.com/d EASYME.md | 리드미, 마크다운 작성 사이트 EASYME.md(이지미)는 README(리드미) 작성, Markdown 문법이 익숙하지 않은 사람들을 위해 만든 사이트입니다. www.easy-me.com 마크다운 문법을 잘 몰라도 에디터처럼 간편하게 마크다운 문서를 작성할 수 있는 사이트이다. 다만 현재 ctrl+s버튼을 누르면 오류가 발생하는데... f12를 눌러 콘솔에 밑의 스크립트를 복붙하여 ctrl+s를 클릭했을 때 작성 중인 마크다운 문서를 클립보드에 복사하도록 하자 const preventCtrlS = async (e) => { if((e.ctrlKey || e.metaKey) && (e.keyCode === 83 || e.key === 's..

useEffect(() => { $(`#${id}`).hide(); }, []); const fadeIn = () => { $(`#${id}`).show(() => { $(`#${id}`).fadeIn(); }); }; const fadeOut = () => { $(`#${id}`).fadeOut(() => { setMessages?.(defaultList); }); }; 이렇게 되어있는 컴포넌트가 있다. 아주 잘 동작하는 구문이지만 한가지 걸리는게 있었다. 현재 npm에서 jquery 라이브러리를 설치해서 사용하고 있는데 이 프로젝트 내에서 jquery라이브러리를 이 컴포넌트, 즉 한 군데에서만 사용하고 있다. 구글 크롬이 제공하는 기능이 lighthouse를 이용하여 treemap을 보니 한 군데에서..