[Achievement Goal]

1. SPA(Single-Page-Application) 의 개념을 이해하고 설명할 수 있다.

2. SPA 의 장단점 알기.

3. 와이어프레임 구상 시 어떤 부분을 컴포넌트로 짤지 구상할 수 있다.

1.SPA

SPA(Single-Page-Application) 란 ?

HTML에서만 작업 시, 페이지가 이동할 때마다 새로운 페이지를 불러오는 방식으로 사용했기 때문에 화면의 로딩속도는 느려졌고, 사용자 또한 빠른 인터페이스를 체감하기 어려웠다.
하지만 싱글페이지 어플리케이션은 하나의 페이지 안에 자바스크립트로 여러 컴포넌트를 두어, 이벤트가 발생한 컴포넌트의 데이터만 변경하는 방식이다.
즉, 서버에서 변경이 필요한(동적인) 데이터만 전달받아서 업데이트 하는 웹/앱 애플리케이션을 말한다.

2. SPA 장,단점

(1) SPA 장점

변경이 필요한 부분의 컴포넌트만 조작하기 때문에 전체 화면을 다시 렌더링 할 필요가 없으며, 이는 사용자에게 빠르게 접근과 서버의 과부하를 줄일 수 있는 이점이 된다.
유지보수 면에서도 좋다.

(2) SPA 단점

하지만 하나의 HTML 파일을 제외하고 모두 자바스크립트 파일로 이뤄지기 때문에 파일 자체는 무겁다. 이때문에 첫 로딩시간은 길어질 수 있다.
또한 HTML 파일의 자료를 기반으로 분석하는 검색엔진같은 경우 SPA 가 적합하지 않을 수 있다. (현재 이 단점도 점점 개선중이라고 한다.)

3.와이어프레임(Wire frame)

(1) 와이어 프레임이란 ?

본격 디자인으로 들어가기 전 윤곽을 잡는 단계를 말한다.
(목업과는 약간 다른 개념이다. *목업 : 개발할 웹/앱의 프레임을 씌워 최소한의 기능만 담은 디자인 한 것.)

SPA 에서는 무엇보다 와이어프레임이 중요한데, 이는 내가 나눈 와이어 프레임이 곧 컴포넌트가 되고, 이 컴포넌트를 기반으로 자바스크립트,추후 유지보수의 편리성 등등이 결정되기 때문이다.

(2) 어떻게 와이어프레임을 구상해야할까 ?

크게 헤더 / 컨텐츠 / 푸터 이렇게 나누는 방식은 HTML 과 다르지 않다.
하지만 이렇게 크게 나눈 것 중, 어떤것은 동적으로 계속 움직이고, 어떤 부분은 페이지가 이동하더라도 그대로 위치할지에 따라서 고민해보는 것이 좋다.

예를들어 어떠한 페이지를 만들때 다음과 같다고 하자.

제일먼저, 큰 프레임으로 봤을때 헤더와 푸터는 어떠한 이벤트가 발생되더라도 그 자리 그대로 있으며 이벤트가 발생될 때 변경되는 부분은 동적인 컨텐츠를 담고있는 섹터 컴포넌트만 움직이게 될것이다.

섹션 :

컨텐츠 1

컨텐츠 2

컨텐츠 3

섹션부분에서도 내가 어떠한 이벤트를 동작했을때 레이아웃은 동일하되, 컨텐츠만 변경이 되므로 이 섹션은 여러번 재사용이 가능함을 인지해야 한다.

컨텐츠 1

썸네일

컨텐츠 제목

컨텐츠 설명

게시 날짜

끝이아니다 .. 컨텐츠 1 안에서도 저렇게 나뉜다. ..
여기서 쓰인 컨텐츠요소들을 뜯어보면
속성(key) : 썸네일 / 컨텐츠 제목 / 컨텐츠 설명 / 게시날짜
값(value) : 사진이미지 / 안녕하세요 / 코딩과 사투하는 숙이의 하루 / 2021.06.07