🚤 성장일지 7.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?<br/> 성장하고 있는 것이 살아 있는 것이다.<br/> 생명의 유일한 증거는 성장이다!

⚛ (7.0)<완전 개편> 파인만 학습법을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다.

⚛️ 키워드: 직관적이고 쉽고 간단하게 작성

html의 tabindex

html의 tabindex는 키보드로 포커스를 이동할 수 있는 요소를 지정하는 속성이다. 이 속성을 사용하면 키보드로 포커스를 이동할 수 있는 요소를 지정할 수 있다. 이 때, tabindex의 값은 숫자이며, 0이면 포커스를 받을 수 있고, -1이면 포커스를 받을 수 없다. 또한, 숫자가 클수록 우선순위가 높다. 그러나 mdn에서는 0보다 큰 숫자 사용을 지양할 것을 권장하고 있다. (유저에게 있어 UX적으로 더 혼란을 줄 수 있기 때문이다.)

React에서 특정 element를 ref로 참조하고 해당 element에 포커스를 주고 싶을 때, element.focus()를 사용하면 된다. 그런데 이 때, 만약 element가 focus가 되지 않는다면 tabindex를 0으로 설정해주면 된다.

Context API

React의 Context API를 사용하면 tanstack-query만큼은 아니지만 Provider를 통해 캐싱 처리를 할 수 있다. 이에 대해서는 따로 글을 작성해서 자세 작성해볼 예정이다!

CacheStorage

매번 브라우저단에 데이터를 저장할 때, localStorage 혹은 sessionStorage를 사용했었다. 이번에 팀 미션으로 캐싱을 다시 구현하면서 CacheStorage를 처음 접했다. 앞의 2개와 큰 차이점은 브라우저의 캐시를 사용한다는 것이다. 즉, 브라우저의 캐시를 사용하면 브라우저가 알아서 캐싱을 관리해주기 때문에 우리가 직접 캐싱을 관리할 필요가 없다. 또한, 캐시를 사용하면 브라우저가 알아서 캐시를 삭제해준다. (localStorage는 우리가 직접 삭제해줘야 한다.) 또, 동기적으로 작동하는 localStorage와 달리 비동기적으로 작동한다는 점도 큰 차이점이다.(블로킹이 없다는 의미)

📝 회고

오늘도 열심히 미션을 구현하고 해결했다. 나름 잘 알고 있다고 생각했던 부분들에서도 새로운 게 많아서 참... 개발 공부는 하면 할수록 재미있다. 뭔가 두근거리게 하는 게 있다고 해야하나...ㅋㅋㅋㅋㅋ 이제는 조금 리액트로 프로젝트를 하는 게 익숙해져가는 것 같다. 더 즐겁게 개발하고 더 행복한 삶을 살자!

참고

undefined