원티드 프론트엔드 프리온보딩 (22.12.19 월 ~ 23.01.20 금)
📍횡단 관심사란?
- Cross-cutting concerns
- 어플리케이션 내 여러 핵심 비즈니스 로직들에 걸쳐서 실행되어야 하는 동작들
예시
- 인증 & 인가
- 로깅 (로그 남기기)
- 트랜잭션 처리
- 에러 처리
📍HTTP 통신에서 횡단 관심사 처리하기
- 프론트엔드에서 가장 흔하게 생각할 수 있는 횡단관심사는 인증 & 인가
- 백엔드 서버와 통신할 때 HTTP 프로토콜을 이용
- HTTP 프로토콜의 가장 큰 특징 : stateless
즉, 매번 별개의 요청으로 취급하며, 매번 header나 body에 값을 채워서 보내줘야 함
- 인증 예시
- httpClient.js
class HttpClient {
// 1. baseURL
constructor(baseURL) {
this.baseURL = baseURL;
}
// 2. 모든 fetch 전에, access_token을 추가한다.
// 원래 headers.Authorization이 비어있었기 때문에,
// Authorization을 추가하고 그 뒤에 headers의 스프레드 연산자를 추가해도 괜찮음
fetch(url, options = {}) {
fetch(`${this.baseURL}${url}`, {
...options,
headers: {
Authorization: "ACCESS_TOKEN",
...options.headers
}
});
}
}
export const httpClient = new HttpClient(
"https://jsonplaceholder.typicode.com/"
);
- App.js
import "./styles.css";
import { httpClient } from "./httpClient";
export default function App() {
const request = () => {
httpClient.fetch("todos", {
method: "POST",
headers: {
AA: "BB"
}
});
};
return (
<>
<h1>Cross Cutting Concerns</h1>
<button onClick={request}>request</button>
</>
);
}
- 크롬 개발자도구 -> 네트워크 탭에서 요청이 잘 들어갔고, headers에 값도 잘 포함됐음을 알 수 있다
App 컴포넌트에서 fetch 상세 부분을 분리하여 관심사 분리를 실현!
📍리액트에서 클래스
- 코드의 조각
- 필요할 때마다 인스턴스를 만들어서 사용할 수 있다
- 프로퍼티 = 상태