인터넷과 웹의 역사 그리고 현재의 트렌드고려대학교 전기전자공학부 소프트웨어 전공학회 하나와영

2011171014 윤상훈

PRELIMINARY• 본 강연은 언어나 API 를 가르치는 강연이 아닙니다 . ( 자세한

건 추후에 )• 발표자료는 제 SlideShare 에서도 찾아보실 수 있습니다 .• 참고

• 생활코딩• SlideShare• Wikipedia• Google

AGENDA1. 인터넷이란 ?2. 웹의 시작 (HTTP, HTML)3. 클라이언트와 서버

4. HTML5. CSS6. JavaScript7. 서버 언어

8. LAMP Stack9. MEAN Stack

인터넷이란 ?

인터넷과웹의 차이

Hello, Alice. Hello, Bob.

Bob Alice

전화망

Hello, Alice. Hello, Bob.

Bob Alice

Internet

TCP / IP TCP / IP

컴퓨터 네트워크 레이어에 대한 자세한 내용은 따로 강연으로

인터넷 APPLICATION• Web (HTTP)• FTP• SMTP• BitTorrent• Skype• etc...

웹의 시작• 유럽 입자 물리 연구소 (CERN) 의

소프트웨어 공학자인 팀 버너스리가 효과적인 정보 공유를 위해서 하이퍼텍스트를 이용한 정보전달 체계를 구성한다 .

• HTML• HTTP• URL

웹 브라우저

웹 클라이언트 웹 서버

Internet

요청 (Request)

응답 (Response)

HTML• HyperText Markup Language• 전통적인 HTTP 에서 웹 서버가 웹 클라이언트에게 전송하는

파일

• 텍스트에 태깅을 한다 .• 제목 , 본문 , 목록 , 링크 등

• 굉장히 정적이기 때문에 프로그래밍 언어라기 보다는 문서에 가깝다 .

• HTML 은 작성해보면 알겠지만 굉장히 타이핑이 귀찮다 .• 쉽게 타이핑하기 위한 텍스트 에디터의 패키지들이 많다 .

• Atom – Emmet• 웹 프레임워크에서 이용하기 위한 템플릿 엔진들도 있다 .

• Node.js - Jade

CSS• Cascading Style Sheet• HTML 문서가 실제로 웹 브라우저에 어떻게 표시될 것인가를

정의하는 언어

• HTML 과 마찬가지로 굉장히 정적이기 때문에 프로그래밍 언어라고 하기엔 조금 애매모호한 점이 있다 .

• 웹 표준

• CSS Zen Garden

JavaScript• java 와는 다르다 ! java 와는 ! 햄과 햄스터 , 인도와

인도네시아

• 웹 브라우저 상에서 사용되는 객체 지향의 스크립트 프로그래밍 언어

• 웹 브라우저 상의 문서를 포함한 다양한 것들을 객체화해서 조작한다 .

• 특히 웹 브라우저 상의 문서는 트리 형태로 객체화하여 다룬다 .• 애니메이션 , 클라이언트 측 입력에 대한 반응 등 많은 것들을

할 수 있다 .• Node.js 라는 런타임에서 서버 측 언어로도 사용된다 .

(MEAN 에서 다시 )• 요새 가장 핫한 언어 중 하나 ! ( 김선욱 교수님께서도 딴 건

몰라도 이건 배워놓으라고 하셨다는 )

서버 언어• 프로그래밍적 ( 동적 ) 으로 html 을 생성할 수 있도록 하는

서버 내의 엔진 언어

• 대표적으로는 PHP, Java, Python 등

• 웹에서 중복적으로 활용되는 많은 기능들을 모아서 개발을 쉽게 해주는 프레임워크들이 존재한다 .• PHP 에는 CodeIgniter, Java 에는 Spring, Python 에는

Django• 좀 더 high level 에 가까운 WordPress 같은 것들이

있다 .

LAMP Stack• Linux / Apache (or Nginx) / MySQL (or MariaDB) /

PHP (, Python, or Perl…)• 전통적인 웹 서버 아키텍처이며 , 지금도 거의 대부분의 웹

서비스에서 널리 쓰인다 .• Persistency 를 위해서 DB 를 사용

• 동적 페이지 생성을 위해 PHP 와 같은 서버 언어 이용

• 웹 서버로 Apache 나 Nginx 이용

• 멀티스레드 기반의 Apache 와는 달리 Event-driven 방식을 택한 Nginx 가 성능 면에서 우위를 보이며 점점 점유율을 높여가고 있다 .

MEAN Stack• MongoDB / Express / AngularJS / Node.js• 모바일의 발전에 따라 JSON 통신이 중요하게 되면서 REST

API 설계를 용이하게 하는 웹 앱 스택

• SPA (Single Page Application) 이나 Android, iOS 로 대표되는 모바일 클라이언트를 위한 서비스 개발에 용이하다 .

• 모두 JavaScript 를 언어로 채용하면서 보다 개발이 용이해진다 .

• 전통적인 웹 스택을 선호하던 사람들에겐 익숙해지는 데에 비용이 필요하다 .