[IT Tech Stacks] CMS, Programming Language, Web tech

1. Open source CMS System

1) CMS란 : 콘텐츠 관리 시스템

   - 사용 이유 : 콘텐츠 배포 및 관리는 기본이고, 디자인 관리, 레이아웃 편집 등 사이트 부가기능이 필요하고, 검색 기능과 로그 분석이 필요하기 때문

 

Grey : 사용비율 / Green : Market Share (5/June 2020)

 

* wix는 2.4% M/S, Cafe24는 0.1% M/S

 

 

2019년 배포비율

 

 

2) 주요 CMS 종류

이름	특징	Market Share	플러그인 과금	Reference
Wordpress	수천가지 테마 존재	63.4%	- 과금필요  (~$250, 2019 기준)	Zoom.us, 백악관, 워싱턴대, Udemy.com
Drupal	Wordpress보다 개발자 중심적, html, php 기반, Wordpress보다 상대적으로 디자인 적음	2.7%	- 과금 필요 (~ $80, 2019 기준)	Instructure.com, 미국국립보건원(Nih.gov), 유엔지역정보센터, Itwire
Joomla	Wordpress보다 개발자 중심적, html, php 기반, Wordpress보다 상대적으로 디자인 적음	4.1%	- 과금 필요(2019기준) : CMS (~ $70) : Design (~ $200)	NASA, 하버드대
Shopify	온라인상점 및 소매 POS 시스템을 위한 이커머스 CMS	4.2%	- 과금 필요	Dribbble.com, Myshopify.com
Magento	인기 있는 이커머스(쇼핑몰용) CMS	1.3%	- 과금 필요(~$300)	Foxnews(Foxnews.com)

* 공통 특징 : 기본 무료지만, 디자인 및 기능 모듈 추가시 유료

 

- CMS 를 쓰더라도 다양한 Web 기술이 필요로 함

Ref) Wordpress에서 쓰이는 Udemy에 사용되는 기반 기술들

 

CMS를 써도 다양한 기반 기술을 사용

 

 

https://w3techs.com/sites/info/udemy.com

 

3) 보안 문제

- Wordpress가 인기만큼 감염사례도 가장 많았음

 

2018/2019 CMS 감염 비율 통계 (from W3Techs)

 

 

4) 도입시 고려할 사항들

  : 콘텐츠 다양성이나, 플러그인 수(Wordpress 50000개, Joomla 10000대 미만, Drupal 44000개 모듈)도 많고 SEO모듈까지 있음, cf) wix 사례 SEO

  : 프리랜서 개발자도 Wordpress가 가장 많음

  : Wordpress가 객관적으로 좋으나, 보안적 측면에서는 Drupal이 나음, Wordpress와 Drupal의 중간이 Joomla

 

 

2. Programming Language

 

2019 인기 언어 (from Stackoverflow)

 

(1) Javascript

  - 웹페이지 동적으로 제어하기 위해 고안된 언어지만 다양한 분야에서 활용 가능

    ex) 웹 프론트, 백앤드(Node.js) 모바일 앱(React Native) , 데스크탑 앱(Electron) 등 다양한 SW 개발이 가능

  - 전세계적으로 가장 많이 사용하는 언어이자 모던 언어

  - 대표적인 함수지향 언어 

 

(2) Python : 데이터 분석에 용이

 ex) 인스타그램, 드롭박스의 기능 모듈

  - 비교적 쉬운언어이고, 구글에서 만든 SW의 반정도를 파이썬으로 만듦

  - 웹 프로그래밍, 데스크톱 프로그램 / GUI 프로그램 / 데이터 베이스 프로그램 (Oracle, Postgresql, Mysql 등의 DB 접근을 위한 도구들을 phython으로 만들어짐), 데이터분석(using Pandas(Data Anlysis), Sckitlearn(ML), Tensorflow )

 

(3) Java

 - 1995년 고안, 가전제품 제어용으로 시작했으나, 웹, 모바일앱(Android) 개발에서도 많이 사용되는 언어

 - 대표적인 객체지향 언어

 - ex) 한국 정부, 기업 시스템 Backend가 JAVA로 많이 되어있고, Spring framework를 많이 사용

 

(4) PHP : Hypertext Preprocessor의 약자 (과거 Personal Homepage Tools로 불림)

  - 1995년  발표된 언어

  - 웹에 최적화된 언어(HTML코드를 프로그래밍적으로 생성, 서버쪽에서 실행되는 프로그래밍 언어)

  - ex) Wordpress, Textcube(블로그), Drupal(Site builder), Zeroboard, Magento

 

(5) Ruby

 - 스크립트 언어의 일종, made in Japan으로 일본에서 인기가 많음

 - 임배디드, 맥, 윈도우즈 앱, 웹앱 등 다양한 앱 개발 가능

 - ex) 시뮬레이션 (NASA Langley Research Center에서 사용),  3D modeling tool : Sketchup, 웹 앱

 

(6) R : 데이터 분석에 용이

  - 데이터분석과 데이터 시각화를 위해 많이 쓰이는 인터프리터 언어

  - ex) 데이터분석, 데이터 시각화(그래프), 데이터 핸들링

 

 

3. Framework, Library

- Node.js : 2009년에 발표된 서버사이드, 오픈소스, 크로스 플랫폼, Javascript가 웹 브라우저 범위를 넘어 개발을 하도록 쓰이는 계기(OS 또는 컴퓨터 실행단에도 접근 가능)

  cf) express : node.js를 위한 간결한 웹 프레임워크

- Ruby on Rails : 풀스택 웹 및 모바일 앱을 위한 웹앱 프레임워크

- .Net : MS에서 개발한 윈도우즈 프로그램 개발환경 및 실행환경, WPF 같은 데스크톱 앱, ASP.net 프레임워크 기반 웹앱 등 개발 가능

- Tensorflow :ML 모델 개발을 위한 오픈소스 라이브러리, 신경망, 분석 모델 등 ML이 용이

 

 

4. Web Framework

1) Client-side Framework

- React : 개발자 친화적이고, 많이 이용되는 웹 프론트앤드 프레임 워크, SPA

- Vue : 모던 웹 프론트앤드 프레임워크 중 러닝 커브가 가장 작음 ,SPA

- Angular : React, Vue보다 M/S 뒤쳐짐, 쓰는곳이 적음, Google에서 개발

- Bootstrap : 웹 디자인 용이, Twitter에서 개발

 

* SPA : Single Page Application : 초기에 필요한 정보를 대부분 받아옴 

- 장점 : UX 경험이 높아짐, 필요한 리소스만 로딩, 컴포넌트별 개발이 용이

- 단점 : 초기 뷰 로딩 속도가 느림(HTML, CSS, JS 등 리소스를 처음에 한번에 받아와야 함), 검색 최적화(SEO)가 어려움

 

* SSR : Server Side Rendering : 필요한 정보를 서버에 요청하여 받아옴

- 장점 : 검색최적화(SEO)를 할 수 있음, 초기 뷰 로딩 속도가 SPA비해 상대적으로 빠름

- 단점 : UX경험이 하락(새페이지 로딩시마다 깜박임), 서버에 요청 과부화가 걸릴 수도 있음

 

2) Server -side 

- Spring : Java 기반 웹 서버 프레임워크

- Django : Python 기반 웹 서버 프레임워크

- Express : Node.js(Javascript) 기반 웹 / 서버 프레임워크

- Larvel : php 기반 웹 프레임워크

 

3) DB

 

2019 인기 DB (from Stackoverflow)

 

- Mysql : SQL의 대표적인 DB

- MongoDB : NoSQL의 대표적인 DB

구분		SQL	NoSQL
		관계형 데이터베이스	비관계형 데이터베이스
장점		명확하게 정의된 스키마(구조), 데이터 무결성 보장	스키마 없어서 더 유연, 수직, 수평 확장이 가능
단점		데이터 스키마는 정해져야 하고, 관계가 있어서 쿼리가 복잡해 질 수 있음, 수평적 확장이 어려움	데이터 구조 결정을 미룰 수 있음, 데이터가 여러 곳에 들어있어서 update시 모든 곳에 update 해야 함
사용시기		- 데이터 스키마 변경 여지가 없이 명확할 경우	- 데이터베이스 확장이 많은 경우

* 수직적 확장 : 데이터 베이스 서버 성능 향상,  수평적 확장 : 데이터 베이스 분산

 

4) Mobile Apps

(1) Native App, Hybrid App, Web App

- iOS : Mobile OS, Object-C, Swift로 앱 개발 가능

- Android : Mobile OS, JAVA, Kotlin으로 앱 개발 가능

- Iconic : 하이브리드 앱 개발 가능, HTML, CSS, Javascript기반,  old-passioned

- React Native : 코드의 95% 이상을 Javascript로 작성 가능, Mobile Native language(Java, Kotlin, Object-C, Swift)로도 앱 개발 가능, 

 : 앱 전체비율에서 적지만, 설치 Top 앱이 React native 기반임

- 요즘 Dart 언어 기반인 Flutter도 많이 사용하고 사용이 늘어나고 있음

 

(2) PWA

- 웹앱을 모바일앱처럼 싸는 방식, 모바일에 실행 아이콘 생성 가능

 

5) API

(1) Rest API : 근래 많이 쓰이는 아키텍쳐 스타일의 API 방식

 cf) REST(Representational State Transfer) : 복잡한 시스템을 위한 Software architecture의 형식

 

(2) GraphQL : Server API 구성을 위해 Facebook에서 만든 Query Language

- GraphQL 장점

  a) Single end point라는 점 (rest api는 multi end point)

 : 기존 Restful API는 Android, iOS 등 필요한 정보가 다르지만 다른 부문마다 다르게 구현해야 했음

ex) rest api : getNews/daily/platform=watch,  getNews/daily/platform=ios, getNews/daily/platform=amp

  graphql 을 이용하면 -> POST : /api/graphql 로 해결 가능 (쿼리로 정보 넣어서)

 - 시간 절약 가능 : 장고 프레임워크에서 GraphQL API를 만들면 Rest API 대비 40% 시간 절약, Query만 만들면 됨, API 호출해서 response 가져올 때 fetch같은 거 필요 없음

   : Front-end framework 와 결합이 좋음 ex) React, apollo

 

- GraphQL 단점

 : cache, data loader, persisted query 등 백앤드 처리 작업이 많이 필요

 

Reference : 

https://w3techs.com/technologies/overview/content_management

Usage Statistics and Market Share of Content Management Systems, June 2020

https://websitesetup.org/cms-comparison-wordpress-vs-joomla-drupal/

CMS Comparison: WordPress vs. Joomla vs. Drupal (2020)

https://sucuri.net/reports/2019-hacked-website-report/

Sucuri - Website Threat Report 2019

https://stxnext.com/blog/2018/11/22/react-native-vs-ionic-comparison/

React Native vs. Ionic: A Comparison of Pros and Cons

https://www.holaxprogramming.com/2018/01/20/graphql-vs-restful-api/

GraphQL과 RESTful API

https://www.tensorflow.org/?hl=ko

TensorFlow

https://www.ruby-lang.org/ko/documentation/success-stories/

사용 사례