Framework & Library

애플리케이션의 규모가 커지고 복잡해지면서 이전의 방법(DOM, jQuery)들로는 애플리케이션의 개발 및 유지보수가 어려워졌다. 그래서 보다 편하게 개발 및 유지보수를 하기 위해 Frontend Framework(Library)가 나오게 되었다.

위 그림과 같이 프레임워크가 다양한 코드를 가진 라이브러리를 가지고 있고 내가 코드를 작성할 때 라이브러리에서 다양한 코드들을 불러와 사용할 수 있게 해준다. 그렇기 때문에 반복적으로 사용해야 하는 코드들은 라이브러리에 넣어놓고 필요할 때마다 불러오는 식으로 사용할 수 있는데 이런 방식은 후에 코드의 개발 및 유지보수에 유리한 점을 가진다. 예를 들어 내가 어떤 코드를 여러 페이지에 걸쳐 반복적으로 사용했는데 나중에 이 코드들을 수정하고 싶다면 라이브러리에서 해당 코드만 수정해주면 페이지들의 코드들이 한번에 수정되는 효과를 볼 수 있을 것이다. 프레임워크는 이런 라이브러리를 가지고 내가 만드려는 웹 페이지의 바탕이 될 수 있다(제대로 이해한건지 모르겠는데 내가 참고한 사이트에서는 라이브러리를 가구로, 프레임워크를 집의 템플릿으로 예를 들었었다).

이런 기능들을 가지고 있는 프레임워크는 Angular(구글 개발,2010), Vue(Evan You 개발, 2014), React(페이스북 개발, 2013) 이 세가지가 가장 많이 쓰이고 있다. 그 중 React는 다른 프레임워크들과는 다르게 MVC 아키텍쳐가 아니라 오직 view만 담당하는 프레임워크로 다른 프레임워크들에 비해 내장 기능이 부족해 서드 파티 라이브러리들과 혼용해야하지만 이용자가 많고 또 꾸준히 늘고 있기 때문에 정보가 많고 처음 접하기 비교적 수월한 프레임워크이기 때문에 앞으로 react를 공부하려고 한다.

React

위에서 대충 설명했지만 react란 한마디로 페이스북에서 개발하고 관리하는 UI를 만들기위한 JavaScript 라이브러리이다. 여타 프레임워크 혹은 라이브러리와 마찬가지로 리액트는 UI를 자동으로 업데이트해준다. 여기서 리액트만의 특징이라면 가상 돔을 이용해 UI변경점들을 최소화해 변경해주기 때문에 업데이트가 상대적으로 빠르다는 점이다.

리액트를 시작하기 전에 몇가지 도구들을 설치해야 한다.

1. Node.js = 자바스크립트가 브라우저 밖에서도 동작하게 하는 환경을 제공한다. 웹 개발에 직접적인 연관은 없지만 바벨, 웹팩등의 주요 도구들이 node.js기반이기 때문에 필수적으로 설치 해야한다.
2. npm = node.js를 설치하면 자동적으로 같이 설치된다. npm을 통해 다양한 패키지들을 설치하고 버전을 관리할 수 있다.
3. CRA = 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅해주는 도구이다. 리액트는 UI기능만 제공해주기 때문에 따로 필요한 시스템은 개발자가 스스로 구축해야 하지만 CRA가 웹 개발 환경을 제공해 주기때문에 명령어 하나로 리액트 개발환경을 구축할 수 있게 된다.