들어가기웹페이지를 만들 때 랜딩 페이지의 로딩 시간은 중요하다.페이지 로드 속도가 느려지면 그만큼 사용자 이탈률도 높아진다.이때 문제를 해결하기 위해서 CDN 캐싱 등 여러 방법을 이용할 수 있지만,코드 레벨에서의 가장 대표적인 방법은 dynamic import이다.용어 정리용어부터 짚고 넘어가면 좋을 것 같다.초기 로딩 시간 줄이기에 대해 검색하면 code splitting, dynamic import, lazy loading 키워드들을 보게된다.이를 정리하면 다음과 같다:dynamic import는 lazy loading을 하기 위한 수단이고, lazy loading을 하기 위해서는 code splitting이 선행되어야 한다.즉 코드 레벨에서 dynamic import를 사용하면 번들링 때 code..
전체 글
닌텐도 스위치가 떠오르는 표지를 가진 "이와타씨에게 묻다"는 닌텐도 전 CEO 이와타 사토루가 주변 인물들과 나눈 대화와 인터뷰를 엮은 책이다.어릴 적 닌텐도 DS로 마리오, 테트리스, 포켓몬 게임을 즐겼던 추억이 떠올라 재미있게 읽을 수 있었다. 이 책은 이와타 씨의 일대기와 함께 그의 철학과 생각을 전해준다. HAL 연구소의 아르바이트 직원부터 개발자, 닌텐도 경영자까지 각 역할에 맞는 마음가짐과 실제로 했던 행동들을 들려준다. 다음은 책을 읽으며 가슴에 와닿은 부분들이다. 1. 신입에게 가장 요구하는 것은 '아는척 하며 겉치레하지 말고, 모르는 것은 부끄러워하지 않는 마음가짐'입니다. 그리고 훈계를 친근하게, 하지만 진지하게 받아들이는 태도가 중요합니다. 2. 서로 선의를 지녔지만, 상대를 인정함으..
Query는 data fetching으로 받은 비동기 데이터이다.(GET)Mutation은 그 데이터를 업데이트하는 액션이다.(POST, PUT, DELETE) Mutation이 끝나면 대부분 Query에도 영향을 줄 것이다.예를 들어, `issue`데이터를 업데이트 하면 상위 개념인 `issues` 데이터에도 영향을 준다.따라서 React Query가 Mutation과 Query를 연결하지 않는다는 사실에 놀랄 수도 있다. 그 이유는 꽤 단순하다.React Query는 개발자에게 데이터를 맘대로 관리할 수 있도록 자유를 준 것이다.모든 상황에서 Mutation 이후 re-fetching(invalidation)이 필수는 아니다.예를 들어 Mutation api가 업데이트된 데이터를 반환해준다면, 그 데..
타입스크립트를 사용하는건 좋은 생각이다. 타입 안전을 싫어하는 사람이 있을까?버그를 미리 알 수 있고, 복잡한 앱의 구조를 타입으로 정의하여 그 부분들은 우리 머리 속에 담아둘 필요가 없어진다. "타입을 선언"한 것과 "타입 안전"한 것은 큰 차이가 있다.타입스크립트의 진정한 힘을 이용하려면 한 가지가 더 필요하다.신뢰하기우리는 타입 정의를 신뢰할 수 있어야한다.그렇지 않으면 타입은 단순 제안에 불과하고, 정확하다고 믿을 수 없다. - 가장 엄격한 타입스크립트 설정을 활성화하자.- typescript-eslint를 추가하여 `any`타입과 `ts-ignore`를 금지하자.- 타입 단언을 지양하자.제네릭타입스크립트에서 제네릭은 필수적이다.조금이라도 복잡한 걸 구현하려면 제네릭을 사용해야할 것이다. (라이브..
useQuery나 QueryClient.invailidateQueries 등 다양한 react-query 메서드에 파라미터로 넘겨주는 객체를 Query Options라고 부른다.// v5전에도 객체 형태로 넣을 수는 있었지만 이처럼 파라미터를 순서대로 넣는 방식이 널리 쓰였다.- useQuery(- ['todos'],- fetchTodos,- { staleTime: 5000 }- )// v5 부터는 객체 형식이 강제되었다.+ useQuery({+ queryKey: ['todos'],+ queryFn: fetchTodos,+ staleTime: 5000+ })이렇게 객체 형태를 파라미터로 넘겨주는 방식은 v5부터 강제되었는데, 어떤 이유 때문일까?1. 더 나은 추상화 (재사용) 모든..
나는 React Query를 좋아한다. React Query가 React앱에서 비동기 상태를 다루는 방식을 단순화하기 때문이다. 하지만 가끔 서버에서 데이터를 페칭해오는 것처럼 "간단한" 작업에는 React Query가 필요하지 않다고 주장하는 글들을 볼 수 있다.React Query가 제공하는 모든 추가 기능이 필요한 것은 아니니까, useEffect 안에서 fetch를 사용하는 것만으로도 충분할 때 굳이 서드파티 라이브러리를 추가하고 싶지 않다는 것이다. 이는 어느 정도 맞는 말이다.React Query는 캐싱, retry, polling, 데이터 동기화, prefetching 등 많은 기능을 제공한다.이러한 기능들이 필요하지 않다면 괜찮지만, 그렇다고 해서 React Query를 사용하지 말아야 한..
읽게 된 계기지금 다니고 있는 회사에서는 독서를 매우 권장한다.되도록 많은 구성원들을 독서 문화에 참여시키기 위해 노력한다.심지어 3주가량 되는 온보딩 때 8권을 책을 읽었어야 했다.그 3주 동안은 독서만 하고, 일은 하지 않아도 된다. 아니 일을 안 준다. 그만큼 독서에 진심인 회사이다.어쨌든 우리 회사에서는 매달 두 권씩 책을 읽는 모임이 있는데, 그 모임의 온보딩 도서가 김봉진의 "책 잘 읽는 방법"이다.그 모임에 합류하면서 이 책을 읽어보게 되었다.술술 읽힌다온보딩 도서를 읽으면서 사실 글이 잘 읽히지 않았다.읽었던 문장을 다시 읽고 또 읽고를 반복하면서 내가 집중력에 문제가 있나 의심도 했다.근데 이 책은 좀 달랐다.페이지 상위 50%만 글이 작성되어 있었고 그 아래는 텍스트가 없었다. 또 기분..
전반적으로 관리자는 어떻게 생각하면서 일하는지, 관리당하는 입장에서 어떤 자세를 취해야 하는지 알 수 있었다.책에 있는 많은 내용을 읽으며 요즘 관심이 가는 주제에 대해 드문드문 감상을 적어보았다.내 능력을 넘어서는 일먼저 처리능력을 넘어서는 일은 거부해야 한다는 문장이 와닿았다. 업무에 투입된지 이제 한달째가 되어 가는데, 작업 티켓을 가져갈 때 가장 어려운 일을 하고싶다는 욕심이 생기곤 했다. 이해도가 낮은 지금 그 일을 가져가서 실패한다면 손실이 클것이고, 해결하더라도 시간이 많이 걸릴 것이라고 생각했다. 하지만 반대로 늘 하던, 자신있는 작업만 하지않도록 경계해야겠다.일대일 면담일대일 면담은 상사와 정보 교환을 할 수 있는 중요한 창구이다. 또한 업무를 하면서 생기는 이슈를 솔직하게 터놓을 수 ..