[WEB] React, Framework or Library? , SPA(Single Page Application)

 

오늘은 Framework와 Library의 차이에 대해서 알아보고, React는 어떤것일까? 에 대해서 알아보겠습니다.

 

그냥 리액트나 하지 뭐이리 서론이 기냐구요?

이 수업 들어보시면 진도 굉장히 빠릅니다.. 1주일치를 하루에 걸쳐서 하고 있기때문에 양이 꽤나 많답니다.

이 부분이 지루하다면 ... 안됩니다!! 굉장히 재밌답니다!! 아님말고요 ㅎ;;

 

 

왜 js library나 Framework가 필요할까?

 

두개의 차이를 보기에 앞서 왜 library나 framework가 필요할까? 에 대해서 먼저 알아봅시다.

 

어? 나는 웹 페이지 만들때 html,css, vanilla js로 잘만 만들었는데? 할 수 있습니다.

맞습니다. 없어도 충분히 웹 페이지는 만들 수 있습니다.

하지만 user와 interaction 하는 페이지를 라이브러리 없이 만들기엔 너무나도 괴롭습니다.

 

DOM을 직접 조작하고, Data들을 직접 업데이트 한다고 생각해봅시다. 배달의 민족이 수많은 배달 주문을 한개씩 처리할까요??

이런것들을 효율적이고 쉽게 할 수 있게 만든것들이 위에 나열한 2가지 입니다.

 

그러면 이제 두가지의 차이에 대해서 알아봅시다!!

 

Library vs Framework

 

 

1. Software Library

어떤 동작이 호출될때, 잘 정의된 인터페이스에 동작들이 구현된 컬렉션이라고 보시면 됩니다.

한글로 의역한거라 약간 어색한데.. add를 하기위해서 직접 구현하는것이 아닌 라이브러리에서 add함수를 가져다가 쓰죠? 그런 의미로 받아들이면 됩니다.

 

장점은 뭘까요?

1. Reuse가 가능합니다

2. Modularity

모듈화는.. 여러개의 모듈을 만들고, 연결하고 합쳐서 하나의 완벽한 system으로 만들 수 있다는것입니다.

모듈화는 결국 1번처럼 재사용 할 수 있고, 중복을 줄일 수 있어 효율적입니다..(못 믿겠으면 아래 링크 참조바랍니다)

 

쉽게 말하면,

함수의 컬렉션이고, web apps을 만들때 유용한 것 입니다. 또한 caller가 library를 호출합니다. ( caller가 갑이고, library가 을 입니다)

 

예시: jQuery

https://www.defit.org/modularity/

Modularity definition and information

 

 

 

2. Framework

 

https://en.wikipedia.org/wiki/Software_framework

Software framework - Wikipedia

 

1. 소프트웨어가 사용자의 추가적인 코드에서 의해서 변경될 수 있는 일반적인 기능들을 제공하는 Abstraction이다.

Abstraction은 또 찾아보면 나오는데, theory, design 정도에 가깝게 볼 수 있습니다.

2. 범용적이고, 대규모 소프트웨어 플랫폼의 일부로써 특정한 기능들을 제공하는 재사용 가능한 환경이다.

 

참고로 1,2번으로 Framework를 이해했으면, 제 2의 훈민정음을 만드시는게 나아보입니다.

Wiki백과인데, 저걸 어떻게 이해한답니까...

 

쉽게 말하면,

프레임워크는 Frame+work입니다. 개발을 하면서 자주 사용하는 기능, 또는 특정 기능들이 만들어져 있습니다, 우리가 사용하면 됩니다.

Productivity가 굉장히 증가합니다. 대신에, 규칙이 있는데, 반드시 그 프레임워크의 규칙을 지켜야합니다.

 

위키백과 말 처럼 재사용이 가능합니다, 이미 만들어둔 기능을 사용만 하면 됩니다. 우리가 약간의 수정도 할 수 있습니다.

 

library와 뭔가 다르죠?

내 Code가 library를 불렀는데.. 여기는 Framework가 내 code를 부릅니다. (Framework가 갑입니다. 내 code는 을 입니다)

 

예시) Angular, Ember, Backbone

 

그리고 수업중에 굉장히 이해가 잘 되는 말을 하나 설명해주십니다.

 

Coursera Jogesh K. Muppala

 

Hollywood는 배우들이 하고싶다고 하는게 아니고, 할리우드에서 배우를 부른다고 합니다.

즉 Framework는 Code가 부르고 싶다고 부르는게 아니고, Framework가 Code를 부릅니다.

 

또한 Framework에는 특정한 규칙들이 있습니다. 이 규칙을 지키지 않으면 아예 실행조차 해주지 않습니다.

 

2-1.

IOC (Inversion of Control)

 

Framework의 특징중 하나는 IOC 입니다. 저도 자세히는 알지 못하지만, 바로 위에서 얘기한것처럼 제어의 흐름이 반대라는 것 입니다. Framework가 Code를 호출 하기 때문입니다.

 

 

2-2

Imperative Programming (명령형 프로그래밍)

web app을 만들때 Imperative Approach를 합니다.

앱 개발자가, 정확하게 어떤 작업이 필요하고, 어떻게 실행될것인지 specify 합니다.

 

Declarative Programming (선언형 프로그래밍)

Imperative Programming과는 달리, Framework는 선언형 프로그래밍입니다.

앱 디자이너 or 개발자가 단순히 어떤 작업을 할 것인지만 specify하고 나머지는 Framework에게 권한을 넘깁니다.

즉 어떻게 작업들이 진행될 것인가? 는 Framework가 정하게 됩니다.

 

React는 그럼 Library? Framework?

 

일단 리액트가 뭔지 알아봐야겠죠?

 

React

1. UI를 만들기 위한 JS library 입니다.

2. 특징으로는 Declaritive 입니다.

엥?? 2번은 Framework 특성 아닌가요?

 

쩝... 아쉽게도 2번은 Framework의 특성이 맞습니다...

저 설명을 보면, React는 UI를 쉽게 만들어주고, simple view도 생성해줍니다.

그 다음에 효율적으로 업데이트도 하고, 데이터가 변화할 때 렌더링도 해준답니다.

 

즉 caller는 component 만들고 배치하면, 컴포넌트를 화면에 뿌려주는 코드 이런거 필요없고 그냥 리액트가 알아서 다 해줍니다.

값이 바뀌어도 스스로 찾아서 해준답니다.

 

 

그럼 js인가요? framework 인가요?

 

이 부분에 대해서는 사람마다 말이 다 다릅니다.

물론 공식적인 정의는 js library 입니다.

반박하려면 페이스북 사장님 나와주세요!!

 

하지만 회사에서는 Framework라고 하는곳도 많습니다. React framework 사용자 우대 등등...

그 사람들은 바보가 아닙니다.. 물론 공식 정의를 library로 해 놨지만, 충분히 오해의 소지가 있어보입니다.

 

그래서 코세라 강사님도, react가 library인지, framework인지 단언할 수 없고, 굳이 구분하려 하지 않아도 된다고 합니다.

생각해보니 맞습니다. 리액트가 Framework인걸 증명하면 10억이라도 준답니까...

 

 

3. Component-Based

컴포넌트는 나중에 배우게 되지만, 여러 element들을 모아 둔 클래스라고 보시면 됩니다.

시간이 지날수록 뭔지 더 알게 될 것입니다.

 

4. Technology stack agnostic

기술스택에 불가지론 적이다.. 이게 무슨 헛소리냐 하는데..

그냥 라이브러리가 독립적이라서 Node에서 돌려도 되고, Spring에서도 돌릴 수 있고 뭐 그런 얘기 입니다.

 

SPA (Single Page Application)

리액트는 SPA중 하나입니다.

SPA는 뭘까요?

​

웹에서 수정이 일어났을때 기존의 방식처럼 페이지 전체를 다시 refresh 하지 않고, 수정될 페이지의 일부만 refresh 하는 웹 브라우저나, 웹 어플리케이션을 말합니다.

​

이 방식은 사용자가 많아져서, 서버에 요청으로 인한 부담을 덜어줍니다.

​

그런데 어떻게 일부만 refresh를 할까요?

​

React는 VirtualDOM 방식을 사용하여 수정 될 부분만 refresh를 하는데요.

​

이는 다음시간에 알아보겠습니다.

​

동적 페이지일수록 SPA는 굉장히 효율적입니다.

하지만 정적 페이지를 React로 만드는것은 오히려 효율이 좋지 않습니다. 가상돔이 오히려 불필요한 존재가 된답니다.

 

---

 

글이 조금 길어져서, 내일 또 리액트 설치하고 여러가지 해보겠습니다^^

저는 미리 했지만, 컨텐츠좀 뽑기 위해서 길게 늘려씁니다 !!

 

이 강의를 완강하지 않을시, 전 앞으로 미래에 어떠한 불행이 닥치더라도 강의를 완강하지 않았기 때문이라고 생각하겠습니다

 

열정 열정 열정!!!!!!!!!!!!!