기본 콘텐츠로 건너뛰기

2020년의 웹 기술 개발 스택

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 업계에서 개발자로서 궁극적으로 따라가야 하는 방향은 나의 성향과 개발 목적에 맞는 기술 스택을 쌓아나가는 것이 가장 바람직한 방법이라고 생각된다.

from http://geniee.tistory.com/7 by ccl(A) rewrite - 2020-03-11 05:54:17

댓글

이 블로그의 인기 게시물

Coupang CS Systems 채용 정보: 쿠팡 운용 관리 시스템을 구축 하고...

Coupang CS Systems 채용 정보: 쿠팡 운용 관리 시스템을 구축 하고... Global Operation Technology는 상품을 고객에게 지연 없이 전달 될 수 있도록 하는 조직입니다. 1997년, 초창기 아마존에 입사한다고 상상해보세요. 그 당시 누구도 e-commerce 산업이, 아마존이라는 회사가 지금처럼 성장하리라고는 생각하지 못했을 것입니다. 하지만, 그 당시 아마존을 선택한 사람들은 e-commerce 산업을 개척했고, 아마존을 세계적인 회사로 성장시켰습니다. 2016년 '아시아의 아마존'으로 성장하고 있는 쿠팡, 당신에게 매력적인 선택이 아닐까요? Global Operation Technology: eCommerce에서 주문을 한 뒤 벌어지는 상황에 대해서 호기심을 가져보신 적이 있나요? Global Operation Technology는 상품을 고객에게 지연 없이 전달 될 수 있도록 하는 조직입니다. 매일 최첨단 소프트웨어 기술을 이용해 고객의 주문을 받고 상품을 어느 창고에서 출고 시킬지, 포장을 하나의 박스 또는 여러 개로 나눌 것인지, 어떤 배송 루트를 선택하고 어떻게 고객에게 배송 상태를 보여줄지 결정하는 시스템과 서비스를 개발 합니다. What Global Operations Technology does: CS and C-Returns System 적극적 고객서비스를 바탕으로 고객의 목소리를 통해 끊임없이 고객 에게 서비스를 제공하고 Andon 메커니즘을 통해 고객의 목소리를 회사 전체와 공유합니다. 그리고 고객 문제 해결과 구매 이후 벌어질 수 있는 고객 문제를 사전에 예방하기 위한 시스템 개발을 통해 미래의 상황을 예측 합니다. Tranportation System TSP (Traveling Salesman Problem) 와 같은 CS 최적화 관리 문제를 다룹니다.배송 물품의 실시간 추적, 3P 하드웨어와 소프트웨어를 통합, 각 배송 루트에 할당되는 물량 예측하고 T...

스프링 프레임워크(Spring Framework)란?

스프링 프레임워크(Spring Framework)란? "코드로 배우느 스프링 웹 프로젝트"책을 개인 공부 후 자료를 남기기 위한 목적이기에 내용 상에 오류가 있을 수 있습니다. '스프링 프레임워크'가 무엇인지 말 할 수 있고, 해당 프레임워크의 특징 및 장단점을 설명할 수 잇는 것을 목표로합니다. 1. 프레임워크란? 2. 스프링 프레임워크 "뼈대나 근간을 이루는 코드들의 묶음" Spring(Java의 웹 프레임워크), Django(Python의 웹 프레임워크), Flask(Python의 마이크로 웹 프레임워크), Ruby on rails(Ruby의 웹 프레임워크), .NET Framework, Node.js(Express.js 프레임워크) 등등. 프레임워 워크 종류 : 3. 개발 시간을 단축할 수 있다. 2. 일정한 품질이 보장된 결과물을 얻을 수 있다. 1. 실력이 부족한 개발자라 허다러도 반쯤 완성한 상태에서 필요한 부분을 조립하는 형태의 개발이 가능하다. 프레임워크를 사용하면 크게 다음 3가지의 장점 이 있습니다. 프레임워크 이용 한다는 의미 : 프로그램의 기본 흐름이나 구조를 정하고, 모든 팀원이 이 구조에 자신의 코드를 추가하는 방식으로 개발 한다. => 이러한 상황을 극복하기 위한 코드의 결과물이 '프레임워크' 입니다. 개발자는 각 개개인의 능력차이가 크고, 따라서 개발자 구성에 따라서 프로젝트의 결과 차이가 큽니다. 2. 스프링 프레임워크(Spring Framework) 자바 플랫폼을 위한 오픈 소스 애플리케이션 스프링의 다른 프레임워크와 가장 큰 차이점은 다른 프레임워크들의 포용 입니다. 이는 다시말해 기본 뼈대를 흔들지 않고, 여러 종류의 프레임워크를 혼용해서 사용할 수 있다는 점입니다. 대한민국 공공기관의 웹 서비스 개발 시 사용을 권장하고 있는 전자정부 표준프레임워크 이다. 여러 프레임워크들 중 자바(JAV...

Flask 18. jQuery와 ajax

Flask 18. jQuery와 ajax 현재 우리는 api를 만들고 있다. api를 사용하기 위해서는 ajax를 사용해야한다. 그리고 ajax를 편하게 쓸 수 있도록 도와주는 것이 jquery라이브러리이다. ajax는 비동기로 서버에 요청할 수 있다. 브라우저에 XMLHttpRequest객체가 있어서 이것을 사용해서 서버에 데이터를 요청할 수 있다. 기존에는 웹에 접근할 때 주소에다가 서버의 주소를 씀으로써 데이터(페이지)를 요청할 수 있고, form을 만드는 방법이 있다. 이러한 방법들은 페이지 이동이 일어나서 서버에서 무조건 응답으로 웹페이지를 만들어서 응답해야하는 단점이 있었다 그러나 api를 사용하면 리소스 중심으로 데이터의 이동만 일어난다. 클라이언트는 데이터만 받기 때문에 데이터로 웹을 만들어야한다. 화면은 이미 만들어져있는 상태에서 비동기로 화면을 전환하지 않고, 서버에 데이터 요청을 한 후 그 데이터를 기반으로 웹에 그 데이터를 반영하는 것이다. 이것들은 백그라운드에서 일어난다. 이것을 위해서는 자바스크립트를 이용해야하고 jquery를 이용할 것이다. jquery는 여러 셀렉터를 사용할 수 있어서 편하다. 자바스크립트 작업을 좀더 생산성 좋게 작업할 수 있도록 해준다. 가장 큰 특징은 ajax요청을 아주 쉽게 할 수 있다. 정리 비동기 요청을 위해서 ajax를 사용할 것이고, 그러나 순수자바스크립트는 어렵기 때문에 jquery를 사용할 것이다. 공유하기 글 요소 저작자표시 from http://ohdowon064.tistory.com/134 by ccl(A) rewrite - 2020-03-24 10:54:10