웹 프로그래밍 풀스택(1) 웹개발의 이해

김지용·2021년 10월 21일
1

윤지수 튜터님 : 하루 공부 4~5줄이라도 요약 정리해두기

강경미 튜터님 : 웹서핑 많이 해두기(url이 바뀔 때 페이지가 전체가 바뀌는지 부분만 바뀌는지 개발자의 관점으로 보기)

즉, 전기신호인 켜졌다(on)와 꺼졌다(off) 2가지 상태 값으로 동작한다고 말할 수 있습니다.

보통 숫자로 표현하면 켜졌다는 1, 꺼졌다는 0을 의미합니다. 0과 1로 표현되는 숫자를 우리는 2진수라고 말합니다.

2진수로 이뤄진 값으로 작성하는 프로그래밍 언어를 기계어(Machine Language)라고 말합니다.

숫자로만 되어 있기 때문에 유지보수도 굉장히 어렵습니다.

숫자로만 된 프로그래밍 언어는 사용이 굉장히 어려웠습니다.

그래서, 이 숫자로 된 문장과 1:1로 대응하는 기호를 만들고, 그 기호로 프로그래밍을 하게 되었습니다.

단 기호로 작성된 프로그램은 기계가 바로 알아들을 수 없기 때문에 기호로 작성된 문장들을 원래의 숫자로 바꿔야 하는 과정이 더 필요하게 되었습니다.

이러한 과정에서 사용되는 도구를 컴파일러(Compiler)라고 말하며, 이러한 기호로 작성된 언어를 어셈블리어(Assembly Language)라고 말합니다.

현재는 아주 특수한 경우를 제외하고는 기계어와 어셈블리어로 프로그램을 개발하는 경우는 거의 없습니다.

그만큼 프로그래밍이 어렵고 유지보수가 어렵기 때문입니다.

고급 언어

고급 언어는 사람 중심의 언어라고 말할 수 있습니다.

사람이 좀 더 이해하기 쉬운 문법으로 프로그래밍을 할 수 있습니다.

이런 일이 가능하기 위해선 작성된 소스코드를 번역하는 과정이 필요합니다.

이를 컴파일한다고 말하며, 이러한 일을 수행하는 것을 컴파일러라고 말합니다.

앞에서 어셈블리어도 기계어로 컴파일이 된다고 말했었죠?

컴퓨터 성능이 좋아지고, 컴파일러와 관련된 기술이 발전하면서 사람 중심의 언어로 프로그래밍할 수 있다고 생각하면 됩니다.

이러한 고급 언어로는 다음과 같은 언어들이 있습니다.

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 : 프로그래밍 입문자가 읽기 쉽고 적은 코드를 사용하여 프로그램을 개발할 수 있습니다. 많은 사람에게 추천되는 언어이며, 데이터 과학에서도 자주 사용되며 웹사이트 개발에서도 많이 사용되고 있습니다. 최근 python은 ML (machine learning)에서도 많이 사용됩니다.

JAVA : 1995년 썬 마이크로 시스템즈에서 개발한 객체지향 프로그래밍 언어입니다. 거의 매년 세계에서 가장 많이 사용되는 인기 1등을 차지하고 있습니다.

웹 관련 인기 언어

Python : 프로그래밍 입문자가 읽기 쉽고 적은 코드를 사용하여 프로그램을 개발할 수 있습니다. 많은 사람에게 추천되는 언어이며, 데이터 과학에서도 자주 사용되며 웹사이트 개발에서도 많이 사용되고 있습니다.

PHP : 웹의 80% 이상이 PHP로 만들어졌다고 말합니다. 그만큼 PHP는 웹 개발에서 많이 사용됩니다.

JavaScript : 자바 스크립트는 처음 시작이 브라우저에서 동작하는 언어였습니다. 현재는 서버에서도 작성하는 프로그램으로 점차 영역을 넓혀가고 있습니다. 프론트 개발자라면 반드시 알아야 할 언어입니다. 자바스크립트 커뮤니티도 점점 더 거대해지고 있습니다.

JAVA : 엔터프라이즈 소프트웨어 환경에 잘 맞는 언어입니다. 큰 규모의 소프트웨어 개발에 자바언어가 많이 사용되고 있습니다. JAVA언어를 지원하는 수많은 커뮤니티에 위해서, 지속적으로 발전되어 훌륭한 구조와 설계 기법들이 잘 갖춰져 있습니다.

Ruby : 빠른 개발에 널리 사용되며, 단순함과 세련된 웹 어플리케이션을 만들 수 있기 때문에 인기 있는 언어 중의 하나입니다.

HTTP (Hypertext Transfer Protocol)란?

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

문서화된 최초의 HTTP버전은 HTTP v0.9(1991년)입니다.
HTTP는 서버와 클라이언트가 인터넷상에서 데이터를 주고받기 위한 프로토콜(protocol)입니다.
HTTP는 계속 발전하여 HTTP/2까지 버전이 등장한 상태입니다.

HTTP (Hypertext Transfer Protocol)

요청 메서드 : GET, PUT, POST, PUSH, OPTIONS 등의 요청 방식이 온다.

요청 URI : 요청하는 자원의 위치를 명시한다.

HTTP 프로토콜 버전 : 웹 브라우저가 사용하는 프로토콜 버전이다.
첫번째 줄의 요청메소드는 서버에게 요청의 종류를 알려주기 위해서 사용됩니다.

각각의 메소드 이름은 다음과 같은 의미를 가집니다.

참고로 최초의 웹 서버는 GET방식만 지원해줬습니다.

요청바디 부분은 GET 방식의 요청메소드에는 안 오고 POST나PUT 방식일 때 온다

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

_HTTPS는 HTTP 프로토콜의 문제점인 정보의 암호화를 해결하기위해 SSL(보안소켓계층)을 사용한것이다.

기존의 HTTP에서 전송되는 데이터는 중간에 도난을 당하기 쉬웠지만 HTTPS는 전송되는 데이터가 암호화 되어 해독할 수 가 없기 때문에 보안유지에 가장 큰 차이점을 가지고 있다.

_주로 금융거래, 개인정보등 민감한 정보를 다룰 때 사용된다.__

웹프론트엔드?

사용자에게 웹을 통해 다양한 콘텐츠(문서, 동영상, 사진 등)를 제공합니다.

또한, 사용자의 요청(요구사항)에 반응해서 동작합니다.

웹프론트엔드의 역할

  • 웹콘텐츠를 잘 보여주기 위해 구조를 만들어야 합니다.(신문,책등과 같이) - HTML
  • 적절한 배치와 일관된 디자인 등을 제공해야 합니다.(보기 좋게) - CSS
  • 사용자 요청을 잘 반영해야 합니다.(소통하듯이) - Javascript
~~ 모르는 용어 수식? 헷갈리는 것들 정릴 position: absolute; cursor: default; display: inline-block; left: -28px; 와 margin-left: 4px 차이~~ ### 백 엔드(Back-End)란?

backend는 정보를 처리하고 저장하며, 요청에 따라 정보를 내려주는 역할을 한다. 가령 쇼핑몰이라면, 상품 정보를 가지고 있고, 주문을 받아서 저장하고, 사용자가 관심있어 하는 상품을 골라주는 역할이 back-End의 역할이다

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

  • 프로그래밍 언어(JAVA, Python, PHP, Javascript 등))
  • 웹의 동작 원리)
  • 알고리즘(algorithm), 자료구조 등 프로그래밍 기반 지식)
  • 운영체제, 네트워크 등에 대한 이해)
  • 프레임워크에 대한 이해(예: Spring))
  • DBMS에 대한 이해와 사용방법(예: MySQL, Oracle 등)
  • 브라우저는 월드와이드웹(WWW)에서 정보를 검색, 표현하고 탐색하기 위한 소프트웨어입니다.

인터넷에서 특정 정보로 이동할 수 있는 주소 입력창이 있고 서버와 HTTP로 정보를 주고 받을 수 있는 네트워크 모듈도 포함하고 있습니다.

그리고 서버에서 받은 문서(HTML, CSS, Javascript)를 해석하고 실행하여 화면에 표현하기 위한 해석기(Parser)들을 가지고 있습니다.

브라우저의 동작방식

CSS tag 위치는 헤드 안에
js script tag는 body 안에??
stylesheet,link rel="stylesheet href="./main.js" , script src="./main.js"></script

등등 위치

브라우저는 HTML 문서를 한줄씩 순서대로 처리한다.

  1. HTML문서에는 HTML, CSS, Javascript가 존재한다.

  2. CSS는 HTML 태그안에 직접 작성(inline), style></style 태그안에 작성(internal), link rel="stylesheet" href="css 파일위치"를 해 외부 css파일을 이용(external)하여 사용할 수 있다. 우선순위는 inline > internal > external

  3. javascript는 HTML에서 script></script태그를 통해 직접 입력하거나, script src="javascript파일 위치"를 통해 외부 javascript 파일을 사용할 수 있다.

  4. CSS는 브라우저가 렌더링 처리시, CSS의 내용을 빨리 적용할 수 있게 head></head안에 넣어주는 것이 좋다. Javascript는 브라우저의 렌더링과정을 방해할 수 있기 때문에 /body>직전이나 이후에 입력하는 것이 일반적이다.

웹 서버란?

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

protocol = 규약

클라이언트/서버 구조

클라이언트(Client)는 서비스(Service)를 제공하는 서버(Server)에게 정보를 요청하여 응답 받은 결과를 사용합니다.

DBMS (DataBase Management System)

다수의 사용자가 데이터베이스 내의 데이터에 접근할 수 있도록 해주는 소프트웨어입니다.

미들웨어 (MiddleWare)

클라이언트 쪽에 비즈니스 로직이 많을 경우, 클라이언트 관리(배포 등)로 인해 비용이 많이 발생하는 문제가 있습니다.

비즈니스 로직을 클라이언트와 DBMS사이의 미들웨어 서버에서 동작하도록 함으로써 클라이언트는 입력과 출력만 담당하도록 합니다. / 보안문제도 해결 클라이언트에서 로직수행은 거의 없고 단순히 요청만 하기 때문에 문제생기는걸 막아준다.

WAS (Web Application Server)

WAS는 일종의 미들웨어로 웹 클라이언트(보통 웹 브라우저)의 요청 중 웹 애플리케이션이 동작하도록 지원하는 목적을 가집니다.

WAS 만으로도 웹서버 역할을 요즘에는 할 수 있지만 서버가 중단된다던가 잘못된 거를 요청자 즉, 클라이언트가 모르고 사용하는 거를 방지하고 장애극복을 위해 웹서버 베이스에서 WAS를 돌린다 함.

profile
김죵입니당 ^^

0개의 댓글