brunch

매거진 말문을 트이게 만드는 IT 지식

라이킷 12 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 이현아 Jun 10. 2022

10. 데이터 바꿔치기

말문을 트이게 만드는 IT지식

이번 글은 총 10개 중 마지막 챕터입니다. 원활한 이해를 위해 차례로 읽어보시는 것을 추천드려요. 글 하단에 모든 챕터를 확인하실 수 있습니다.

“이번 프로젝트는 SPA 방식으로 개발할게요.”

웹을 개발하는 방식에는 MPA와 SPA가 있습니다.

MPA는 Multi Page Application이라는 뜻으로 기존에 웹에서 많이 사용하던 방식입니다. 혹시 웹 페이지를 새로고침 해보신 적 있나요? 페이지를 새로고침 하면 시간이 꽤 많이 걸립니다. 그 이유는 새로고침을 하면 웹 구성 요소, 데이터들을 모두 새로 다운로드하기 때문인데요. 이것이 바로 MPA 방식입니다. 속도가 경쟁력인 시대가 되면서 데이터를 다시 불러오는 속도를 빠르게 할 필요성이 생겼고, 그래서 SPA가 등장했습니다.

SPA는 Single Page Application이라는 뜻으로, 웹을 구성하는 요소를 최초에 한 번만 다운로드합니다. 그 후 새로고침을 할 때는 변화가 있는 데이터만 업데이트하고 이외 요소들은 그대로 사용하는 방식입니다. 다운로드하는 요소가 적어지니 당연히 새로고침 시간도 줄어들겠죠.

하지만 SPA는 웹이 최초에 다운로드될 때 페이지 내 요소들을 전부 다운로드합니다. 그렇기에 최초 웹 로딩 시간은 보다 길다는 단점이 있습니다. 또한 MPA이 SEO(검색엔진 최적화)에 더 유리하기 때문에 GOOGLE이나 NAVER 등의 검색엔진의 상위권에 위치하기 위해서는 SPA 보다는 MPA를 선택하는 것이 좋을 수 있어요.

MPA&SPA 이해하기

앞의 3단원에서 프레임워크와 라이브러리에 대해 배웠던 것 기억하시나요? 해당 챕터에서 프레임워크는 사용 목적에 따라 적합한 프로그램을 사용하는 것이 중요하다고 설명했었는데요. SPA를 만들기 위해서는 React 등의 라이브러리나 Vue.js, Angular 등의 프레임워크를 사용해야 합니다.

MPA와 SPA는 모두 장단점이 다르기 때문에 어떤 프로젝트인지에 따라 적합한 방식을 선택하면 돼요. 만약 검색엔진이 중요한 커머스 프로젝트라면 MPA로 개발하는 것이 유리할 수도 있겠죠?

잘못된 표현이나 추가적으로 덧붙이고 싶은 내용이 있다면 언제든 댓글 달아주세요 :)

이번 챕터를 마지막으로 <말문을 트이게 만드는 IT 지식>을 마치겠습니다. 이 글이 여러분의 커리어에 조금이나마 도움이 되었기를 바라며 여기까지 읽어주셔서 정말 감사드립니다:)