러닝 리액트12 [Learning React] 12장 - 리액트와 서버 (마지막) 12.1 아이소모피즘과 유니버설리즘 비교 - isomorphic; 브라우저가 아닌 플랫폼에서 리액트를 렌더링한다는 의미 - UI를 서버에서 렌더링한 결과를 브라우저에 보내서 표시 - 서버 사이드 렌더링; 앱의 성능, 이식성, 보안 향상 - Universal; 완전히 같은 코드를 여러 환경에서 실행할 수 있다는 의미 - 같은 코드를 브라우저나 서버에서 모두 사용 가능 - 노드를 사용해서 서버 구축 시 브라우저와 서버 환경에서 상당한 양의 코드 재사용 가능 - 서버와 브라우저에서 실행될 수 있는 코드 - 클라이언트와 서버 도메인 - 노드 사용시 isomorphic-fetch/https 모듈을 사용하여 fetch 구문 활용 가능 12.2 서버 렌더링 리액트 - ReactDOM.renderToString 메서드.. 2022. 2. 2. [Learning React] 11장 - 리액트 라우터 11.0 리액트 라우터 - 라우팅 - SPA에서는 JS가 정보를 가져와서 UI 갱신 - 라우팅: 클라이언트의 요청을 처리할 endpoint 찾는 과정 - endpoint를 사용하여 요청받은 콘텐츠 식별 가능 - 리액트에는 표준 라우터가 없음 - 리액트 라우터; 리액트 앱을 위한 라우팅 솔루션 11.1 라우터 사용하기 - react-router, react-router-dom 모듈 - App 컴포넌트를 컴포넌트 자식으로 넣기 (index.js) - Routes 컴포넌트 안에 Route 컴포넌트의 프로퍼티로 path, element 설정 (App.js) - react-router-dom은 브라우저 링크를 만들어주는 Link 컴포넌트 제공 - to 프로퍼티 활용 11.2 라우터 프로퍼티 - useLocatio.. 2022. 2. 2. [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. 이전 1 2 3 다음 반응형