[Web KIT640] Day 07. SPA/MPA/MSA 및 ES6 연산자의 사용법

vinca·2023년 2월 2일

jquery js

🍉 Web Frontend

목록 보기

7/22

Introduction

정리

JAVA Script

DOM을 사용해서 HTML을 변경
Node.js를 사용면 웹 브라우저 환경이 아니어도 JS를 사용가능함.
Back-end 및 desktop, moblie앱 개발에 사용됨.
CRA를 이용한 React.js 프로젝트를 생성하면 Node.js 서버 환경으로 생성 됨.
Script 언어 중 최강
현재 ES6+ 버전으로 발전

SPA

Single Page Application

단일 웹 페이지 HTML만을 가지고 다른 페이지를 열 때 JSON파일을 통해서 해당 웹 페이지를 업데이트하는 것을 말한다.

서버는 단지 JSON 파일만 보내주고, HTML을 그리는 역할은 자바스크립트를 통해 클라이언트 측에서 수행한다.

장점

여러 웹 페이지를 가져오는 것이 아니기 때문에 전체적인 트래픽이 감소하고, 변경된 부분만 JSON을 통해 웹 페이지를 수정해서 보여주므로 전체적인 웹 페이지의 새로고침이 발생하지 않아 네이티브 앱과 같은 환경을 제공한다.

단점

다만 모든 정적리소스를 Initial Request때 한번에 가져오기에 처음 페이지를 업로드 하는데 latency가 증가하고, SEO(검색엔진 최적화)에 대한 문제가 있다.

이를 클라이언트 사이드 랜더링 방식이라고 한다.

MPA

Multi Page Application

SPA와 반대의 개념이다.

웹 페이지의 이동에 따라서 새로운 HTML파일을 받아와 사용자 브라우저에 재갱신하는 것이다.

장단점 요약

요청할 때마다 새로운 HTML파일 전체를 가져오는 것이므로 서버 사이드 랜더링 방식이며, 전체 HTML파일을 가져오므로 트래픽이 증가하나 SEO(검색엔진최적화) 측면에서 이점을 볼 수 있다.

MSA

MSA란 기능을 모듈별로 나눠서 개발하고 관리하는 것이다.
각 서버 및 데이터베이스가 기능별로 나눠서 관리된다.
회원 관리, 상품 관리, 주문 관리

장점과 단점

이를 통해서 유지 및 보수 및 scale out등의 관점에서 이점을 볼 수 있으나, 구조가 복잡하고 여러 데이터베이스 및 서버를 관리해야한다는 점에서 백엔드 개발자의 노고가 증가한다.

SEO

SEO란, 검색엔진 최적화로 검색엔진에 얼마나 잘 표출되는가를 의미한다.

HTML파일 내 태그 요소들을 기준으로 검색엔진은 이를 통해 웹 페이지를 걸러 검색해 주기 때문에 처음 받아온 웹 페이지에는 전반적인 정보가 비어 있으므로 노출이 잘 되지 않을 수 있다.

JS의 arguments

자바 스크랩트 함수는 호출 될 때 arguments 객체가 자동으로 생성된다.
매개 변수는 argument 객체에 담겨서 전달되고, 이러한 값은 call by value로 매개 변수가 복사된다.

Object를 참조하는 변수의 값은 메모리상 주소인 포인터형으로 전달된다.
즉, 객체를 변경하면 원본의 결과또한 변경된다.

ES5와 ES6의 차이

ES6 이후

다음과 같이 항상 ES6의 ArrowFunction을 사용하게 되면 this를 출력해도 정상적으로 people객체가 출력되어 나왔다. 즉 해당 People Object내의 멤버 변수에 접근할 수 있다.

<body>
    <script>
        function People(){
            this.name ="Vinca"

            this.test = function(){
                // people 객체가 출력됨(접근가능)
                console.log(this, "at test");
					
                // ES6 ArrowFunction사용 시, people객체에 접근가능.
                var ref = setInterval(() => {
                    console.log(this, "at setInterval");
                    clearInterval(ref);
                },10)
            }
        }
        let people = new People();
        people.test();
    </script>

ES6 이전

과거의 방법인 function을 사용하면 해당 중첩된 함수 내에서 this를 출력하게 되면 People Object가 출력되는 것이 아닌ㅜ가장 상위 객체인 window가 출력된다.

    <script>
        function People(){
            this.name ="Vinca"

            this.test = function(){
                // people 객체가 출력됨(접근가능)
                console.log(this, "at test");
                // 기존의 function사용 시, 함수 내부에서는 people객체에 접근 불가능.
                var ref = setInterval(function() {
                    console.log(this, "at setInterval");
                    clearInterval(ref);
                },10)
            }
        }
        let people = new People();
        people.test();
    </script>

결론

따라서 접근이 안되는 상황에서 함수 밖에 var temp_this = this 와 같이 선언한 후 해당 temp_this를 이용하여 접근하는 수 밖에 없다.

약간의 꼼수같은 느낌이다.

				var temp_this = this;
                var ref = setInterval(function() {
                    // People Object에 접근 가능
                    console.log(temp_this, "at setInterval");
                    clearInterval(ref);
                },10)
            }

그러니 간편하게 ES6 연산자를 쓰도록 하자.

Onclick에서의 ES6 연산자

그렇다고 해서 ES6연산자를 사용하면 마냥 내부 this를 가르키는 것이라고 단정짓긴 함들다.

function() { ... } 사용

<body>
    <ul id="menu">
        <li data-no="0">입력</li>
        <li data-no="1">출력</li>
        <li data-no="2">검색</li>
        <li data-no="3">수정</li>
        <li data-no="4">삭제</li>
    </ul>

    <script>
        var btns = document.querySelectorAll("ul#menu>li");
        btns.forEach((data, index) => {
            data.onclick = function(event) {
                console.log(this);
            }
        });
    </script>
</body>

버튼에 onclick 리스너를 추가하는 예제인데 function(event)를 사용하고 this를 찍어보게되면 해당 onclick함수를 호출한 해당 버튼이 this로 가리켜진다.
원하는 결과다.

ES6 사용

하지만 ES6연산자를 사용하면 어떻게 될까?

<body>
    <ul id="menu">
        <li data-no="0">입력</li>
        <li data-no="1">출력</li>
        <li data-no="2">검색</li>
        <li data-no="3">수정</li>
        <li data-no="4">삭제</li>
    </ul>

    <script>
        var btns = document.querySelectorAll("ul#menu>li");
        btns.forEach((data, index) => {
            data.onclick = (event)  => {
                console.log(this);
                //console.log(event.target);
            }
        });
    </script>
</body>