### 1\. Utility Type ```typescript Partial ``` \- T의 모든 프로퍼티를 선택적으로 만드는 타입 ```typescript interface User { name: string; age: number; } function updateUser(user: User, fieldsToUpdate: Partial) { return { ...user, ...fieldsToUpdate }; } const user1 = { name: "been", age: 30, }; const user2 = updateUser(user1, { age: 32, }); ``` --- ```typescript Readonly ``` T의 모든 프로퍼티를 읽기 전용으로 구성, 생성된 타입의 프로퍼티는 재할당 할 수 없다. --- ```typescript Record ``` 타입 T의 프로퍼티의 집합 K로 타입을 구성한다. 주로 다른 타입에 매핑시키는데 사용 ```typescript interface PageInfo { title: string; } type Page = "home" | "about" | "contact"; const x: Record = { about: { title: "about" }, contact: { title: "contact" }, home: { title: "home" }, }; ``` --- ```typescript Pick ``` T에서 K의 집합을 선택해 타입을 구성 ```typescript Omit ``` T에서 모든 프로퍼티를 가져온 다음 K를 제거한 타입을 구성 --- ```typescript NonNullable ``` T에서 null과 undefined를 제외한 타입을 구성 --- 출처 : [https://typescript-kr.github.io/pages/utility-types.html](https://typescript-kr.github.io/pages/utility-types.html) --- ### 2\. Storybook 작성 [https://been.tistory.com/58](https://been.tistory.com/58) --- ### 3\. npm 패키지 배포 [https://www.npmjs.com/package/jci-moyeo-design-system](https://www.npmjs.com/package/jci-moyeo-design-system) --- ### 4\. aria, role > 웹 접근성(web accessibility)은 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킨다. 사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있다. > 웹 표준은 월드 와이드 웹의 측면을 서술하고 정의하는 공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어이다. 최근에 이 용어는 웹 사이트를 작성하는 데 중요도가 높아지고 있으며 웹 디자인, 개발과 관계가 있다. ```typescript role="form"

과 동일하게 사용 ``` ```typescript role="search" 검색 역할을 담당 ``` ```typescript role="button" 스크린리더에 버튼임을 알려주지만 버튼기능을 제공하지는 않기 때문에 ``` **2) native요소의 의미, 기능 변경을 하지 않는다.** ```html

버튼

``` **3) 키보드로 포커싱이 가능하게 설정한다.** ```html 버튼 ``` 특히 button으로 사용하는경우 ```typescript aria-hidden="true" 스크린리더가 접근하지는 않지만, 이미지를 보여주고 싶은 경우 ``` [https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles)

6주간 스터디하며 배운것들

Category