brunch

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 지식>을 마치겠습니다. 이 글이 여러분의 커리어에 조금이나마 도움이 되었기를 바라며 여기까지 읽어주셔서 정말 감사드립니다:)






글쓴이: 이현아


오늘이 모여 인생을 만든다. 오늘도 성장하고 있는 2년 차 UX 디자이너 이현아입니다. 자라온 날보다 성장할 오늘이 더 많은, 그렇기에 다양한 경험으로 인생을 다채롭게 채워가고 싶은 주니어 이현아입니다.





다른 시리즈 보러가기

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


1. 운영체제(OS)와 웹, 네이티브, 하이브리드


2. 개발자라고 다 같지 않다 : 프론트엔드, 백엔드


3. 밤샘 개발을 줄여주는 도구들 : 라이브러리, 프레임워크, SDK


4. 한 번 보면 더 볼 일 없는 네트워크 관련 용어들


5. 갑자기 물어보면 말문이 막히는 서버와 클라이언트


6. 서버와 클라이언트, 그 사이의 용어들


7. 화면 크기에 반응하는 웹 UI : 반응형 웹, dp, dpi, em, rem


8. 모두를 위한 서비스 : 웹 접근성, 대체텍스트


9. 콘텐츠의 재탄생 : 파싱, 크롤링


10. 데이터 바꿔치기 : SPA --> 현재글





※참고 자료


https://velog.io/@thms200/SPA-vs.-MPA

https://asperbrothers.com/blog/spa-vs-mpa/



매거진의 이전글 9. 콘텐츠의 재탄생

매거진 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari