09.24 항해 12일차 TIL

3주차 과제를 하다가 오늘 하루가 끝나버렸다...

오늘 4주차 까지 듣고 내일 마무리 후 바로 프로젝트를 시작하는 계획 이였는데 내가 이해 하는데 걸리는 시간을 포함하지 못했다.

어제 배운 내용 이지만 Router 와 Redux 의 개념 자체는 어렵다고 생각하지 않았는데 코딩을 하는 부분에 있어 막히는 부분이 많아서 오늘 하루 동안 더 진행 한 강의도 없고 두 부분을 다시 정리 해보려고 한다.

SPA 와 MPA

간단하게 말하면 웹 애플리케이션을 만들 때 SPA는 하나의 페이지로만 만들고 MPA는 여러개의 페이지로 만드는 것의 차이다.

SPA의 특징

• SPA는 Clint Side Rendering를 추구한다.
• 화면과 관련된 리소스를 처음 요청 시 서버로부터 몽땅 받아낸 후 클라이언트에서 모든 HTML/CSS/JS를 가지고 있는다.
• 이 후는 AJAX 통신을 통해 데이터만 받아오게 된다.

MPA의 특징

• MPA는 SSR(Server Side Application) 방식으로 렌더링한다.
• 새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 리소스(HTML, CSS, JavaScript)가 다운로드된다.
• 페이지 이동하거나 새로고침하면 전체 페이지를 다시 렌더링한다.

redux 상태관리 흐름

• (1) 리덕스 Store를 Component에 연결한다.
• (2) Component에서 상태 변화가 필요할 때 Action을 부른다.
• (3) Reducer를 통해서 새로운 상태 값을 만들고,
• (4) 새 상태값을 Store에 저장한다.
• (5) Component는 새로운 상태값을 받아온다.

• (1) 리덕스는 단일 스토어 규칙을 따릅니다. 한 프로젝트에 스토어는 하나만 씁니다.

• (2) 불변성을 유지해주기 위해 store의 state(데이터)는 오직 action으로만 변경할 수 있다.

• 리듀서는 순수한 함수여야 한다
  순수한 함수라는 건, 파라미터 외의 값에 의존하지 않아야하고, 이전 상태는 수정하지(=건드리지) 않는다. 변화를 준 새로운 객체를 return 해야한다.