기본 콘텐츠로 건너뛰기

Web Technologies for Non Web Developers

Overview

지난 10년간 임베디드 및 모바일 S/W 분야에 몸 담았던 (Web 개발 초보자) 일인으로서 좀 복잡해보이는 웹 기술에대해 아는 수준에서 정리해보고자 한다.

Big Picture


Web Application은 크게보면 얼굴을 담당하는 Front-end 기술과 모든 일을 뒤에서 처리하는 Back-end로 나뉜다. 어떤 기술들이 Front-end 쪽인지 Back-end 쪽인지를 제대로 구분할 수 있는 정도가 Web Application 개발자로서의 시작점이라 할 수 있겠다.

Front-end 기술의 가장 기본은 HTML, CSS, JavaScript이다. 더불어 동적 페이지를 보여주기 위해 AJAX라고 하는 기술용어도 등장한다. 이 기술들은 모두 사용자가 직접 보고 쓰는 UI를 멋지게 구성하기 위해 사용된다.
위와 같은 Front-end 기술들은 JavaScript 코드를 휠씬 쉽게 보기 좋은 UI를 구현할 수 있도록 도와준다.

Back-end 기술은 딱히 표준이란게 없고 기호에 따라 선택하여 사용한다. 각 IT 업체별로 자신만의 기술이 있고 오픈소스로도 다양한 기술들이 있다.
Back-end의 다양한 기술들은 주로 HTTP 요청 처리, 데이터베이스 관리, HTML 페이지를 생성하는 등의 구현을 편하게 해주는 역할을 한다.

나처럼 처음 Web 기술을 접하는 개발자들이 가장 혼란스러워 하는 부분이 위처럼 너무 다양한 기술들이 있다는 것. 하지만 적어도 Front-end에 있어서는 공통적으로 익혀야할 기술이 있다. 바로 HTML, CSS, JavaScript. 어떤 Front-end Framework도 이 범주를 벗어날 수 없다. 사실, 이 기술들만 제대로 익히면 그 다음부터는 jQuery와 같이 맘에드는 기술을 골라서 reference 문서를 참고해가며 코딩을 하면 된다.

그래도, 너무 선택 조건이 많아 뭘 써야할지 판단이 안선다면 다른 사람들의 판단을 근거로 선택해보기로 하자.

Github Stars

Github 사이트에서 인기있는 Front-end 관련 프로젝트 순위는 다음과 같다. (단, 모든 Open Source 프로젝트들이 Github에서 관리되는 것은 아니므로 여기 나열한 순위는 오로지 Github 안에서만의 순위임을 감안하시길...)
  1. Bootstrap
  2. jQuery
  3. html5-boilerplate
  4. impress.js - presentation framework based on CSS3 transforms and transitions
  5. d3 - JavaScript library for manipulating documents based on data
  6. three.js - JavaScript 3D library
  7. foundation -Responsive front-end framework
Back-end 관련 프로젝트의 경우는
  1. node.js
  2. Ruby on rails
  3. Symfony - PHP framework
  4. Django
정도이다. 개인적으로는 초기 서버 구축 비용이 전혀 필요없고 환경 셋업도 별도로 필요치 않아 Google App Engien을 즐겨사용한다. 특히, GAE의 Python 개발환경을 선호한다.

개인적으로 GAE을 이용하여 간단히 만들어본 웹 사이트들 참고:

Cloud for Backend

본격적으로 Web Application을 개발하여 돌려보기 위해서는 서버가 필요하다. 하지만, 개인적으로 비용을 들여서 서버를 구축하기에는 부담된다. 요즘에는 무료로 사용할 수 있는 Cloud 기반의 Web 개발환경(보통 PaaS라고 부른다.)이 여럿 있으므로 이를 활용해보도록 하자.
  • Google App Engine
    • 시작은 무료 사용량에 따라 과금. Java, Python, Go 개발언어 지원. Google 만의 NoSQL DB 지원 및 MySQL RDB 지원.
  • VMWare Cloud Foundry
    • 현재 Beta 테스트 중으로 무료. 추후 과금 예정. Java Spring, Ruby on Rails, Node.js, Scala, Groovy, Grails ... 등의 개발언어 지원. MySQL, MongoDB 지원.
  • RedHat OpenShift 
    • 시작은 무료. 확장을 위해서 과금. Java, Ruby, Node.js, Python, PHP 등 지원. MongoDB 지원.
  • EngineYard
    •  시작은 무료. 사용량에 따라 과금. Ruby, PHP, Node.js 지원. DB는 MySQL, PostgreSQL 지원.
  • Microsoft Azure
    • 사용량에 따라 과금. ASP.NET, Node.js, Java, PHP, Python 지원. MS SQL 서버 지원.
  • Oracle Java Cloud
    • 사용량에 따라 과금. Java만 지원. Oracle DB에 대해서는 따로 돈을 내고 Cloud에서 사용가능.

더 많은 목록을 보고 싶다면 http://blog.huchunhao.com/current-and-upcoming-cloud-platforms 사이트 참고.
 마지막으로 위에 언급한 스크립트 언어들을 전혀 사용해본적이 없다면 http://www.codecademy.com/ 사이트에서 배워보는 것도 좋겠다.
라벨:

댓글

댓글 쓰기

이 블로그의 인기 게시물

Wireless: HotSpot 2.0 이란?

스마트폰 사용자가 HotSpot 2.0을 지원하는 Wi-Fi 망을 사용하는 경우라면 기존 Wi-Fi 망과 달리 이동통신 망에서 Wi-Fi 망으로의 네트워크 연결 전환이 자연스럽게 이루어진다. 예를 들면, 3G 네트워크를 이용하여 영화를 보고 있다가 HotSpot 2.0 네트워크에 연결이 가능하게 되면 영화 시청 중단 없이 Wi-Fi 망으로 자연스럽게 네트워크 연결이 이동하여 3G 망의 부하도 줄이고 사용자의 네트워크 비용도 절약할 수 있다. 시스코에서 제공한 White Paper 를 참고.
댓글 쓰기
자세한 내용 보기

Apple M1 Mac Mini에서 이더리움 (Ethereum) 채굴하기

 돈을 벌 목적은 아니고 이더리움 기술에 대한 호기심에 직접 채굴(마이닝)에 나서 보기로 했다. 머신은 Apple M1 Mac Mini. 스팩을 살펴보니 8 Core GPU에 16GB 메모리를 공유하고 있어 가능은 해보인다. 큰 흐름은 다음과 같다. 채굴한 이더리움을 저장할 지갑을 만든다 만든 지갑의 정보를 잘 보관해둔다 (Secret Recovery Phrase, 지갑의 주소 값) Apple M1용 채굴 프로그램 설치 내 지갑 정보를 이용해서 채굴 프로그램 실행 일단, 채굴한 이더리움을 저장할 지갑(wallet)을 만들어야 한다.  크롬 브라우저 익스텐션 설치로 비교적 간단하게 지갑을 만들 수 있는  https://metamask.io/ 를 이용하기로 했다. 크롬 익스텐션을 설치 후 기존에 만든 지갑이 없으므로 "Create a Wallet"을 선택한다. 패스워드 입력하고 등등의 절차를 거치면 아래와 같은 Secret Recovery Phrase가 나온다. 이 값을 잘 보관해두기 바란다. 나중에 지갑을 복구할 때 필요한 값이다. 이 값이 유출되면 지갑에 모아둔 이더리움을 다 털릴 수 있으므로 안전한 곳에 보관한다. Confirm Your Secret Phrase에서 확인 과정을 거친다. 직접 입력하는 것이 아니라 단어 별 버튼을 일일이 클릭해서 확인해주어야 한다. (좀 번거롭지만 그만큼 Secret Recovery Phrase가 중요함을 인지시키기 위한 과정이다.) 이제 지갑은 준비 완료. 생성된 Account 화면에서 지갑의 주소갑을 얻을 수 있다.  Apple M1용 채굴 프로그램을 설치해보자. Ethminer M1 Github 프로젝트 에서 미리 컴파일된 바이너리를 다운로드 받는다. (Assets를 펼치고 ethminer-m1을 클릭해서 다운 받으면 된다) 원하는 폴더에 파일을 옮겨 놓고 Terminal에서 chmod +x로 실행가능하게 만든다. % mv ~/Downloads/ethminer-m1 .   ...
댓글 1개
자세한 내용 보기

SKT HSS 서버 해킹 사태에서 USIM 교체의 보안 효과

최근 발생한 SKT의 HSS(Home Subscriber Server) 서버 해킹 사건은 이동통신망의 핵심 인프라를 겨냥한 중대한 보안 위협입니다. IT 및 통신 보안 전문가의 관점에서 이번 사태의 기술적 내용을 이해하고, USIM 교체가 왜 효과적인 대응 방안이 될 수 있는지 설명드리겠습니다. HSS(Home Subscriber Server)란 무엇인가? HSS는 이동통신망의 핵심 구성 요소로서, 가입자에 대한 모든 인증, 권한 부여, 이동성 관리 정보를 저장하고 관리하는 중앙 집중식 데이터베이스입니다. 쉽게 말해, 이동통신 가입자의 '마스터 키'와 같은 역할을 수행합니다. 휴대폰을 켜거나 기지국에 연결될 때마다 단말기는 USIM(Universal Subscriber Identity Module)에 저장된 정보를 이용하여 HSS에 접근하고, HSS는 해당 가입자가 네트워크에 접속하고 서비스를 이용할 수 있는 정당한 사용자인지 확인하는 인증 절차를 수행합니다. HSS에 저장되는 주요 정보에는 다음과 같은 민감한 데이터가 포함됩니다. IMSI (International Mobile Subscriber Identity): 가입자를 고유하게 식별하는 국제 표준 식별자입니다. USIM 인증 키 (Authentication Key): USIM과 HSS 간의 상호 인증에 사용되는 비밀 키입니다. 이 키는 통신 세션 설정 시 무단 접근을 방지하는 데 필수적입니다. 서비스 프로파일: 가입자가 어떤 서비스(음성 통화, 데이터 통신, 부가 서비스 등)를 이용할 수 있는지에 대한 정보입니다. 이동성 관리 정보: 가입자의 현재 위치 정보 등을 관리하여 통신 연결을 유지합니다. SKT HSS 서버 해킹의 기술적 의미 이번 SKT HSS 서버 해킹은 공격자가 이동통신망의 가장 민감한 정보를 관리하는 핵심 시스템에 침투했다는 점에서 심각성을 가집니다. 정확한 공격 경로는 조사를 통해 밝혀지겠지만, 일반적으로 HSS와 같은 중요 서버는 외부 인터넷과 분리된...
댓글 쓰기
자세한 내용 보기