전체 글 (20) 썸네일형 리스트형 React Query 사용할 때 주의할 점 이슈 내용 우선 해당 이슈는 여기서(https://github.com/TanStack/query/issues/3772) 볼 수 있다. 쉽게 말하면 랜더링이 한번 더 되는 문제인데.. React Query 자체의 문제가 아니라 React에서 비롯된 것이라고 결론이 난 듯하다. (그래서 RTK Query에서도 같은 현상이 발생한다고 함) 현상을 간단히 설명하면 useQuery를 사용한 컴포넌트가 첫 요청시에는 예측 가능한대로 두 번 랜더링되는데, 그 다음 요청부터는 세 번 랜더링이 된다는 것이다. 첫 요청: loading -> success 그 뒤: loading -> loading (❌) -> success ❌ 표시한 두 번째 랜더링에서 useQuery의 반환값들(status, isLoading 등)은 앞.. React에서의 Authorization 정답이 아니라 저는 이렇게 했다.. 정도를 소개하기 위한 글입니다. 개선할 점이나 의견 모두 환영합니다 🙂 Authorization 정의 Authorization은 직역하면 권한 부여 정도가 되는데, 인증(authentication)과는 조금 다른 개념이다. 로그인이 인증이라면, 사용자 (ex. 관리자 / 유저 / 게스트(로그인 x))에 따라 접근할 수 있는 페이지를 다르게 하는 것이 Authorization이라고 할 수 있다. pseudo-code 어떤 페이지에 Authorization을 적용한 것을 pseudo-code로 표현하자면 이렇다. const UserPage = () => { const 유저레벨 = 유저정보가져오기(); if (유저레벨 === 게스트) { // 로그인 페이지 return; }.. Intersection Observer와 Skeleton UI로 UX 개선하기 업무 중 로딩 속도가 느린 페이지를 개선한 경험을 소개한다. Intersection Observer와 Skeleton UI를 활용했다. 문제 현상 우선 문제가 되었던 컴포넌트는 다음과 같이 하위 리스트를 가지고 있는 형태였다. const Item = ({ data }) => { return ( {data.subList.map((subData) => ( ))} ); } 페이지는 API 서버로부터 데이터를 가져와서 적게는 20개, 많게는 100개의 위 Item을 랜더링하는데, Item마다 SubList가 5~10개 정도 존재했다. 데이터의 갯수 자체는 그렇게 많지 않았지만 리스트가 중첩된 구조로 인해 랜더링에 시간이 꽤 소요됐는데, 컨텐츠가 모두 보이기까지 Item 50개일 때 기준으로 평균 1초 이상 걸렸.. React를 쓰면서 하기 쉬운 실수들 제목을 거창하게 썼지만, 사실은 내가 했던 실수 모음 hook 단위로 작성해봄 useState prop을 useState의 초기값으로 넣는 것. 이렇게 하는 것 자체가 실수는 아니지만, prop에 따라 state가 바뀌지는 않는다. const Counter = ({ num }) => { const [count, setCount] = useState(num); // num이 바뀌어도, count는 그대로다 } 위처럼 사용하고 num이 바뀔 때 count도 바뀔 것이라고 기대하면 안 된다. useState에 넣어주는 값은 초기값일 뿐 매번 상태를 업데이트해주지 않는다. 단순화시켜서 당연해보이지만, 생각보다 실수하기 쉽다. 추가로 useState 안에 초기값을 함수의 리턴값으로 넣어주는 것도 유의해야 한다. .. Material UI에 기여할뻔한 얘기 Material UI에 contribute할뻔했다. 정확히는 버그를 발견하고 이슈를 올려서 수정하겠다는 피드백을 받고, MUI 멤버의 PR에 리뷰도 달았다. 이것도 contribution이라고 쳐준다면, 기여했다고도 할 수 있겠다. 아무튼간 뿌듯한 경험이었어서 기록해놓겠다고 생각만 하다가 드디어 한다. 이슈 PR 버그인가..? 업무 중에 MUI Chip 컴포넌트를 사용하는데, 의도대로 색상 적용이 되지 않았다. 처음에는 내가 뭘 잘못 사용했거나 원래 MUI가 그렇듯 커스터마이징하기가 어려운 것이라고 생각했다. MUI를 써봤다면 알겠지만 컴포넌트에 어떤 prop을 주느냐에 따라 오만가지 클래스명이 추가된다. 근데 아무리 봐도 prop을 맞게 줬는데 클래스명이 문서의 설명과 다르게 적용되고 있었다. 뭐야 이.. Gatsby 블로그: TOC(목차) 추가하기 기능 소개 Table of Contents(TOC)는 개별 포스트 페이지에서 PC 화면을 기준으로 우측에 있는 목차를 의미한다. 포스트의 소제목들을 나열해서 보여주는 기능으로 내용을 체계적으로 파악하는 데 도움이 되고, 클릭시 해당 부분으로 스크롤이 이동한다. gatsby-transformer-remark gatsby-transformer-remark는 마크다운으로 작성된 포스트를 html로 변환시켜주는 플러그인으로, gatsby-starter-blog에 기본적으로 포함되어 있다. 이 플러그인은 html 외에도 tableOfContents라는 필드를 마크다운 노드에 추가해준다. GraphiQL에서 다음과 같은 쿼리를 실행해보면 마크다운에서 hash(#)로 작성한 소제목들이 , , 태그로 변환되어 tabl.. Gatsby 블로그: Pagination 추가하기 Gatsby에서의 Pagination Gatsby에서는 빌드 타임에 페이지 번호별로 페이지를 만들어두고, 컴포넌트를 사용하면 매우 빠르게 화면이 전환되는 페이지네이션을 구현할 수 있다. 컴포넌트의 특징은 뒤에서 조금 더 자세히 설명할 예정. Material UI Pagination 컴포넌트 편의를 위해 Material UI를 사용했다. Material UI는 Pagination이라는 컴포넌트를 제공하기 때문에 상당히 편리하게 기능을 구현할 수 있다. Gatsby에서 Material UI를 사용하기 위해서는 gatsby-plugin-material-ui 플러그인을 설치해야 한다. 적용하는 방법이 조금 번거로운데, 새로운 플러그인(gatsby-plugin-top-layout)을 정의하고 그 플러그인이 gat.. Gatsby 블로그: 포스트에 카테고리 추가하기 gatsby-starter-blog 지난 포스트에서 설명한 gatsby-starter-blog를 기준으로 포스트에 카테고리를 추가하는 방법에 대해서 설명하려고 한다. 공식 문서에 Creating Tags Pages for Blog Posts라는 제목으로 비슷한 내용에 대한 설명이 있지만, 내 기준으로 처음 Gatsby를 접한 상태에서 보기에는 좀 어렵고 복잡했다. 그래서 카테고리 추가를 위한 최소한의 코드(?)를 소개하는 것을 목표로 포스트를 작성해보려고 한다. gatsby-transformer-remark gatsby-transformer-remark는 markdown 본문을 html코드로 변환하고, 해당 코드와 markdown에 포함된 여러 데이터를 우리가 사용하기 편리한 형태로 GraphQL에 추가.. 이전 1 2 3 다음
