본문 바로가기

HTML + JAVASCRIPT + CSS

Context API 12.context api from Daniel Lim Context API 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능입니다. 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등 여러 종류의 전역 데이터 관리시 사용합니다. 또한 리덕스, 리액트 라우터, styled-components등의 라이브러리는 Context API를 기반으로 구현되어 있습니다. Context API를 사용한 전역 상태 관리 흐름 이해하기 리액트 애플리케이션은 컴포넌트 간의 데이터를 props로 전달하기 대문에 컴포넌트 여기저기서 필요한 데이터가 있을 때는 주로 최상위 컴포넌트에서 state를 이용하여 관리 합니다. 최상위 컴포넌트에서 props로 state를 하위 컴포넌트까지 전달해야 하기 때문에 구조.. 더보기
ReactJS Router Dom ReactJS Router Dom 11.react router dom from Daniel Lim 임광규 SPA SPA는 Single Page Application의 약어 입니다. 말 그대로 한개의 페이지로 구성된 애플리케이션을 뜻합니다. 전총적인 웹 페이지는 여러 페이지로 구성되어 있습니다. 라우팅 다른 주소에 다른 화면을 보여주는 것을 라우팅이라고 합니다. 리액트 라이브러리 자체에 이 기능이 내장 되어 있지는 않습니다. 리액트 라우팅 라이브러리는 리액트 라우터(react-router), 리치 라우터(reach-router), Next.js 등 여러 가지가 있습니다. 이중 가장 오랫동안 사용되었고 사용빈도 역시 높은 리액트 라우터를 알아봅니다. SPA의 단점 SPA의 단점은 앱의 규모가 커지면 자바스크.. 더보기
ReactJS에서 IE 11 호환 처리 ReactJS에서 IE 11 호환 처리 1. react-app-polyfill - 리엑트 개발에서 사용하는 다양한 문법을 변환해주는 라이브러리입니다. + Promise, window.fetch, Symbol, Object.assign, Array.from + [ IE9 Map, Set ]등 최소한만 포함하고 있어 사이즈가 작고 가벼운 게 특징 - 설치 $> npm install react-app-polyfill- 사용법 + stable은 package.json의 browserslist에 해당하는 브라우저에 대해 안정적인 코드를 사용 가능// index.js import 설정 // IE9의 경우 import 'react-app-polyfill/ie9'; import 'react-app.. 더보기
Session 인증이 들어간 Axois 통신 사용하기 기본적으로 Axios를 이용한 통신시 인증 쿠키값을 전달하기 위해서는 아래 설정을 추가 해줘야 합니다. const axios = require('axios'); // `withCredentials` indicates whether or not cross-site Access-Control requests // should be made using credentials // 기본 값은 false 입니다. axios.defaults.withCredentials = true;그리고 API 서버와 통신을 하면, 다음과 같이 오류가 발생합니다. Access to XMLHttpRequest at 'http://lahuman.github.io' from origin 'http://.. 더보기
[ReactJS] component optimization 10.component optimization from Daniel Lim 더보기
[ReactJS] component style 9.component style from Daniel Lim 더보기
[ReactJS] Hooks 8.hooks from Daniel Lim 더보기
[ReactJS] component life cycle 7.component life cycle from Daniel Lim 더보기
[ReactJS] component repeat 6.component repeat from Daniel Lim 더보기
[ReactJS] component 3.component 101 from Daniel Lim 더보기