1. 테넌트(Tenant)
소프트웨어 시스템으로의 공통 접근을 공유하는 사용자들의 그룹
Multi-tenancy is a software architecture common in cloud computing where a single instance of software provides a service for multiple customers or “tenants.”
2. AWS Lambda
3. OData
Open Data Protocol은 간단하고 표준적인 방식으로 쿼리 가능하고 상호 운용 가능한 REST API를 만들고 사용할 수 있도록 하는 개방형 프로토콜이다.
OData (Open Data Protocol) is an ISO/IEC approved, OASIS standard that defines a set of best practices for building and consuming RESTful APIs. OData helps you focus on your business logic while building RESTful APIs without having to worry about the various approaches to define request and response headers, status codes, HTTP methods, URL conventions, media types, payload formats, query options, etc. OData also provides guidance for tracking changes, defining functions/actions for reusable procedures, and sending asynchronous/batch requests.
4. SOAP
🔗 SOAP API VS. REST API, 두 방식의 가장 큰 차이점은?
5. withRouter
withRouter는 라우트로 감싸진 컴포넌트가 아닌 곳에서 라우트 컴포넌트만이 가지는 객체인 match, location, history를 사용하고 싶은 경우에 쓴다.
You can get access to the history object’s properties and the closest 's match via the withRouter higher-order component. withRouter will pass updated match, location, and history props to the wrapped component whenever it renders.
6. compose
export default compose(withRouter)(OutBoundTask);compose is used when you want to pass multiple store enhancers to the store. Store enhancers are higher order functions that add some extra functionality to the store. The only store enhancer which is supplied with Redux by default is applyMiddleware however many other are available.
🔗 Understanding compose functions in redux
7. Context
Context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법이다. Context를 사용하면 중간에 있는 엘리먼트들에게 props를 넘겨주지 않아도 된다.
- Context를 사용하지 않는 예시 (불필요하게 Toolbar 컴포넌트를 거치고 있다.)
class App extends React.Component {
render() {
return <Toolbar theme="dark" />;
}
}
function Toolbar(props) {
return (
<div>
<ThemedButton theme={props.theme} />
</div>
);
}
class ThemedButton extends React.Component {
render() {
return <Button theme={this.props.theme} />;
}
}- 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} />;
}
}예시에서는 contextType이 쓰였으나 본래 Context에 접근하는 방법에는 세 가지가 있다. (레퍼런스 참고)
- Consumer
- useContext: 함수 컴포넌트에서만 사용 가능
- contextType: 클래스 컴포넌트에서만 사용 가능
🔗 React | Context
🔗 React Context 사용법
8. match
match는 라우터로 감싸진 모든 컴포넌트가 갖게 되는 객체들 중 하나이다.
Router introduces into your component the following objects: history, location, match
does its job as an Higher Order Component and wraps your components or views and injects these three objects as props inside them.
The match object contains information about how a matched the URL.
- params: (object), key/value pairs parsed from the URL corresponding to the dynamic segments of the path
{} - isExact: (boolean), true if the entire URL was matched (no trailing characters)
true - path: (string), the path pattern used to match. Useful for building nested routes. We’ll take a look at this later in one of the next articles.
"/Home" - url: (string), the matched portion of the URL. Useful for building nested links.
"/Home"
🔗 react-router :: 1장. 리액트 라우터 사용해보기
🔗 The Hitchhiker’s Guide to React Router v4: [match, location, history] — your best friends! 👍
