전체 글 (20) 썸네일형 리스트형 캐시 관련 http 헤더 정리와 Next.js의 캐시 정책 Cache-Control, ETag, Last-Modified 등의 헤더들은 브라우저(혹은 중간 서버) 캐시가 어떻게 동작하는지 결정한다. 프론트엔드 개발자로서 리소스가 사용자에게 얼마나 빠르게 전달되는지는 중요하고, 캐시가 큰 역할을 하기 때문에 알아둘 필요가 있다. 모든 것을 다루기보다는 (주관적으로) 주요한 헤더와 디렉티브 위주로 다루려고 한다.ExpiresResponse 헤더. http-date 형식으로 캐시가 만료되는 시간을 명시하고자 할 때 사용. 아래 설명할 max-age가 있다면 무시된다.Cache-ControlResponse, Request 헤더로 모두 쓰임. 디렉티브마다 사용 가능 여부가 다름. max-age=N: N초 동안 응답이 fresh하다는 의미. fresh할 때는 네트워크 요청.. 쿼리 키(React Query Key)를 체계적으로 사용하기 쿼리 키의 중요성과 적절히 사용하는 방법은 공식 문서와 블로그에 잘 정리되어 있다. 오늘은 그 중에서도 Query Key Factory를 실제 프로젝트에 도입한 사례를 정리해보려고 한다. 프로젝트 규모가 커지다보면 쿼리 키를 체계적으로 관리하기가 어렵다. 규칙을 세워도 점점 일관성이 깨지거나 휴먼 에러가 생기고, 서로 다른 파일에서 쿼리 키를 참조하는 등 안 좋은 패턴이 발생한다. 위 블로그 글에 나오는 쿼리 키 팩토리를 도입하여 이것을 어느 정도 해소할 수 있었다. const todoKeys = { all: ['todos'] as const, lists: () => [...todoKeys.all, 'list'] as const, list: (filters: string) => [...todoKeys.l.. React에서 UI 컴포넌트와 결합된 코드를 다루는 패턴들 MUI 같은 라이브러리를 사용하거나, 꼭 그렇지 않더라도 재사용 가능한 컴포넌트를 만들다보면 특정 컴포넌트와 거의 항상 같이 쓰이는 코드가 있기 마련이다. MUI의 Popover가 대표적. 특정 컴포넌트(주로 버튼)를 클릭하면 해당 컴포넌트의 위치를 기준으로 팝업창을 띄우는 용도로 사용된다. 이 때 MUI에서 권장하는 Popover를 열고 닫는 코드는 다음과 같다. const [anchorEl, setAnchorEl] = React.useState(null); const handleClickButton = (event: React.MouseEvent) => { setAnchorEl(event.currentTarget); }; const handleClose = () => { setAnchorEl(null.. 브라우저에서 로그를 확인하는 방법들 최근 업무 중 원인을 알 수 없는 에러가 있었다. 정확한 원인을 알 수 없던 이유는 1. 에러가 간헐적으로 발생했고, 2. 특정 PC에서만 발생해서 같은 환경(브라우저 버전, 네트워크 등)의 다른 PC에서는 재현이 되지 않았다. 프론트 이슈일 확률은 거의 없어보였지만 그렇다고 원인을 특정할 수도 없었다. 원인을 파악하려고 하다보니 다양한 로그를 확인하게 됐는데, 처음 알게 된 것들이 많아 기록한다. 개발자 도구의 네트워크 탭 웹 개발자라면 익숙할 그 친구다. 우클릭을 해보면 평소에 사용하는 헤더 말고도 다양한 옵션이 있다. 이번 에러의 경우 네트워크 요청이 stalled 상태로 지속되다가 끝나는 현상이 있었는데, TCP 연결이 최대 갯수를 초과한 것인지 의심이 되어 'Connection ID' 옵션을 사.. 모바일 크로스 브라우징 경험기 회사에서 앱 내 iframe으로 삽입되는 방식의 프로덕트를 맡게 되었는데, 운영체제(iOS, AOS)별로 특정하게 발생하는 이슈를 겪었다. 앱 환경은 처음이다보니 디버깅이 쉽지 않았다. 우선은 사내 테스트용 기기들에서는 해결된 것으로 판단을 했지만, 운영체제 버전이나 기기 종류에 따라 완전한 해결책이 아닐 수도 있을 듯하다. 지속적으로 업데이트할 예정. 내가 겪은 대부분의 이슈가 채널톡 블로그(링크)에 잘 설명되어 있으나 해결 방법은 일부 수정을 해야했다. iOS 한글 입력 채팅 입력창에 한글을 입력하고 전송 후 다음 입력시에 앞의 입력이 남아있다. 예를 들어, ‘가나다’ 입력 전송 ‘라’ 입력 입력창에는 ‘다라’로 표시(입력)됨 iOS에서 한글 입력시 값이 버퍼에 남게 되어 생기는 현상이라고 알려져 있.. 2022년 회고 입사가 2021년 12월이었어서 그런지 2022년이 개발자로서 보낸 첫 해인 것처럼 느껴진다. 1년 동안 했던 일, 느낀점을 정리해보려고 한다. 1월 ~ 3월 모노레포에 포함되어 있던 프로젝트 하나를 분리하여 처음부터 다시 만들었다. 프로젝트 규모가 그렇게까지 크지 않았고, 내부적으로 사용되는 프로덕트여서 새로 입사한 내가 맡아서 자유롭게 해볼 수 있었다. 기존에 자바스크립트로 되어있던 것을 타입스크립트로 다시 작성했고 비대한 컴포넌트 쪼개기, 반복해서 사용되는 UI 컴포넌트 재활용, 잘못된 hook 사용 고치기 등 전반적인 리팩토링도 진행했다. 상황상 코드 리뷰를 받지 않고 거의 혼자 작업을 하게된 점은 아쉽지만, 또 나름 그 덕에 코드에 대한 고민도 많이 해보게 되었던 것 같다. 3월 ~ 5월 위에서.. 브라우저 최소화 상태에서 웹소켓 끊김 현상 업무 중 겪었던 문제와 해결방법 기록. 현상 회사에서 진행 중인 프로젝트에서 mqtt.js를 사용하는데, 브라우저를 최소화한 상태로 일정 시간이 지나면 웹소켓 연결이 끊기는 현상이 발견됐다. 검색해본 결과 socket.io 등 웹소켓을 사용하는 다른 라이브러리들에서도 같은 증상이 발생하는 것으로 보였다. 관련 링크 - https://github.com/socketio/socket.io/issues/4040 Disconnect after 5 minutes if tab minimized on Chromium · Issue #4040 · socketio/socket.io Describe the bug Using a Chromium browser, when the tab through which the con.. React Query에서 데이터 reference를 관리하는 방법 이제 공식 명칭이 Tanstack Query인 듯하지만 편의상 리액트 쿼리라고 부르겠습니다. Important Defaults 리액트 쿼리 가이드 - important defaults에는 다음과 같은 설명이 있다. Query results by default are structurally shared to detect if data has actually changed and if not, the data reference remains unchanged to better help with value stabilization with regards to useMemo and useCallback. 쉽게 말해 쿼리 결과들에 대한 레퍼런스는 데이터가 실제로 변경됐을 때에만 변경된다는 의미다. 왜? const.. 이전 1 2 3 다음
