[포스코x코딩온] 웹 풀스택 과정 7기 3주차 금요일 회고
포스코 코딩온 웹 풀스택 과정 7기 3주차 금요일 회고
SPA
SPA는 Single-Page Application 이라는 뜻으로, 한 개의 페이지로 이루어진 애플리케이션을 의미한다.
SPA는 기존의 웹 사이트처럼 여러 개의 페이지로 이루어진 것이 아니라, 하나의 페이지로 이루어져 있고, 사용자가 페이지를 요청할 때마다 페이지를 로딩하는 것이 아니라, 페이지를 로딩한 이후에는 데이터만 변경하여 사용자와 소통한다.
처음에는 이를 적용할 생각을 하지 못했으나 페이지를 이동할 때마다 페이지 전체가 껌벅거리며 새로 로딩하는 방식은 사용자 경험을 떨어뜨리는 요소라고 생각하여 적용하였다.
React나 Next 등을 적용하면 금방 끝날 일이었지만 Vanila JS로만 구현을 해야 했기 때문에 어려울 것이라고 지레 겁을 먹었었다.
그러나 사실 별거 없고 JS로 페이지 내용을 바꾸면서 링크도 바꿔주는 척 하는 거였다.
다음과 같이 처리하였다.
- 링크가 포함된 요소에 클릭 이벤트가 발생
Event.preventDefault()를 호출하여 기본 동작 취소Event.target.closest("a").href로 이벤트가 발생한 요소에서 가장 가까운 a 태그의 href 가져오기window.history.pushState({}, "", href)로 브라우저의 주소창에 href를 추가- 내용 갈아끼우기
그래서 다음과 같은 함수를 만들어 사용하였다.
function routeURL(event) {
event.preventDefault();
const href = event.target.closest("a").href;
window.history.pushState({}, "", href);
}
도중에 이벤트를 낚아채 기본 이벤트를 정지 시킨 뒤, 가장 가까운 앵커의 href를 가져와서 브라우저의 주소창에 추가해주는 함수이다.
Sementic Tag
SPA를 적용하며 알게된 개념이다.
기존에는 div 태그만을 이용하여 구현을 했었는데, 매번 class로만 이를 구분하는 것이 여러 문제점을 일으켜 만들어졌다고 한다.
사용자 입장에서는 스크린 리더를 사용할 때 div 태그만으로는 내용을 구분하기 어렵고, 개발자 입장에서도 매번 class를 확인해야 하기 때문에 불편하다.
그렇기 때문에 HTML5에서는 이러한 문제를 해결하기 위해 이름으로 의미를 갖는 header, section, nav 등의 새로운 태그를 도입하였다.
실제로는 div 태그와 동일한 역할을 하지만, 기존 단점을 해결할 수 있게 되었다.
그 외에도 검색엔진을 최적화하고, 데이터 공유 및 재사용에 도움을 준다고 한다.
참고
완성본 이미지
