프레임워크 & 라이브러리

김zunyange·2023년 10월 23일

새로운 기술을 학습할 때는 항상 이 기술이 어떤 문제를 해결하기 위해 만들어진 기술인지, 등장하게 된 배경이 무엇인지에 대해 이해하고 필요성을 깨닫는 것이 중요하다.

Web Application의 발전

과거의 웹 페이지는 UI가 단순하고 검색어 및 회원정보 입력, 항목 클릭 등 비교적 상호작용이 적었던 것에 비해 현재의 웹 애플리케이션은 동적이고 다양한 UI를 가지며 카테고리 hover 이벤트, 좋아요 및 장바구니 기능 등 유저와의 상호작용이 많아지고 다루어야 할 데이터와 코드가 증가하게 되었다.

이처럼 웹 애플리케이션의 규모가 커지고 다양한 UI, UX를 구현하기 위해서는 이전의 방법(DOM에 직접 접근해서 조작)으로는 웹 애플리케이션을 개발하고 유지보수하는 것이 어려워졌다. 이를 보완하기 위해 DOM 조작을 쉽게 만들어주는 jQuery라는 자바스크립트 라이브러리가 등장했지만, jQuery도 결국엔 DOM에 쉽게 접근해서 조작을 가능하게 하는 메서드의 모음이었기 때문에 화면의 무수한 DOM 요소들에 직접 접근해서 조작하고 관리하기란 쉽지 않았다.

그래서 규모가 커지고 복잡한 웹 애플리케이션을 개발하며 생산성을 향상시키고, 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 프론트엔드 Framework(프레임워크)와 Library(라이브러리) 가 등장하게 된 것이다.

Framework와 Library

프레임워크와 라이브러리는 복잡한 개발을 효율적으로, 편리하게 하기 위해 다른 개발자들이 만들어 둔 코드라는 공통점을 가지고 있다.

차이점은, 프레임워크는 다른 사람이 만들어둔 코드의 정해진 틀(frame) 속에서만 수동적으로 작업(work) 해야 하지만 라이브러리는 개발자가 작업을 진행할 때 필요한 기능을 찾고(library) 능동적으로 가져와서 사용할 수 있다는 것이다. 다시 말하면, 프레임워크는 전체적인 흐름을 이미 자체적으로 가지고 있어 개발자가 그 흐름에 맞게 코드를 작성해야 하고 라이브러리는 개발자가 흐름을 가지고 원하는 라이브러리를 가져다 사용할 수 있다.

즉, 프레임워크를 활용한다는 것은 틀이 짜인 작업환경에 개발자가 들어가서 작업을 하는 것이고, 라이브러리를 활용한다는 것은 다른 사람이 만들어 둔 도구를 개발자가 작업할 때 가져와서 활용하는 것이다.

이러한 프레임워크와 라이브러리 중 프론트엔드에서 가장 많이 쓰이는 세 가지가 바로 Angular(앵귤러), Vue(뷰), React(리액트) 이다. 앵귤러와 뷰는 프레임워크이며, 리액트는 라이브러리지만 프레임워크적인 특징을 일부 가지고 있다.

React를 사용하는 이유

그렇다면 왜 우리는 모든 게 갖춰진 앵귤러나 뷰같은 프레임워크가 아니라, 라이브러리인 리액트를 사용할까?

리액트는 자기만의 문법을 가진 앵귤러나 뷰와는 다르게 대부분 자바스크립트의 문법을 그대로 활용한다. 따라서 이미 자바스크립트에 친숙하다면 리액트를 잘 활용할 수 있고, 처음 학습하는 사람 입장에서도 리액트를 공부하고 활용하면서 자연스럽게 자바스크립트에 대한 이해도와 활용도를 높일 수 있다.

또한 페이스북의 지속적인 관리와 함께 생태계가 활성화되어 있어, 사용자가 많고 커뮤니티가 발달해 있다. 그렇기 때문에 리액트를 활용하면서 마주할 문제들에 대한 해결방안을 쉽게 찾아볼 수 있으며, 이는 곧 개발자의 생산성을 향상하는 결과를 가져오는 것이다.

그리고 리액트를 사용하는 웹 개발자는 리액트 기반의 React Native라는 기술을 통해 웹 뿐만 아니라 iOS, 안드로이드 기반의 모바일 애플리케이션도 개발할 수 있다.

이러한 이유로 리액트의 사용자는 꾸준히 증가하고 있으며 현재 가장 많이 사용되고 있다.

요약

프레임워크	라이브러리
기반 구조	개발 편의 도구들
제어 주도권을 프레임워크가 가짐	제어 주도권을 사용자가 가짐
모든 도구가 갖춰진 주방	용도에 따라 가져다 쓰는 도구
자유도가 상대적으로 작음	자유도가 상대적으로 큼
- 개인이 해야 할 고민들을 개발자가 미리 하고 반영 - 특정 디자인 패턴이나 동작과 기능들을 위한 정의와 방식을 정리해둠 - 여러 개발자가 함께 협업할 때 기준점이 됨	- 코드를 재사용하기 쉬움 - 코드의 내용을 숨겨 기술 유출 방지 - 이미 구현되어 있는 기능들을 가져다 쓸 수 있어 시간 단축 - 컴파일 시간 단축

Next.js

최근 회사에서 React 외에 Next.js 도 많이 요구하여 공부를 하고자 글을 쓰게 되었다.
Next.js 를 공부하기 전에는 HTML, CSS, JavaScript 와 같은 웹 개발 기술에 대한 기본적인 이해가 필요하다. React는 유저 인터페이스를 구축하기 위한 JavaScript 라이브러리이고, Next.js 는 이를 기반으로 구축되었기 때문에 React에 대한 이해도 매우 중요하다.

✨ 또한 서버사이드 렌더링, 클라이언트 렌더링 및 API의 역할과 같은 웹 애플리케이션 개발 개념에 대한 좋은 이해도도 있으면 좋다. Node.js , JavaScript 런타임 환경과 그 생테계에 대한 지식은 플러스다. 또한 Git 과 같은 버전 관리 시스템에 대한 경험, 사용법에 대한 이해도가 있으면 더욱 좋다. ✨

Next.js 장점

Next.is는 리액트 기반의 서버사이드 렌더링 프레임워크다. 이는 웹 개발에서 매우 중요한 성능 및 사용성 개선 기능을 제공하는데, 일단 Nextjs는 검색 엔진 최적화(SEO) 에 유리하다.
서버사이드 렌더링(Server-side Rendering)으로, 모든 페이지에 대한 HTML 마크업이 서버에서 생성된다. 이는 검색 엔진에서 해당 페이지를 더 잘 인식하고 색인화하는 데 도움이 된다.
또한, Nextjs는 페이지 로딩 속도를 크게 개선 한다.
서버사이드 렌더링으로, 페이지가 완전히 로드되기 전에 사용자에게 보여지는 콘텐츠가 있다. 이는 초기 로딩 시간을 단축하고 사용자 경험을 향상시킨다.
또한, Nextjs는 개발 생산성을 높인다. 자동 코드 분할, 환경 변수, Typescript 지원 등과 같은 기능을 제공한다. 이는 개발자가 빠르게 프로젝트를 구축하고 유지 보수하는 데 도움이 된다.
마지막으로, Nextjs는 확장성이 높다. Vercel과 같은 클라우드 플랫폼에서 쉽게 배포할 수 있으며, 서버리스 아키텍처와 함께 사용할 수 있다. 이는 애플리케이션 규모가 커질수록 유용하다.