6주간 스터디하며 배운것들
6주간 진행한 스터디에서 얻은 것들
2022-10-21
1. Utility Type
Partial<T>
- T의 모든 프로퍼티를 선택적으로 만드는 타입
interface User {
name: string;
age: number;
}
function updateUser(user: User, fieldsToUpdate: Partial<User>) {
return { ...user, ...fieldsToUpdate };
}
const user1 = {
name: "been",
age: 30,
};
const user2 = updateUser(user1, {
age: 32,
});
Readonly<T>
T의 모든 프로퍼티를 읽기 전용으로 구성, 생성된 타입의 프로퍼티는 재할당 할 수 없다.
Record<K,T>
타입 T의 프로퍼티의 집합 K로 타입을 구성한다.
주로 다른 타입에 매핑시키는데 사용
interface PageInfo {
title: string;
}
type Page = "home" | "about" | "contact";
const x: Record<Page, PageInfo> = {
about: { title: "about" },
contact: { title: "contact" },
home: { title: "home" },
};
Pick<T,K>
T에서 K의 집합을 선택해 타입을 구성
Omit<T,K>
T에서 모든 프로퍼티를 가져온 다음 K를 제거한 타입을 구성
NonNullable<T>
T에서 null과 undefined를 제외한 타입을 구성
출처 : https://typescript-kr.github.io/pages/utility-types.html
2. Storybook 작성
3. npm 패키지 배포
https://www.npmjs.com/package/jci-moyeo-design-system
4. aria, role
웹 접근성(web accessibility)은 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킨다. 사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있다.
웹 표준은 월드 와이드 웹의 측면을 서술하고 정의하는 공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어이다. 최근에 이 용어는 웹 사이트를 작성하는 데 중요도가 높아지고 있으며 웹 디자인, 개발과 관계가 있다.
role="form"
<form>과 동일하게 사용
role="search"
검색 역할을 담당
role="button"
스크린리더에 버튼임을 알려주지만 버튼기능을 제공하지는 않기 때문에 <button>이나 <input type='button'>을 사용하는게 좋다.
role ="tablist"
**탭메뉴 등의 리스트임을 사용자에게 전달한다.
role="tab"
보조기기가 탭으로 인식
aria-required를 true로 지정해 해당요소가 필수적으로 입력되어야 함을 나타냄
<input {...} aria-required="true">
- 추가설명 속성 : div #reference의 내용을 input의 추가설명으로 사용
<input type="text" aria-describedby="reference">
<div id="reference">추가설명</div>
ex) "이메일을 입력하세요." 라는 추가적인 설명
- aria-label로 어떤 요소인지 라벨링할 수 있다.
<div role="group" aria-label="레이블">
- 유효한지 아닌지 구분
<input type="text" aria-invalid="true">
- 버튼 클릭상태와 비클릭상태
<button aria-pressed="true">
1) 태그와 중복되지 않게 사용한다.
<button role="button"> </button>
2) native요소의 의미, 기능 변경을 하지 않는다.
<h1 role="button">버튼</h1>
3) 키보드로 포커싱이 가능하게 설정한다.
<span role="button" tabindex="0">버튼</span>
특히 button으로 사용하는경우
aria-hidden="true"
스크린리더가 접근하지는 않지만, 이미지를 보여주고 싶은 경우
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles