본문 바로가기

Front-End

2020년의 웹 기술 개발 스택

반응형

 웹 응용 프로그램을 개발할 때 고려해야 할 가장 중요한 것은 앱의 기반이 되는 기술 스택이다.

 

적절한 기술 스택을 통해 적은 예산으로 가장 큰 효과를 제공하는 것은 기업 입장에서는 특히 어려운 과제이며 올바른 기술 스택 사용은 프로젝트의 성공과 실패를 결정짓는 중요한 열쇠다.

 

물론 필자는 프로젝트를 직접 운영하고 있지도 않고, 사용할 기술 스택을 선택할 입장이 아니기 때문에 해당 사항이 없다. 하지만 2020년을 살아가는 Front-End 개발자로서 쌓아나가야 할 기술 스택의 방향성을 정하는 데 도움이 되고자 포스팅을 해본다.

 

 

2020년 웹 기술 개발 스택

최신 웹 기술 스택을 선택하기 이전에 웹 응용 프로그램 개발 프로세스 구성요소를 명확하게 이해해야 한다.

웹 개발에는 크게 클라이언트 쪽과 서버 쪽의 두 가지로 나뉜다.

 

클라이언트 측 프로그래밍 (Front-End)

웹 개발에는 사용자가 화면에서 보는 모든 것이 포함된다. 주요 프론트엔드 기술 스택 구성 요소는 다음과 같다.

HTML (Hyper Markup Language)  CSS (Cascading Style Sheets)

HTML은 브라우저에게 웹 페이지의 내용을 표시하는 방법을 알려준다.

CSS는 그 내용을 스타일링 한다.
(+) Bootstrap : HTML, CSS 관리에 유용한 프레임워크

 

JavaScript (JS)

웹 페이지를 대화식으로 만든다.

더 빠르고 쉬운 웹 개발을 위한 많은 JS 라이브러리와 프레임워크가 있다.

 - 라이브러리 : jQuery, React.js 및 Zepto.js

 - 프레임워크 : Angular, Vue, Backbone 및 Ember)

 

서버 측 프로그래밍 (Back-End)

서버 측은 어플리케이션(Back-End), 데이터베이스 및 서버 자체가 포함된다.
사용자에게 보이지 않지만 발전소가 집에 전기를 생성하는 것처럼 클라이언트 측에 전원을 공급하는 역할을 한다.

문제는 주로 웹 응용 프로그램 개발을 위한 서버 측 기술의 선택에 있다.

 

서버 측 프로그래밍 언어는 웹 사이트 및 응용 프로그램의 논리를 만드는 데 사용된다.
프로그래밍 언어를 위한 프레임워크는 더 간단하고 빠른 코딩을 위한 많은 도구를 제공한다.
많이 사용되는 프로그래밍 언어와 주요 프레임워크는 다음과 같다.

 

Ruby (Ruby on Rails)

Python (Django Flask, Pylons)

PHP (Laravel)

JAVA (Spring)

scala (Play)

 

JavaScript 런타임인 Node.js도 Back-End 프로그래밍에 사용된다.
(최근에는 JS(ES6) + React + Node.js 를 통해 서버사이드 렌더링 개발을 하는 개발자들이 늘고 있다.)

웹 응용 프로그램은 데이터를 저장할 장소가 필요하므로 데이터베이스가 사용된다.

관계형 데이터베이스와 비 관계형 데이터베이스의 두 가지 유형의 데이터베이스가 있으며 각 데이터베이스에는 장단점이 있다.

웹 개발을 위한 가장 일반적인 데이터베이스는 다음과 같다.

 

MySQL (관계형)

PostgreSQL (관계형)

MongoDB (비 관계형)

 

웹 앱은 데이터베이스의 로드를 줄이고 대량의 트래픽을 처리하기 위한 캐싱 시스템이 필요하다.

Memcached  Redis는 가장 광범위한 캐싱 시스템이다.

 

마지막으로 웹 응용 프로그램에는 클라이언트 컴퓨터의 요청을 처리하기 위한 서버가 필요하다.

RubyGarage 블로그에는 두 가지 주요 플레이어가 있다.

 

Apache

NginX

 

 

 

 

 

웹 앱을 개발하려면 서버, 데이터베이스, 프로그래밍 언어, 프레임워크 및 프론트 엔드 도구를 선택해야 한다.

이러한 기술은 모두 제품을 보다 빠르게 제공하고 고품질을 유지하는 데 도움을 준다.

 

비즈니스 요구에 따라 필요한 라이브러리 또는 프레임 워크를 추가하는 등 기술 스택을 재 작업할 수 있다.

이러한 웹 개발 기술은 서로 위에 구축되며 실제로는 총칭하여 Stack이라고 한다.

 

어떠한 기술 스택을 선택하는 것은 검색이나 트렌드를 따라가는 방법도 있지만 가장 최적의 기술 스택을 쌓는 방법은 실질적인 경험에서 나온다. 일부 기술을 적용하고 기술이 얼마나 잘 작동하는지 알고있는 경우에만 올바른 선택을 할 수 있다. 지식이 이론적이며 온라인 연구를 기반으로 하는 경우 관련 기술을 선택할 가능성은 매우 낮아진다.

 

인터넷 연구를 기반으로 기술 스택을 선택하는 것은 매뉴얼을 읽은 후 실제 기술이 없어도 자동차를 수리하는 것과 같다.

(실제로 기술 스택을 쌓아가는 과정에서 이런 폐해가 많이 발생하는 것 같다...)

올바르게 수행할 수도 있지만 발생할 수 있는 피해에 대한 손실을 감수해야 한다.

 

 

 

 

RubeGarage의 기술 스택 [출처 : RubyGarage]

 

 

웹 프로젝트가 로드 처리에 의존하는 경우, 이를 제공할 수 있는 프로그래밍 언어 및 프레임워크를 선택해야 한다.

웹 앱의 응답성을 높이고, 대기 시간을 줄이려면 좀 더 효율적인 기술 스택이 필요하다.

(소셜 네트워크(SNS)는 대기시간이 짧은 웹 사이트의 가장 좋은 예이다.)

 

또한 기술 스택은 TTM(Time to Market) 에 큰 영향을 끼친다. 경쟁 업체보다 앱을 더 빨리 개발하고 출시할수록 앞서 나가는 것이며 개발 시간이 짧아지니 개발 비용이 저렴하다.

 

 

성공적인 웹 프로젝트에 사용된 기술 스택

세계적으로 유명하고 성공적인 프로젝트들에서 사용된 기술 스택들에 맞춰 쌓아나가는 것이 좋은 선택이 될 수도 있다. 하지만 빠르게 변화해나가는 IT 업계에서 개발자로서 궁극적으로 따라가야 하는 방향은 나의 성향과 개발 목적에 맞는 기술 스택을 쌓아나가는 것이 가장 바람직한 방법이라고 생각된다.

 

 

 

반응형

'Front-End' 카테고리의 다른 글

SPA (Single-page Application)  (0) 2020.03.09
최상의 웹 앱 성능을 위한 기술, WebAssembly  (0) 2020.03.08
최근 MS가 출시한 gitHub 툴 'Scalar'  (0) 2020.03.06
성능 최적화  (0) 2020.03.05
첫 포스팅, 2020  (0) 2020.02.27