리액트14 [Learning React] 10장 - 리액트 테스트 10.1 ESLint - ESLint: 최신 JS 문법을 지원하는 코드 Linter - Linter/Hinter; JS 분석 도구 - ESLint는 플러그인 추가 가능 - ESLint가 자동으로 Node.js 전역 변수 포함 X => 오류 표시 - eslint-plugin-react 플러그인; JS 외에 JSX와 리액트 문법 분석 - ESLint 플러그인 - eslint-plugin-react-hooks (필수) - 리액트 훅스와 관련된 규칙 추가 - 훅스 사용 관련 버그 수정 시 도움됨 - eslint-plugin-jsx-a11y - accessibility (접근성, a와 y 사이에 11글자) - 접근성; 웹사이트, 도구, 기술 등을 얼마나 쉽게 장애인분들이 사용할 수 있는지 의미 10.2 프리티어 .. 2022. 2. 2. [Learning React] 9장 - Suspense 9.1 오류 경계 - 오류 경계: 오류가 전체 앱을 망가뜨리지 못하게 막는 컴포넌트 - 프로덕션 환경에서 발생 원인과 위치를 알아보기 쉬운 오류 메시지를 표시할 때 도움이 됨 - 앱에서 발생할 가능성 있는 오류 추적 및 이슈 관리 시스템 등록 가능 - 클래스 컴포넌트를 사용하여 오류 경계 컴포넌트 만들기 가능 - 클래스 컴포넌트는 생명 주기에 따라 호출되는 구체적인 메서드 사용 가능 - ex. getDerivedStateFromError() - 프로덕션 앱에서 사용자를 유지하기 위해 필수적임 9.2 코드 분리하기 - 코드 분리: 코드 기반을 다루기 쉬운 덩어리로 나누고, 필요에 따라 불러오는 방식 - React.lazy를 사용하면 렌더링이 이뤄지는 시점까지 컴포넌트 load 늦출 수 있음 - 소개: Su.. 2022. 2. 2. [Learning React] 8장 - 데이터 포함시키기 8.1 데이터 요청하기 - 요청으로 데이터 보내기 - fetch로 파일 업로드하기 - multipart-formatdata 라는 다른 HTTP 요청을 보내야 함 - 서버에게 request body에 하나 이상의 파일이 들어가 있다고 알려줌 - 권한 요청 - 보통 사용자는 자신을 식별하도록 서비스가 부여한 유일한 토큰을 요청마다 덧붙여서 자신의 신원 표현 - 토큰은 Authorization 헤더에 추가됨 - 데이터를 로컬 스토리지에 저장하기 - window.localStorage - 데이터를 제거하기 전까지 무기한 보관 - window.sessionStorage - 데이터를 사용자 세션에만 저장 - 탭을 닫거나 브라우저를 재시작하면 데이터 사라짐 - 프라미스 상태 처리하기 - 프라미스 3가지 상태 - pe.. 2022. 2. 1. [Learning React] 7장 - 훅스로 컴포넌트 개선하기 7.1 useEffect 소개 - useEffect 훅 - useEffect 훅 안에 넣는 코드는 렌더링 직후에 실행한다는 의미 - Effect: 컴포넌트가 UI 렌더링 외에 수행해야 하는 일 - 렌더링이 이뤄질 때마다 렌더링 된 프롭, 상태, 참조 등의 최종 값에 접근 가능 - 렌더링이 끝난 이후에 발생하는 함수 - 의존 관계 배열 - 리액트는 상태가 바뀌면 컴포넌트 트리를 다시 렌더링함 - useEffect 훅이 쓸데없이 많이 호출되는 문제 발생 가능 - 의존 관계 배열 사용! - useEffect 훅을 구체적인 데이터 변경과 연동 - Effect가 호출되는 시점 제어 - 빈 의존 관계 배열은 초기 렌더링 직후 effect가 단 한 번만 호출됨 (초기화에 아주 유용) - useEffect 훅 안에서 .. 2022. 2. 1. 이전 1 2 3 4 다음 반응형