React
Documents
접근성
표준 및 지침
WCAG
- Web Content Accessibility Guidelines는 접근성을 갖춘 웹사이트를 만드는 데 필요한 지침을 제공한다.
WAI-ARIA
- Web Accessibility Initiative - Accessible Rich Internet Applications 문서에는 접근성을 갖춘 JavaScript 위젯을 만드는 데 필요한 기술들이 담겨있다.
시맨틱 HTML
- 정보의 의미가 강조되는 HTML 엘리먼트를 웹 사이트에서 사용
- React Component 를 구성하고 동작하기 위해서만 사용을 위해 div 등의 태그로 의미없이 묶는 것보다 fragment 태그를 활용하자.(생략해서 <></>)
접근성 있는 폼
- 모든 HTML 폼 컨트롤은 구분할 수 있는 라벨이 필요
- 사용자들에게 오류 안내하기
포커스 컨트롤
- 모든 웹 애플리케이션은 키보드만 사용하여 모든 동작을 할 수 있도록 만들자
원하는 콘텐츠로 건너뛸 수 있는 방법 제시
- 사용자들의 애플리케이션 탐색 속도를 높일 수 있도록 이전 탐색영역으로 넘어갈 수 있도록 방법을 제시하고 aside, main 등의 엘리먼트로 영역을 나누어 탐색이 쉽도록 구성해야한다.
프로그래밍적으로 포커스 관리하기
- 프로그래밍적으로 키보드 포커스를 올바른 방향으로 변경해주어야한다.
- 사용자의 사용 흐름을 예측하여 프로그래밍적으로 focus를 흐름에 맞게 맞추어 주도록 해야한다.
- React 에서는 ref를 생성하여 focus를 맞춰 줄 수 있다.
마우스와 포인터 이벤트
- 마우스 혹은 포인터 이벤트로 노출된 모든 기능을 키보드만으로 사용할 수 있도록 보장해야 한다.
더욱 복잡한 위젯
- 각각의 위젯 타입은 명확한 디자인 패턴이 있으며, 사용자와 사용자 에이전트 모두 특정 방향으로 기능하는 것이 요구된다.
기타 고려사항
- 언어 : 스크린 리더 소프트웨어들이 올바른 음성을 선택할 수 있도록, 페이지 텍스트에 인간 언어(human language)를 나타내야 한다.
- 문서 제목 설정 : 문서의
<title>이 현재 페이지에 대한 올바른 설명을 담아야 한다. - 색 대비 : 읽을 수 있는 모든 글에 충분한 색 대비를 주어, 저시력 사용자들이 최대한 읽을 수 있도록 해야한다.
개발 및 테스트 도구
- 키보드 : 사이트 전체가 키보드만으로도 사용될 수 있는지 테스트
- 개발 보조 도구를 통한 테스트
코드분할
번들링
- 대부분 React 앱들은 Webpack, Rollup 또는 Browserify 같은 툴을 사용하여 여러 파일을 하나로 병합한 “번들 된” 파일을 웹 페이지에 포함하여 한 번에 전체 앱을 로드 할 수 있다.
코드 분할
- 번들을 나누어 번들이 거대해지는 것을 방지
import( )
- 동적 import 사용
import("./math").then(math => {
console.log(math.add(16, 26));
});- Webpack이 이 구문을 만나게 되면 앱의 코드를 분할한다.
React.lazy
- lazy 컴포넌트는 Suspense 컴포넌트 하위에서 렌더링되어야 하며, Suspense는 lazy 컴포넌트가 로드되길 기다리는 동안 로딩 화면과 같은 예비 컨텐츠를 보여줄 수 있게 한다.
Route-based code splitting
Named Exports
Context
- context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법
// context를 사용하면 모든 컴포넌트를 일일이 통하지 않고도
// 원하는 값을 컴포넌트 트리 깊숙한 곳까지 보낼 수 있습니다.
// light를 기본값으로 하는 테마 context를 만들어 봅시다.
const ThemeContext = React.createContext('light');
class App extends React.Component {
render() {
// Provider를 이용해 하위 트리에 테마 값을 보내줍니다.
// 아무리 깊숙히 있어도, 모든 컴포넌트가 이 값을 읽을 수 있습니다.
// 아래 예시에서는 dark를 현재 선택된 테마 값으로 보내고 있습니다.
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
}
// 이젠 중간에 있는 컴포넌트가 일일이 테마를 넘겨줄 필요가 없습니다.
function Toolbar() {
return (
<div>
<ThemedButton />
</div>
);
}
class ThemedButton extends React.Component {
// 현재 선택된 테마 값을 읽기 위해 contextType을 지정합니다.
// React는 가장 가까이 있는 테마 Provider를 찾아 그 값을 사용할 것입니다.
// 이 예시에서 현재 선택된 테마는 dark입니다.
static contextType = ThemeContext;
render() {
return <Button theme={this.context} />;
}
}Error Boundary
Ref 전달하기
Fragment
🏃🏽 동적인 개발자