들어가며 이슈트래커는 webpack으로 구성돼있었다. CRA의 너무나도 느린 dev server 구동 속도를 개선하고자, 또 번들러를 학습하려는 목적으로 직접 webpack으로 개발 환경을 구성했었다.  webpack으로 구성된 환경은 CRA와 비교했을 때 어느정도 차이는 있었다. 약 12초 정도 걸리던 dev server 구동 시간을 9초대로 줄일 수 있었다.  하지만 요즘 CRA는 새로운 프로젝트에서 아무도 사용하지 않고, 다른 프로젝트에서 직접 webpack을 구축하는 경우는 적었다. Next가 아닌 이상 대부분 vite를 이용해 프로젝트 환경 설정을 했다.  다른 프로젝트에서 vite의 개발 서버 시작 시간은 굉장히 짧다. webpack과 비교해서 짧은 수준이 아닌 10배 정도의 차이를 보인다. ..

들어가며기존에 리액트로 만들어졌던 오놀을 넥스트로 포팅을 하면서, 그리고 웹 성능 지표에 대해 학습을 했기에 성능을 측정해보고 개선점이 있는 곳들은 개선을 해보고 싶었다.  Lottie 파일 최적화하기포텐데이에서 진행했던 프로젝트였기에 거의 일주일 안되는 기간동안 프로젝트를 만들어야 했다. 랜딩 페이지의 애니메이션을 디자이너분이 많이 고심하면서 수정사항이 잦았기에 매번 복잡한 애니메이션의 CSS를 수정하는게 부담으로 다가왔다. 디자인 수정 요구 사항을 빠르고 정확하게 반영하기 위한 방법이 없을까 찾아보다가 로띠를 사용하는게 가장 적절하다는 생각이 들었다. 하지만 포텐데이는 꽤 예전에 진행했고, 지금은 다들 바쁘시기에 디자이너 분에게 로띠 파일의 png 파일을 webp로 변경해달라고 말씀 드리기 어려웠다...

들어가며오픈소스에 컨트리뷰트를 하면서 테스트 코드의 중요함을 느낀적이 있다. 내가 진행한 프로젝트와는 비교할 수 없이 많은 코드양과 사용자 수. 내가 작성한 코드의 사이드 이펙트가 미칠 영향을 가늠하기가 어려웠다. 그 때 테스트 코드의 힘을 많이 느꼈다. 내가 작성한 코드가 다른 수백명의 사람이 작성한 코드에 영향을 끼치지 않고 + 내가 수정/구현하고자 하는 부분이 정상적으로 동작하는지에 대한 자신감을 줬다.  오놀에서 접근성 개선 작업을 하며 문득 UI에 어떤 변화가 있진 않을까? 키보드 대응 같은 기능적인 측면을 추가할 때 다른 기능이 잘 동작하지 않으면 어떡하지?라는 불안 요소가 있었다. 오픈 소스에서 내게 자신감을 줬던 테스트. 내가 불안한 포인트들을 테스트를 통해 직접 확인하지 않아도 제거하고 ..

들어가며 최근에 접근성을 학습하며 뭐랄까 반성을 많이 하게 됐다. 다른 사람에게 도움을 주는 사람이 되고 싶어 (계기가 돈이든, 개인적 만족이든 상관 없이 다른 사람을 돕는게 인간에게 주어진 숙제라 생각했다. 물론 군대에서 한 생각이다.) 프론트 개발자가 됐는데 웹의 보편적인 가치를 무시한 채 너무 기술 그 자체에만 몰두했었다. 다양한 사람이 장애 환경에 구애받지 않고 서비스에 접근하는 것. 가장 중요한 가치를 잊은 채 코딩을 했던건 아닐까. 항상 본질을 잊지 말아야겠다. 선택지 오놀은 여러 페이지에 걸쳐 다양한 선택지를 골라야 한다. 기존에는 어떤 ARIA 태그도 사용하지 않았기에 시각 장애 사용자의 경우 스크린 리더를 통해 접근하면 각 선택지의 선택 여부를 알기 어렵다는 문제가 있었다. 따라서 다음과..

들어가며Next 공식문서에 Script태그를 보면 다음과 같은 설명이 나와있다.beforeInteractive: Load before any Next.js code and before any page hydration occurs.afterInteractive: (default) Load early but after some hydration on the page occurs.lazyOnload: Load during browser idle time.하지만 자꾸 제대로 이해했다는 느낌이 들지 않아서 직접 Next의 깃헙을 들어가 코드를 까봤다. 매번 라이브러리/프레임워크의 코드를 까보려고 시도할 때마다 실패했지만, 언젠간 늘겠지 하는 마음이다.  afterInteractive, lazyOnload // ..

RenderToStringreact-dom/server 모듈에서 제공하는 renderToString 메서드는 React 트리를 HTML 문자열로 렌더링한다. 자세히 알아보기 전에 간단한 API 사용법은 다음과 같다.// renderToString(reactNode, options?) // reactNode는 HTML로 렌더하려는 리액트 노드를 의미한다.// options는 서버 렌더에서 사용될 옵션들을 의미한다. // 옵션 중 identifierPrefix의 경우 hydrateRoot에 사용될 prefix와 같아야 한다.import { renderToString } from 'react-dom/server';const html = renderToString(); 위 예제에서 html 에는 App이 렌더된..