[React 배워보기] 1. SPA Framework와 ECMA 2015

간만에 교육받으러 다녀와서 신났던 나의 마음을 가다듬고 교육 내용을 복습하고 정리하고자 포스팅을 작성하게 되었다.
SPA 프레임워크와 React 사용기에 대해 적어보고자 한다.

(글쓰기 시작한 날과 수정해서 완료한 날까지 한달이 걸렸다는게 너무 놀랍다.. ^_ㅜ)

 

[React 배워보기] 1. SPA Framework와 ECMA 2015

React를 알아보기에 앞서 해당 기술이 나오게 된 배경과 SPA Framework의 구성과 특징을 살펴보자.

먼저 이러한 기술이 나오게 된 배경을 알아보기 위해 기존의 개발방식에 대해 생각해야 할 필요가 있다.
일반적으로 알고있는 개발방식은 전체적인 개발 구성을 하나로 합쳐서 배포하는 방식인 '모놀리스' 또는 '모놀리식 애플리케이션 (monolithic application)' 이다. 개발 환경 배포 시 하나의 war나 jar로 묶어서 배포하는 형태가 이에 속한다.

이런 방식과 상반되는 개념이 'MSA (Microservice Architecture)' 방식으로 개발 단위를 작게 쪼개어 별도로 분리하는 방식이다. 각각의 개발방식에 대해 설명하면 포스팅이 안끝나므로 아주 잘 정리된 포스팅을 링크하면서 해당 개념에 대한 소개를 넘긴다.


참고자료
https://futurecreator.github.io/2018/09/14/what-is-microservices-architecture/
https://cyberx.tistory.com/101

마이크로서비스 Microservices (1) 아키텍처 소개

마이크로 서비스 아키텍처를 위한 Frontend 개발패턴

 

 

짧게 요약하면 개발 범위가 커짐에 따라 포인트가 많아지게 되었고, 이로 인해 기존의 모놀리스 방식에서 마이크로서비스 방식으로 변화하는 추세가 나타났다. 이 때 사용하게 된 것이 바로 SPA Framework다.

SPA는 Single Page Application의 약자로 벌써 이름부터 한 페이지로 끝장내고자 하는 의지가 뚜렷하게 느껴지는데, 맨 처음 페이지가 로딩될 때만 서버에서 소스코드 등을 가져오고 데이터가 변경되는 경우에만 서버 호출을 해서 화면에 노출되는 내용을 바꾸는 형태로 개발하는 방식을 말한다.
서버 호출이 적은 관계로 속도가 매우 빠르고 트래픽이 적다는 점이 장점이다.

SPA의 대표적인 언어로는 Angular, React, Vue 등이 있고 각 언어별 특징이 있으나 React 의 경우는 Fackbook, instagram 같은 형태에는 잘맞고, 주식차트나 실시간 대시보드같은 형태에는 Angular.js가 더 잘 맞는다고 한다.


이 언어들의 특징은 Front-end를 구성하는 것처럼 보여지지만 Back-end에서 사용하고 있는 개발방식들을 도입하고 있다는 점이다.
작은 단위로 나누어 개발하는 Atomic 개발방식, 컨텐츠 컴포넌트, 컨테이너 컴포넌트로 나누어 개발하는 등 작은 단위로 나누어 개발을 진행하는 컴포넌트 기반의 개발방식 그리고 기존 Back-end에서 흔하게 사용되고 있는 MVC 패턴 방식까지도 도입하고 있다.

이런 언어들이 등장하면서 Front-end 개발과 Back-end 개발의 경계가 모호해지고 있고, 데이터를 보여주는 화면 구성의 역할로만 여겨지던 Front-end 영역이 훨씬 넓어지고 복잡해지고 있다.


Front-end에 대해 설명하면서 빠질 수 없는 것이 바로 ECMA 2015이다. 향후 소개하게 될 React의 경우도 ECMA 2015 기반으로 javascript를 사용하고 있으므로 알아둬야 할 개념이다.

** 간단하게 짚고 넘어가는 ECMA 2015

 

ECMA International의 ECMA-262에 근거한 표준 스크립트 언어 ECMA Script 2015 혹은 ES6 라고 불린다.

최초 ECMA Script는 브라우저 언어인 Javascript와 Jscript간 차이를 줄이기 위한 공통 스펙 제안으로 출발했다고 한다. (1992, ECMA-262)

 

기존 javascript 또는 개발언어에서 알 수 있는 기본적인 개념은 안다는 가정하에, 변경된 사항 혹은 특이사항에 대해서만 기술하면서 ES6에 대한 소개와 포스팅을 마무리할 예정이다.

 

1. 변수 범위

 

기존의 var이라는 명령어를 통해 모든 변수를 선언하던 방식에서 let (변수), const (상수) 로 구분하여 선언하도록 권고하고 있다.

• let은 같은 범위 내에서 재정의하는 것은 불가 (단, 다른 함수 내에서 재정의는 가능)
• const는 초기화가 필수적이며, 해당 값을 재정의하는 것도 불가능
• 객체의 변경불가성(immutable) 을 만족시키는 형태

2. 문자열

 

문자열의 검색와 가공을 위한 다양한 함수를 제공하게 되었다. 그 중 가장 특이한 기능은 문자열간의 결합을 위한 기능이다. 기존에는 문자열간의 결합을 위해 변수와 문자열을 결합하는 형태를 사용했으나, 템플릿 리터럴을 사용하면 이를 더 간단하게 표현할 수 있다.

• 템플릿 리터럴은 백틱(`)을 사용해 표현한다.

• 백틱내에 변수를 조합하기 위해서 ${변수명} 을 사용한다.

• String interpolation을 지원하는 것!

• 백틱 내에서 줄바꿈을 하면 그대로 인식된다.

• ${} 내에서 계산식도 사용할 수 있다.

• 간단한 예시
  

const name = 'ojava';
const num = 1;

// ojava의 react 포스팅 1번 입니다.
let message = `${name}의 react 포스팅 ${num}번 입니다.`

console.log(message);

 

3. 함수

 

기존 함수에는 매개변수가 일치하지 않더라도 호출이 가능했으나, 이로인해 undefined 체크 로직이 필수적이었음.

ES6에서는 매개변수의 기본값(Default parameter)을 정의할 수 있음.

• 불필요한 체크 로직을 삭제할 수 있음

• 매개변수의 타입이 예측이 됨 (기본값을 통해 유추할 수 있음)
  
  

function sendRedirect (url = "ojava.tistory.com") {
    location.replace(url);
}

sendRedirect(); // ojava의 블로그로 이동
sendRedirect("www.daum.net"); // 다음 사이트로 이동
sendRedirect("www.daum.net", 3000); // 다음 사이트로 이동. 3000은 정의되지 않았으므로 무시

 

4. 화살표 함수 (Lambda) 사용 가능

 

java 1.7 이후부터 제공되고 있는 Lambda 식이 javascript에서도 사용할 수 있게 되었다.

lambda식을 사용하는 경우, function 키워드를 사용하지 않고 => 를 이용하여 정의할 수 있다.

펑션명과 ( 파라미터 정의 ) 내용 이후에, => { 함수 내용 } 또는 => 단순계산식 등이 나열될 수 있다.

// 일반적인 형태의 익명함수 (함수표현식)
const sum = function(first, second) {
	return first + second;
}
console.log(sum(10, 20));

// 아래처럼 변경 가능
const sum = (first, second) => first + second;
console.log(sum(10, 20));

화살표 함수를 jQuery에서 사용하는 경우는 $(this)를 window로 인식하기 때문에 jQuery에서 this를 활용한 화살표 함수를 사용하려면 Event 객체의 currentTarget 을 가져와야 한다.

$().ready(function() {
   console.log($(this));
   $("div").on("click", (e) => {
       const $this = $(e.currentTarget);
       console.log($this);
   });
});

 

5. 객체

 

객체 리터럴 내 key와 value값을 맵핑시키는 값이 같은 경우, key만 명시해도 인식이 가능함.

name : name, age : age 등과 같이 key에 맵핑시켜주는 value값의 변수명을 코드 이해도를 높이기 위해 같은 이름으로 지정하는 경우가 많기 때문에 나온 기능인 듯 하다.

function을 객체 내부에 정의하는 경우도 function 키워드를 제외하고 () 를 붙여주기만 해도 function으로 인식한다.

function craeteBlog (name, url) {
	return {
    	name,
        url,
        accessBlog() {
        	location.href=url;
        }
    };
}

const blog = createBlog("ojava", "ojava.tistory.com");
blog.accessBlog();

6. 클래스 (Class ★★★★)

 

ECMA 2015 이전에도 개발자들 나름의 유사 클래스를 만들어서 사용했으나, 이제는 정식으로 Class를 지원한다고 한다.

Class 키워드를 이용해 클래스를 선언함.

• class 키워드를 이용해서 클래스를 선언할 수 있음. 기존의 function을 이용해 선언하는 것과 유사함.

• 생성자 (constructor), 메소드를 모두 지원한다.

• new 를 이용해서 class의 객체를 생성할 수 있음.

• 객체 리터럴과 문법이 유사함. 단, 클래스의 요소들 사이에 콤마(,)가 필요 없음
• ECMAScript 2015 클래스의 특징
  1. 함수 선언과 달리 클래스 선언은 호이스팅 되지 않는다.
  2. 클래스 선언 내의 모든 코드는 엄격 모드인 strict 모드에서 실행된다.
  3. 모든 메소드는 외부에서 열거(출력)할 수 없다.
  4. new 없이 클래스 생성자를 호출할 수 없다. (new 없이 객체를 생성할 수 없다.)

 

7. 프로미스 (promise)

 

비동기 처리 결과가 확정되지 않은 이벤트에 대한 처리방법을 제공하는 함수로, promise를 사용하는 경우 보류 (pending), 성공 (fulfilled), 실패 (rejected) 상태를 제공하므로 이에 맞는 처리가 가능하다.

 

처리 결과가 성공인 경우 처리하는 업무는 then() 에 정의하고, 실패한 경우는 catch() 를 이용해서 에러를 처리할 수 있다. 프로미스는 연결해서 계속적으로 연속적으로 호출할 수 있고, 결과값을 다음 then으로 넘길 수도 있다.

 

 

 

 

여기서 언급된 내용들을 기반은 매우 일부의 내용이며, 객체 분해나 모듈 관련 내용은 언급도 못했다.

찾아보면서 추가적으로 공부가 필요한 내용들은 ECMAScript 2015의 세부적인 내용을 별도로 정리한 좋은 포스팅들을 참고하길 바란다.

 

다음 포스팅은 드디어 react를 사용해보기 위한 설정에 들어가도록 하겠다.