공부 | HTML, CSS 웹 접근성(스크린리더) 정리
2022. 10. 11. 18:52
공부/프론트엔드
웹 접근성(스크린리더) ❓상황 스크린 리더에 탐지되지 않게 하는 방법을 강의로 처음 접하게 되었고, 이를 학습하여 정리하였음. 📖 스크린리더란? 스크린리더는 컴퓨터의 화면을 다양한 언어로 음성으로 표현하는 것을 뜻한다. 흔히, 트위치에서 스트리머에게 후원을 할때 후원 텍스트를 기계가 읽어주는 것을 생각하면 된다. 🧮 정리 HTML : aria-hidden aria-hidden 속성은 HTML Tag 요소의 속성으로 사용된다. aria-hidden 속성이 입력된 HTML Tag가 접근성 API에 노출되었는지 여부를 나타낸다. 접근성 API에 노출이 되었다면, 스크린리더가 음성으로 표현할 수 있고, 반대로 접근성 API에 노출이 되지 않았다면, 스크린리더가 음성으로 표현할 수 없다. 😤 제목입니다. 예시로 ..
오류 | props.children type(ft. react, typescript)
2022. 9. 16. 00:05
공부/오류
'{}' 형식에 'children' 속성이 없습니다. '{ children: Element; }' 유형에 'IntrinsicAttributes' 유형과 공통적인 속성이 없습니다. ❓상황 props.children type을 지정하기 위해, React.FC ( = FunctionComponent)을 사용할 때 발생한 오류 🔎 원인 파악 React.FC ( = FunctionComponent) 에 children type을 가지고 있지 않아서 발생한 오류 ✨ 해결 방법 PropsWithChildren을 type으로 사용한다.
오류 | mySQL load data infile 오류
2022. 8. 23. 13:18
공부/오류
Error Code: 1290. The MySQL server is running with the --secure-file-priv option so it cannot execute this statement ❓상황 mySQL workbench에서 load data infile 쿼리를 실행했을때 발생한 오류 🔎 원인 파악 mySQL에서는 기본적으로 파일을 로드할때, 지정된 경로에서만 로드되도록 설정되어 있다. mySQL 8.0 Command line Client 를 실행하고, show variables like 'secure_file_priv'를 입력하면 경로를 확인 할 수 있다. 내 .CSV 파일은 해당 경로가 아닌, 다른 경로에 있고 이를 mySQL에서 load해서 에러가 발생한 것이다. ✨ 해결 방..
공부 | Redux Toolkit 정리
2022. 8. 12. 03:18
공부/프론트엔드
상태관리 라이브러리 ❓상황 가장 많이 쓰이는 상태관리 라이브러리인 Redux의 최신버전인 Redux Toolkit을 정리하기 위함 📖 Redux Toolkit 이란? 상태를 저장하는 파일을 따로 분리하여 관리할 수 있다. 여러 컴포넌트를 거치지 않아도, 상태가 필요한 컴포넌트에 곧바로 상태를 줄 수 있다. Redux Toolkit 패키지는 Redux 로직을 작성하는 표준 방법이 되도록 고안되었습니다. 원래 reducour에 대한 세 가지 일반적인 우려를 해결하기 위해 만들어졌다. "Redux 스토어 구성이 너무 복잡합니다." "Redux가 유용한 작업을 수행하기 위해서는 많은 패키지를 추가해야 합니다." "리듀스에는 너무 많은 보일러 플레이트 코드가 필요합니다." 🐸 설치 CRA + Redux # Red..
공부 | swr 정리(ft. react)
2022. 8. 4. 02:03
공부/프론트엔드
리액트 데이터 패칭 라이브러리 ❓상황 Next.js CSR에서의 데이터 패칭하는 방법을 배우기 위해, swr를 학습하고 정리함. 📖 swr 이란? "SWR"이라는 이름은 HTTP RFC 5861에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revalidate에서 유래되었습니다. SWR은 먼저 캐시(스태일)로부터 데이터를 반환하여 UI를 만들고, 데이터 fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져와 UI에 표시하는 전략입니다. 네트워크 재연결되거나, 뷰포트가 클릭되면 다시 데이터 패치가 발생합니다. 쉽게 말하자면, 사용자의 노트북이 대기상태에서 깨어나거나, 브라우저 탭을 전환할 때 자동으로 데이터 패치가 발생합니다. 🐸 설치 yarn add swr 🚀 빠른 시작! ..