Nimbus

FAQ나 상품 상세 정보 영역을 만들다 보면 아코디언 UI는 거의 빠지지 않고 등장한다. 보통은 이런 식으로 구현한다. button.addEventListener('click', () => { item.classList.toggle('is-open');}); 처음엔 간단하다. 그런데 "하나를 열면 나머지는 닫히게 해주세요", "키보드로도 동작해야 해요", "스크린리더에서 열림 상태를 읽어줘야 해요" 같은 요구사항이 붙기 시작하면 스크립트가 점점 길어진다. aria-expanded 값까지 직접 관리하다 보면 아코디언 하나에 생각보다 많은 손이 간다. 사실 HTML에는 이미 이 기능이 있다. 바로 와 다. 오래된 태그라 "그거 기본 화살표 못생긴 그 태그 아니야?" 하고 넘기기 쉽지만, 최근 몇 가지 기능..

Next.js는 React 위에서 동작하는 프레임워크다. React가 컴포넌트로 화면을 그리는 라이브러리라면, Next.js는 그 React로 실제 웹사이트를 만들 때 필요한 것들을 미리 갖춰놓은 도구다. 크게 두 가지를 대신 해준다. 하나는 라우팅이다. 리액트만 쓰면 react-router 같은 걸 따로 설치해서 경로와 컴포넌트를 직접 연결해야 하는데, Next.js는 폴더 구조만으로 이게 자동으로 된다. 다른 하나는 렌더링 방식이다. 리액트는 기본적으로 브라우저에서 화면을 그리는 CSR로 동작하는데, 이 경우 검색엔진이 빈 화면으로 인식하는 경우가 있다. Next.js는 서버에서 미리 그려서 보내는 SSR을 페이지 단위로 선택할 수 있게 해준다. 이 글에서는 이 두 가지를 중심으로, 프로젝트를 만드는..

컴포넌트를 나누다 보면 위에 있는 값을 한참 아래 컴포넌트에서 써야 할 때가 있다. props로 내려보내면 되지만, 단계가 깊어지면 값을 쓰지도 않는 중간 컴포넌트까지 props를 받아 넘기게 된다.이런 상황을 prop drilling이라고 한다. Context는 이 중간 단계를 건너뛰는 기능이다. prop drilling다크모드를 만든다고 해보자. 테마 값은 앱 전체가 쓰니까 App이 들고 있고, 정작 바꾸는 버튼은 헤더 안쪽에 있다.function App() { const [theme, setTheme] = useState("light"); return ;}function Layout({ theme, setTheme }) { return ;}function Header({ theme, setTh..