React 19 업그레이드 후, 테스트 코드에서 `ReactDOM.render is not a function` 에러가 발생한 이유와 그 해결 과정을 정리한 글이다. 문제 상황React 18에서 React 19로 업그레이드하며 타입 에러를 대부분 해결했을 때쯤, 테스트 코드에서도 실패 케이스가 발생하는 것을 발견했다. 확인해보니 @testing-library/react-hooks의 renderHook을 사용하는 테스트에서 `ReactDOM.render is not a function`라는 에러 메시지와 함께 실패하고 있었다. 문제 원인React 19에서는 ReactDOM.render가 완전히 삭제되었다. React 18에서 deprecated 처리만 됐었지만, React 19에서는 코드베이스에서 제거되..
분류 전체보기
웹 페이지의 성능 최적화는 사용자 경험을 향상시키는 핵심 요소 중 하나다. 최근에 CSS 애니메이션을 작성하다 브라우저에 최적화 힌트를 줄 수 있는 CSS 속성들을 알게 되어 좀 더 조사해보았다. 이 글에서는 세 가지 CSS 속성(contain, will-change, content-visibility)에 대해 정리했다. 이 속성들이 어떻게 최적화에 영향을 주는지 좀 더 파악하기 위해서는 브라우저에서 렌더링이 어떤 순서로 발생하는지에 대해 이해가 필요한데, 아래 글을 읽어보는 것을 추천한다. 브라우저 렌더링과 CSS 애니메이션에 대해 이해하기 쉽게 작성되어있다.https://mong-blog.tistory.com/entry/CSS-%EC%99%9C-transform-%EC%95%A0%EB%8B%88%EB..
글또 커뮤니티에 가입해 활동을 한 지 6개월이 지났다. 회고마다 '시간이 벌써' 이런 말을 자주 쓰는데, 갈 수록 시간이 더 빨리 흐르는 느낌이다. 이런 시간을 그냥 흘려 보내지 않기 위해 기록을 자주해야겠다는 생각을 요새 더 자주 하고 있다. 그래서 6개월간의 글또에서의 활동도 이 글에 기록하려고 한다.글또 활동 중에서의 마지막 글을 쓰면서 시작할 땐 어떤 마음이었는지 지원서를 다시 읽어 보았다. 또 OT에 참여한 후 처음 작성해 제출했던 글도 다시 읽어 보았다. 링크 글또 10기를 시작하며이번에 글또 10기에 참여하게 되었다. 글또에 제출할 첫 글을 글또에 참여하게 된 계기와 6개월간 참여하면서 어떻게 활동하고 싶은지 목표 및 다짐으로 채워보려한다. 글또에 참여하게 된 계기fre5h93.tistory..
이번 년도는 유독 시간이 빨리 지나가는 느낌이다. 작년보다 더 밀도있게 살지 못해서 때문인 것 같기도 하고... 그냥 흘려 보내지 않기 위해 3개월간 들었던 생각을 정리해 보려고 한다.조금 더 기록하며 일하기로 했다원래도 노션을 업무하면서 자주 사용했지만, 기존에 노션 템플릿은 정말 메모장처럼 쓰고 관리가 잘 안 되는 느낌이라 새로운 템플릿을 찾아다녔다. 옵시디언도 써보려고 했으나 자유도가 너무 높아 처음부터 이것저것 하려니 너무 시간이 오래 걸렸다. 그래서 유튜버가 만들어둔 템플릿을 구매해, 일부를 커스터마이즈 해서 사용하는 중이다.그때와 지금 업무 기록과 관리 방식에 있어 달라진 점이라면 기록의 밀도가 될 것같다. 그때는 업무를 진행하며 메모를 작성할 때 한 이슈당 하나의 글에 쭉 작성했었는데 그러다..
React18에서 19로 업데이트 하며 가이드를 보던 중, ref 속성에 콜백함수에 클린업 함수를 지원하게 되었으니, 암묵적 반환을 제거하라는 내용을 보았다. ref 속성에 할당해 실행되는 콜백함수 동작에 대해 깊게 생각해본 적이 없었다. 단순히 DOM 렌더시 인자로 DOM 노드를 넘겨준다고만 알고 있었다. 그래서 왜 19에서 클린업함수를 지원하게 됐는지 궁금해졌고, 공식 문서를 바탕으로 이해한 내용을 정리하고자 한다. ref 콜백 함수 (callback function)ref 속성은 특정 DOM 요소에 직접 접근할 수 있도록 해준다. 일반적으로 useRef 훅을 사용해 ref 객체를 생성하고, 이를 ref 속성에 할당하는 방식이 널리 사용된다.const MyComponent = () => { const..
현재 우리 팀에서는 신규 웹사이트를 Next.js로 개발하고 있지만 예전에 만들어진 사이트들은 React 프로젝트를 Webpack으로 빌드해 빌드파일을 가지고 실행하여 웹사이트를 동작시키고 있다.작년, 팀에서 나는 Webpack에서 Vite로 마이그레이션 하는 작업을 진행했었다. (마지막엔 비즈니스 이슈가 너무 바빠서 마무리를 파트 리더님이 해주셨지만…)시간이 꽤 지났지만 마이그레이션 작업을 하며 겪었던 것을 정리할 겸 이번 글에서는 Webpack에서 Vite로 전환한 이유, 설정 과정, 그리고 마이그레이션 후 성능 변화에 대해 정리해보려고 한다. 왜 Webpack에서 Vite로 전환했는가?주요 문제점개발서버 속도 느림: 개발서버를 시작하는 데 시간이 오래 걸리고, 변경사항이 반영되는데 수 초가 걸림아쉬..
기존 환경문제가 발생한 환경을 설명하려면 오래전으로 거슬러 올라가야 한다. (옛날옛적에🧓…까지는 아니지만)작업하고 있는 웹사이트는 오래된 프로젝트로, 초기에는 TypeScript의 namespace 패턴을 사용해 모듈처럼 구조화한 파일들을 실행해 작동 되었다. (JS로 컴파일해 로드하니, 편의상 이를 레거시 JS 파일이라고 부르겠다.)이후 React.js를 도입하면서 신규 기능들을 개발하게 되었고, 신규 기능들은 웹팩(Webpack)으로 번들링하여 entry.js 파일을 통해 제공했다.이 entry.js를 실행하면 전역변수 entryPoint를 선언하고, 그 속성에 외부에서 사용할 기능들을 할당했다. HTML 내 다른 스크립트에서는 entryPoint를 통해 React로 개발된 기능을 호출하고 렌더링할..
문제 요약로컬 개발서버를 자체 서명 인증서를 사용해 HTTPS로 띄우고 크롬으로 접근시, 일부 리소스가 net::ERR_TOO_MANY_RETRIES 콘솔 에러를 표시하며 로드가 되지 않음 자체 서명 인증서: 인증 기관(CA)에서 발급하지 않은 공개 키 인증서. 해당 인증서를 사용해서 개발 서버 실행해 접근 시 아래와 같은 경고 화면을 볼 수 있다. (크롬) 크롬에서는 고급 버튼을 클릭해 경고를 무시하고 접근이 가능하다. #allow-insecure-localhost 플래그를 사용하여 localhost에서 이 경고를 자동으로 우회할 수도 있다. 상황개발하는 사이트의 세션은 쿠키로 관리하고 있었다. http://localhost는 개발 목적으로 HTTPS처럼 작동하여 그대로 사용하고 있었으나, 최근에 쿠..
