개발자
류준열

datocms 프리티어가 다되어서 이미지 업로드가 안된다. 라이센스 업그레이드 하면 월 200유로다.. 클로드코드는 신이다. 클로드코드, dotoCMS MCP, supabase MCP를 이용해서 약 1시간만에 마이그레이션했다. 이젠 정말 아이디어 to 배포다

Vercel에서 React BestPractice skill이 공개되었다. 한줄 한줄 읽어보는데, AI를 떠나서 프론트엔드 개발자로써 인사이트를 많이 얻는다. AI가 나오기 전부터 나만의 클린코드로 갈고 닦은 내용도 있고 생소한 내용도 있다.

AI를 본격적으로 공부한지 2주가 되었다. 생산성이 올라간다. 회사에서 문서화 한 김에 블로그에도 작성한다.

이제 내가 발견하는 대부분의 작은 문제들은 입코딩으로 1시간만에 해결이 가능해졌다.

todolist.md를 통해 스펙을 고정하고 AI는 피드백 루프를 통해 제품이 완성될때까지 작업하도록 했다. todolist가 명확하니 헛짓거리 없이 제품을 잘 만들었다. (중간에 클로드코드에서 코덱스로 변경했음에도 불구하고

모바일에서는 사파리 특유의 부드러움을 위해 가상 키보드 생성시 동적 화면 변경을 처리하는 방식에서 가상 공간이 나타난다. 스크롤 할 때 키보드를 비활성화 하는 방식으로 이를 해결했다.

개발자가 미리 약속된 class 이름만 써준다. 빌드 시점에 그 약속된 CSS를 만들어 준다. 아이디어만 놓고 보면 정말 단순한데, 이 단순함을 구현해서 전 세계적으로 인기 있는 라이브러리를 만들다니

레이지 로딩이 안되는 문제를 처리하는 과정에서 display:none과 react-slick이 일으키는 레이아웃 쓰래싱을 발견하고 모달 전체 렌더링 속도를 66% 향상시켰다. (150ms -> 50ms)

지하철 모바일 환경에서의 랜딩페이지 최상단 섹션의 렌더링 속도를 개선하기 위한 작업들을 했다. 가장 빠르게 확인 할 수 있는 작업인 lazy loading과 폰트 최적화를 하고 전,후 변화를 측정했다. 모바일 라이트 하우스가 18% 개선되었다.

base64로 이미지를 전송하다보니 서버에서 413에러로 튕겨냈다. canvas.toBlob을 이용해서 브라우저에서 직접 압축했는데 약 97% 압축되었다. (4.5MB -> 94.6KB)

이미지에서 액박이 뜰대는 referralPolicy 속성을 이용하면 된다.

useToast를 만들어 쓰고 있었는데 이는 컴포넌트, 훅 외부에서 사용할 수 없다는 한계가 있다. this는 메소드가 자신을 호출한 객체를 가리킨다는 성질을 이용하여 React 외부에서 상태를 변경 할 수 있다.

svg 중복 생성을 방지하기 위해 피그마 정보를 이용한 Icon 컴포넌트를 만들었다.

서버 컴포넌트에서 데이터를 prefetch하여 클라이언트에서 즉시 활용할 수 있도록 구성했다.

HMR은 단일 어플리케이션 내에서 모든 의존성 그래프를 파악하고 있는 상태에서 동작하지만 module federation은 독립된 webpack을 가진 앱들이 커스텀 이벤트로 통신하기 때문에, HMR의 전제(모든 의존성 그래프 파악)과 맞지 않는다.

Props 변경이 리렌더링을 일으킨다는 글들이 많다. 사실이 아니다.

폐쇄망 서버에서는 해당 인프라의 hosts 에 등록되지 않은 도메인에 접근할 수 없다. 하지만 브라우저는 로컬 PC의 hosts 파일을 참조하기 때문에 폐쇄망 서버와 무관하다.

Node.js가 없는 고객사 PC에서 환경변수를 수정하려면 본사인원에게 빌드를 요청하고 파일을 메일로 주고받는 번거로움이 있었다. 하지만 런타임에서 환경변수를 설정 할 수 있게 되면, docker-compose만 수정하면 되므로 빌드 없이 어떤 환경에서든 즉시 배포가 가능해진다.

회사에서 리포트 발행 기능을 만드는데, 리포트 페이지가 뒤죽박죽으로 발행되었다.

동시성 렌더링은 두가지 일을 동시에 하는게 아니라 우선순위를 조정해서 동시에 하는 것 처럼 보여주는 것이다.

현재의 소프트웨어 개발 방식은 Git Flow가 구상될 당시와 다르다. 만약 지속적 배포를 통해 고객에게 제품을 전달한다면 더 간단한 workflow를 추천한다. 하지만 다양한 버전들이 고객들에게 제공된다면 여전히 Git Flow가 적합할 수 있다.

리렌더링을 줄이니 어쩌니 하는게 중요한게 아니다. Form을 Form답게 관리할 수 있는 것이 중요한거다.

module federation을 사용하는 프로젝트는 각 어플리케이션들이 자체적으로 라우팅을 처리 할 수 있도록 모든 경로를 index.html로 리다이렉트 시키지 않는다.

Next.js에서의 환경변수는 빌드타임에 등록된다. 쿠버네티스에서 환경변수는 컨테이너 이미지가 빌드된 후 런타임에 주입된다. 그래서 쿠버네티스+Next.js 조합에서는 둘중에 하나를 변경해주어야 한다.

Module federation을 통해 두 마이크로 프론트엔드를 공유할때 타입스크립트에서 타입을 인지하지 못하는 문제가 있었다. 이럴땐 @module-federation/typescript를 이용하여 빌드된 타입정보를 각 마이크로 프론트엔드 간에 공유 할 수 있다.

회사에서 각 기능들을 모듈별로 관리하기로 했다. 하나의 제품안에 있는 여러 기능 모듈들을 효율적으로 그리고 안정적으로 관리하기 위해 Micro frontend를 도입하기로 결정했다.

prefetchQuery를 이용해서 서버 컴포넌트에서 데이터를 캐싱하고 클라이언트 컴포넌트에서는 캐시에서 데이터를 가져옴으로 로딩을 제거 할 수 있다.

useTraslation 훅을 통해 언어를 관리하는 경우 새로고침이나 링크 공유시에 언어가 초기화 되는 이슈가 있었다. 페이지 구조를 엎어야 했다.

access 토큰과 refresh 토큰의 만료기간을 다르게 두어 UX를 저해하지 않으면서 보안을 강화할 수 있다.

개발자의 의도와 무관한 패키지들이 node_modules에 설치되고 제거된다면 어떤 버그들이 생길지 알 수 없다. 말 그대로 유령이다

번역할 내용이 추가 될 때 마다 JSON을 수동으로 만들어야 하는가? 에 대한 고민이 있었는데 excel을 i18n에 적합한 JSON으로 변환하는 간단한 html을 만들었다.

노션에 이미지를 업로드하면 1시간 후 노션 S3에서 삭제된다. 이는 유저에게 보여지는 이미지들이 액박이 뜨는 문제로 이어졌다.

게시글 페이지의 page.js에서 highlight 라이브러리를 분리하여 lighthouse 점수를 78 -> 85 로 증가시켰다.

비즈니스로직이 프론트에 포함된 경우 의존대상과 세부구현을 분리하는 방식에 대해 설명

써드파티 라이브러리에 의존하여 작업을 하다보면, 지나치게 낮은 request limit때문에 빈번하게 429 에러를 만날 수 있다. 이는 토큰 버킷 알고리즘으로 request limit에 도달하기 직전에 요청을 지연시켜서 해결 할 수 있다.

setTimeout의 delay를 0.5초로 설정하였는데 0.5초가 지나도 call stack이 처리되지 않으면 setTimeout의 callback은 실행되지 않는다. 이렇게 setTimeout이 씹히게 된다.

컴포넌트 라이브러리를 npm 배포하는 방법

사파리에서는 보안상의 이유로 유저 액션을 통해서만 클립보드 복사가 동작한다.

next는 SSR을 할 수 있는 리액트 프레임워크이다. JSX문법으로 렌더링 할 코드를 작성하면, next 서버에서 html을 만들어주고 그 이후 hydration이 진행되면서 리액트(CSR)이 진행된다.

지원선발 시스템에서 제출한 설문지의 모든 답변이 초기화 되는 이슈가 있었는데, 재현이 되지 않았다. 나중에 알고보니 다중탭 문제였다. 또한 setInterval이 react 라이프 사이클과 맞물려 작동하지 않는 이슈도 있었다.

티스토리에서 블로그를 운영하고 있지만 프론트엔드 개발자가 쌩으로 만든 블로그 하나는 갖고 있어야 하는것 아닌가? 하는 생각에 블로그를 만들게 되었다.

메모이제이션은 자주 쓰이는 값(or 함수)를 캐싱하여 리렌더링시 새로 만들지 않게 하는 것이다. 리액트에서는 `useMemo`, `useCallback`, `memo` 를 통해 구현할 수 있는데 여기서 굳이 설명하지는 않는다.

UI 시스템의 효과는 두가지이다. 개발자 작업 시간 단축, 디자이너 작업 시간 단축 서로가 서로를 배려하다보니 아무 발전도 하지 못한 지난 1년이었다. 갈등은 더 심각한 갈등을 피하기 위한 것이다. 갈등이 없으면 아무 발전도 없다.

Drag and Drop 기능을 만들기 위해 라이브러리들을 검색해봤는데, 바탕화면을 구현하기에 적당한 라이브러리가 없었다. 그래서 직접 만들기로 했다.

분명히 서버컴포넌트로 렌더링되는건 아닌데,, use client를 사용하면 CSR로 된다는 뜻이 아닌가? 하고 공식문서를 보았다. 공식문서에서 클라이언트 컴포넌트 (use client) 가 어떻게 렌더링 되는지 잘 작성되어 있다.