`프론트엔드 개발자` 개형이의 벽돌집

이번에는 Chrome 114 에서 팝오버 Popover API 브라우저에서 제공해준다고 하여 이 것에 대해 알아볼 계획이다. 새로운 팝오버 API는 어떻게 사용할 수 있을까? Day 3 ㄱㅂㅈㄱ~! 팝오버 Popover 란? What is popover? 1. 팝오버는 "메뉴, 토글 팁, 대화 상자(dialog)에서 볼 수 있으며, 계정 설정, 정보 표시 위젯, 제품 카드 미리 보기 등의 형태로 나타나는 컴포넌트" 이다. 팝오버를 구현하기 위해서는 꽤 많은 것을 신경써야 한다. "포커스, 열기 및 닫기 상태, 컴포넌트에 액세스 가능한 훅, 진입 및 종료를 위한 키보드 바인딩" 등등.. 팝오버 기능을 제공하는 라이브러리나 UI 라이브러리 (Material UI, antd, etc..)가 있긴 하지만, 브라..

리액트 18 버전과 함께 등장한 동시성 적용에 대해 학습해보고자 한다. 아직 실무에서 적용해본 적은 없는 내용이라 배움에 상당한 기대가 된다. Day 2 스탓뚜! 리액트 동시성 (Concurrency) 살펴보기 1. 동시성이란? 리액트는 기본적으로 다음 뷰를 렌더링할 때 UI를 Blocking 했었다. UI를 블로킹.. 말 그대로 다음 뷰를 렌더링하는 동안 블로킹이 걸려 현재 뷰의 어떤 동작을 수행할 수 없는 것이다. 만약 어떤 컴포넌트 Rendering에 시간이 오래 소요된다면, 기다리는 동안 다른 것을 클릭할 수 없을 것이다. 오래 걸린다고 해서 중단하고 싶어도 중단할 수도 없을 것이다. 하지만 동시성이 적용된다면?! 다음 뷰를 렌더링하는 동안 현재 뷰의 반응성을 유지가 가능해진다. 이를 통해 오래걸..

프론트엔드 지식에 대한 인사이트를 해보고 기록해보는 학습을 시작해보기로 했다. 죽은 내 블로그를 살려보고자...!! 🤡 그럼 지금부터 스탓뚜! (시작이 반이니까 반 했다 ㅎㅎ) 리액트의 Best Practices 살펴보기 1. 파일 유형별로 디렉토리를 구성하지 말고 기능별로 그룹화 하라. 위 이미지처럼 구성 요소의 js 파일이나 css 파일을 더 간단하게 찾을 수 있다고 한다. 이 것에 대해선 전적으로 동의한다. css를 잔뜩 묶어 놓은 프로젝트를 만난 적이 있는데 찾는게 꽤나 힘들었다! 2. 컴포넌트를 작은 단위로 쪼개어 유지, 이해, 테스트가 쉽게 만들자. 예를 들어 UserProfile 컴포넌트가 작업 중에 커진다고 생각했을 때 ProfilePicture.tsx, UserName.tsx 과 같은 식..