\(@^0^@)/

예전에 추천받아서 구매했던 책인데, 한 장도 읽지 않고 구매와 동시에 빳빳한 상태로 책장에 바로 꽂아 두었다가 최근에 진행하는 프로젝트의 리팩터링과 사용성을 생각해 보니, 해당 책이 떠올라서 읽게 되었음. (사용자를) 생각하게 하지 마! 웹과 모바일 사용성 원칙으로 디자인하는 UX 스티브 크룩 지음, 이미령 옮김 스티브 크룩의 사용성 제1원칙 : 사용자를 고민에 빠뜨리지 마라! 사용자가 사이트를 보며 고민하지 않고 명확하게 해결할 수 있어야 된다. 즉, 자명하게 이해되는 페이지, 아니면 최소한 설명이 없어도 이해할 수 있는 페이지를 만들어야 한다. 우리가 실제 웹을 사용하는 방법 사용자는 웹 페이지를 읽지 않는다, 훑어본다. 웹은 도구에 불과하다, 필요 이상의 것을 읽을 시간이 없다. 모든 것을 읽을 필..

TypeError: Cannot read properties of null (reading 'useContext') Admin page에서 처음에 모든 userList를 받아오고, 원하는 user를 클릭할 경우 detail component가 나타난다. 해당 컴포넌트에서 user의 info를 더 자세히 확인하고 수정, 삭제할 수 있도록 구현할 예정이었음. 그렇다면 이제 TypeError가 뜬 시점을 알아보자. admin 부모 컴포넌트와 자식 컴포넌트인 userList, userInfo컴포넌트가 있는 구조이다. (userList와 userInfo는 형제 컴포넌트 인 셈.) admin component에 state를 생성하고, userList에서 원하는 user를 클릭하면 해당 user의 id를 admin ..

Axios Interceptor 어떤 api 요청을 하는 과정에서 만료된 refreshToken으로 인해 요청이 거부된 경우에는 어떻게 해야 할까? axios interceptor를 활용하여 refreshToken을 재생성 후 다시 원하는 api 요청을 시도할 수 있다. 즉, 사용자의 accessToken이 만료되었다면 자동적으로 로그아웃 돼서 다시 로그인을 요청하는 것이 일반적인 루트인데, 지난 포스팅의 usefreshToken 커스텀 훅과 Axios Interceptor를 활용하여, accessToken이 만료됐다면 새로운 token을 생성해서 기존의 token에 덮어 씌운다. 이렇게 될 경우 사용자는 token이 만료되었는지, 새로운 token으로 덮어 씌웠는지 알지도 못하고, 알 방법도 없다. t..