📖 SPA vs MPA
📌 09:00 ~ 12:00
- 리액트에 대한 개념이 매끄럽게 이해되지 않아서 유튜브에 올라와 있는 강의들을 보면서 오전 시간을 보냈다.
📌 13:00 ~ 18:00
- CSS 꾸밀 시간에 그동안 자바스크립트와 리액트 배운 내용 복습하는 게 나을 거 같다는 생각이 들었다.
📌 19:00 ~ 21:00
- 저녁먹고 과제 제출을 완료했다.
- 팀원들과 마지막으로 남은 팀 과제를 진행하고 마무리하는 시간을 가졌다.
과제 제출 (My Todo List) 만들기
📌 21:00 ~ 22:00
- 과제 제출을 완료하고 같은 반 인원들과 모여서 가볍게 뒤풀이 겸 자기소개하는 시간을 가졌다.
- 나처럼 전혀 다른 직군에서 일을 하다 항해에 참여하신 분들이 많았다는 사실을 알게 되어 대부분 나와 비슷한 상황인 분들이 많다는 사실에 안도하는 하루가 되었다.
- 개발자가 되어 현업에 나가게 되면 어떤 식으로든 서로 도움을 줄 수 있는 관계가 될 수 있을 것 같다는 생각에 이 뒤풀이 시간이 너무 유익했다...★
📖 팀 과제로 다뤘던 스터디 주제
📌 1) SPA 방식과 MPA 방식은 무엇인가요?
📌 2) 자바스크립트 export, export default, import 각각은 무슨 차이가 있을까?
-
스터디를 진행할때마다 각자 공부하고 찾아온 내용을 바탕으로 토론을 진행을 한다.
-
서로 알아본 내용이 비슷하다면 '내가 제대로 알아왔구나' 하고 나 스스로가 대견하다고 생각을 하고,
-
팀원이 색다른 시각으로 이 주제를 다룰 때면, 역시 혼자 공부하는 것보다 여럿이서 스터디하면 배울게 많구나 하고 스터디하길 잘했다 생각을 하는 것 같다.
📌 SPA란?
-
한 개의 Page로 구성된 Application이다.
-
SPA는 CSR(Client Side Rendering) 방식으로 렌더링한다.
-
단 한 번만 리소스(HTML, CSS, JavaScript)를 로딩한다. 그 후에는 데이터를 받아올 때만 서버와 통신한다.
-
SPA (Single Page Application)란 서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다
💡 현재의 HTML을 고정하고 변경되는 부분에 대해서만 서버에서 불러와 클라이언트 사이드에서 렌더링 하는 방식이다.
📌 MPA란?
-
여러 개의 Page로 구성된 Application이다.
-
MPA는 SSR(Server Side Application) 방식으로 렌더링 한다.
-
새로운 페이지를 요청할 때마다 서버에서 렌더링 된 정적 리소스(HTML, CSS, JavaScript)가 다운로드된다.
-
페이지 이동하거나 새로고침 하면 전체 페이지를 다시 렌더링 한다.
📌 SPA와 MPA의 가장 큰 차이는 로딩 방식이다.
-
MPA는 클라이언트가 서버에 최초 요청을 하게 되면 하나의 정적인 페이지의 모든 소스를 가져온다. 그 후에 다른 페이나 다른 게시물로 이동하기 위해 사용자가 클릭을 하게 되면 클라이언트는 설사 서버에 요청한 페이지의 대부분의 게시물이 전과 같더라도 새로운 정적인 페이지 전체를 보내주게 된다.
-
반면 SPA는 클라이언트가 서버에 최초로 요청을 하게 되면 HTML, CSS, JavaScript 등 사이트의 모든 필요한 소스를 가져오고 다음 요청에는 AJAX를 이용해 변경에 필요한 부분만 가져오는 방식이다.
📌 export
- 변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능하다.
📌 import
- 모듈을 가져오기가 가능하다.
📌 export default
- 모듈을 많이 만들었을 경우 export default를 사용하면 '해당 모듈엔 객체가 하나만 있다.'는 사실을 명확히 나타낼 수 있다.
💡 내보내고자 하는 객체 앞에 export default를 붙이면, 중괄호 { } 없이 모듈을 가져올 수 있다.
reference
https://hanamon.kr/spa-mpa-ssr-csr-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EB%9C%BB%EC%A0%95%EB%A6%AC/
