node + Express 서버에 리엑트 프로젝트 띄우기

node.js로 웹 서버 만들기 1. node.js 설치 2. 작업폴더 만든 후 에디터로 오픈 3. server.js 파일 만들고 아래 코드 작성 const express = require('express'); const path = require('path'); const app = express(); app.listen(8080, function(){ console.log('listening on 8080'); }); 4. 터미널 열어서 npm init -y 입력 5. npm install express 입력 이렇게 하면 웹 서버 만들기 끝 서버 미리보기를 띄우고 싶으면 터미널에 nodemon server.js 입력 nodemon이 설치되어 있지 않다면 node server.js 입력 리액트 프로젝트..

2023.02.25

[CSS] 웹 접근성을 고려한 .blind .hidden 처리

스크린리더와 브라우저별, 그리고 매해 업데이트 되는 내용들 때문에 여간 웹 접근성을 지키며 블라인드 처리하기가 쉽지 않다. 그래서 '이 방법 으로 해결될 수 있습니다~' 라는 방법은 아직 없다고 봐야 한다. 이 글에서 잘못 쓰이고 있는 blind 처리 방법들과, 해외의 훌륭하신 분들이 다수의 리딩 테스트를 거쳐 공개한 코드들을 소개한다.  대체 텍스트(숨긴 텍스트)는 언제 사용할까?화면상에는 나타나지 않지만 구조성 숨겨진 제목을 넣어줘야 하는 경우디자인상 아이콘을 사용하면서 적절한 대체 텍스트(숨긴 텍스트)를 제공해줘야 하는 경우 잘못된 방법1. 화면상 영역을 지니지 않게 하는 방법.hidden{display:none;}// 또는.hidden{visibility:hidden;}우선, 기본적으로 displ..

2023.02.24

vanilla JS로 siblings 구현하기

jQuery의 메소드 중 하나인 siblings()는 선택한 자신 요소를 제외한 형제 요소들을 모두 고르는 메소드다. 이를 바닐라 자바스크립트로 구현하려면 filter() 를 사용해 비교적 간단하게 구현할 수 있다. 예제코드 HTML one two three jQuery $(".one").siblings(); JavaScript const siblings = (el) => [...el.parentElement.children].filter(node => node != el); const one = document.querySelector('.one'); console.log(siblings(one)); // 함수에 엘리먼트를 넣으면 그 엘리먼트의 형제 요소들을 배열로 반환한다. // > (2) [li.t..

2023.02.13

WAI-AREA 실무 예제 코드로 적용하기

WAI-ARIA는 HTML의 접근성 문제를 보완하는 W3C 명세입니다. WAI-ARIA는 HTML 요소에 role 또는 aria-* 속성을 추가하여 컨텐츠의 '역할(roles), 상태(states), 속성(properties)' 정보를 보조기기에 제공합니다. WAI-ARIA 속성을 모든 HTML 요소에 무분별하게 사용할 수 있는 것은 아닙니다. role 또는 aria-* 속성을 특정 HTML 요소에 사용할 수 있는지 ARIA in HTML 명세를 검토하면서 적용해야 합니다. ARIA in HTML : https://www.w3.org/TR/html-aria/ 0. 선택된 요소를 표현하는 방법으로 ::after WAI-ARIA를 사용할 수 없는 경우, 선택된 요소를 표현하는 방법으로 ::after 를 이용..

2023.01.28

WAI-ARIA 요소 - TreeView

트리뷰의 정의 - TreeView가 뭔가요? 트리뷰(TreeView)는 한글로 단순하게 풀어보면 "나무 구조로 보기" 정도로 해석됩니다. 이름 그대로 나무처럼 한 줄기에서 여러 개의 가지로 나뉘는 세로 막대 형태로 나열된 항목의 목록을 말합니다. 어디서 볼 수 있는 요소인가요? windows의 UI를 상속받아서 사용하는 응용 프로그램에서 주로 볼 수 있습니다. 멀리 가지 않고, Logo + E 를 눌러 탐색기 (explorer)를 열면 따로 보이지 않게 설정하지 않았다면 기본값으로 탐색기 좌측에 있는 폴더 디렉토리를 이동하는 트리뷰를 볼 수 있습니다. 보이지 않는다면, 탐색기의 윗 부분에 있는 리본 탭에서 "보기"를 선택하고, 가장 왼쪽에 있는 "탐색 창" 메뉴를 확장하여 "탐색 창" 항목을 활성화해보세..

2023.01.24

WAI-ARIA 요소 - aria-roleDescription

aria-roledescription 소개 aria-roledescription은 이름에서 바로 기능을 알 수 있듯이, 요소 역할(role)의 역할을 커스터마이징하여 전달하는 것입니다. 가을 난방 30% 할인 aria-roledescription은 WAI-ARIA 1.1 부터 추가된 WAI-ARIA의 속성으로, 이미 정해진 요소의 역할을 더 명확하게 만드는데 사용합니다. 이미지를 예로 들면 단순한 그래픽이 아니라, "thumbnail graphic"처럼, 무엇에 사용하는 이미지인지 정확히 사용자에게 알려주고자 할 때 사용하는 것 입니다. 이 외에는 HTML5 에서 따로 정의하진 않았지만, 익히 알려진 영역이나 위젯의 역할을 안내하고자 할 때 사용합니다. aria-roledescription의 문제점 ar..

2023.01.24