[부스트코스] Web개발의 이해 - FE/BE

1) 웹 프로그래밍을 위한 프로그램 언어들

 

저급언어

 - 기계 중심의 언어

 - 2진수로 이뤄진 값으로 작성하는 프로그래밍 언어(기계어)

 - 유지보수가 굉장히 어려움

 - 사용이 굉장히 어려움

 

고급언어

 - 사람 중심의 언어

 - 이해하기 쉬운 문법

 

고급 언어	특징
FORTRAN	최초의 고급언어 중의 하나 과학 계산용으로 주로 사용
COBOL	FORTRAN과 더불어 역사가 오래된 언어 일반 업무에서 사용 할 목적으로 만들어졌으며, 현재도 은행 등에서 사용
PROLOG	논리형 프로그래밍 언어 논리식을 토대로 오브젝트와 오브젝트 간의 관계에 관한 문제를 해결하기 위해 사용
C	1972년 미국 벨 연구소의 데니스 리치에 의해 개발된 고급언어 시스템 프로그리밍에 가장 적합한 평가를 받는 언어
Erlang	스웨덴의 에릭슨에서 개발한 함수형 병행성 프로그래밍 언어 통신 인프라를 위한 언어
Lisp	LISt Processsor의 약자로써 대표적인 함수형 언어 프로그래밍 언어의 역사 중두 번째로 오래됨
Swift	2014년 WWDC(Apple WorldWide Developers Conference)에서 공개한 프로그래밍 언어 최근에 만들어진 언어로 현대 프로그래밍 언어의 발전을 대다수 계승한 모던 프로그래밍 언어
Kotlin	IntelliJ IDEA의 개발사 JetBrains에서 2011년에 개발한 프로그래밍 언어 JVM기반의 언어이며 Java와의 상호 운영이 100% 지원   Swift와 마찬가지로 현대 프로그래밍 언어의 발전을 대다수 계승한 모던 프로그래밍 언어
Clojure	클로저(Clojure)는 리치 히키(Rich Hickey)가 만든 리스프 프로그래밍 언어의 방언 범용 함수형 언어
Python	프로그래밍 입문자가 읽기 쉽고 적은 코드를 사용하여 프로그램을 개발할 수 있음 데이터 과학에서도 자주 사용되며 웹사이트 개발에서도 많이 사용   ML (machine learning)에서도 많이 사용됩니다.
JAVA	1995년 썬 마이크로 시스템즈에서 개발한 객체지향 프로그래밍 언어 거의 매년 세계에서 가장 많이 사용되는 인기 1등을 차지

 

 

 

웹 프로그래밍에서 인기가 많은 언어

• Github에서 가장 인기 있는 언어 15개 : https://octoverse.github.com/

• 티오베 : https://www.tiobe.com

 

 

웹 관련 인기 언어

언어	특징
Python	프로그래밍 입문자가 읽기 쉽고 적은 코드를 사용하여 프로그램 개발 많은 사람들에게 추천되는 언어   데이터 과학에서도 자주 사용되며 웹사이트 개발에도 많이 사용
PHP	웹 개발에서 많이 사용
JavaScript	프론트 개발자라면 반드시 알아야 할 언어
JAVA	엔터프라이즈 소프트웨어 환경에 잘 맞는 언어 큰 규모의 소프트웨어 개발에 자바언어가 많이 사용
Ruby	빠른 개발에 널리 사용되며 단순함과 세련된 웹 어플리케이션을 만들 수 있기 때문에 인기 있는 언어 중의 하나

 

 

 

 

 

2) 웹의 동작 (HTTP 프로토콜 이해)

 

HTTP (Hypertext Transfer Protocol)란?

• 팀 버너스리(Tim Berners-Lee)와 그가 속한 팀은 CERN에서 HTML뿐만 아니라 웹 브라우저 및 웹 브라우저 관련 기술과 HTTP를 발명

• 문서화된 최초의 HTTP버전은 HTTP v0.9(1991년)

• HTTP는 서버와 클라이언트가 인터넷상에서 데이터를 주고받기 위한 프로토콜(protocol)

• HTTP는 계속 발전하여 HTTP/2까지 버전이 등장한 상태

 

 

HTTP 작동방식

서버/클라이언트 모델을 따름( 클라이언트가 서버에게 요청 -> 요청을 받은 서버가 클라이언트에게 응답

 

장점

• 불특정 다수를 대상으로 하는 서비스에는 적합

• 클라이언트와 서버가 계속 연결된 형태가 아니기 때문에 클라이언트와 서버 간의 최대 연결 수보다 훨씬 많은 요청과 응답을 처리할 수 있다.

단점

• 서버는 요청을 받은 응답 결과로 만들어서 응답을 하고 바로 클라이언트와 연결을 끊어버리기 때문에, 클라이언트의 이전 상황을 알 수가 없다.

• 이러한 특징을 무상태(Stateless)라고 말한다.

• 정보를 유지하기 위해서 Cookie와 같은 기술이 등장하게 되었다.

 

 

URL (Uniform Resource Locator)

• 인터넷 상의 자원의 위치

• 특정 웹 서버의 특정 파일에 접근하기 위한 경로 혹은 주소

하나의 물리적 컴퓨터에는 여러개의 소프트웨어 서버가 동작 할 수 있는데 이때 서버는 포트 값이 다르게 동작해야 함

포트 값은 0보다 큰 숫자 값

http 서버 기본 포트 값 : 80

 

 

 

 

 

 

HTTP(Hypertext Transfer Protocol)

• 요청 메소드 : GET, PUT, POST, PUSH, OPTION 등의 요청 방식
• 요청 URI : 요청하는 자원의 위치를 명시
• HTTP 프로토콜 버전 : 웹 브라우저가 사용하는 프로토콜 버전
• 요청 바디 : GET일 경우, 요청 할 때 가지고 가야 되는 자원을 URI에 붙여서 가지고 가기 때문에 요청바디가 없음                   POST나 PUT을 사용하게 되면 들어 온다

 

 

요청 메소드	특징
GET	정보 요청(SELECT)
POST	정보 삽입(INSERT)
PUT	정보 업데이트(UPDATE)
DELETE	정보 삭제(DELETE)
HEAD	(HTTP) 헤더 정보만 요청 해당 자원이 존재하는지 혹은 서버에 문제가 없는지를 확인하기 위해서 사용
OPTIONS	웹서버가 지원하는 메서드의 종류를 요청
TRACE	클라이언트의 요청을 그대로 반환 echo 서비스로 서버 상태를 확인하기 위한 목적으로 주로 사용한다.

 

 

 

3) 웹 Front-end 와 웹 Back-End

 

웹프론트엔드

• 사용자에게 웹을 통해 다양한 콘텐츠(문서, 동영상, 사진등)을 제공
• 사용자의 요청(요구사)에 반응해서 동작

 

웹프론트엔드의 역할

• 웹콘텐츠를 잘 보여주기 위해 구조를 만들어야 합니다.(신문,책등과 같이) - HTML
• 적절한 배치와 일관된 디자인 등을 제공해야 합니다.(보기 좋게) - CSS
• 사용자 요청을 잘 반영해야 합니다.(소통하듯이) - Javascript

 

웹백엔드

• 프로그램의 뒷 부분쪽, 즉 서버 입장에서의 개발 진행
• 서버 사이드(Server Side)
• 클라이언트의 정보를 처리하고 저장하며, 요청에 따라 정보를 내려줌

 

백엔드 개발자가 알아야 할 것들

• 프로그래밍 언어(JAVa, Python, PHP, JavaScript 등)
• 웹의 동작 원리
• 알고리즘(algorithm), 자료구조 등 프로그래밍 기반 지식
• 운영체제, 네트워크 등에 대한 이해
• 프레임워크에 대한 이해 (ex. Spring)
• DBMS에 대한 이해와 사용 방법(ex. Oracle, MY SQL 등)

 

 

4) Browser의 동작

브라우저(Browser)

• 월드와이드웹(WWW)에서 정보를 검색, 표현하고 탐색하기 위한 소프트웨어
• 인터넷에서 특정 정보로 이동할 수 있는 주소 입력창이 있고 서버와 HTTP로 정보를 주고 받을 수 있는 네트워크 모듈도 포함
• 서버에서 받은 문서(HTML, CSS, Javascript)를 해석하고 실행하여 화면에 표현하기 위한 해석기(Parser)들을 가지고 있음
•  브라우저마다 서로 다른 엔진을 포함

 

 

 

 

 

5) Browser에서의 웹 개발

 

 

 

6) 웹서버

웹 서버

• 웹 서버는 소프트웨어(Software)를 보통 말하지만, 웹 서버 소프트웨어가 동작하는 컴퓨터를 말합니다.
• 웹 서버의 가장 중요한 기능은 클라이언트(Client)가 요청하는 HTML 문서나 각종 리소스(Resource)를 전달하는 것입니다
• 웹 브라우저나 웹 크롤러가 요청하는 리소스는 컴퓨터에 저장된 정적(static)인 데이터이거나 동적인 결과가 될 수 있습니다

 

 

웹 서버 소프트웨어의 종류

• 가장 많이 사용하는 웹 서버는 Apache, Nginx, Microsoft IIS
• Apache웹 서버는 Apache Software Foundation에서 개발한 웹서버로 오픈소스 소프트웨어(Open-source Software)이며, 거의 대부분 운영체제에서 설치 및 사용 가능
• Nginx는 차세대 웹서버로 불리며 더 적은 자원으로 더 빠르게 데이터를 서비스하는 것을 목적으로 만들어진 서버이며 Apache웹 서버와 마찬가지로 오픈소스 소프트웨어입니다.

 

 

7) WAS

클라이언트/서버 구조

• 클라이언트는 서비스를 제공하는 서버에게 정보를 요청하여 응답받은 결과를 사용

 

 

 

 

DBMS(Database Management System)

• 다수의 사용자들이 데이터베이스 내의 데이터를 접근할 수 있도록 해주는 소프트웨어
• MySQL, MariaDB, Oracle, PostgreSQL 등
• 개발자들이 상대적으로 쉽게 데이터를 관리 할 수 있게 됨

 

미들웨어(MiddleWare)

• 클라이언트와 DBMS 사이에 또 다른 서버를 두는 방식
• 클라이언트가 미들웨어에 요청을 하고 미들웨어가 대부분 비즈니스 로직을 수행하고 데이터 조작이 있을 경우 DBMS에 부탁
• 프로그램 로직이 변경 된다 하더라도 모든 클라이언트를 다시 배포할 필요 없이 미들웨어만 변경하면 됨
• 클라이언트 쪽에 비즈니스 로직이 많을 경우, 클라이언트 관리(배포 등)로 인해 비용이 많이 발생하는 문제가 있음
• 비즈니스 로직을 클라이언트와 DBMS사이의 미들웨어 서버에서 동작하도록 함으로써 클라이언트는 입력과 출력만 담당

 

 

WAS(Web Application Server)

• 일종의 미들웨어로 웹 클라이언트(보통 웹 브라우저)의 요청 중 보통 웹 애플리케이션이 동작하도록 지원하는 목적을 가짐
• 프로그램 실행환경과 데이터베이스 접속 기능 제공
• 여러 개의 트랜잭션을 관리
• 업무를 처리하는 비즈니스 로직을 수행
• 웹 서버의 기능도 제공

 

 

 

 

<해당 포스트는 교육 목적을 위해 '부스트코스'의 강의를 듣고 강의자료를 개인적으로 정리한 것으로 모든 내용의 출처와 저작권은 부스트코스에 있습니다.>