어떻게하면 더욱 더 많은 사람들이 우리의 웹서비스를 이용 하게 만들 수 있을까?

인터넷을 이용하는 사람들 중에서 서로 각각 다른 환경에서 사용하는 경우가 많다.

예를들어, 키보드로만 웹서비스를 사용하는 사람이 있을것이고, 스크린리더기로 웹서비스를 사용하는 사람이 있을것이다. 이 모든 사람들에게 우리의 웹서비스를 이용 할 수 있게 만드는것이 핵심이다.

스크린리더기와 같은 보조적인 기술을 사용하여 웹서비스를 이용할때, 브라우저의 컨텐츠를 이용해야하는데 이때 DOM tree에 직접적으로 접근하여 interact를 하지않으며, 대신에 Accessibility tree를 사용하여 interact를 하게된다.

접근성에 초점이 맞춰진 컨텐츠를 포함한 트리

스크린리더기가 이해할 수 있게 만들어진 트리

대표적으로 name, description, role, state 4가지의 프로퍼티가 존재한다

descriptive 한 content를 사용하며 alt 프로퍼티를 사용한다

마우스없이 키보드로만도 적절하게 웹서비스 이용이 가능하게 하도록 한다.\

일반적으로는 semantic tag를 적절하게 사용하는 것만으로 충분하다. 하지만 가끔씩 웹서비스가 복잡해질수록 좀 더 구체적일 필요성이 있을 수가 있는데, 그때 WAI-ARIA 를 사용할 수 있다.

Web Accessibility Initiative 의 약자이다

개발자가 의도한 유저 행동이나 추가 정보를 스크린 리더기와 같은 보조 기술에 전달하여 더욱 더 향상된 웹접근성을  제공한다

<ol role="tablist">
  <li id="tab1" role="tab" aria-controls="panel1" aria-selected="true">Tab1</li>
  <li id="tab2" role="tab" aria-controls="panel2" aria-selected="false">Tab2</li>
  <li id="tab3" role="tab" aria-controls="panel3" aria-selected="false">Tab3</li>
</ol>

<div role="tabpanel" id="panel1" aria-labelledby="tab1">
  <p>
    Panel 1
  </p>
</div>

<div class="hidden" role="tabpanel" id="panel2" aria-labelledby="tab2">
  <p>
    Panel 2
  </p>
</div>

<div class="hidden" role="tabpanel" id="panel3" aria-labelledby="tab3">
  <p>
    Panel 3
  </p>
</div>

Axios를 활용해서 네트워크 요청 및 응답 처리 전에 특정 로직 만들어보기

Axios 인터셉터로 응답 및 요청 관리하기

Nest.js의 중요 개념인 의존성 주입과 IoC컨테이너 알아보기

의존성 주입과 IoC컨테이너

Nest.js의 작동 원리와 핵심 구성 요소 (Service, Module, Controller) 알아보기

Nest.js의 작동 원리와 핵심 구성 요소

JavaScript 컴파일러를 만들거나 배움으로써 인사이트는 무엇일까??

JavaScript 컴파일러에 대한 이해

React 18 버전에서의 주요 업데이트 사항은 무엇인가?

React 18의 주요 변경 사항

코드에만 집중 할 수 있게 해주는 서버리스!

서버리스 아키텍처: 미래의 웹 개발 패러다임

브릿지를 사용한 React Native의 아키텍쳐에서 JSI를 사용한 새로운 아키텍쳐

리액트 네이티브의 새로운 아키텍쳐 ( JSI ) 

worker스레드를 사용하여  무거운 로직 최적화 시키기

Web Workers

event-driven programming의 간단한 정의와 자바스크립트에서 쓰이는 상황에 대한 설명

Event-Driven Programming

선택자 명시도를 사용하여 CSS 우선순위 정하기

Selector Specificity

속성 선택자에서 구문을 사용하여 조금 더 유연하게 스타일링 하는 방법

속성 선택자

자식 요소를 선택하는 가상클래스인 nth-of-type과 nth-child 알아보기

nth-of-type vs nth-child

CSS의 4가지 결합자들 ( space, >, +, ~ ) 알아보기

CSS Combinators

WAI-ARIA를 사용한 웹접근성 향상시키기

웹접근성 향상시키 (feat : WAI-ARIA)

웹접근성을 높이는 semantic tag들의 종류 살펴보기

Semantic HTML

Event Target Class를 사용하여 이벤트 등록, 삭제 그리고 dispatch까지 사용해보기

Event Target Class 만들어보기

과거 상태값들을 기록하여 트랙킹이 가능한 useStateWithHistory 커스텀 훅

useStateWithHistory 커스텀 훅

서버 데이터를 fetch하고 loading과 error상태값을 편리하게 관리하는 useFetch 커스텀 훅

useFetch 커스텀 훅 만들기 (feat : reducer )

how to specify the order of “ol” element

how to use counter property of “ol” element

This is about the DOCTYPE Declaration at the first line of HTML file

What is the DOCTYPE Declaration in HTML?

Adapter Pattern, which is one of design pattern

Adapter Pattern

one of design patterns, called facade pattern

Facade Pattern 

Filtering data effectively using the GroupBy function

How to Make Array Grouping in Typescript

Basic and Useful React Custom Hooks. useToggle, useTimeout, useUpdateEffect, useDebounce

Basic and Useful React Custom Hooks

Newly introduced hook, “useTransition” at React 18

React 18 useTransition Hook

Nest.js에서 편리하게 Authorization Guard하는 방법 알아보기

Authorization Guard 하는 방법

nest.js의 custom decorator를 사용하여 request header 의 authorization jwt 유연하게 받아오기

Custom decorator를 사용하여 header에 있는 jwt 받아오기

Nest.js에서 Dto를 사용하여 nested object validation 하는 방법

객체안에 객체가 있는 nested object validation 하는 방법

Nest.js에서 요청이 들어왔을때 적절한 데이터인지 확인하는 validation과 원하는 데이터 형식으로 변형 시키는 transform 작업해보기

Nest.js에서 dto를 사용하여 validation과  데이터 변형 시켜보기

타입스크립트에서 간단하게 객체 데이터 업데이트 하는 방법

간단하고 빠르게 객체 데이터 업데이트 하는 방법

타입스크립트에서 Inteface의 내부에 있는 값을 타입으로 정의하는 방법

Interface에서 어떠한 key의 value를 타입으로 만드는 방법

타입스크립트에서 유니온타입을 받아 타입 가드 하는 방법

Union Type Guard 하는 방법

프로그래머스 - 자료수고 해쉬테이블을 사용한 베스트 앨범 문제

프로그래머스에서 베스트 앨범 풀어보기

Leetcode에서 Symmentric Tree 문제 풀어보기

LeetCode에서 Symmentric Tree 풀어보기

트리구조의 탐색 방법인 중위 순회를 이용하여 node의 순서 가져오기

LeetCode에서 Binary Tree Inorder Traversal 문제 풀어보기

DP를 이용하여 LeetCode에서 Climbing Stairs 문제 풀어보기

Leetcode에서 Climbing Stairs 문제 풀어보기

카데인 알고리즘을 사용하여 최대 부분합 문제 풀어보기

Leetcode에서 Maximum Subarray 풀어보기

이진 탐색을 이용하여 Search Insert Position 풀어보기

Leetcode에서 Search Insert Position 풀어보기

타입스크립트를 사용하여 LeetCode의 Merge Two Sorted Lists 풀어보기

LeetCode에서 Merge Two Sorted Lists 풀어보기

stack 자료구조를 사용하여 Typescript로 LeetCode로 올바른 괄호 문제 풀어보기

LeetCode의 올바른 괄호문제 풀어보기

타입스크립트로 LeetCode에서 Two Sum 문제 풀어보기

LeetCode에서 Two Sum풀어보기

단일 숫자에 대한 소수구하기와 특정 숫자 범위의 소수들 구하기 공식 함수 알아보기

소수 구하기 공식

display:grid 사용시 자식 요소들의 크기를 단순히 1fr로 줬을대 white-space: nowrap가 먹히지 않아 발생하는 이슈에 해결법 알아보기

display:grid 사용시 text가 nowrap이 안되는 이슈 해결 방법

마린파울러 리팩터링을 읽고 클린코드 짜기 실습해보기(2/2)

마틴파울러의 리팩터링 개정 2판과 함께 클린코드 잘짜는법 배워보자!!(2/2)

마린파울러 리팩터링을 읽고 클린코드 짜기 실습해보기(1/2)

마틴파울러의 리팩터링 개정 2판과 함께 클린코드 잘짜는법 배워보자!!(1/2)

가능하면 Enum보다 Union Type을 사용하는것이 좋은 이유 알아보기

꼭 Enum을 사용해야하는 경우가 아니라면 union 타입을 사용해야하는 이유!!

Interface를 사용할때 type guard를 하는 방법에 대해서 간단하게 2가지 예시를 통해서 알아보기

Interface type guard 하는 방법

변수로 정규표현식을 만드는 방법 알아보기 

변수로 정규표현식 처리하는 방법

Typescript에서 여러개의 객체를 상속받을 수 있게 도와주는 Mixin 패턴에 대해 알아보기

타입스크립트에서 여러 객체를 상속받을 수 있는 Mixin 패턴을 알아보자!

프론트엔드 성능을 최적화 시켜줄 8가지 방법 알아보기

프론트엔드 성능 최적화를 시켜줄 8가지 방법!!

esbuild를 사용하여 CRA를 사용하지 않고 처음부터 react 프로젝트 구축해보기

esbuild로 react app 만들어보기!

Next.js 내 동적라우팅 정적페이지를 만들때 사용되는 getStaticPaths 메서드와 같이 사용되는 fallback 프로퍼티에 알아보기

getStaticPaths와 fallback 프로퍼티를 알아보자!!

여러 경우의수의 매개변수를 받을 수 있게 도와주는 함수 오버로딩(overloading)에 대해 알아보기

타입스크립트 Function Overloading을 알아보자! 

페이스북 댓글 플러그인 블로그에 적용시켜보기

Next.js 에서 facebook comments plugin 적용해보기

react-testing-library를 사용하여 간단한 예제코드들 살펴보기

react-testing-library를 사용하여 간단한 테스트 코드 작성해보기

Intersection Observer을 사용하여 lazy loading을 통한 최적화 방법 알아보기

Intersection Observer를 사용하여 lazy loading 해보기

React에서 Skeleton 컴포너틑 적용하는 방법 알아보기

HooneyLog

웹접근성 향상시키 (feat : WAI-ARIA)

Accessibility Tree란?

접근성이 좋은 HTML 만들기

WAI-ARIA

ARIA를 적용시킨 예제