TIL - Today I Learned (Day 18) - 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/

SPA vs MPA와 SSR vs CSR 장단점 뜻정리 - 하나몬