웹 접근성(스크린리더) ❓상황 스크린 리더에 탐지되지 않게 하는 방법을 강의로 처음 접하게 되었고, 이를 학습하여 정리하였음. 📖 스크린리더란? 스크린리더는 컴퓨터의 화면을 다양한 언어로 음성으로 표현하는 것을 뜻한다. 흔히, 트위치에서 스트리머에게 후원을 할때 후원 텍스트를 기계가 읽어주는 것을 생각하면 된다. 🧮 정리 HTML : aria-hidden aria-hidden 속성은 HTML Tag 요소의 속성으로 사용된다. aria-hidden 속성이 입력된 HTML Tag가 접근성 API에 노출되었는지 여부를 나타낸다. 접근성 API에 노출이 되었다면, 스크린리더가 음성으로 표현할 수 있고, 반대로 접근성 API에 노출이 되지 않았다면, 스크린리더가 음성으로 표현할 수 없다. 😤 제목입니다. 예시로 ..

상태관리 라이브러리 ❓상황 가장 많이 쓰이는 상태관리 라이브러리인 Redux의 최신버전인 Redux Toolkit을 정리하기 위함 📖 Redux Toolkit 이란? 상태를 저장하는 파일을 따로 분리하여 관리할 수 있다. 여러 컴포넌트를 거치지 않아도, 상태가 필요한 컴포넌트에 곧바로 상태를 줄 수 있다. Redux Toolkit 패키지는 Redux 로직을 작성하는 표준 방법이 되도록 고안되었습니다. 원래 reducour에 대한 세 가지 일반적인 우려를 해결하기 위해 만들어졌다. "Redux 스토어 구성이 너무 복잡합니다." "Redux가 유용한 작업을 수행하기 위해서는 많은 패키지를 추가해야 합니다." "리듀스에는 너무 많은 보일러 플레이트 코드가 필요합니다." 🐸 설치 CRA + Redux # Red..

리액트 데이터 패칭 라이브러리 ❓상황 Next.js CSR에서의 데이터 패칭하는 방법을 배우기 위해, swr를 학습하고 정리함. 📖 swr 이란? "SWR"이라는 이름은 HTTP RFC 5861에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revalidate에서 유래되었습니다. SWR은 먼저 캐시(스태일)로부터 데이터를 반환하여 UI를 만들고, 데이터 fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져와 UI에 표시하는 전략입니다. 네트워크 재연결되거나, 뷰포트가 클릭되면 다시 데이터 패치가 발생합니다. 쉽게 말하자면, 사용자의 노트북이 대기상태에서 깨어나거나, 브라우저 탭을 전환할 때 자동으로 데이터 패치가 발생합니다. 🐸 설치 yarn add swr 🚀 빠른 시작! ..

리액트 상태관리 라이브러리 ❓상황 러닝 커브가 쉬운 리액트 상태관리인 Recoil을 공부하고 정리하기위함. 📖 Recoil 이란? Recoil을 사용하면 atoms (공유 상태)에서 selectors (순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있다. Atoms는 컴포넌트가 구독할 수 있는 상태의 단위다. Selectors는 atoms 상태값을 동기 또는 비동기 방식을 통해 변환한다. 사용률은 낮지만, React를 만든 Facebook에서 만든 상태관리 라이브러리이다.(리액트가 사장될때까지 지원이 된다!) 🐸 설치 yarn add recoil 🧮 정리 RecoilRoot recoil 상태를 사용하는 컴포넌트는 부모 트리 어딘가에 나타나는 RecoilRoot ..

SSG 기반 웹사이트 구현하기 ❓상황 SSG기반으로 웹사이트를 구현하기위해 사용하는 next.js를 확실하게 공부하고 싶어서 정리하게 되었음. 📖 next.js 이란? Next.js는 빠른 웹 응용 프로그램을 만들 수 있는 구성 요소를 제공하는 유연한 React 프레임워크입니다. 웹사이트를 구현할때, 고려할 사항은 다음과 같습니다. 사용자 인터페이스 - 사용자가 응용프로그램을 사용하고 상호 작용하는 방식. 라우팅 - 사용자가 응용프로그램의 다른 부분을 탐색하는 방법. 데이터 가져오기 - 데이터가 저장되는 위치와 데이터를 가져오는 방법. 렌더링 - 정적 또는 동적 콘텐츠를 렌더링할 때와 장소를 지정합니다. 통합 - 사용하는 타사 서비스(CMS, 인증, 결제 등) 및 이러한 서비스에 연결하는 방법. 인프라 ..