[HTML/CSS] SPA가 무엇인가?

[HTML/CSS] SPA가 무엇인가?

react, vue, angular 등 요즘 핫한 프레임워크 들이 많다. 동적 웹을 구현할 때 사용하는 도구들이다.

하나의 페이지를 가지고 동적으로 화면이 바뀌면 서버에서 어떤 화면을 클릭해서 탭을 넘기지 않아도,

유려하게, 즉각적으로 반응하는 UI를 만들 수 있다.

 

그럼 모두 SPA를 쓰면 되지 않을까?

실버 불렛은 없는법,,, 장단점을 알아보자!

 

 

 

SPA(Single Page Application)

• 어떤 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것.
• 무엇인가를 클릭하거나 스크롤하면, 상호작용하기 위한 최소한의 요소만 변경이 일어난다.
• 복잡한 UI 구현 시에 사용한다.
• react, vue, angular가 SPA 프레임워크로 유명하다.

 

SPA의 장단점

• 빠르다. 페이지 이동시에 쓸데없는 통신이 줄어드는 장점이 있다.
• 그러나, ‘공수(노동인원)’ 문제도 있고 개발 속도가 느리다. 난이도도 올라간다. 돈 많이 든다.
• 쓸데 없는 고퀄이 될 수도 있다. 단순한 정보 홈페이지는 이렇게 만들 필요는 없다.
• 이 세상 대부분의 사이트는 spa가 아니다.

 

 

jQuery와의 관계

jQuery를 안쓰는 추세라는 이야기를 간혹 가다가 들을 수 있다. 모든 곳에 제이쿼리를 쓰지 않는 것이 좋을까? 결론은 SPA에서 쓰는 것이 별로 효능이 좋지 않을 뿐이지, 나머지 일반적인 홈페이지에서는 계속 쓰는 것이 좋다.

vue, react 등 많은 프레임워크가 존재하지만, 동네 편의점에 명품을 입고 나가지 않듯, TPO에 맞게 jQuery를 쓰기도 하고 안쓰기도 하는 것이다.

탄환은 여러 개, 여러 종류를 가지고 있는게 마음 편한 것!

 

 

++ 아래와 같은 기술도 있다.

Tailwind CSS

CSS 프레임워크이다.

bootstrap이 완성부품을 가지고 페이지를 만든다면, 테일윈드는 직접 부품을 미리 만들어진 설계도를 보며 만들어서 써야 한다.

 

<장단점>

• css 파일을 따로 입력하지 않고, html 파일만을 가지고 바로 입력할 수 있다는 장점을 가지고 있다.
• 클래스 이름이 정해져 있기 때문에, css 클래스 이름을 고민하지 않고 그대로 가져다 쓰면 된다.
• 개발의 편의성이 생긴다.
• 그러나, 코드의 가독성이 떨어질 수 있다. 그러나, 프론트의 코드들은 유통기한이 ‘우유’ 급이다.
• 프론트는 격변하는 개발 수정의 과정을 겪기 때문에(1시간 뒤에 기획 바뀜 등) 복사하기 붙여넣기를 통한 코드 실현을 하게 된다. 그렇기에 가독성이 중요하지 않을 수도 있어 이것은 큰 단점이 되지는 못한다.
• 방대한 프로그램이기 때문에, 작은 정보를 보여주는 프로젝트에서는 어울리지 않을 수 있다.