전체 글

읽게 된 이유나는 사소한 결정 하나 내리는 것도 괜히 힘들게 느껴질 때가 많았다. 특히 업무할 때 제한된 상황속에서 여러가지 선택지 중에 결정을 해야할 때가 많은데, 그때마다 머리가 복잡하고 스트레스를 받았다. 나름 최선이라고 생각하며 선택을 했지만 마음에 들지 않을 때가 있었다. 또 가끔은 고민하는 내용이 사소한 거라면 '괜찮겠지' 생각하며 넘길 때가 있었다. 모든 선택에는 근거와 책임이 따라야 한다는 생각이 점점 들면서 선택을 어려워하는 나를 바꾸고 싶었다. 그래서 읽게 된 책이 리처드 모란의 '결정하는 습관'이다.책소개책 제목에 있는 ‘결정’이란 단어 자체가 거창하게 느껴졌다. 하지만 막상 책을 펼치고 보니, 우리가 미루는 건 대부분 사소한 선택들이라는 걸 깨닫게 된다. 그런데 이 사소함이 쌓여서..

읽게 된 이유최근 내 습관을 좀 더 잘 조절하고 싶다는 생각이 들었다. 특히, 요즘 목표하는 것이 많은데 무의식에 스마트폰을 보는 습관이 시간을 잡아먹어 이를 개선하고 싶었다. 왜 나쁜습관은 하지 말아야지 생각하면서도 나도 모르게 하게 되는 걸까?에이미 존슨의 책 '왜 좋은 습관은 어렵고 나쁜 습관은 쉬울까?'는 바로 이런 질문에 답을 주었다. 저자는 라이프코치로서 실제 상담 사례와 자신의 경험을 바탕으로, 우리가 왜 반복적으로 나쁜 습관에 빠지고, 좋은 습관을 들이기가 어려운지 그 근본적인 원인을 소개한다. 책 소개책에서는 단순히 의지력이나 자기통제의 부족을 탓하지 않는다. 오히려 나쁜 습관이란 '현재의 불편한 감정에서 벗어나기 위한 잘못된 접근'이며, 이는 결국 우리의 ‘생각’에서 비롯된다고 말한다...

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로 전환했는가?주요 문제점개발서버 속도 느림: 개발서버를 시작하는 데 시간이 오래 걸리고, 변경사항이 반영되는데 수 초가 걸림아쉬..