빠른 메모

# SPA
## 히스토리
1. 서버-클라이언트(페이지 reload)  
2. 템플릿 기반 Angular.js 등  
3. 이젠 React.js 등 컴포넌트 개념의 다양한 라이브러리와 프레임워크 등장  

## 특징
1. 라우팅  
2. 컴포넌트  

## 장점
1. 네이티브 앱과 유사한 UX  
2. 정적 리소스를 최초에 한번만 로드  
3. 페이지 갱신에 필요한 데이터만 전달받아 전체적인 트래픽 감소  

## 단점
1. 초기 구동 속도가 상대적으로 느림  

## SPA의 핵심 가치
UX 향상 및 애플리케이션 속도 향상 (Mobile First)

https://m.blog.naver.com/dktmrorl/222085340333

# Javascript callback
## 정의
파라미터로 함수를 전달받아, 함수 내부에서 실행하는 함수
예) forEach 함수 안에 익명의 함수 실행
```
let number = [1, 2, 3, 4, 5];

number.forEach(x => {
    console.log(x * 2);
});
```
## 주의할 점
1. this 키워드 보호 : call(), apply()

## Callback Hell
비동기 호출이 자주 일어나는 경우 함수의 매개변수로 넘겨지는 콜백 함수가 반복
-> Promise() 사용 : 비동기 호출 시, 마치 동기 호출처럼 값을 반환하여 사용

https://velog.io/@minidoo/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98Callback-Function

# Intercepter vs. AoP
자바 웹 개발시 공통적으로 처리해야 할 업무들:  
1. 로그인 관련(세션 체크),  
2. 권한체크,  
3. XSS(Cross site script) 방어,  
4. PC와 모바일웹 분기처리,  
5. 로그,  
6. 페이지 인코딩 변환 등  

## 적용 시점
: Filter -> Interceptor -> AoP

## 적용 방식
1. Filter : web.xml  
2. Interceptor : servlet-context.xml  
-> Filter, Interceptor는 Servlet 단위에서 실행된다.  
but AoP는 메소드 앞에 Proxy 패턴의 형태로 실행

### Filter
DispatcherServlet 이전에 실행. 필터가 동작하도록 지정된 자원의 앞단에서 요청 내용을 변경하거나 여러가지 체크 수행.
(일반적으로 인코딩 변환, XSS 방어 등 요청에 대한 처리)

### Interceptor
Filter의 경우 스프링 컨텍스트 외부에 존재하여 스프링과 무관한 자원에 대해 동작.

그러나 Interceptor는 스프링의 DispatcherServlet이 컨트롤러를 호출하기 전/후로 끼어들어
스프링 컨텍스트 내부에서 Controller에 관한 요청과 응답에 대해 처리.

### AoP
OOP를 보완하기 위해 나온 개념.
-> 중복을 줄일 수 없는 부분을 줄이기 위해 종단면(관점)에서 처리.

주로 로깅, 트랜잭션, 에러 처리 등 비즈니스 단의 메서드에서 조금 더 세밀하게 조정하고 싶을 때 사용.

https://baek-kim-dev.site/61

# 웹소켓
## 배경
1. 오래전 : 인터넷과 HTTP를 통해 서버로부터 데이터를 가져오기 위해서는 URL 요청 (중간 페이지 필요)  
2. Ajax : XMLHttpRequest 객체를 이용 -> 사용자 액션 필요 (버튼 클릭 등)  

## 개념
Transport 프로토콜의 일종으로 서버와 클라이언트 간의 효율적인 양방향 통신을 실현하기 위한 구조
(2014년 10월 28일 HTML5 버전 등장시 같이 출시)

## 작동 원리
HTTP 프로토콜을 통해 웹소켓 연결(TCP/IP)이 이루어지고 일정 시간이 지나면 HTTP연결은 자동으로 끊어짐.

웹소켓 API는 아주 간단한 기능들만 제공하기 때문에,
SockJS 또는 Socket.IO 같은 오픈 소스 라이브러리를 많이 사용.

메시지 포맷은 STOMP를 이용함

## 문제점
1. 프로그램 구현에 복잡성 초래  
2. 서버-클라이언트 간의 Socket 유지에 비용 소요  
3. 오래된 버전의 웹 브라우저 지원하지 않음

## 대표적인 유즈 케이스
1. 페이스북과 같은 소셜 미디어 App  
2. LOL과 같은 멀티플레이어 게임  
3. 위치 기반 App  
4. 증권 거래 정보 사이트 및 App  
5. 화상 채팅  
6. 구글 Doc등 여러 명이 동시 접속하여 수정할 수 있는 툴  

https://choseongho93.tistory.com/266